fix(dashboard): pasting secrets into create secret modal

frontend/src/helpers/parseEnvVar.ts

@@ -1,14 +1,29 @@
 /** 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 (!pastedContent) {
+    return { key: "", value: "" };
+  }
 
-  if (!foundDelimiter) {
+  let firstDelimiterIndex = -1;
+  let foundDelimiter = "";
+
+  delimiters.forEach((delimiter) => {
+    const index = pastedContent.indexOf(delimiter);
+    if (index !== -1 && (firstDelimiterIndex === -1 || index < firstDelimiterIndex)) {
+      firstDelimiterIndex = index;
+      foundDelimiter = delimiter;
+    }
+  });
+
+  if (firstDelimiterIndex === -1) {
     return { key: pastedContent.trim(), value: "" };
   }
 
-  const [key, value] = pastedContent.split(foundDelimiter);
+  const key = pastedContent.substring(0, firstDelimiterIndex);
+  const value = pastedContent.substring(firstDelimiterIndex + foundDelimiter.length);
+
   return {
     key: key.trim(),
-    value: (value ?? "").trim()
+    value: value.trim()
   };
 };

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

@@ -46,6 +46,7 @@ export const CreateSecretForm = ({
     control,
     reset,
     setValue,
+    watch,
     formState: { errors, isSubmitting }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
   const { closePopUp } = usePopUpAction();
@@ -59,6 +60,9 @@ export const CreateSecretForm = ({
     canReadTags ? workspaceId : ""
   );
 
+  const secretValue = watch("value");
+  const secretKey = watch("key");
+
   const slugSchema = z.string().trim().toLowerCase().min(1);
   const createNewTag = async (slug: string) => {
     // TODO: Replace with slugSchema generic
@@ -108,13 +112,20 @@ 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);
+    if (!secretKey) {
+      setValue("key", key);
+    }
+    if (!secretValue) {
+      setValue("value", value);
+    }
+
+    if (!secretKey) {
+      e.preventDefault();
+    }
   };
 
   return (

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

@@ -46,6 +46,7 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
     control,
     reset,
     setValue,
+    watch,
     formState: { isSubmitting, errors }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
 
@@ -61,6 +62,9 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
     canReadTags ? workspaceId : ""
   );
 
+  const secretValue = watch("value");
+  const secretKey = watch("key");
+
   const handleFormSubmit = async ({ key, value, environments: selectedEnv, tags }: TFormSchema) => {
     const promises = selectedEnv.map(async (env) => {
       const environment = env.slug;
@@ -152,13 +156,20 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
   };
 
   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);
+    if (!secretKey) {
+      setValue("key", key);
+    }
+    if (!secretValue) {
+      setValue("value", value);
+    }
+
+    if (!secretKey) {
+      e.preventDefault();
+    }
   };
 
   const createWsTag = useCreateWsTag();