fix(ui): sync option label doesn't check corresponding box (#10863) (#…

…10876) * fix(ui): sync option label doesn't check corresponding box Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com> * fix: lint Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com> Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>
argoproj · Oct 10, 2022 · 8b78e94 · 8b78e94
1 parent 8fc1f80
commit 8b78e94
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/ui/src/app/applications/components/application-retry-options/application-retry-options.tsx b/ui/src/app/applications/components/application-retry-options/application-retry-options.tsx
@@ -84,13 +84,15 @@ export const ApplicationRetryOptions = ({
     initValues,
     field = 'retryStrategy',
     retry,
-    setRetry
+    setRetry,
+    id
 }: {
     formApi: FormApi;
     field?: string;
     initValues?: models.RetryStrategy;
     retry?: boolean;
     setRetry?: (value: boolean) => any;
+    id?: string;
 }) => {
     const [retryInternal, setRetryInternal] = React.useState(!!initValues);
 
@@ -118,8 +120,8 @@ export const ApplicationRetryOptions = ({
     const isChecked = setRetry != null ? retry : retryInternal;
     return (
         <div className='application-retry-options'>
-            <Checkbox id='retry' checked={isChecked} onChange={val => toggleRetry(val)} />
-            <label htmlFor='retry'>Retry</label>
+            <Checkbox id={`retry-${id}`} checked={isChecked} onChange={val => toggleRetry(val)} />
+            <label htmlFor={`retry-${id}`}>Retry</label>
             {isChecked && <ApplicationRetryForm initValues={initValues} field={field} />}
         </div>
     );

diff --git a/ui/src/app/applications/components/application-sync-options/application-sync-options.tsx b/ui/src/app/applications/components/application-sync-options/application-sync-options.tsx
@@ -11,6 +11,7 @@ export const FORCE_WARNING = `The resources will be synced using '--force' that
 export interface ApplicationSyncOptionProps {
     options: string[];
     onChanged: (updatedOptions: string[]) => any;
+    id?: string;
 }
 
 function selectOption(name: string, label: string, defaultVal: string, values: string[], props: ApplicationSyncOptionProps) {
@@ -47,7 +48,7 @@ function booleanOption(name: string, label: string, defaultVal: boolean, props:
     return (
         <React.Fragment>
             <Checkbox
-                id={`sync-option-${name}`}
+                id={`sync-option-${name}-${props.id}`}
                 checked={checked}
                 onChange={(val: boolean) => {
                     if (index < 0) {
@@ -58,7 +59,7 @@ function booleanOption(name: string, label: string, defaultVal: boolean, props:
                     }
                 }}
             />
-            <label htmlFor={`sync-option-${name}`}>{label}</label>{' '}
+            <label htmlFor={`sync-option-${name}-${props.id}`}>{label}</label>{' '}
             {warning && (
                 <>
                     <Tooltip content={warning}>
@@ -114,7 +115,7 @@ export const ApplicationSyncOptions = (props: ApplicationSyncOptionProps) => (
     </div>
 );
 
-export const ApplicationManualSyncFlags = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi}) => {
+export const ApplicationManualSyncFlags = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; id?: string}) => {
     const {
         fieldApi: {getValue, setValue, setTouched}
     } = props;
@@ -124,7 +125,7 @@ export const ApplicationManualSyncFlags = ReactForm.FormField((props: {fieldApi:
             {Object.keys(ManualSyncFlags).map(flag => (
                 <React.Fragment key={flag}>
                     <Checkbox
-                        id={`sync-option-${flag}`}
+                        id={`sync-option-${flag}-${props.id}`}
                         checked={val[flag]}
                         onChange={(newVal: boolean) => {
                             setTouched(true);
@@ -133,7 +134,7 @@ export const ApplicationManualSyncFlags = ReactForm.FormField((props: {fieldApi:
                             setValue(update);
                         }}
                     />
-                    <label htmlFor={`sync-option-${flag}`}>{ManualSyncFlags[flag as keyof typeof ManualSyncFlags]}</label>{' '}
+                    <label htmlFor={`sync-option-${flag}-${props.id}`}>{ManualSyncFlags[flag as keyof typeof ManualSyncFlags]}</label>{' '}
                 </React.Fragment>
             ))}
         </div>

diff --git a/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx b/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx
@@ -136,10 +136,15 @@ export const ApplicationSyncPanel = ({application, selectedResource, hide}: {app
                                                     formApi.setTouched('syncOptions', true);
                                                     formApi.setValue('syncOptions', opts);
                                                 }}
+                                                id='application-sync-panel'
                                             />
                                         </div>
 
-                                        <ApplicationRetryOptions formApi={formApi} initValues={application.spec.syncPolicy ? application.spec.syncPolicy.retry : null} />
+                                        <ApplicationRetryOptions
+                                            id='application-sync-panel'
+                                            formApi={formApi}
+                                            initValues={application.spec.syncPolicy ? application.spec.syncPolicy.retry : null}
+                                        />
 
                                         <label>Synchronize resources:</label>
                                         <div style={{float: 'right'}}>

diff --git a/ui/src/app/applications/components/applications-sync-panel/applications-sync-panel.tsx b/ui/src/app/applications/components/applications-sync-panel/applications-sync-panel.tsx
@@ -123,10 +123,11 @@ export const ApplicationsSyncPanel = ({show, apps, hide}: {show: boolean; apps:
                                                 formApi.setTouched('syncOptions', true);
                                                 formApi.setValue('syncOptions', opts);
                                             }}
+                                            id='applications-sync-panel'
                                         />
                                     </div>
 
-                                    <ApplicationRetryOptions formApi={formApi} />
+                                    <ApplicationRetryOptions id='applications-sync-panel' formApi={formApi} />
 
                                     <ApplicationSelector apps={apps} formApi={formApi} />
                                 </div>