From b89925c61c04b1c070e56124fe593d2c1fc345e0 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Thu, 7 Mar 2024 02:01:23 +0100
Subject: [PATCH 1/5] Feat: Copy project slug button

---
 .../ProjectNameChangeSection/CopyButton.tsx   | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
new file mode 100644
index 000000000..4add9df76
--- /dev/null
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
@@ -0,0 +1,51 @@
+import { useCallback } from "react";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+type Props = {
+  value: string;
+  hoverText: string;
+  children: React.ReactNode;
+};
+
+export const CopyButton = ({ value, children, hoverText }: Props) => {
+  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
+  const { createNotification } = useNotificationContext();
+
+  const copyToClipboard = useCallback(() => {
+    if (isProjectIdCopied) {
+      return;
+    }
+
+    setIsProjectIdCopied.on();
+    navigator.clipboard.writeText(value);
+
+    createNotification({
+      text: "Copied Project ID to clipboard",
+      type: "success"
+    });
+
+    const timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
+
+    // eslint-disable-next-line consistent-return
+    return () => clearTimeout(timer);
+  }, [isProjectIdCopied]);
+
+  return (
+    <Button
+      colorSchema="secondary"
+      className="group relative"
+      leftIcon={<FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />}
+      onClick={copyToClipboard}
+    >
+      {children}
+      <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+        {hoverText}
+      </span>
+    </Button>
+  );
+};

From 5dfe62e306b910816f772259853ab2aa9e1490c4 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Thu, 7 Mar 2024 02:01:31 +0100
Subject: [PATCH 2/5] Feat: Copy project slug button

---
 .../ProjectNameChangeSection.tsx              | 37 ++++++-------------
 1 file changed, 11 insertions(+), 26 deletions(-)

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
index 719129ebf..5f74dc727 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -1,7 +1,5 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
@@ -12,6 +10,8 @@ import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@a
 import { useToggle } from "@app/hooks";
 import { useRenameWorkspace } from "@app/hooks/api";
 
+import { CopyButton } from "./CopyButton";
+
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name")
 });
@@ -42,7 +42,7 @@ export const ProjectNameChangeSection = () => {
     }
 
     return () => clearTimeout(timer);
-}, [setIsProjectIdCopied]);
+  }, [setIsProjectIdCopied]);
 
   const onFormSubmit = async ({ name }: FormData) => {
     try {
@@ -66,35 +66,20 @@ export const ProjectNameChangeSection = () => {
     }
   };
 
-  const copyProjectIdToClipboard = () => {
-    navigator.clipboard.writeText(currentWorkspace?.id || "");
-    setIsProjectIdCopied.on();
-
-    createNotification({
-      text: "Copied Project ID to clipboard",
-      type: "success"
-    });
-  }
-
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
       className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <div className="flex justify-betweens">
-        <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">Project Name</h2>
-        <div>
-          <Button
-            colorSchema="secondary"
-            className="group relative"
-            leftIcon={<FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />}
-            onClick={copyProjectIdToClipboard}
-          >
+      <div className="justify-betweens flex">
+        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Name</h2>
+        <div className="space-x-2">
+          <CopyButton value={currentWorkspace?.slug || ""} hoverText="Click to slug">
+            Copy Project Slug
+          </CopyButton>
+          <CopyButton value={currentWorkspace?.id || ""} hoverText="Click to ID">
             Copy Project ID
-            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-              Click to copy
-            </span>
-          </Button>
+          </CopyButton>
         </div>
       </div>
 

From f078aec54ca2bf9baa8ff79318e6b1c277302522 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Thu, 7 Mar 2024 02:19:54 +0100
Subject: [PATCH 3/5] Feat: Add copy project slug button

---
 .../ProjectNameChangeSection.tsx                     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
index 5f74dc727..f952e12fa 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -74,10 +74,18 @@ export const ProjectNameChangeSection = () => {
       <div className="justify-betweens flex">
         <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Name</h2>
         <div className="space-x-2">
-          <CopyButton value={currentWorkspace?.slug || ""} hoverText="Click to slug">
+          <CopyButton
+            value={currentWorkspace?.slug || ""}
+            hoverText="Click to project slug"
+            notificationText="Copied project slug to clipboard"
+          >
             Copy Project Slug
           </CopyButton>
-          <CopyButton value={currentWorkspace?.id || ""} hoverText="Click to ID">
+          <CopyButton
+            value={currentWorkspace?.id || ""}
+            hoverText="Click to project ID"
+            notificationText="Copied project ID to clipboard"
+          >
             Copy Project ID
           </CopyButton>
         </div>

From dbf177d667b9476bbbefcef2ab73eb7f4786118d Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Thu, 7 Mar 2024 02:20:01 +0100
Subject: [PATCH 4/5] Feat: Add copy project slug button

---
 .../components/ProjectNameChangeSection/CopyButton.tsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
index 4add9df76..8337d1c4d 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
@@ -9,10 +9,11 @@ import { useToggle } from "@app/hooks";
 type Props = {
   value: string;
   hoverText: string;
+  notificationText: string;
   children: React.ReactNode;
 };
 
-export const CopyButton = ({ value, children, hoverText }: Props) => {
+export const CopyButton = ({ value, children, hoverText, notificationText }: Props) => {
   const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
   const { createNotification } = useNotificationContext();
 
@@ -25,7 +26,7 @@ export const CopyButton = ({ value, children, hoverText }: Props) => {
     navigator.clipboard.writeText(value);
 
     createNotification({
-      text: "Copied Project ID to clipboard",
+      text: notificationText,
       type: "success"
     });
 
@@ -43,7 +44,7 @@ export const CopyButton = ({ value, children, hoverText }: Props) => {
       onClick={copyToClipboard}
     >
       {children}
-      <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+      <span className="absolute -left-8 -top-20 hidden translate-y-full justify-center rounded-md bg-bunker-800 py-2 px-3 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
         {hoverText}
       </span>
     </Button>

From a4205a8662eaafe6396ddf1900efa9b9ad9564c2 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Thu, 7 Mar 2024 02:22:52 +0100
Subject: [PATCH 5/5] =?UTF-8?q?Cleanup=20=F0=9F=A7=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProjectNameChangeSection.tsx                     | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
index f952e12fa..34261f47a 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -7,7 +7,6 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks";
 import { useRenameWorkspace } from "@app/hooks/api";
 
 import { CopyButton } from "./CopyButton";
@@ -22,7 +21,6 @@ export const ProjectNameChangeSection = () => {
   const { createNotification } = useNotificationContext();
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isLoading } = useRenameWorkspace();
-  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
 
   const { handleSubmit, control, reset } = useForm<FormData>({ resolver: yupResolver(formSchema) });
 
@@ -34,16 +32,6 @@ export const ProjectNameChangeSection = () => {
     }
   }, [currentWorkspace]);
 
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-
-    if (isProjectIdCopied) {
-      timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
-    }
-
-    return () => clearTimeout(timer);
-  }, [setIsProjectIdCopied]);
-
   const onFormSubmit = async ({ name }: FormData) => {
     try {
       if (!currentWorkspace?.id) return;