From 522d07a8d8d50ae68cce4878fd5bc50fe547c611 Mon Sep 17 00:00:00 2001
From: Keith Chong <kykchong@redhat.com>
Date: Wed, 4 Dec 2024 02:45:50 -0500
Subject: [PATCH] fix: UI: Nothing happens selecting cluster URL/Name dropdown
 (#13655) (#21028)

Signed-off-by: Keith Chong <kykchong@redhat.com>
---
 .../application-create-panel.tsx              | 67 +++++++++++++------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx b/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
index 4ccda11065605..b786d4c504da0 100644
--- a/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
+++ b/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
@@ -32,9 +32,9 @@ const DEFAULT_APP: Partial<models.Application> = {
     },
     spec: {
         destination: {
-            name: '',
+            name: undefined,
             namespace: '',
-            server: ''
+            server: undefined
         },
         source: {
             path: '',
@@ -108,18 +108,15 @@ 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);
     const app = deepMerge(DEFAULT_APP, props.app || {});
     const debouncedOnAppChanged = debounce(props.onAppChanged, 800);
+    const [destinationFieldChanges, setDestinationFieldChanges] = React.useState({destFormat: 'URL', destFormatChanged: null});
+    const comboSwitchedFromPanel = React.useRef(false);
+    let destinationComboValue = destinationFieldChanges.destFormat;
 
     React.useEffect(() => {
-        if (app?.spec?.destination?.name && app.spec.destination.name !== '') {
-            setDestFormat('NAME');
-        } else {
-            setDestFormat('URL');
-        }
-
+        comboSwitchedFromPanel.current = false;
         return () => {
             debouncedOnAppChanged.cancel();
         };
@@ -135,6 +132,41 @@ export const ApplicationCreatePanel = (props: {
         formApi.setAllValues(appToNormalize);
     }
 
+    const currentName = app.spec.destination.name;
+    const currentServer = app.spec.destination.server;
+    if (destinationFieldChanges.destFormatChanged !== null) {
+        if (destinationComboValue == 'NAME') {
+            if (currentName === undefined && currentServer !== undefined && comboSwitchedFromPanel.current === false) {
+                destinationComboValue = 'URL';
+            } else {
+                delete app.spec.destination.server;
+                if (currentName === undefined) {
+                    app.spec.destination.name = '';
+                }
+            }
+        } else {
+            if (currentServer === undefined && currentName !== undefined && comboSwitchedFromPanel.current === false) {
+                destinationComboValue = 'NAME';
+            } else {
+                delete app.spec.destination.name;
+                if (currentServer === undefined) {
+                    app.spec.destination.server = '';
+                }
+            }
+        }
+    } else {
+        if (currentName === undefined && currentServer === undefined) {
+            destinationComboValue = destinationFieldChanges.destFormat;
+            app.spec.destination.server = '';
+        } else {
+            if (currentName != undefined) {
+                destinationComboValue = 'NAME';
+            } else {
+                destinationComboValue = 'URL';
+            }
+        }
+    }
+
     return (
         <React.Fragment>
             <DataLoader
@@ -377,7 +409,7 @@ export const ApplicationCreatePanel = (props: {
                                             <div className='white-box'>
                                                 <p>DESTINATION</p>
                                                 <div className='row argo-form-row'>
-                                                    {(destFormat.toUpperCase() === 'URL' && (
+                                                    {(destinationComboValue.toUpperCase() === 'URL' && (
                                                         <div className='columns small-10'>
                                                             <FormField
                                                                 formApi={api}
@@ -405,22 +437,17 @@ export const ApplicationCreatePanel = (props: {
                                                             <DropDownMenu
                                                                 anchor={() => (
                                                                     <p>
-                                                                        {destFormat} <i className='fa fa-caret-down' />
+                                                                        {destinationComboValue} <i className='fa fa-caret-down' />
                                                                     </p>
                                                                 )}
                                                                 qeId='application-create-dropdown-destination'
                                                                 items={['URL', 'NAME'].map((type: 'URL' | 'NAME') => ({
                                                                     title: type,
                                                                     action: () => {
-                                                                        if (destFormat !== type) {
-                                                                            const updatedApp = api.getFormState().values as models.Application;
-                                                                            if (type === 'URL') {
-                                                                                delete updatedApp.spec.destination.name;
-                                                                            } else {
-                                                                                delete updatedApp.spec.destination.server;
-                                                                            }
-                                                                            api.setAllValues(updatedApp);
-                                                                            setDestFormat(type);
+                                                                        if (destinationComboValue !== type) {
+                                                                            destinationComboValue = type;
+                                                                            comboSwitchedFromPanel.current = true;
+                                                                            setDestinationFieldChanges({destFormat: type, destFormatChanged: 'changed'});
                                                                         }
                                                                     }
                                                                 }))}