diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx index a543eca0bea..e733317d2b3 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx @@ -8,7 +8,7 @@ import { RefreshCcw } from "lucide-react"; import { Breadcrumbs, Button, Intake, Header } from "@plane/ui"; // components import { BreadcrumbLink, Logo } from "@/components/common"; -import { InboxIssueCreateEditModalRoot } from "@/components/inbox"; +import { InboxIssueCreateModalRoot } from "@/components/inbox"; // hooks import { useProject, useProjectInbox, useUserPermissions } from "@/hooks/store"; import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions"; @@ -69,12 +69,11 @@ export const ProjectInboxHeader: FC = observer(() => { {currentProjectDetails?.inbox_view && workspaceSlug && projectId && isAuthorized ? (
- setCreateIssueModal(false)} - issue={undefined} /> - -
- - ); -}); diff --git a/web/core/components/inbox/modals/create-edit-modal/modal.tsx b/web/core/components/inbox/modals/create-edit-modal/modal.tsx deleted file mode 100644 index 5d51477b6b5..00000000000 --- a/web/core/components/inbox/modals/create-edit-modal/modal.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { FC } from "react"; -// types -import { TIssue } from "@plane/types"; -// ui -import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui"; -// components -import { InboxIssueCreateRoot, InboxIssueEditRoot } from "@/components/inbox/modals/create-edit-modal"; - -type TInboxIssueCreateEditModalRoot = { - workspaceSlug: string; - projectId: string; - modalState: boolean; - handleModalClose: () => void; - issue: Partial | undefined; - onSubmit?: () => void; -}; - -export const InboxIssueCreateEditModalRoot: FC = (props) => { - const { workspaceSlug, projectId, modalState, handleModalClose, issue, onSubmit } = props; - - return ( - - {issue && issue?.id ? ( - - ) : ( - - )} - - ); -}; diff --git a/web/core/components/inbox/modals/create-edit-modal/create-root.tsx b/web/core/components/inbox/modals/create-modal/create-root.tsx similarity index 97% rename from web/core/components/inbox/modals/create-edit-modal/create-root.tsx rename to web/core/components/inbox/modals/create-modal/create-root.tsx index c60684dcc02..d874689c0b6 100644 --- a/web/core/components/inbox/modals/create-edit-modal/create-root.tsx +++ b/web/core/components/inbox/modals/create-modal/create-root.tsx @@ -9,11 +9,7 @@ import { EditorRefApi } from "@plane/editor"; import { TIssue } from "@plane/types"; import { Button, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui"; // components -import { - InboxIssueTitle, - InboxIssueDescription, - InboxIssueProperties, -} from "@/components/inbox/modals/create-edit-modal"; +import { InboxIssueTitle, InboxIssueDescription, InboxIssueProperties } from "@/components/inbox/modals/create-modal"; // constants import { ISSUE_CREATED } from "@/constants/event-tracker"; import { ETabIndices } from "@/constants/tab-indices"; @@ -201,7 +197,7 @@ export const InboxIssueCreateRoot: FC = observer((props) role="button" tabIndex={getIndex("create_more")} > - {}} size="sm" /> + { }} size="sm" /> Create more
diff --git a/web/core/components/inbox/modals/create-edit-modal/index.ts b/web/core/components/inbox/modals/create-modal/index.ts similarity index 84% rename from web/core/components/inbox/modals/create-edit-modal/index.ts rename to web/core/components/inbox/modals/create-modal/index.ts index 484c1a31e4d..907c3ddbaf6 100644 --- a/web/core/components/inbox/modals/create-edit-modal/index.ts +++ b/web/core/components/inbox/modals/create-modal/index.ts @@ -1,6 +1,5 @@ export * from "./modal"; export * from "./create-root"; -export * from "./edit-root"; export * from "./issue-title"; export * from "./issue-description"; export * from "./issue-properties"; diff --git a/web/core/components/inbox/modals/create-edit-modal/issue-description.tsx b/web/core/components/inbox/modals/create-modal/issue-description.tsx similarity index 100% rename from web/core/components/inbox/modals/create-edit-modal/issue-description.tsx rename to web/core/components/inbox/modals/create-modal/issue-description.tsx diff --git a/web/core/components/inbox/modals/create-edit-modal/issue-properties.tsx b/web/core/components/inbox/modals/create-modal/issue-properties.tsx similarity index 99% rename from web/core/components/inbox/modals/create-edit-modal/issue-properties.tsx rename to web/core/components/inbox/modals/create-modal/issue-properties.tsx index b17a60abdd1..313adaf3017 100644 --- a/web/core/components/inbox/modals/create-edit-modal/issue-properties.tsx +++ b/web/core/components/inbox/modals/create-modal/issue-properties.tsx @@ -91,7 +91,7 @@ export const InboxIssueProperties: FC = observer((props) {/* labels */}
{}} + setIsOpen={() => { }} value={data?.label_ids || []} onChange={(labelIds) => handleData("label_ids", labelIds)} projectId={projectId} diff --git a/web/core/components/inbox/modals/create-edit-modal/issue-title.tsx b/web/core/components/inbox/modals/create-modal/issue-title.tsx similarity index 100% rename from web/core/components/inbox/modals/create-edit-modal/issue-title.tsx rename to web/core/components/inbox/modals/create-modal/issue-title.tsx diff --git a/web/core/components/inbox/modals/create-modal/modal.tsx b/web/core/components/inbox/modals/create-modal/modal.tsx new file mode 100644 index 00000000000..7af26fbf91c --- /dev/null +++ b/web/core/components/inbox/modals/create-modal/modal.tsx @@ -0,0 +1,27 @@ +import { FC } from "react"; +// ui +import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui"; +// components +import { InboxIssueCreateRoot } from "@/components/inbox/modals/create-modal"; + +type TInboxIssueCreateModalRoot = { + workspaceSlug: string; + projectId: string; + modalState: boolean; + handleModalClose: () => void; +}; + +export const InboxIssueCreateModalRoot: FC = (props) => { + const { workspaceSlug, projectId, modalState, handleModalClose } = props; + + return ( + + + + ); +}; diff --git a/web/core/components/inbox/modals/index.ts b/web/core/components/inbox/modals/index.ts index 91e185ffeee..78d9e6561b5 100644 --- a/web/core/components/inbox/modals/index.ts +++ b/web/core/components/inbox/modals/index.ts @@ -1,4 +1,4 @@ -export * from "./create-edit-modal"; +export * from "./create-modal"; export * from "./decline-issue-modal"; export * from "./delete-issue-modal"; export * from "./select-duplicate"; diff --git a/web/core/components/issues/issue-modal/base.tsx b/web/core/components/issues/issue-modal/base.tsx index 75006d885a2..b74a235d39d 100644 --- a/web/core/components/issues/issue-modal/base.tsx +++ b/web/core/components/issues/issue-modal/base.tsx @@ -28,12 +28,15 @@ export const CreateUpdateIssueModalBase: React.FC = observer(( data, isOpen, onClose, + beforeFormSubmit, onSubmit, withDraftIssueWrapper = true, storeType: issueStoreFromProps, isDraft = false, fetchIssueDetails = true, moveToIssue = false, + modalTitle, + primaryButtonText, } = props; const issueStoreType = useIssueStoreType(); @@ -198,6 +201,7 @@ export const CreateUpdateIssueModalBase: React.FC = observer(( if (response.id && response.project_id) { await handleCreateUpdatePropertyValues({ issueId: response.id, + issueTypeId: response.type_id, projectId: response.project_id, workspaceSlug: workspaceSlug.toString(), }); @@ -250,6 +254,7 @@ export const CreateUpdateIssueModalBase: React.FC = observer(( // add other property values await handleCreateUpdatePropertyValues({ issueId: data.id, + issueTypeId: payload.type_id, projectId: payload.project_id, workspaceSlug: workspaceSlug.toString(), }); @@ -288,6 +293,7 @@ export const CreateUpdateIssueModalBase: React.FC = observer(( let response: TIssue | undefined = undefined; try { + if (beforeFormSubmit) await beforeFormSubmit(); if (!data?.id) response = await handleCreateIssue(payload, is_draft_issue); else response = await handleUpdateIssue(payload); } catch (error) { @@ -348,6 +354,8 @@ export const CreateUpdateIssueModalBase: React.FC = observer(( projectId={activeProjectId} isDraft={isDraft} moveToIssue={moveToIssue} + modalTitle={modalTitle} + primaryButtonText={primaryButtonText} /> )} diff --git a/web/core/components/issues/issue-modal/context/issue-modal.tsx b/web/core/components/issues/issue-modal/context/issue-modal.tsx index 845aec5525f..3b4c650c26f 100644 --- a/web/core/components/issues/issue-modal/context/issue-modal.tsx +++ b/web/core/components/issues/issue-modal/context/issue-modal.tsx @@ -21,6 +21,7 @@ export type TCreateUpdatePropertyValuesProps = { issueId: string; projectId: string; workspaceSlug: string; + issueTypeId: string | null | undefined; }; export type TIssueModalContext = { diff --git a/web/core/components/issues/issue-modal/draft-issue-layout.tsx b/web/core/components/issues/issue-modal/draft-issue-layout.tsx index fcdbd2d2ff3..767e266e5c1 100644 --- a/web/core/components/issues/issue-modal/draft-issue-layout.tsx +++ b/web/core/components/issues/issue-modal/draft-issue-layout.tsx @@ -31,6 +31,11 @@ export interface DraftIssueProps { projectId: string; isDraft: boolean; moveToIssue?: boolean; + modalTitle?: string; + primaryButtonText?: { + default: string; + loading: string; + }; } export const DraftIssueLayout: React.FC = observer((props) => { @@ -47,6 +52,8 @@ export const DraftIssueLayout: React.FC = observer((props) => { onCreateMoreToggleChange, isDraft, moveToIssue = false, + modalTitle, + primaryButtonText, } = props; // states const [issueDiscardModal, setIssueDiscardModal] = useState(false); @@ -132,6 +139,7 @@ export const DraftIssueLayout: React.FC = observer((props) => { if (response && handleCreateUpdatePropertyValues) { handleCreateUpdatePropertyValues({ issueId: response.id, + issueTypeId: response.type_id, projectId, workspaceSlug: workspaceSlug?.toString(), }); @@ -162,6 +170,8 @@ export const DraftIssueLayout: React.FC = observer((props) => { projectId={projectId} isDraft={isDraft} moveToIssue={moveToIssue} + modalTitle={modalTitle} + primaryButtonText={primaryButtonText} /> ); diff --git a/web/core/components/issues/issue-modal/form.tsx b/web/core/components/issues/issue-modal/form.tsx index 45c63cfc84e..ccadc9a55b3 100644 --- a/web/core/components/issues/issue-modal/form.tsx +++ b/web/core/components/issues/issue-modal/form.tsx @@ -61,6 +61,11 @@ export interface IssueFormProps { projectId: string; isDraft: boolean; moveToIssue?: boolean; + modalTitle?: string; + primaryButtonText?: { + default: string; + loading: string; + }; } export const IssueFormRoot: FC = observer((props) => { @@ -76,6 +81,11 @@ export const IssueFormRoot: FC = observer((props) => { onCreateMoreToggleChange, isDraft, moveToIssue, + modalTitle = `${data?.id ? "Update" : isDraft ? "Create a draft" : "Create new issue"}`, + primaryButtonText = { + default: `${data?.id ? "Update" : isDraft ? "Save to Drafts" : "Save"}`, + loading: `${data?.id ? "Updating" : "Saving"}`, + }, } = props; // states @@ -185,11 +195,12 @@ export const IssueFormRoot: FC = observer((props) => { const submitData = !data?.id ? formData : { - ...getChangedIssuefields(formData, dirtyFields as { [key: string]: boolean | undefined }), - project_id: getValues<"project_id">("project_id"), - id: data.id, - description_html: formData.description_html ?? "

