Merge pull request #2219 from LemmyMwaura/parse-secret-on-paste

feat: parse secrets (key,value) on paste

frontend/src/helpers/parseEnvVar.ts

@@ -0,0 +1,14 @@
+/** Extracts the key and value from a passed in env string based on the provided delimiters. */
+export const getKeyValue = (pastedContent: string, delimiters: string[]) => {
+  const foundDelimiter = delimiters.find((delimiter) => pastedContent.includes(delimiter));
+
+  if (!foundDelimiter) {
+    return { key: pastedContent.trim(), value: "" };
+  }
+
+  const [key, value] = pastedContent.split(foundDelimiter);
+  return {
+    key: key.trim(),
+    value: (value ?? "").trim()
+  };
+};

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -1,3 +1,4 @@
+import { ClipboardEvent } from 'react';
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -7,6 +8,7 @@ import { Button, FormControl, Input, Modal, ModalContent } from "@app/components
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { useCreateSecretV3 } from "@app/hooks/api";
 import { SecretType } from "@app/hooks/api/types";
+import { getKeyValue } from '@app/helpers/parseEnvVar';
 
 import { PopUpNames, usePopUpAction, usePopUpState } from "../../SecretMainPage.store";
 
@@ -38,6 +40,7 @@ export const CreateSecretForm = ({
     handleSubmit,
     control,
     reset,
+    setValue,
     formState: { errors, isSubmitting }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
   const { isOpen } = usePopUpState(PopUpNames.CreateSecretForm);
@@ -73,6 +76,16 @@ export const CreateSecretForm = ({
     }
   };
 
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const delimitters = [":", "="];
+    const pastedContent = e.clipboardData.getData("text");
+    const { key, value } = getKeyValue(pastedContent, delimitters);
+
+    setValue("key", key);
+    setValue("value", value);
+  }
+
   return (
     <Modal
       isOpen={isOpen}
@@ -87,6 +100,7 @@ export const CreateSecretForm = ({
             <Input
               {...register("key")}
               placeholder="Type your secret name"
+              onPaste={handlePaste}
               autoCapitalization={autoCapitalize}
             />
           </FormControl>

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -1,3 +1,4 @@
+import { ClipboardEvent } from 'react';
 import { Controller, useForm } from "react-hook-form";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -19,6 +20,7 @@ import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { useWorkspace } from "@app/context";
 import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
 import { SecretType,SecretV3RawSanitized } from "@app/hooks/api/types";
+import { getKeyValue } from '@app/helpers/parseEnvVar';
 
 const typeSchema = z
   .object({
@@ -54,6 +56,7 @@ export const CreateSecretForm = ({
     control,
     reset,
     watch,
+    setValue,
     formState: { isSubmitting, errors }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
   const newSecretKey = watch("key");
@@ -133,6 +136,17 @@ export const CreateSecretForm = ({
       });
     }
   };
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const delimitters = [":", "="];
+    const pastedContent = e.clipboardData.getData("text");
+    const { key, value } = getKeyValue(pastedContent, delimitters);
+
+    setValue("key", key);
+    setValue("value", value);
+  }
+
   return (
     <Modal isOpen={isOpen} onOpenChange={onTogglePopUp}>
       <ModalContent
@@ -145,6 +159,7 @@ export const CreateSecretForm = ({
             <Input
               {...register("key")}
               placeholder="Type your secret name"
+              onPaste={handlePaste}
               autoCapitalization={currentWorkspace?.autoCapitalization}
             />
           </FormControl>