fix: show work item ID in created confirmation toast

apps/web/core/components/issues/create-issue-toast-action-items.tsx

@@ -4,36 +4,29 @@
  * See the LICENSE file for details.
  */
 
-import type { FC } from "react";
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
-// plane imports
-// helpers
-// hooks
+import { copyTextToClipboard, copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useProject } from "@/hooks/store/use-project";
 
 type TCreateIssueToastActionItems = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   isEpic?: boolean;
 };
 
 export const CreateIssueToastActionItems = observer(function CreateIssueToastActionItems(
   props: TCreateIssueToastActionItems
 ) {
-  const { workspaceSlug, projectId, issueId, isEpic = false } = props;
-  // state
-  const [copied, setCopied] = useState(false);
-  // store hooks
+  const { workspaceSlug, issueId, isEpic = false } = props;
+  const [copiedId, setCopiedId] = useState(false);
+  const [copiedLink, setCopiedLink] = useState(false);
   const {
     issue: { getIssueById },
   } = useIssueDetail();
   const { getProjectIdentifierById } = useProject();
 
-  // derived values
   const issue = getIssueById(issueId);
   const projectIdentifier = getProjectIdentifierById(issue?.project_id);
 
@@ -49,19 +42,46 @@ export const CreateIssueToastActionItems = observer(function CreateIssueToastAct
   });
 
   const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    e.stopPropagation();
     try {
       await copyUrlToClipboard(workItemLink);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 3000);
-    } catch (error) {
-      setCopied(false);
+      setCopiedLink(true);
+      setTimeout(() => setCopiedLink(false), 3000);
+    } catch (_error) {
+      setCopiedLink(false);
     }
+  };
+
+  const workItemId = `${projectIdentifier}-${issue?.sequence_id}`;
+
+  const copyWorkItemId = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
     e.stopPropagation();
+    try {
+      await copyTextToClipboard(workItemId);
+      setCopiedId(true);
+      setTimeout(() => setCopiedId(false), 3000);
+    } catch (_error) {
+      setCopiedId(false);
+    }
   };
 
   return (
     <div className="-ml-2 flex items-center gap-1 text-11 text-secondary">
+      <span className="rounded-sm px-2 py-1 font-medium text-secondary">{workItemId}</span>
+
+      {copiedId ? (
+        <span className="cursor-default px-2 py-1 text-secondary">Copied!</span>
+      ) : (
+        <button
+          className="cursor-pointer rounded-sm px-2 py-1 text-tertiary hover:bg-surface-2 hover:text-secondary"
+          onClick={copyWorkItemId}
+        >
+          Copy ID
+        </button>
+      )}
+
       <a
         href={workItemLink}
         target="_blank"
@@ -71,19 +91,15 @@ export const CreateIssueToastActionItems = observer(function CreateIssueToastAct
         {`View ${isEpic ? "epic" : "work item"}`}
       </a>
 
-      {copied ? (
-        <>
-          <span className="cursor-default px-2 py-1 text-secondary">Copied!</span>
-        </>
+      {copiedLink ? (
+        <span className="cursor-default px-2 py-1 text-secondary">Link Copied!</span>
       ) : (
-        <>
-          <button
-            className="hidden cursor-pointer rounded-sm px-2 py-1 text-tertiary group-hover:flex hover:bg-surface-2 hover:text-secondary"
-            onClick={copyToClipboard}
-          >
-            Copy link
-          </button>
-        </>
+        <button
+          className="cursor-pointer rounded-sm px-2 py-1 text-tertiary opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-surface-2 hover:text-secondary focus:opacity-100"
+          onClick={copyToClipboard}
+        >
+          Copy link
+        </button>
       )}
     </div>
   );

apps/web/core/components/issues/issue-layouts/quick-add/root.tsx

@@ -108,20 +108,17 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
     });
 
     if (quickAddCallback) {
-      const quickAddPromise = quickAddCallback(projectId.toString(), { ...payload });
+      const quickAddPromise = quickAddCallback(projectId.toString(), {
+        ...payload,
+      });
       setPromiseToast<any>(quickAddPromise, {
         loading: isEpic ? t("epic.adding") : t("issue.adding"),
         success: {
           title: t("common.success"),
           message: () => `${isEpic ? t("epic.create.success") : t("issue.create.success")}`,
           actionItems: (data) => (
             // TODO: Translate here
-            <CreateIssueToastActionItems
-              workspaceSlug={workspaceSlug.toString()}
-              projectId={projectId.toString()}
-              issueId={data.id}
-              isEpic={isEpic}
-            />
+            <CreateIssueToastActionItems workspaceSlug={workspaceSlug.toString()} issueId={data.id} isEpic={isEpic} />
           ),
         },
         error: {

apps/web/core/components/issues/issue-modal/base.tsx

@@ -238,11 +238,7 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
         title: t("success"),
         message: `${is_draft_issue ? t("draft_created") : t("issue_created_successfully")} `,
         actionItems: !is_draft_issue && response?.project_id && (
-          <CreateIssueToastActionItems
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={response?.project_id}
-            issueId={response.id}
-          />
+          <CreateIssueToastActionItems workspaceSlug={workspaceSlug.toString()} issueId={response.id} />
         ),
       });
       if (!createMore) handleClose();
@@ -316,11 +312,7 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
         message: t("issue_updated_successfully"),
         actionItems:
           showActionItemsOnUpdate && payload.project_id ? (
-            <CreateIssueToastActionItems
-              workspaceSlug={workspaceSlug.toString()}
-              projectId={payload.project_id}
-              issueId={data.id}
-            />
+            <CreateIssueToastActionItems workspaceSlug={workspaceSlug.toString()} issueId={data.id} />
           ) : undefined,
       });
       handleClose();

packages/propel/src/button/helper.tsx

@@ -17,9 +17,9 @@ export const buttonVariants = cva(
         "error-fill":
           "bg-danger-primary text-on-color hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
         "error-outline":
-          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-secondary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+          "border border-danger-strong bg-layer-2 text-danger-secondary hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
         secondary:
-          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
+          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
         tertiary:
           "bg-layer-3 text-secondary hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
         ghost: