feat: copy link option (#292)

* feat: copy issue link added in issue card

* feat: copy cycle link added

* feat: ellipsis added in module card

* fix: origin path and handlecopytext added

apps/app/components/core/board-view/single-issue.tsx

@@ -37,6 +37,8 @@ import {
 } from "types";
 // fetch-keys
 import { CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+import { copyTextToClipboard } from "helpers/string.helper";
+import useToast from "hooks/use-toast";
 
 type Props = {
   type?: string;
@@ -69,7 +71,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
+  const { setToastAlert } = useToast();
   const partialUpdateIssue = useCallback(
     (formData: Partial<IIssue>) => {
       if (!workspaceSlug || !projectId) return;
@@ -159,6 +161,23 @@ export const SingleBoardIssue: React.FC<Props> = ({
     };
   }
 
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Issue link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  };
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   useEffect(() => {
@@ -187,6 +206,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
             </button> */}
             {type && !isNotAllowed && (
               <CustomMenu width="auto" ellipsis>
+                <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
                 {type !== "issue" && removeIssue && (
                   <CustomMenu.MenuItem onClick={removeIssue}>

apps/app/components/core/list-view/single-issue.tsx

@@ -27,6 +27,8 @@ import {
 } from "types";
 // fetch-keys
 import { CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST, STATE_LIST } from "constants/fetch-keys";
+import { copyTextToClipboard } from "helpers/string.helper";
+import useToast from "hooks/use-toast";
 
 type Props = {
   type?: string;
@@ -49,7 +51,7 @@ export const SingleListIssue: React.FC<Props> = ({
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
+  const { setToastAlert } = useToast();
   const partialUpdateIssue = useCallback(
     (formData: Partial<IIssue>) => {
       if (!workspaceSlug || !projectId) return;
@@ -123,6 +125,23 @@ export const SingleListIssue: React.FC<Props> = ({
     [workspaceSlug, projectId, cycleId, moduleId, issue]
   );
 
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Issue link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  };
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -181,6 +200,7 @@ export const SingleListIssue: React.FC<Props> = ({
         )}
         {type && !isNotAllowed && (
           <CustomMenu width="auto" ellipsis>
+            <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
             <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
             {type !== "issue" && removeIssue && (
               <CustomMenu.MenuItem onClick={removeIssue}>

apps/app/components/modules/single-module-card.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 // components
 import { DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList, Avatar } from "components/ui";
+import { AssigneesList, Avatar, CustomMenu } from "components/ui";
 // icons
 import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -15,6 +15,8 @@ import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 import { IModule } from "types";
 // common
 import { MODULE_STATUS } from "constants/module";
+import useToast from "hooks/use-toast";
+import { copyTextToClipboard } from "helpers/string.helper";
 
 type Props = {
   module: IModule;
@@ -24,7 +26,8 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
+  const { setToastAlert } = useToast();
 
   const handleDeleteModule = () => {
     if (!module) return;
@@ -32,6 +35,24 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
     setModuleDeleteModal(true);
   };
 
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Module link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  };
+
   return (
     <>
       <DeleteModuleModal
@@ -40,14 +61,13 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
         data={module}
       />
       <div className="group/card h-full w-full relative select-none p-2">
-        <div className="absolute top-4 right-4 z-10 bg-red-200 opacity-0 group-hover/card:opacity-100">
+        <div className="absolute top-4 right-4 ">
-          <button
+          <CustomMenu width="auto" ellipsis>
-            type="button"
+            <CustomMenu.MenuItem onClick={handleCopyText}>Copy module link</CustomMenu.MenuItem>
-            className="grid h-7 w-7 place-items-center  bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+            <CustomMenu.MenuItem onClick={handleDeleteModule}>
-            onClick={() => handleDeleteModule()}
+              Delete module permanently
-          >
+            </CustomMenu.MenuItem>
-            <TrashIcon className="h-4 w-4" />
+          </CustomMenu>
-          </button>
         </div>
         <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
           <a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 ">

apps/app/components/project/cycles/stats-view/single-stat.tsx

@@ -21,6 +21,8 @@ import { groupBy } from "helpers/array.helper";
 import { CycleIssueResponse, ICycle } from "types";
 // fetch-keys
 import { CYCLE_ISSUES } from "constants/fetch-keys";
+import { copyTextToClipboard } from "helpers/string.helper";
+import useToast from "hooks/use-toast";
 
 type TSingleStatProps = {
   cycle: ICycle;
@@ -43,6 +45,7 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
+  const { setToastAlert } = useToast();
 
   const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
     workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES(cycle.id as string) : null,
@@ -63,6 +66,24 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
     ...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"),
   };
 
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Cycle link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  };
+
   return (
     <>
       <div className="rounded-md border bg-white p-3">
@@ -77,6 +98,7 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
                 </a>
               </Link>
               <CustomMenu width="auto" ellipsis>
+                <CustomMenu.MenuItem onClick={handleCopyText}>Copy cycle link</CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={handleDeleteCycle}>
                   Delete cycle permanently