", - }; + ...getChangedIssuefields(formData, dirtyFields as { [key: string]: boolean | undefined }), + project_id: getValues<"project_id">("project_id"), + id: data.id, + description_html: formData.description_html ?? "

", + type_id: getValues<"type_id">("type_id"), + }; // this condition helps to move the issues from draft to project issues if (formData.hasOwnProperty("is_draft")) submitData.is_draft = formData.is_draft; @@ -271,9 +282,7 @@ export const IssueFormRoot: FC = observer((props) => { )}
handleFormSubmit(data))}>
-

- {data?.id ? "Update" : isDraft ? "Create a draft" : "Create new issue"} -

+

{modalTitle}

{/* Disable project selection if editing an issue */}
= observer((props) => { className={cn( "pb-4 space-y-3", activeAdditionalPropertiesLength > 4 && - "max-h-[45vh] overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-sm" + "max-h-[45vh] overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-sm" )} >
@@ -343,7 +352,7 @@ export const IssueFormRoot: FC = observer((props) => { className={cn( "px-5", activeAdditionalPropertiesLength <= 4 && - "max-h-[25vh] overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-sm" + "max-h-[25vh] overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-sm" )} > {projectId && ( @@ -384,7 +393,7 @@ export const IssueFormRoot: FC = observer((props) => { tabIndex={getIndex("create_more")} role="button" > - {}} size="sm" /> + { }} size="sm" /> Create more
)} @@ -415,15 +424,7 @@ export const IssueFormRoot: FC = observer((props) => { loading={isSubmitting} tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")} > - {data?.id - ? isSubmitting - ? "Updating" - : "Update" - : isSubmitting - ? "Creating" - : isDraft - ? "Save to Drafts" - : "Save"} + {isSubmitting ? primaryButtonText.loading : primaryButtonText.default} {moveToIssue && (