Secrets pr preview - user feedback on error

ui/src/components/Secrets/ExternalSecrets/ListSecretsStore.tsx

@@ -6,27 +6,31 @@ import { Select } from '../../../utils/form';
 
 const ListSecretsStore = ({
   value,
-  validateForm,
+  hasError,
   handleFormData,
   clusterName,
 }: {
   value: string;
-  validateForm: boolean;
+  hasError: 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={hasError}
       >
         {data?.stores?.length ? (
           data?.stores?.map((s, index: number) => {

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}
+                formError={formError}
               />
               <InputDebounced
                 name="dataSecretValue"

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,43 +136,44 @@ const CreateExternalSecret = () => {
         <NotificationsWrapper>
           <FormWrapperSecret
             noValidate
-            onSubmit={event => {
-              setValidateForm(true);
-              validateFormData(event, handleCreateSecret, setFormError);
-            }}
+            onSubmit={event =>
+              validateFormData(event, handleCreateSecret, setFormError)
+            }
           >
             <InputDebounced
               required
               name="secretName"
               label="EXTERNAL SECRET NAME"
               value={formData.secretName}
               handleFormData={val => handleFormData(val, 'secretName')}
-              error={validateForm && !formData.secretName}
+              formError={formError}
             />
             <InputDebounced
               required
               name="dataSecretKey"
               label="TARGET K8s SECRET NAME"
               value={formData.dataSecretKey}
               handleFormData={val => handleFormData(val, 'dataSecretKey')}
-              error={validateForm && !formData.dataSecretKey}
+              formError={formError}
             />
             <Flex column>
               <ListClusters
                 value={formData.clusterName}
-                validateForm={validateForm}
                 handleFormData={(val: any) => {
                   handleFormData(val, 'clusterName');
                   handleFormData('', 'secretStoreRef');
                 }}
+                hasError={formError === 'clusterName' && !formData.clusterName}
               />
             </Flex>
             {formData.clusterName && (
               <ListSecretsStore
-                validateForm={validateForm}
                 value={formData.secretStore}
                 handleFormData={(val: any) => handleSecretStoreChange(val)}
                 clusterName={formData.clusterName}
+                hasError={
+                  formError === 'secretStoreRef' && !formData.secretStore
+                }
               />
             )}
             {formData.secretStore && (
@@ -187,7 +187,7 @@ const CreateExternalSecret = () => {
                     return;
                   }}
                   disabled={true}
-                  error={validateForm && !formData.secretStoreType}
+                  formError={formError}
                 />
                 <InputDebounced
                   required
@@ -199,7 +199,7 @@ const CreateExternalSecret = () => {
                     !!formData.secretNamespace &&
                     formData.defaultSecretNamespace === formData.secretNamespace
                   }
-                  error={validateForm && !formData.secretNamespace}
+                  formError={formError}
                 />
               </Flex>
             )}
@@ -209,12 +209,12 @@ const CreateExternalSecret = () => {
               label="SECRET PATH"
               value={formData.secretPath}
               handleFormData={val => handleFormData(val, 'secretPath')}
-              error={validateForm && !formData.secretPath}
+              formError={formError}
             />
             <SecretProperty
               formData={formData}
               setFormData={setFormData}
-              validateForm={validateForm}
+              formError={formError}
             />
             <GitOps
               loading={loading}

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}
+            formError={formError}
           />
           <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}
+            formError={formError}
           />
           {formData.data.length > 1 && (
             <RemoveCircleOutlineIcon

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,35 +136,34 @@ 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');
                 }}
+                hasError={formError === 'clusterName' && !formData.clusterName}
               />
               <InputDebounced
                 required
                 name="secretName"
                 label="SECRET NAME"
                 value={formData.secretName}
                 handleFormData={val => handleFormData(val, 'secretName')}
-                error={validateForm && !formData.secretName}
+                formError={formError}
               />
               <InputDebounced
                 required
                 name="secretNamespace"
                 label="SECRET NAMESPACE"
                 value={formData.secretNamespace}
                 handleFormData={val => handleFormData(val, 'secretNamespace')}
-                error={validateForm && !formData.secretNamespace}
+                formError={formError}
               />
             </Flex>
             <h2>Encryption</h2>
@@ -182,12 +180,14 @@ const CreateSOPS = () => {
             </Select>
             {!!formData.clusterName && (
               <ListKustomizations
-                validateForm={validateForm}
                 value={formData.kustomization}
                 handleFormData={(val: any) =>
                   handleFormData(val, 'kustomization')
                 }
                 clusterName={formData.clusterName}
+                hasError={
+                  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}

ui/src/components/Secrets/Shared/ListClusters.tsx

@@ -6,23 +6,23 @@ import { Select } from '../../../utils/form';
 
 const ListClusters = ({
   value,
-  validateForm,
+  hasError,
   handleFormData,
 }: {
   value: string;
-  validateForm: boolean;
+  hasError: 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={hasError}
       >
         {data?.gitopsClusters
           ?.filter(e =>

ui/src/components/Secrets/Shared/ListKustomizations.tsx

@@ -6,24 +6,28 @@ import { Select } from '../../../utils/form';
 
 const ListKustomizations = ({
   value,
-  validateForm,
+  hasError,
   handleFormData,
   clusterName,
 }: {
   value: string;
-  validateForm: boolean;
+  hasError: boolean;
   handleFormData: (value: any) => void;
   clusterName: string;
 }) => {
-  const { isLoading, error, data } = useListKustomizationSOPS(
+  const {
+    isLoading,
+    error: listError,
+    data,
+  } = useListKustomizationSOPS(
     { clusterName },
     {
       retry: false,
     },
   );
 
   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={hasError}
       >
         {data?.kustomizations?.length ? (
           data?.kustomizations?.map((k, index: number) => {

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}