From 67c20479ef2074bc683b500110b5585f4275a3a2 Mon Sep 17 00:00:00 2001
From: Mayursinh Sarvaiya <marvinduff97@gmail.com>
Date: Wed, 18 Dec 2024 13:55:42 -0400
Subject: [PATCH] chore(ui): review updates

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>
---
 .../credentials/create-credentials-modal.tsx  | 20 ++++++----
 .../project/credentials/secret-editor.tsx     | 40 +++++++++++--------
 ui/src/features/project/credentials/utils.tsx |  4 +-
 3 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/ui/src/features/project/credentials/create-credentials-modal.tsx b/ui/src/features/project/credentials/create-credentials-modal.tsx
index 56b4a7260..3667faf33 100644
--- a/ui/src/features/project/credentials/create-credentials-modal.tsx
+++ b/ui/src/features/project/credentials/create-credentials-modal.tsx
@@ -43,7 +43,7 @@ const createFormSchema = (editing?: boolean) =>
         ),
         description: z.string().optional(),
         type: zodValidators.requiredString,
-        data: z.record(z.string(), z.string())
+        data: z.array(z.array(z.string()))
       })
     )
     .refine((data) => ['git', 'helm', 'image', 'generic'].includes(data.type), {
@@ -105,14 +105,23 @@ export const CreateCredentialsModal = ({ project, onSuccess, editing, init, ...p
       }}
       okText={editing ? 'Update' : 'Create'}
       onOk={handleSubmit((values) => {
+        const data: Record<string, string> = {};
+
+        if (values?.data?.length > 0) {
+          for (const [k, v] of values.data) {
+            data[k] = v;
+          }
+        }
+
         if (editing) {
           return updateCredentialsMutation.mutate({
             ...values,
             project,
-            name: init?.metadata?.name || ''
+            name: init?.metadata?.name || '',
+            data
           });
         } else {
-          createCredentialsMutation.mutate({ ...values, project });
+          createCredentialsMutation.mutate({ ...values, project, data });
         }
       })}
       title={
@@ -203,10 +212,7 @@ export const CreateCredentialsModal = ({ project, onSuccess, editing, init, ...p
       {credentialType === 'generic' && (
         <FieldContainer control={control} name='data' label='Secrets'>
           {({ field }) => (
-            <SecretEditor
-              secret={field.value as Record<string, string>}
-              onChange={field.onChange}
-            />
+            <SecretEditor secret={field.value as [string, string][]} onChange={field.onChange} />
           )}
         </FieldContainer>
       )}
diff --git a/ui/src/features/project/credentials/secret-editor.tsx b/ui/src/features/project/credentials/secret-editor.tsx
index 35f74d6fb..e89475850 100644
--- a/ui/src/features/project/credentials/secret-editor.tsx
+++ b/ui/src/features/project/credentials/secret-editor.tsx
@@ -5,19 +5,19 @@ import TextArea from 'antd/es/input/TextArea';
 import { useEffect, useState } from 'react';
 
 type SecretEditorProps = {
-  secret: Record<string, string>;
-  onChange: (newSecret: Record<string, string>) => void;
+  secret: [string, string][];
+  onChange: (newSecret: [string, string][]) => void;
 };
 
 export const SecretEditor = (props: SecretEditorProps) => {
-  const secretEntries = Object.entries(props.secret);
+  const secretEntries = props.secret;
 
   const [lockedSecrets, setLockedSecrets] = useState<string[]>([]);
 
   // if first render of this component has redacted secrets then it is edit mode
   // lock the existing secrets
   useEffect(() => {
-    setLockedSecrets(Object.keys(props.secret || {}));
+    setLockedSecrets(props.secret.map((secret) => secret[0]));
   }, []);
 
   return (
@@ -30,13 +30,15 @@ export const SecretEditor = (props: SecretEditorProps) => {
             onChange={(e) => {
               const newKey = e.target.value;
 
-              const newSecretData: Record<string, string> = { ...(props.secret || {}) };
-
-              delete newSecretData[key];
-
-              newSecretData[newKey] = value as string;
+              props.onChange(
+                secretEntries.map((entry, origIdx) => {
+                  if (idx === origIdx) {
+                    return [newKey, value];
+                  }
 
-              props.onChange(newSecretData);
+                  return entry;
+                })
+              );
             }}
             placeholder='key'
           />
@@ -67,7 +69,15 @@ export const SecretEditor = (props: SecretEditorProps) => {
               onChange={(e) => {
                 const newValue = e.target.value;
 
-                props.onChange({ ...(props.secret || {}), [key]: newValue });
+                props.onChange(
+                  secretEntries.map((entry) => {
+                    if (key === entry[0]) {
+                      return [key, newValue];
+                    }
+
+                    return entry;
+                  })
+                );
               }}
             />
           )}
@@ -77,16 +87,12 @@ export const SecretEditor = (props: SecretEditorProps) => {
             type='text'
             danger
             onClick={() => {
-              const newSecretData: Record<string, string> = { ...props.secret };
-
-              delete newSecretData[key];
-
-              props.onChange(newSecretData);
+              props.onChange(secretEntries.filter((_, origIdx) => idx !== origIdx));
             }}
           />
         </Flex>
       ))}
-      <Button onClick={() => props.onChange({ ...props.secret, '': '' })} className='mt-2'>
+      <Button onClick={() => props.onChange(secretEntries.concat([['', '']]))} className='mt-2'>
         Add k8s Secret
       </Button>
     </>
diff --git a/ui/src/features/project/credentials/utils.tsx b/ui/src/features/project/credentials/utils.tsx
index 5dfd25c03..c3c7620de 100644
--- a/ui/src/features/project/credentials/utils.tsx
+++ b/ui/src/features/project/credentials/utils.tsx
@@ -44,7 +44,7 @@ export const constructDefaults = (init?: Secret, type?: string) => {
       repoUrlIsRegex: false,
       username: '',
       password: '',
-      data: {}
+      data: []
     };
   }
 
@@ -67,5 +67,5 @@ export const redactSecretStringData = (secret: Secret) => {
     data[key] = '';
   }
 
-  return data;
+  return Object.entries(data);
 };