chore: drafts language support

packages/i18n/src/locales/en/translations.json

@@ -320,6 +320,9 @@
   "edit": "Edit",
   "open_in_new_tab": "Open in new tab",
   "delete": "Delete",
+  "deleting": "Deleting",
+  "make_a_copy": "Make a copy",
+  "move_to_project": "Move to project",
   "good": "Good",
   "morning": "morning",
   "afternoon": "afternoon",
@@ -1178,12 +1181,17 @@
   },
 
   "workspace_draft_issues": {
+    "draft_an_issue": "Draft an issue",
     "empty_state": {
       "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. 😉",
       "primary_button": {
         "text": "Create your first draft"
       }
+    },
+    "delete_modal": {
+      "title": "Delete draft",
+      "description": "Are you sure you want to delete this draft? This can't be undone."
     }
   },
 

web/app/[workspaceSlug]/(projects)/drafts/header.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { PenSquare } from "lucide-react";
 import { EIssuesStoreType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
@@ -22,6 +23,8 @@ export const WorkspaceDraftHeader = observer(() => {
   const { allowPermissions } = useUserPermissions();
   const { paginationInfo } = useWorkspaceDraftIssues();
   const { joinedProjectIds } = useProject();
+
+  const { t } = useTranslation();
   // check if user is authorized to create draft issue
   const isAuthorizedUser = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -42,7 +45,9 @@ export const WorkspaceDraftHeader = observer(() => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={<BreadcrumbLink label={`Drafts`} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />}
+                link={
+                  <BreadcrumbLink label={t("drafts")} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
             {paginationInfo?.total_count && paginationInfo?.total_count > 0 ? (
@@ -62,7 +67,7 @@ export const WorkspaceDraftHeader = observer(() => {
               onClick={() => setIsDraftIssueModalOpen(true)}
               disabled={!isAuthorizedUser}
             >
-              Draft<span className="hidden sm:inline-block"> an issue</span>
+              {t("workspace_draft_issues.draft_an_issue")}
             </Button>
           )}
         </Header.RightItem>

web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx

@@ -7,6 +7,7 @@ import { observer } from "mobx-react";
 import { Pencil, Trash2 } from "lucide-react";
 // types
 import { EIssuesStoreType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 // ui
 import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
@@ -40,6 +41,8 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
   const { allowPermissions } = useUserPermissions();
   const { setTrackElement } = useEventTracker();
   const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+
+  const { t } = useTranslation();
   // derived values
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
   // auth
@@ -59,7 +62,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "edit",
-      title: "Edit",
+      title: "edit",
       icon: Pencil,
       action: () => {
         setTrackElement(activeLayout);
@@ -70,7 +73,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
     },
     {
       key: "delete",
-      title: "Delete",
+      title: "delete",
       icon: Trash2,
       action: () => {
         setTrackElement(activeLayout);
@@ -138,7 +141,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
-                <h5>{item.title}</h5>
+                <h5>{t(item.title ?? "")}</h5>
                 {item.description && (
                   <p
                     className={cn("text-custom-text-300 whitespace-pre-line", {

web/core/components/issues/issue-modal/form.tsx

@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 // editor
-import { ETabIndices,EIssuesStoreType } from "@plane/constants";
+import { ETabIndices, EIssuesStoreType } from "@plane/constants";
 import { EditorRefApi } from "@plane/editor";
 // i18n
 import { useTranslation } from "@plane/i18n";
@@ -538,7 +538,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       onClick={handleMoveToProjects}
                       disabled={isMoving}
                     >
-                      Add to project
+                      {t("add_to_project")}
                     </Button>
                   )}
                 </div>

web/core/components/issues/workspace-draft/delete-modal.tsx

@@ -92,8 +92,13 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
       handleSubmit={handleIssueDelete}
       isSubmitting={isDeleting}
       isOpen={isOpen}
-      title="Delete draft"
-      content={<>Are you sure you want to delete this draft? This can&apos;t be undone.</>}
+      title={t("delete_modal.title")}
+      content={<>{t("delete_modal.description")}</>}
+      primaryButtonText={{
+        loading: t("deleting"),
+        default: t("delete"),
+      }}
+      secondaryButtonText={t("cancel")}
     />
   );
 };

web/core/components/issues/workspace-draft/draft-issue-block.tsx

@@ -57,7 +57,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "edit",
-      title: "Edit",
+      title: "edit",
       icon: Pencil,
       action: () => {
         setIssueToEdit(issue);
@@ -66,15 +66,15 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
     },
     {
       key: "make-a-copy",
-      title: "Make a copy",
+      title: "make_a_copy",
       icon: Copy,
       action: () => {
         setCreateUpdateIssueModal(true);
       },
     },
     {
       key: "move-to-issues",
-      title: "Move to project",
+      title: "move_to_project",
       icon: SquareStackIcon,
       action: () => {
         setMoveToIssue(true);
@@ -84,7 +84,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
     },
     {
       key: "delete",
-      title: "Delete",
+      title: "delete",
       icon: Trash2,
       action: () => {
         setDeleteIssueModal(true);

web/core/components/issues/workspace-draft/quick-action.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 // helpers
@@ -14,6 +15,8 @@ export interface Props {
 export const WorkspaceDraftIssueQuickActions: React.FC<Props> = observer((props) => {
   const { parentRef, MENU_ITEMS } = props;
 
+  const { t } = useTranslation();
+
   return (
     <>
       <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
@@ -44,7 +47,7 @@ export const WorkspaceDraftIssueQuickActions: React.FC<Props> = observer((props)
           >
             {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
             <div>
-              <h5>{item.title}</h5>
+              <h5>{t(item.title || "")}</h5>
               {item.description && (
                 <p
                   className={cn("text-custom-text-300 whitespace-pre-line", {