diff --git a/web/ce/components/issues/issue-details/issue-identifier.tsx b/web/ce/components/issues/issue-details/issue-identifier.tsx index b12cc6de71c..c461e88fa31 100644 --- a/web/ce/components/issues/issue-details/issue-identifier.tsx +++ b/web/ce/components/issues/issue-details/issue-identifier.tsx @@ -1,6 +1,8 @@ import { observer } from "mobx-react"; // types import { IIssueDisplayProperties } from "@plane/types"; +// ui +import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui"; // helpers import { cn } from "@/helpers/common.helper"; // hooks @@ -11,6 +13,7 @@ type TIssueIdentifierBaseProps = { size?: "xs" | "sm" | "md" | "lg"; textContainerClassName?: string; displayProperties?: IIssueDisplayProperties | undefined; + enableClickToCopyIdentifier?: boolean; }; type TIssueIdentifierFromStore = TIssueIdentifierBaseProps & { @@ -23,9 +26,48 @@ type TIssueIdentifierWithDetails = TIssueIdentifierBaseProps & { issueSequenceId: string | number; }; -type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails; +export type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails; + +type TIdentifierTextProps = { + identifier: string; + enableClickToCopyIdentifier?: boolean; + textContainerClassName?: string; +}; + +export const IdentifierText: React.FC = (props) => { + const { identifier, enableClickToCopyIdentifier = false, textContainerClassName } = props; + // handlers + const handleCopyIssueIdentifier = () => { + if (enableClickToCopyIdentifier) { + navigator.clipboard.writeText(identifier).then(() => { + setToast({ + type: TOAST_TYPE.SUCCESS, + title: "Issue ID copied to clipboard", + }); + }); + } + }; + + return ( + + + {identifier} + + + ); +}; + export const IssueIdentifier: React.FC = observer((props) => { - const { projectId, textContainerClassName, displayProperties } = props; + const { projectId, textContainerClassName, displayProperties, enableClickToCopyIdentifier = false } = props; // store hooks const { getProjectIdentifierById } = useProject(); const { @@ -43,9 +85,11 @@ export const IssueIdentifier: React.FC = observer((props) return (
- - {projectIdentifier}-{issueSequenceId} - +
); }); diff --git a/web/ce/components/issues/issue-details/issue-type-switcher.tsx b/web/ce/components/issues/issue-details/issue-type-switcher.tsx index 5cbd8e6d67f..5d4adeb9558 100644 --- a/web/ce/components/issues/issue-details/issue-type-switcher.tsx +++ b/web/ce/components/issues/issue-details/issue-type-switcher.tsx @@ -20,5 +20,5 @@ export const IssueTypeSwitcher: React.FC = observer((pr if (!issue || !issue.project_id) return <>; - return ; + return ; });