From 323c412f5ea6a976d6073f87ab48639b5ed9c025 Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Sat, 2 Mar 2024 06:41:32 +0530
Subject: [PATCH 1/5] Added Option to Rename Secrets from overview page in all
 environments

---
 .../SecretOverviewTableRow.tsx                |   8 +
 .../SecretRenameRow.tsx                       | 178 ++++++++++++++++++
 2 files changed, 186 insertions(+)
 create mode 100644 frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx

diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
index 08774535b..719b17d44 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
@@ -15,6 +15,7 @@ import { useToggle } from "@app/hooks";
 import { DecryptedSecret } from "@app/hooks/api/secrets/types";
 
 import { SecretEditRow } from "./SecretEditRow";
+import SecretRenameRow from "./SecretRenameRow";
 
 type Props = {
   secretKey: string;
@@ -105,6 +106,13 @@ export const SecretOverviewTableRow = ({
                 width: `calc(${expandableColWidth}px - 1rem)`
               }}
             >
+              <SecretRenameRow
+                secretKey={secretKey}
+                environments={environments}
+                secretPath={secretPath}
+                getSecretByKey={getSecretByKey}
+              />
+
               <TableContainer>
                 <table className="secret-table">
                   <thead>
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
new file mode 100644
index 000000000..57c71527c
--- /dev/null
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -0,0 +1,178 @@
+import { Controller, useForm } from "react-hook-form";
+import { subject } from "@casl/ability";
+import { faCheck, faClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
+
+import { IconButton, Input, Spinner, Tooltip } from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useWorkspace
+} from "@app/context";
+import { useGetUserWsKey, useUpdateSecretV3 } from "@app/hooks/api";
+import { DecryptedSecret } from "@app/hooks/api/types";
+import { SecretActionType } from "@app/views/SecretMainPage/components/SecretListView/SecretListView.utils";
+
+type Props = {
+  secretKey: string;
+  secretPath: string;
+  environments: { name: string; slug: string }[];
+  getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
+};
+
+type Form = { key: string };
+
+function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }: Props) {
+  const { currentWorkspace } = useWorkspace();
+  const { permission } = useProjectPermission();
+
+  const secrets = environments.map((env) => getSecretByKey(env.slug, secretKey));
+
+  const isReadOnly = environments.some((env) => {
+    const environment = env.slug;
+    const isSecretInEnvReadOnly =
+      permission.can(
+        ProjectPermissionActions.Read,
+        subject(ProjectPermissionSub.Secrets, { environment, secretPath })
+      ) &&
+      permission.cannot(
+        ProjectPermissionActions.Edit,
+        subject(ProjectPermissionSub.Secrets, { environment, secretPath })
+      );
+    if (isSecretInEnvReadOnly) {
+      return true;
+    }
+    return false;
+  });
+
+  const isOverriden = secrets.some(
+    (secret) =>
+      secret?.overrideAction === SecretActionType.Created ||
+      secret?.overrideAction === SecretActionType.Modified
+  );
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+
+  const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { isDirty, isSubmitting }
+  } = useForm<Form>({
+    defaultValues: { key: secretKey },
+    values: { key: secretKey }
+  });
+
+  const handleFormSubmit = async (data: Form) => {
+    const promises = secrets
+      .filter((secret) => !!secret)
+      .map((secret) => {
+        if (!secret) return null;
+
+        return updateSecretV3({
+          environment: secret?.env,
+          workspaceId,
+          secretPath,
+          secretName: secret.key,
+          secretId: secret.id,
+          secretValue: secret.value || "",
+          type: "shared",
+          latestFileKey: decryptFileKey!,
+          tags: secret.tags.map((tag) => tag.id),
+          secretComment: secret.comment,
+          secretReminderRepeatDays: secret.reminderRepeatDays,
+          secretReminderNote: secret.reminderNote,
+          skipMultilineEncoding: secret.skipMultilineEncoding,
+          newSecretName: data.key
+        });
+      });
+
+    await Promise.all(promises);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(handleFormSubmit)}
+      className="secret-table relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
+    >
+      <div className="flex h-11 flex-1 flex-shrink-0 items-center">
+        <span className="flex h-full min-w-[11rem] items-center justify-start border-r-2 border-mineshaft-600 px-2">
+          Key
+        </span>
+
+        <Controller
+          name="key"
+          control={control}
+          render={({ field }) => (
+            <Input
+              autoComplete="off"
+              isReadOnly={isReadOnly}
+              autoCapitalization={currentWorkspace?.autoCapitalization}
+              variant="plain"
+              isDisabled={isOverriden}
+              {...field}
+              className="w-full px-2 focus:text-bunker-100 focus:ring-transparent"
+            />
+          )}
+        />
+      </div>
+      {(isReadOnly || isOverriden) && (
+        <span className="mr-5 rounded-md bg-mineshaft-500 px-2">Read Only</span>
+      )}
+      <AnimatePresence exitBeforeEnter>
+        {isDirty && (
+          <motion.div
+            key="options-save"
+            className="flex h-10 flex-shrink-0 items-center space-x-4 px-3"
+            initial={{ x: -10, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: -10, opacity: 0 }}
+          >
+            <Tooltip content="Save">
+              <IconButton
+                ariaLabel="more"
+                variant="plain"
+                type="submit"
+                size="md"
+                className={twMerge(
+                  "p-0 text-primary opacity-0 group-hover:opacity-100",
+                  isDirty && "opacity-100"
+                )}
+                isDisabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <Spinner className="m-0 h-4 w-4 p-0" />
+                ) : (
+                  <FontAwesomeIcon icon={faCheck} size="lg" className="text-primary" />
+                )}
+              </IconButton>
+            </Tooltip>
+            <Tooltip content="Cancel">
+              <IconButton
+                ariaLabel="more"
+                variant="plain"
+                size="md"
+                className={twMerge(
+                  "p-0 opacity-0 group-hover:opacity-100",
+                  isDirty && "opacity-100"
+                )}
+                onClick={() => reset()}
+                isDisabled={isSubmitting}
+              >
+                <FontAwesomeIcon icon={faClose} size="lg" />
+              </IconButton>
+            </Tooltip>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </form>
+  );
+}
+
+export default SecretRenameRow;

