From 430de5bcec77cf004860bd08893d7d986b074ffa Mon Sep 17 00:00:00 2001
From: AlinaGoaga <goaga.alina@gmail.com>
Date: Wed, 13 Dec 2023 16:05:06 +0100
Subject: [PATCH 1/6] Fix form validation for pr preview in external secret
 creation

---
 .../ExternalSecrets/ListSecretsStore.tsx      | 14 ++++++----
 .../ExternalSecrets/SecretProperty.tsx        |  6 ++--
 .../Secrets/ExternalSecrets/index.tsx         | 28 ++++++++++---------
 .../Secrets/Shared/ListClusters.tsx           | 10 +++----
 4 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx b/ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx
index f98de9ce8..b4ce24b36 100644
--- a/ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx
@@ -6,27 +6,31 @@ import { Select } from '../../../utils/form';
 
 const ListSecretsStore = ({
   value,
-  validateForm,
+  error,
   handleFormData,
   clusterName,
 }: {
   value: string;
-  validateForm: boolean;
+  error: boolean;
   handleFormData: (value: any) => void;
   clusterName: string;
 }) => {
-  const { data, isLoading, error } = useListExternalSecretStores({
+  const {
+    data,
+    isLoading,
+    error: listError,
+  } = useListExternalSecretStores({
     clusterName,
   });
   return (
-    <RequestStateHandler loading={isLoading} error={error as RequestError}>
+    <RequestStateHandler loading={isLoading} error={listError as RequestError}>
       <Select
         required
         name="secretStoreRef"
         label="SECRET STORE"
         onChange={event => handleFormData(event.target.value)}
         value={value}
-        error={validateForm && !value}
+        error={error}
       >
         {data?.stores?.length ? (
           data?.stores?.map((s, index: number) => {
diff --git a/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx b/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
index 6133ced85..09de88263 100644
--- a/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
@@ -14,12 +14,12 @@ const PropertiesSwitch = styled(Switch)`
 
 export const SecretProperty = ({
   formData,
-  validateForm,
   setFormData,
+  formError,
 }: {
   formData: ExternalSecret;
-  validateForm: boolean;
   setFormData: Dispatch<React.SetStateAction<any>>;
+  formError: string;
 }) => {
   const handleSecretChange = (id: number, isKey: boolean, value: string) => {
     setFormData((f: ExternalSecret) => ({
@@ -80,7 +80,7 @@ export const SecretProperty = ({
                 placeholder="Secret Property"
                 value={obj.key}
                 handleFormData={val => handleSecretChange(obj.id, true, val)}
-                error={validateForm && !obj.key}
+                error={formError === 'data' && !obj.key}
               />
               <InputDebounced
                 name="dataSecretValue"
diff --git a/ui/src/components/Secrets/ExternalSecrets/index.tsx b/ui/src/components/Secrets/ExternalSecrets/index.tsx
index 5929020c5..b75e7bf5c 100644
--- a/ui/src/components/Secrets/ExternalSecrets/index.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/index.tsx
@@ -37,7 +37,6 @@ const CreateExternalSecret = () => {
   const [showAuthDialog, setShowAuthDialog] = useState(false);
 
   const [formError, setFormError] = useState<string>('');
-  const [validateForm, setValidateForm] = useState<boolean>(false);
   const [formData, setFormData] = useState<ExternalSecret>(initialFormData);
   const handleFormData = (value: any, key: string) => {
     setFormData(f => ({ ...f, [key]: value }));
@@ -137,10 +136,9 @@ const CreateExternalSecret = () => {
         <NotificationsWrapper>
           <FormWrapperSecret
             noValidate
-            onSubmit={event => {
-              setValidateForm(true);
-              validateFormData(event, handleCreateSecret, setFormError);
-            }}
+            onSubmit={event =>
+              validateFormData(event, handleCreateSecret, setFormError)
+            }
           >
             <InputDebounced
               required
@@ -148,7 +146,7 @@ const CreateExternalSecret = () => {
               label="EXTERNAL SECRET NAME"
               value={formData.secretName}
               handleFormData={val => handleFormData(val, 'secretName')}
-              error={validateForm && !formData.secretName}
+              error={formError === 'secretName' && !formData.secretName}
             />
             <InputDebounced
               required
@@ -156,24 +154,24 @@ const CreateExternalSecret = () => {
               label="TARGET K8s SECRET NAME"
               value={formData.dataSecretKey}
               handleFormData={val => handleFormData(val, 'dataSecretKey')}
-              error={validateForm && !formData.dataSecretKey}
+              error={formError === 'dataSecretKey' && !formData.dataSecretKey}
             />
             <Flex column>
               <ListClusters
                 value={formData.clusterName}
-                validateForm={validateForm}
                 handleFormData={(val: any) => {
                   handleFormData(val, 'clusterName');
                   handleFormData('', 'secretStoreRef');
                 }}
+                error={formError === 'clusterName' && !formData.clusterName}
               />
             </Flex>
             {formData.clusterName && (
               <ListSecretsStore
-                validateForm={validateForm}
                 value={formData.secretStore}
                 handleFormData={(val: any) => handleSecretStoreChange(val)}
                 clusterName={formData.clusterName}
+                error={formError === 'secretStoreRef' && !formData.secretStore}
               />
             )}
             {formData.secretStore && (
@@ -187,7 +185,9 @@ const CreateExternalSecret = () => {
                     return;
                   }}
                   disabled={true}
-                  error={validateForm && !formData.secretStoreType}
+                  error={
+                    formError === 'secretStoreType' && !formData.secretStoreType
+                  }
                 />
                 <InputDebounced
                   required
@@ -199,7 +199,9 @@ const CreateExternalSecret = () => {
                     !!formData.secretNamespace &&
                     formData.defaultSecretNamespace === formData.secretNamespace
                   }
-                  error={validateForm && !formData.secretNamespace}
+                  error={
+                    formError === 'secretNamespace' && !formData.secretNamespace
+                  }
                 />
               </Flex>
             )}
@@ -209,12 +211,12 @@ const CreateExternalSecret = () => {
               label="SECRET PATH"
               value={formData.secretPath}
               handleFormData={val => handleFormData(val, 'secretPath')}
-              error={validateForm && !formData.secretPath}
+              error={formError === 'secretPath' && !formData.secretPath}
             />
             <SecretProperty
               formData={formData}
               setFormData={setFormData}
-              validateForm={validateForm}
+              formError={formError}
             />
             <GitOps
               loading={loading}
diff --git a/ui/src/components/Secrets/Shared/ListClusters.tsx b/ui/src/components/Secrets/Shared/ListClusters.tsx
index 409160b90..fa8159f54 100644
--- a/ui/src/components/Secrets/Shared/ListClusters.tsx
+++ b/ui/src/components/Secrets/Shared/ListClusters.tsx
@@ -6,23 +6,23 @@ import { Select } from '../../../utils/form';
 
 const ListClusters = ({
   value,
-  validateForm,
+  error,
   handleFormData,
 }: {
   value: string;
-  validateForm: boolean;
+  error: boolean;
   handleFormData: (value: any) => void;
 }) => {
-  const { isLoading, data, error } = useListCluster();
+  const { isLoading, data, error: listError } = useListCluster();
   return (
-    <RequestStateHandler loading={isLoading} error={error as RequestError}>
+    <RequestStateHandler loading={isLoading} error={listError as RequestError}>
       <Select
         name="clusterName"
         required={true}
         label="CLUSTER"
         onChange={event => handleFormData(event.target.value)}
         value={value}
-        error={validateForm && !value}
+        error={error}
       >
         {data?.gitopsClusters
           ?.filter(e =>

From 340181878feab9861c4b0afe5fbb380efb354b57 Mon Sep 17 00:00:00 2001
From: AlinaGoaga <goaga.alina@gmail.com>
Date: Wed, 13 Dec 2023 17:54:25 +0100
Subject: [PATCH 2/6] Fix form validation for pr preview in SOPS secret
 creation

---
 ui/src/components/Secrets/SOPS/SecretData.tsx |  8 ++++----
 ui/src/components/Secrets/SOPS/index.tsx      | 20 +++++++++----------
 .../Secrets/Shared/ListKustomizations.tsx     | 14 ++++++++-----
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/Secrets/SOPS/SecretData.tsx b/ui/src/components/Secrets/SOPS/SecretData.tsx
index 2c7f2a972..e56695fc0 100644
--- a/ui/src/components/Secrets/SOPS/SecretData.tsx
+++ b/ui/src/components/Secrets/SOPS/SecretData.tsx
@@ -6,12 +6,12 @@ import { ExternalSecret, SOPS } from '../Shared/utils';
 
 const data = ({
   formData,
-  validateForm,
   setFormData,
+  formError,
 }: {
   formData: SOPS | ExternalSecret;
-  validateForm: boolean;
   setFormData: Dispatch<React.SetStateAction<any>>;
+  formError: string;
 }) => {
   const handleSecretChange = (id: number, isKey: boolean, value: string) => {
     setFormData((f: ExternalSecret) => ({
@@ -58,7 +58,7 @@ const data = ({
             placeholder="Secret key"
             value={obj.key}
             handleFormData={val => handleSecretChange(obj.id, true, val)}
-            error={validateForm && !obj.key}
+            error={formError === 'data' && !obj.key}
           />
           <InputDebounced
             required
@@ -67,7 +67,7 @@ const data = ({
             placeholder="secret value"
             value={obj.value}
             handleFormData={val => handleSecretChange(obj.id, false, val)}
-            error={validateForm && !obj.value}
+            error={formError === 'data' && !obj.value}
           />
           {formData.data.length > 1 && (
             <RemoveCircleOutlineIcon
diff --git a/ui/src/components/Secrets/SOPS/index.tsx b/ui/src/components/Secrets/SOPS/index.tsx
index 9a522f957..c3b3a91dd 100644
--- a/ui/src/components/Secrets/SOPS/index.tsx
+++ b/ui/src/components/Secrets/SOPS/index.tsx
@@ -39,7 +39,6 @@ const CreateSOPS = () => {
   const [showAuthDialog, setShowAuthDialog] = useState(false);
 
   const [formError, setFormError] = useState<string>('');
-  const [validateForm, setValidateForm] = useState<boolean>(false);
   const [formData, setFormData] = useState<SOPS>(initialFormData);
   const handleFormData = (value: any, key: string) => {
     setFormData(f => ({ ...f, [key]: value }));
@@ -137,19 +136,18 @@ const CreateSOPS = () => {
         <NotificationsWrapper>
           <FormWrapperSecret
             noValidate
-            onSubmit={event => {
-              setValidateForm(true);
-              validateFormData(event, handleCreateSecret, setFormError);
-            }}
+            onSubmit={event =>
+              validateFormData(event, handleCreateSecret, setFormError)
+            }
           >
             <Flex column>
               <ListClusters
                 value={formData.clusterName}
-                validateForm={validateForm}
                 handleFormData={(val: any) => {
                   handleFormData(val, 'clusterName');
                   handleFormData('', 'kustomization');
                 }}
+                error={formError === 'clusterName' && !formData.clusterName}
               />
               <InputDebounced
                 required
@@ -157,7 +155,7 @@ const CreateSOPS = () => {
                 label="SECRET NAME"
                 value={formData.secretName}
                 handleFormData={val => handleFormData(val, 'secretName')}
-                error={validateForm && !formData.secretName}
+                error={formError === 'secretName' && !formData.secretName}
               />
               <InputDebounced
                 required
@@ -165,7 +163,9 @@ const CreateSOPS = () => {
                 label="SECRET NAMESPACE"
                 value={formData.secretNamespace}
                 handleFormData={val => handleFormData(val, 'secretNamespace')}
-                error={validateForm && !formData.secretNamespace}
+                error={
+                  formError === 'secretNamespace' && !formData.secretNamespace
+                }
               />
             </Flex>
             <h2>Encryption</h2>
@@ -182,12 +182,12 @@ const CreateSOPS = () => {
             </Select>
             {!!formData.clusterName && (
               <ListKustomizations
-                validateForm={validateForm}
                 value={formData.kustomization}
                 handleFormData={(val: any) =>
                   handleFormData(val, 'kustomization')
                 }
                 clusterName={formData.clusterName}
+                error={formError === 'kustomization' && !formData.kustomization}
               />
             )}
             <h2>Secret Data</h2>
@@ -198,7 +198,7 @@ const CreateSOPS = () => {
             <SecretData
               formData={formData}
               setFormData={setFormData}
-              validateForm={validateForm}
+              formError={formError}
             />
             <GitOps
               loading={loading}
diff --git a/ui/src/components/Secrets/Shared/ListKustomizations.tsx b/ui/src/components/Secrets/Shared/ListKustomizations.tsx
index f08c78b70..22068e7ca 100644
--- a/ui/src/components/Secrets/Shared/ListKustomizations.tsx
+++ b/ui/src/components/Secrets/Shared/ListKustomizations.tsx
@@ -6,16 +6,20 @@ import { Select } from '../../../utils/form';
 
 const ListKustomizations = ({
   value,
-  validateForm,
+  error,
   handleFormData,
   clusterName,
 }: {
   value: string;
-  validateForm: boolean;
+  error: boolean;
   handleFormData: (value: any) => void;
   clusterName: string;
 }) => {
-  const { isLoading, error, data } = useListKustomizationSOPS(
+  const {
+    isLoading,
+    error: listError,
+    data,
+  } = useListKustomizationSOPS(
     { clusterName },
     {
       retry: false,
@@ -23,7 +27,7 @@ const ListKustomizations = ({
   );
 
   return (
-    <RequestStateHandler loading={isLoading} error={error as RequestError}>
+    <RequestStateHandler loading={isLoading} error={listError as RequestError}>
       <Select
         className="form-section"
         required
@@ -32,7 +36,7 @@ const ListKustomizations = ({
         description="Choose the kustomization that will be used by SOPS to decrypt the secret."
         onChange={event => handleFormData(event.target.value)}
         value={value}
-        error={validateForm && !value}
+        error={error}
       >
         {data?.kustomizations?.length ? (
           data?.kustomizations?.map((k, index: number) => {

From 27a103997369526595065c987f9a44e40557424e Mon Sep 17 00:00:00 2001
From: AlinaGoaga <goaga.alina@gmail.com>
Date: Thu, 14 Dec 2023 17:07:20 +0100
Subject: [PATCH 3/6] Update SecretProperty and SecretData validation in
 secrets creation

---
 .../components/Secrets/ExternalSecrets/SecretProperty.tsx   | 2 +-
 ui/src/components/Secrets/ExternalSecrets/index.tsx         | 3 ++-
 ui/src/components/Secrets/SOPS/SecretData.tsx               | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx b/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
index 09de88263..ee36151e9 100644
--- a/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
@@ -80,7 +80,7 @@ export const SecretProperty = ({
                 placeholder="Secret Property"
                 value={obj.key}
                 handleFormData={val => handleSecretChange(obj.id, true, val)}
-                error={formError === 'data' && !obj.key}
+                error={formError === 'dataSecretKey' && !obj.key}
               />
               <InputDebounced
                 name="dataSecretValue"
diff --git a/ui/src/components/Secrets/ExternalSecrets/index.tsx b/ui/src/components/Secrets/ExternalSecrets/index.tsx
index b75e7bf5c..d9e7d17c6 100644
--- a/ui/src/components/Secrets/ExternalSecrets/index.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/index.tsx
@@ -168,7 +168,8 @@ const CreateExternalSecret = () => {
             </Flex>
             {formData.clusterName && (
               <ListSecretsStore
-                value={formData.secretStore}
+                // value={formData.secretStore}
+                value="test"
                 handleFormData={(val: any) => handleSecretStoreChange(val)}
                 clusterName={formData.clusterName}
                 error={formError === 'secretStoreRef' && !formData.secretStore}
diff --git a/ui/src/components/Secrets/SOPS/SecretData.tsx b/ui/src/components/Secrets/SOPS/SecretData.tsx
index e56695fc0..51cfe719a 100644
--- a/ui/src/components/Secrets/SOPS/SecretData.tsx
+++ b/ui/src/components/Secrets/SOPS/SecretData.tsx
@@ -13,6 +13,8 @@ const data = ({
   setFormData: Dispatch<React.SetStateAction<any>>;
   formError: string;
 }) => {
+  console.log(formError);
+
   const handleSecretChange = (id: number, isKey: boolean, value: string) => {
     setFormData((f: ExternalSecret) => ({
       ...f,
@@ -58,7 +60,7 @@ const data = ({
             placeholder="Secret key"
             value={obj.key}
             handleFormData={val => handleSecretChange(obj.id, true, val)}
-            error={formError === 'data' && !obj.key}
+            error={formError === 'dataSecretKey' && !obj.key}
           />
           <InputDebounced
             required
@@ -67,7 +69,7 @@ const data = ({
             placeholder="secret value"
             value={obj.value}
             handleFormData={val => handleSecretChange(obj.id, false, val)}
-            error={formError === 'data' && !obj.value}
+            error={formError === 'dataSecretValue' && !obj.value}
           />
           {formData.data.length > 1 && (
             <RemoveCircleOutlineIcon

From 648c508b0310e8847996d2b252b85ef431af0fc6 Mon Sep 17 00:00:00 2001
From: AlinaGoaga <goaga.alina@gmail.com>
Date: Thu, 14 Dec 2023 17:10:04 +0100
Subject: [PATCH 4/6] Small cleanup

---
 ui/src/components/Secrets/ExternalSecrets/index.tsx | 3 +--
 ui/src/components/Secrets/SOPS/SecretData.tsx       | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/ui/src/components/Secrets/ExternalSecrets/index.tsx b/ui/src/components/Secrets/ExternalSecrets/index.tsx
index d9e7d17c6..b75e7bf5c 100644
--- a/ui/src/components/Secrets/ExternalSecrets/index.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/index.tsx
@@ -168,8 +168,7 @@ const CreateExternalSecret = () => {
             </Flex>
             {formData.clusterName && (
               <ListSecretsStore
-                // value={formData.secretStore}
-                value="test"
+                value={formData.secretStore}
                 handleFormData={(val: any) => handleSecretStoreChange(val)}
                 clusterName={formData.clusterName}
                 error={formError === 'secretStoreRef' && !formData.secretStore}
diff --git a/ui/src/components/Secrets/SOPS/SecretData.tsx b/ui/src/components/Secrets/SOPS/SecretData.tsx
index 51cfe719a..6425c976d 100644
--- a/ui/src/components/Secrets/SOPS/SecretData.tsx
+++ b/ui/src/components/Secrets/SOPS/SecretData.tsx
@@ -13,8 +13,6 @@ const data = ({
   setFormData: Dispatch<React.SetStateAction<any>>;
   formError: string;
 }) => {
-  console.log(formError);
-
   const handleSecretChange = (id: number, isKey: boolean, value: string) => {
     setFormData((f: ExternalSecret) => ({
       ...f,

From 989a7a23d1af23ddd4adaefebd38610a58b37e3b Mon Sep 17 00:00:00 2001
From: AlinaGoaga <goaga.alina@gmail.com>
Date: Wed, 27 Dec 2023 17:06:46 +0100
Subject: [PATCH 5/6] Update the passing of error status in ListSecretsStore,
 ListClusters, ListKustomizations to make it easier for user to follow the
 flow

---
 .../components/Secrets/ExternalSecrets/ListSecretsStore.tsx | 6 +++---
 ui/src/components/Secrets/ExternalSecrets/index.tsx         | 6 ++++--
 ui/src/components/Secrets/SOPS/index.tsx                    | 6 ++++--
 ui/src/components/Secrets/Shared/ListClusters.tsx           | 6 +++---
 ui/src/components/Secrets/Shared/ListKustomizations.tsx     | 6 +++---
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx b/ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx
index b4ce24b36..3ffb470fc 100644
--- a/ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx
@@ -6,12 +6,12 @@ import { Select } from '../../../utils/form';
 
 const ListSecretsStore = ({
   value,
-  error,
+  hasError,
   handleFormData,
   clusterName,
 }: {
   value: string;
-  error: boolean;
+  hasError: boolean;
   handleFormData: (value: any) => void;
   clusterName: string;
 }) => {
@@ -30,7 +30,7 @@ const ListSecretsStore = ({
         label="SECRET STORE"
         onChange={event => handleFormData(event.target.value)}
         value={value}
-        error={error}
+        error={hasError}
       >
         {data?.stores?.length ? (
           data?.stores?.map((s, index: number) => {
diff --git a/ui/src/components/Secrets/ExternalSecrets/index.tsx b/ui/src/components/Secrets/ExternalSecrets/index.tsx
index b75e7bf5c..ffbf1508f 100644
--- a/ui/src/components/Secrets/ExternalSecrets/index.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/index.tsx
@@ -163,7 +163,7 @@ const CreateExternalSecret = () => {
                   handleFormData(val, 'clusterName');
                   handleFormData('', 'secretStoreRef');
                 }}
-                error={formError === 'clusterName' && !formData.clusterName}
+                hasError={formError === 'clusterName' && !formData.clusterName}
               />
             </Flex>
             {formData.clusterName && (
@@ -171,7 +171,9 @@ const CreateExternalSecret = () => {
                 value={formData.secretStore}
                 handleFormData={(val: any) => handleSecretStoreChange(val)}
                 clusterName={formData.clusterName}
-                error={formError === 'secretStoreRef' && !formData.secretStore}
+                hasError={
+                  formError === 'secretStoreRef' && !formData.secretStore
+                }
               />
             )}
             {formData.secretStore && (
diff --git a/ui/src/components/Secrets/SOPS/index.tsx b/ui/src/components/Secrets/SOPS/index.tsx
index c3b3a91dd..56136776e 100644
--- a/ui/src/components/Secrets/SOPS/index.tsx
+++ b/ui/src/components/Secrets/SOPS/index.tsx
@@ -147,7 +147,7 @@ const CreateSOPS = () => {
                   handleFormData(val, 'clusterName');
                   handleFormData('', 'kustomization');
                 }}
-                error={formError === 'clusterName' && !formData.clusterName}
+                hasError={formError === 'clusterName' && !formData.clusterName}
               />
               <InputDebounced
                 required
@@ -187,7 +187,9 @@ const CreateSOPS = () => {
                   handleFormData(val, 'kustomization')
                 }
                 clusterName={formData.clusterName}
-                error={formError === 'kustomization' && !formData.kustomization}
+                hasError={
+                  formError === 'kustomization' && !formData.kustomization
+                }
               />
             )}
             <h2>Secret Data</h2>
diff --git a/ui/src/components/Secrets/Shared/ListClusters.tsx b/ui/src/components/Secrets/Shared/ListClusters.tsx
index fa8159f54..654a18405 100644
--- a/ui/src/components/Secrets/Shared/ListClusters.tsx
+++ b/ui/src/components/Secrets/Shared/ListClusters.tsx
@@ -6,11 +6,11 @@ import { Select } from '../../../utils/form';
 
 const ListClusters = ({
   value,
-  error,
+  hasError,
   handleFormData,
 }: {
   value: string;
-  error: boolean;
+  hasError: boolean;
   handleFormData: (value: any) => void;
 }) => {
   const { isLoading, data, error: listError } = useListCluster();
@@ -22,7 +22,7 @@ const ListClusters = ({
         label="CLUSTER"
         onChange={event => handleFormData(event.target.value)}
         value={value}
-        error={error}
+        error={hasError}
       >
         {data?.gitopsClusters
           ?.filter(e =>
diff --git a/ui/src/components/Secrets/Shared/ListKustomizations.tsx b/ui/src/components/Secrets/Shared/ListKustomizations.tsx
index 22068e7ca..e0f402acb 100644
--- a/ui/src/components/Secrets/Shared/ListKustomizations.tsx
+++ b/ui/src/components/Secrets/Shared/ListKustomizations.tsx
@@ -6,12 +6,12 @@ import { Select } from '../../../utils/form';
 
 const ListKustomizations = ({
   value,
-  error,
+  hasError,
   handleFormData,
   clusterName,
 }: {
   value: string;
-  error: boolean;
+  hasError: boolean;
   handleFormData: (value: any) => void;
   clusterName: string;
 }) => {
@@ -36,7 +36,7 @@ const ListKustomizations = ({
         description="Choose the kustomization that will be used by SOPS to decrypt the secret."
         onChange={event => handleFormData(event.target.value)}
         value={value}
-        error={error}
+        error={hasError}
       >
         {data?.kustomizations?.length ? (
           data?.kustomizations?.map((k, index: number) => {

From 9cff6242ff980675828c13433ef5767c2e2e2f14 Mon Sep 17 00:00:00 2001
From: AlinaGoaga <goaga.alina@gmail.com>
Date: Wed, 27 Dec 2023 19:05:49 +0100
Subject: [PATCH 6/6] Check presence of error inside input debounced instead of
 running the check at parent level

---
 .../Secrets/ExternalSecrets/SecretProperty.tsx     |  2 +-
 .../components/Secrets/ExternalSecrets/index.tsx   | 14 +++++---------
 ui/src/components/Secrets/SOPS/SecretData.tsx      |  4 ++--
 ui/src/components/Secrets/SOPS/index.tsx           |  6 ++----
 ui/src/utils/form.tsx                              |  5 ++++-
 5 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx b/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
index ee36151e9..0647a17fe 100644
--- a/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/SecretProperty.tsx
@@ -80,7 +80,7 @@ export const SecretProperty = ({
                 placeholder="Secret Property"
                 value={obj.key}
                 handleFormData={val => handleSecretChange(obj.id, true, val)}
-                error={formError === 'dataSecretKey' && !obj.key}
+                formError={formError}
               />
               <InputDebounced
                 name="dataSecretValue"
diff --git a/ui/src/components/Secrets/ExternalSecrets/index.tsx b/ui/src/components/Secrets/ExternalSecrets/index.tsx
index ffbf1508f..6e07546d0 100644
--- a/ui/src/components/Secrets/ExternalSecrets/index.tsx
+++ b/ui/src/components/Secrets/ExternalSecrets/index.tsx
@@ -146,7 +146,7 @@ const CreateExternalSecret = () => {
               label="EXTERNAL SECRET NAME"
               value={formData.secretName}
               handleFormData={val => handleFormData(val, 'secretName')}
-              error={formError === 'secretName' && !formData.secretName}
+              formError={formError}
             />
             <InputDebounced
               required
@@ -154,7 +154,7 @@ const CreateExternalSecret = () => {
               label="TARGET K8s SECRET NAME"
               value={formData.dataSecretKey}
               handleFormData={val => handleFormData(val, 'dataSecretKey')}
-              error={formError === 'dataSecretKey' && !formData.dataSecretKey}
+              formError={formError}
             />
             <Flex column>
               <ListClusters
@@ -187,9 +187,7 @@ const CreateExternalSecret = () => {
                     return;
                   }}
                   disabled={true}
-                  error={
-                    formError === 'secretStoreType' && !formData.secretStoreType
-                  }
+                  formError={formError}
                 />
                 <InputDebounced
                   required
@@ -201,9 +199,7 @@ const CreateExternalSecret = () => {
                     !!formData.secretNamespace &&
                     formData.defaultSecretNamespace === formData.secretNamespace
                   }
-                  error={
-                    formError === 'secretNamespace' && !formData.secretNamespace
-                  }
+                  formError={formError}
                 />
               </Flex>
             )}
@@ -213,7 +209,7 @@ const CreateExternalSecret = () => {
               label="SECRET PATH"
               value={formData.secretPath}
               handleFormData={val => handleFormData(val, 'secretPath')}
-              error={formError === 'secretPath' && !formData.secretPath}
+              formError={formError}
             />
             <SecretProperty
               formData={formData}
diff --git a/ui/src/components/Secrets/SOPS/SecretData.tsx b/ui/src/components/Secrets/SOPS/SecretData.tsx
index 6425c976d..99cdcb03b 100644
--- a/ui/src/components/Secrets/SOPS/SecretData.tsx
+++ b/ui/src/components/Secrets/SOPS/SecretData.tsx
@@ -58,7 +58,7 @@ const data = ({
             placeholder="Secret key"
             value={obj.key}
             handleFormData={val => handleSecretChange(obj.id, true, val)}
-            error={formError === 'dataSecretKey' && !obj.key}
+            formError={formError}
           />
           <InputDebounced
             required
@@ -67,7 +67,7 @@ const data = ({
             placeholder="secret value"
             value={obj.value}
             handleFormData={val => handleSecretChange(obj.id, false, val)}
-            error={formError === 'dataSecretValue' && !obj.value}
+            formError={formError}
           />
           {formData.data.length > 1 && (
             <RemoveCircleOutlineIcon
diff --git a/ui/src/components/Secrets/SOPS/index.tsx b/ui/src/components/Secrets/SOPS/index.tsx
index 56136776e..c5497857e 100644
--- a/ui/src/components/Secrets/SOPS/index.tsx
+++ b/ui/src/components/Secrets/SOPS/index.tsx
@@ -155,7 +155,7 @@ const CreateSOPS = () => {
                 label="SECRET NAME"
                 value={formData.secretName}
                 handleFormData={val => handleFormData(val, 'secretName')}
-                error={formError === 'secretName' && !formData.secretName}
+                formError={formError}
               />
               <InputDebounced
                 required
@@ -163,9 +163,7 @@ const CreateSOPS = () => {
                 label="SECRET NAMESPACE"
                 value={formData.secretNamespace}
                 handleFormData={val => handleFormData(val, 'secretNamespace')}
-                error={
-                  formError === 'secretNamespace' && !formData.secretNamespace
-                }
+                formError={formError}
               />
             </Flex>
             <h2>Encryption</h2>
diff --git a/ui/src/utils/form.tsx b/ui/src/utils/form.tsx
index 96ab012ad..51aa0f24a 100644
--- a/ui/src/utils/form.tsx
+++ b/ui/src/utils/form.tsx
@@ -226,15 +226,17 @@ export const validateFormData = (
 
 interface InputDebounceProps extends InputProps {
   value?: string;
+  formError?: string;
   handleFormData: (value: any) => void;
 }
 
 export const InputDebounced: FC<InputDebounceProps> = ({
   value,
-  error,
+  formError,
   handleFormData,
   ...rest
 }) => {
+  const error = formError === rest.name && !value;
   const [data, setData] = useState<string>(value || '');
   const [inputError, setInputError] = useState<boolean>(error || false);
 
@@ -263,6 +265,7 @@ export const InputDebounced: FC<InputDebounceProps> = ({
 
   return (
     <Input
+      required={rest.required}
       className="form-section"
       {...rest}
       value={data}