Check presence of error inside input debounced instead of running the…

… check at parent level
weaveworks · Dec 27, 2023 · 9cff624 · 9cff624
1 parent 5b17f76
commit 9cff624
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 17 deletions.
diff --git 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
@@ -146,15 +146,15 @@ const CreateExternalSecret = () => {
               label="EXTERNAL SECRET NAME"
               value={formData.secretName}
               handleFormData={val => handleFormData(val, 'secretName')}
-              error={formError === 'secretName' && !formData.secretName}
+              formError={formError}
             />
             <InputDebounced
               required
               name="dataSecretKey"
               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
@@ -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
@@ -155,17 +155,15 @@ const CreateSOPS = () => {
                 label="SECRET NAME"
                 value={formData.secretName}
                 handleFormData={val => handleFormData(val, 'secretName')}
-                error={formError === 'secretName' && !formData.secretName}
+                formError={formError}
               />
               <InputDebounced
                 required
                 name="secretNamespace"
                 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
@@ -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}