From 6c6fae379322159e0d4b4b2521d58e0d8efe913e Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Tue, 30 Jan 2024 02:04:16 +0530
Subject: [PATCH] feat: add copy project id

---
 docs/cli/faq.mdx                              |  9 ++++
 .../ProjectNameChangeSection.tsx              | 42 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/docs/cli/faq.mdx b/docs/cli/faq.mdx
index 529ec70ab..cf95457c9 100644
--- a/docs/cli/faq.mdx
+++ b/docs/cli/faq.mdx
@@ -23,3 +23,12 @@ Yes. If you have previously retrieved secrets for a specific project and environ
 <Accordion title="Can I upload the .infisical.json file that was generated?">
 Yes. This is simply a configuration file and contains no sensitive data.
 </Accordion>
+
+<Accordion title="Where can I find my Project ID?">
+
+  Visit the Infisical website and navigate to a project of your choice. Once on the project page, access the **Project Settings** from the sidebar. Within the Project name section, click the "Copy Project ID" button for copying the current Project ID to clipboard, or simply obtain it from the URL of the current page.
+  
+  ```
+    https://app.infisical.com/project/<your_project_id>/settings
+  ```
+</Accordion>
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
index 6055a9f33..04ac02b81 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -1,5 +1,7 @@
 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";
 
@@ -7,6 +9,7 @@ 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";
 
 const formSchema = yup.object({
@@ -19,6 +22,7 @@ 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) });
 
@@ -30,6 +34,16 @@ 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;
@@ -52,12 +66,38 @@ 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"
     >
-      <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Name</h2>
+      <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}
+          >
+            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>
+        </div>
+      </div>
+
       <div className="max-w-md">
         <Controller
           defaultValue=""