From 4dbee7df063262d468a99cd682fd15b2a51c9c24 Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Sat, 2 Mar 2024 06:45:52 +0530
Subject: [PATCH 2/5] Added notification on success and failure renaming secret

---
 .../SecretOverviewTableRow/SecretRenameRow.tsx   | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
index 57c71527c..30f4198c4 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { IconButton, Input, Spinner, Tooltip } from "@app/components/v2";
 import {
   ProjectPermissionActions,
@@ -28,6 +29,7 @@ type Form = { key: string };
 function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }: Props) {
   const { currentWorkspace } = useWorkspace();
   const { permission } = useProjectPermission();
+  const { createNotification } = useNotificationContext();
 
   const secrets = environments.map((env) => getSecretByKey(env.slug, secretKey));
 
@@ -93,7 +95,19 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
         });
       });
 
-    await Promise.all(promises);
+    await Promise.all(promises)
+      .then(() => {
+        createNotification({
+          type: "success",
+          text: "Successfully renamed the secret"
+        });
+      })
+      .catch(() => {
+        createNotification({
+          type: "error",
+          text: "Error renaming the secret"
+        });
+      });
   };
 
   return (

From b6f3cf512e3c76175a5278da9b4373ce9f9e5e12 Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Sat, 2 Mar 2024 06:57:36 +0530
Subject: [PATCH 3/5] spacing made consistent

---
 .../components/SecretOverviewTableRow/SecretRenameRow.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
index 30f4198c4..176200cee 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -116,7 +116,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
       className="secret-table relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
     >
       <div className="flex h-11 flex-1 flex-shrink-0 items-center">
-        <span className="flex h-full min-w-[11rem] items-center justify-start border-r-2 border-mineshaft-600 px-2">
+        <span className="flex h-full min-w-[11rem] items-center justify-start border-r-2 border-mineshaft-600 px-4">
           Key
         </span>
 

From 3fa529dcb0dbb692183a61f671bc1cbfc0e6d20f Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Sat, 2 Mar 2024 09:30:03 +0530
Subject: [PATCH 4/5] Added error message if name is empty

---
 .../components/SecretOverviewTableRow/SecretRenameRow.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
index 176200cee..e6e8381db 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -72,6 +72,14 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
   });
 
   const handleFormSubmit = async (data: Form) => {
+    if (!data.key) {
+      createNotification({
+        type: "error",
+        text: "Secret name cannot be empty"
+      });
+      return;
+    }
+
     const promises = secrets
       .filter((secret) => !!secret)
       .map((secret) => {

From d8860e1ce3d2a88e2e737d3555005cf915ed5118 Mon Sep 17 00:00:00 2001
From: Rhythm Bhiwani <rhythmbhiwani@gmail.com>
Date: Sun, 3 Mar 2024 02:49:35 +0530
Subject: [PATCH 5/5] Disabled submit button when renaming all keys if key name
 is empty

---
 frontend/package-lock.json                    |   2 +-
 .../SecretRenameRow.tsx                       | 168 ++++++++++++------
 2 files changed, 114 insertions(+), 56 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 72607a272..2ec5b5578 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "npm-proj-1709146141702-0.772936286416932EMIzNi",
+  "name": "frontend",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
index e6e8381db..a2813abee 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -1,9 +1,12 @@
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
-import { faCheck, faClose } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faClose, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
+import { z } from "zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { IconButton, Input, Spinner, Tooltip } from "@app/components/v2";
@@ -13,6 +16,7 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
+import { useToggle } from "@app/hooks";
 import { useGetUserWsKey, useUpdateSecretV3 } from "@app/hooks/api";
 import { DecryptedSecret } from "@app/hooks/api/types";
 import { SecretActionType } from "@app/views/SecretMainPage/components/SecretListView/SecretListView.utils";
@@ -24,7 +28,11 @@ type Props = {
   getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
 };
 
-type Form = { key: string };
+export const formSchema = z.object({
+  key: z.string().trim().min(1, { message: "Secret key is required" })
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
 
 function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }: Props) {
   const { currentWorkspace } = useWorkspace();
@@ -59,19 +67,32 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
 
   const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
 
+  const [isSecNameCopied, setIsSecNameCopied] = useToggle(false);
+
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
 
   const {
     handleSubmit,
     control,
     reset,
-    formState: { isDirty, isSubmitting }
-  } = useForm<Form>({
+    trigger,
+    getValues,
+    formState: { isDirty, isSubmitting, errors }
+  } = useForm<TFormSchema>({
     defaultValues: { key: secretKey },
-    values: { key: secretKey }
+    values: { key: secretKey },
+    resolver: zodResolver(formSchema)
   });
 
-  const handleFormSubmit = async (data: Form) => {
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isSecNameCopied) {
+      timer = setTimeout(() => setIsSecNameCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isSecNameCopied]);
+
+  const handleFormSubmit = async (data: TFormSchema) => {
     if (!data.key) {
       createNotification({
         type: "error",
@@ -118,6 +139,12 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
       });
   };
 
+  const copyTokenToClipboard = () => {
+    const [key] = getValues(["key"]);
+    navigator.clipboard.writeText(key as string);
+    setIsSecNameCopied.on();
+  };
+
   return (
     <form
       onSubmit={handleSubmit(handleFormSubmit)}
@@ -131,68 +158,99 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
         <Controller
           name="key"
           control={control}
-          render={({ field }) => (
+          render={({ field, fieldState: { error } }) => (
             <Input
               autoComplete="off"
               isReadOnly={isReadOnly}
               autoCapitalization={currentWorkspace?.autoCapitalization}
               variant="plain"
               isDisabled={isOverriden}
+              placeholder={error?.message}
+              onKeyUp={() => trigger("key")}
+              isError={Boolean(error)}
               {...field}
-              className="w-full px-2 focus:text-bunker-100 focus:ring-transparent"
+              className="w-full px-2 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
             />
           )}
         />
       </div>
-      {(isReadOnly || isOverriden) && (
+
+      {isReadOnly || isOverriden ? (
         <span className="mr-5 rounded-md bg-mineshaft-500 px-2">Read Only</span>
+      ) : (
+        <div className="group flex w-20 items-center justify-center border-l border-mineshaft-500 py-1">
+          <AnimatePresence exitBeforeEnter>
+            {!isDirty ? (
+              <motion.div
+                key="options"
+                className="flex flex-shrink-0 items-center space-x-4 px-3"
+                initial={{ x: 0, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: 10, opacity: 0 }}
+              >
+                <Tooltip content="Copy secret">
+                  <IconButton
+                    ariaLabel="copy-value"
+                    variant="plain"
+                    size="sm"
+                    className="p-0 opacity-0 group-hover:opacity-100"
+                    onClick={copyTokenToClipboard}
+                  >
+                    <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
+                  </IconButton>
+                </Tooltip>
+              </motion.div>
+            ) : (
+              <motion.div
+                key="options-save"
+                className="flex flex-shrink-0 items-center space-x-4 px-3"
+                initial={{ x: -10, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: -10, opacity: 0 }}
+              >
+                <Tooltip content={errors.key ? errors.key.message : "Save"}>
+                  <IconButton
+                    ariaLabel="more"
+                    variant="plain"
+                    type="submit"
+                    size="md"
+                    className={twMerge(
+                      "p-0 text-primary opacity-0 group-hover:opacity-100",
+                      isDirty && "opacity-100"
+                    )}
+                    isDisabled={isSubmitting || Boolean(errors.key)}
+                  >
+                    {isSubmitting ? (
+                      <Spinner className="m-0 h-4 w-4 p-0" />
+                    ) : (
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        size="lg"
+                        className={twMerge("text-primary", errors.key && "text-mineshaft-400")}
+                      />
+                    )}
+                  </IconButton>
+                </Tooltip>
+                <Tooltip content="Cancel">
+                  <IconButton
+                    ariaLabel="more"
+                    variant="plain"
+                    size="md"
+                    className={twMerge(
+                      "p-0 opacity-0 group-hover:opacity-100",
+                      isDirty && "opacity-100"
+                    )}
+                    onClick={() => reset()}
+                    isDisabled={isSubmitting}
+                  >
+                    <FontAwesomeIcon icon={faClose} size="lg" />
+                  </IconButton>
+                </Tooltip>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
       )}
-      <AnimatePresence exitBeforeEnter>
-        {isDirty && (
-          <motion.div
-            key="options-save"
-            className="flex h-10 flex-shrink-0 items-center space-x-4 px-3"
-            initial={{ x: -10, opacity: 0 }}
-            animate={{ x: 0, opacity: 1 }}
-            exit={{ x: -10, opacity: 0 }}
-          >
-            <Tooltip content="Save">
-              <IconButton
-                ariaLabel="more"
-                variant="plain"
-                type="submit"
-                size="md"
-                className={twMerge(
-                  "p-0 text-primary opacity-0 group-hover:opacity-100",
-                  isDirty && "opacity-100"
-                )}
-                isDisabled={isSubmitting}
-              >
-                {isSubmitting ? (
-                  <Spinner className="m-0 h-4 w-4 p-0" />
-                ) : (
-                  <FontAwesomeIcon icon={faCheck} size="lg" className="text-primary" />
-                )}
-              </IconButton>
-            </Tooltip>
-            <Tooltip content="Cancel">
-              <IconButton
-                ariaLabel="more"
-                variant="plain"
-                size="md"
-                className={twMerge(
-                  "p-0 opacity-0 group-hover:opacity-100",
-                  isDirty && "opacity-100"
-                )}
-                onClick={() => reset()}
-                isDisabled={isSubmitting}
-              >
-                <FontAwesomeIcon icon={faClose} size="lg" />
-              </IconButton>
-            </Tooltip>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </form>
   );
 }