fix: Retry checkbox unchecked unexpectedly; Sync up with YAML (argoproj#8682)

Signed-off-by: Keith Chong <kykchong@redhat.com>

Author: keithchong

ui/src/app/applications/components/application-create-panel/application-create-panel.tsx

@@ -104,6 +104,7 @@ export const ApplicationCreatePanel = (props: {
     const [yamlMode, setYamlMode] = React.useState(false);
     const [explicitPathType, setExplicitPathType] = React.useState<{path: string; type: models.AppSourceType}>(null);
     const [destFormat, setDestFormat] = React.useState('URL');
+    const [retry, setRetry] = React.useState(false);
 
     function normalizeTypeFields(formApi: FormApi, type: models.AppSourceType) {
         const app = formApi.getFormState().values;
@@ -221,7 +222,13 @@ export const ApplicationCreatePanel = (props: {
                                                 <div className='argo-form-row'>
                                                     <label>Sync Options</label>
                                                     <FormField formApi={api} field='spec.syncPolicy.syncOptions' component={ApplicationSyncOptionsField} />
-                                                    <ApplicationRetryOptions formApi={api} field='spec.syncPolicy.retry' />
+                                                    <ApplicationRetryOptions
+                                                        formApi={api}
+                                                        field='spec.syncPolicy.retry'
+                                                        retry={retry || (api.getFormState().values.spec.syncPolicy && api.getFormState().values.spec.syncPolicy.retry)}
+                                                        setRetry={setRetry}
+                                                        initValues={api.getFormState().values.spec.syncPolicy ? api.getFormState().values.spec.syncPolicy.retry : null}
+                                                    />
                                                 </div>
                                             </div>
                                         );

ui/src/app/applications/components/application-retry-options/application-retry-options.tsx

@@ -79,8 +79,20 @@ export const ApplicationRetryForm = ({initValues, field = 'retryStrategy'}: {ini
     );
 };
 
-export const ApplicationRetryOptions = ({formApi, initValues, field = 'retryStrategy'}: {formApi: FormApi; field?: string; initValues?: models.RetryStrategy}) => {
-    const [retry, setRetry] = React.useState(!!initValues);
+export const ApplicationRetryOptions = ({
+    formApi,
+    initValues,
+    field = 'retryStrategy',
+    retry,
+    setRetry
+}: {
+    formApi: FormApi;
+    field?: string;
+    initValues?: models.RetryStrategy;
+    retry?: boolean;
+    setRetry?: (value: boolean) => any;
+}) => {
+    const [retryInternal, setRetryInternal] = React.useState(!!initValues);
 
     const toggleRetry = (value: boolean) => {
         if (!value) {
@@ -97,15 +109,18 @@ export const ApplicationRetryOptions = ({formApi, initValues, field = 'retryStra
                 errors: newErrors
             });
         }
-
-        setRetry(value);
+        if (setRetry != null) {
+            setRetry(value);
+        } else {
+            setRetryInternal(value);
+        }
     };
-
+    const isChecked = setRetry != null ? retry : retryInternal;
     return (
         <div className='application-retry-options'>
-            <Checkbox id='retry' checked={retry} onChange={val => toggleRetry(val)} />
+            <Checkbox id='retry' checked={isChecked} onChange={val => toggleRetry(val)} />
             <label htmlFor='retry'>Retry</label>
-            {retry && <ApplicationRetryForm initValues={initValues} field={field} />}
+            {isChecked && <ApplicationRetryForm initValues={initValues} field={field} />}
         </div>
     );
 };