[WEB-2629] chore: workspace draft issue ux copy updated (#5825)

* chore: workspace draft issue ux copy updated * chore: workspace draft issue ux copy updated
makeplane · Oct 14, 2024 · ee823d2 · ee823d2
1 parent 4b450f8
commit ee823d2
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 28 deletions.
diff --git a/web/app/[workspaceSlug]/(projects)/drafts/header.tsx b/web/app/[workspaceSlug]/(projects)/drafts/header.tsx
@@ -41,7 +41,7 @@ export const WorkspaceDraftHeader: FC = observer(() => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={<BreadcrumbLink label={`Draft`} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />}
+                link={<BreadcrumbLink label={`Drafts`} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />}
               />
             </Breadcrumbs>
             {paginationInfo?.total_count && paginationInfo?.total_count > 0 ? (
@@ -60,7 +60,7 @@ export const WorkspaceDraftHeader: FC = observer(() => {
             onClick={() => setIsDraftIssueModalOpen(true)}
             disabled={!isAuthorizedUser}
           >
-            Draft <span className="hidden sm:inline-block">issue</span>
+            Draft<span className="hidden sm:inline-block"> an issue</span>
           </Button>
         </Header.RightItem>
       </Header>

diff --git a/web/core/components/issues/confirm-issue-discard.tsx b/web/core/components/issues/confirm-issue-discard.tsx
@@ -61,10 +61,12 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        Draft Issue
+                        Save this draft?
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">Would you like to save this issue in drafts?</p>
+                        <p className="text-sm text-custom-text-200">
+                          You can save this issue to Drafts so you can come back to it later.{" "}
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -80,7 +82,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}>
-                      {isLoading ? "Saving" : "Save draft"}
+                      {isLoading ? "Saving" : "Save to Drafts"}
                     </Button>
                   </div>
                 </div>

diff --git a/web/core/components/issues/issue-modal/base.tsx b/web/core/components/issues/issue-modal/base.tsx
@@ -206,7 +206,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
-        message: `${is_draft_issue ? "Draft issue" : "Issue"} created successfully.`,
+        message: `${is_draft_issue ? "Draft created." : "Issue created successfully."} `,
         actionItems: !is_draft_issue && response?.project_id && (
           <CreateIssueToastActionItems
             workspaceSlug={workspaceSlug.toString()}

diff --git a/web/core/components/issues/issue-modal/draft-issue-layout.tsx b/web/core/components/issues/issue-modal/draft-issue-layout.tsx
@@ -104,7 +104,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
-          message: "Draft Issue created successfully.",
+          message: "Draft created.",
         });
         captureIssueEvent({
           eventName: "Draft issue created",

diff --git a/web/core/components/issues/issue-modal/form.tsx b/web/core/components/issues/issue-modal/form.tsx
@@ -272,7 +272,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
       <form onSubmit={handleSubmit((data) => handleFormSubmit(data))}>
         <div className="p-5">
           <h3 className="text-xl font-medium text-custom-text-200 pb-2">
-            {data?.id ? "Update" : isDraft ? "Create draft" : "Create new"} issue
+            {data?.id ? "Update" : isDraft ? "Create a draft" : "Create new issue"}
           </h3>
           {/* Disable project selection if editing an issue */}
           <div className="flex items-center pt-2 pb-4 gap-x-1">
@@ -422,8 +422,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   : isSubmitting
                     ? "Creating"
                     : isDraft
-                      ? "Create draft issue"
-                      : "Create"}
+                      ? "Save to Drafts"
+                      : "Save"}
               </Button>
               {moveToIssue && (
                 <Button

diff --git a/web/core/components/issues/workspace-draft/delete-modal.tsx b/web/core/components/issues/workspace-draft/delete-modal.tsx
@@ -8,24 +8,22 @@ import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { PROJECT_ERROR_MESSAGES } from "@/constants/project";
 // hooks
-import { useIssues, useProject, useUser, useUserPermissions } from "@/hooks/store";
+import { useIssues, useUser, useUserPermissions } from "@/hooks/store";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   dataId?: string | null | undefined;
   data?: TWorkspaceDraftIssue;
-  isSubIssue?: boolean;
   onSubmit?: () => Promise<void>;
 };
 
 export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
-  const { dataId, data, isOpen, handleClose, isSubIssue = false, onSubmit } = props;
+  const { dataId, data, isOpen, handleClose, onSubmit } = props;
   // states
   const [isDeleting, setIsDeleting] = useState(false);
   // store hooks
   const { issueMap } = useIssues();
-  const { getProjectById } = useProject();
   const { allowPermissions } = useUserPermissions();
 
   const { data: currentUser } = useUser();
@@ -41,7 +39,6 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
 
   // derived values
   const issue = data ? data : issueMap[dataId!];
-  const projectDetails = getProjectById(issue?.project_id);
   const isIssueCreator = issue?.created_by === currentUser?.id;
   const authorized = isIssueCreator || canPerformProjectAdminActions;
 
@@ -68,7 +65,7 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
-            message: `${isSubIssue ? "Sub-issue" : "Issue"} deleted successfully`,
+            message: `draft deleted.`,
           });
           onClose();
         })
@@ -92,14 +89,8 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
       handleSubmit={handleIssueDelete}
       isSubmitting={isDeleting}
       isOpen={isOpen}
-      title="Delete issue"
-      content={
-        <>
-          Are you sure you want to delete issue{" "}
-          <span className="break-words font-medium text-custom-text-100">{projectDetails?.identifier}</span>
-          {""}? All of the data related to the issue will be permanently removed. This action cannot be undone.
-        </>
-      }
+      title="Delete draft"
+      content={<>Are you sure you want to delete this draft? This can't be undone.</>}
     />
   );
 };
diff --git a/web/core/components/issues/workspace-draft/draft-issue-block.tsx b/web/core/components/issues/workspace-draft/draft-issue-block.tsx
@@ -74,7 +74,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
     },
     {
       key: "move-to-issues",
-      title: "Move to issues",
+      title: "Move to project",
       icon: SquareStackIcon,
       action: () => {
         setMoveToIssue(true);

diff --git a/web/core/constants/empty-state.ts b/web/core/constants/empty-state.ts
@@ -761,11 +761,11 @@ const emptyStateDetails = {
   },
   [EmptyStateType.WORKSPACE_DRAFT_ISSUES]: {
     key: EmptyStateType.WORKSPACE_DRAFT_ISSUES,
-    title: "No Draft Issues Yet",
-    description: "There are no draft issues in your workspace right now. Begin by adding your first one.",
+    title: "Half-written issues, and soon, comments will show up here.",
+    description: "To try this out, start adding an issue and leave it mid-way or create your first draft below. 😉",
     path: "/empty-state/workspace-draft/issue",
     primaryButton: {
-      text: "Create draft issue",
+      text: "Create your first draft",
     },
     accessType: "workspace",
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],