From aeac1c80a0dcb21538fe63d41821296d63142f13 Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Fri, 1 Nov 2024 14:48:36 -0400
Subject: [PATCH] Properly reset single select option only when ready

Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
---
 frontend/src/components/SimpleSelect.tsx             | 10 ++++++----
 .../InferenceServiceFrameworkSection.tsx             | 12 +++---------
 .../ManageInferenceServiceModal.tsx                  |  1 -
 .../InferenceServiceModal/useModelFramework.ts       | 10 ++++++----
 .../projects/kServeModal/ManageKServeModal.tsx       |  1 -
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/SimpleSelect.tsx b/frontend/src/components/SimpleSelect.tsx
index ec123cce3a..f4da04284a 100644
--- a/frontend/src/components/SimpleSelect.tsx
+++ b/frontend/src/components/SimpleSelect.tsx
@@ -36,6 +36,7 @@ export type SimpleGroupSelectOption = {
 
 type SimpleSelectProps = {
   options?: SimpleSelectOption[];
+  isLoadingOptions?: boolean;
   groupedOptions?: SimpleGroupSelectOption[];
   value?: string;
   toggleLabel?: React.ReactNode;
@@ -56,6 +57,7 @@ const SimpleSelect: React.FC<SimpleSelectProps> = ({
   isDisabled,
   onChange,
   options,
+  isLoadingOptions = false,
   groupedOptions,
   placeholder = 'Select...',
   value,
@@ -88,14 +90,14 @@ const SimpleSelect: React.FC<SimpleSelectProps> = ({
   );
 
   // If there is only one option, call the onChange function
-  const totalOptionsKey = totalOptions.length === 1 ? totalOptions[0].key : null;
   React.useEffect(() => {
-    if (totalOptionsKey) {
-      onChange(totalOptionsKey, false);
+    const singleOptionKey = totalOptions.length === 1 ? totalOptions[0].key : null;
+    if (singleOptionKey && !isLoadingOptions) {
+      onChange(singleOptionKey, false);
     }
     // We don't want the callback function to be a dependency
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [totalOptionsKey]);
+  }, [totalOptions, isLoadingOptions]);
 
   return (
     <>
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
index 7457cd256c..8b0bd61076 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
@@ -18,7 +18,6 @@ type InferenceServiceFrameworkSectionProps = {
   setData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
   modelContext?: SupportedModelFormats[];
   registeredModelFormat?: string;
-  selectedRuntimeName?: string;
 };
 
 const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectionProps> = ({
@@ -26,7 +25,6 @@ const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectio
   setData,
   modelContext,
   registeredModelFormat,
-  selectedRuntimeName,
 }) => {
   const [modelsContextLoaded, loaded, loadError] = useModelFramework(
     modelContext ? undefined : data.servingRuntimeName,
@@ -62,14 +60,11 @@ const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectio
             ? `${framework.name} - ${framework.version}`
             : `${framework.name}`;
           return {
-            // SimpleSelect component will only trigger onChange
-            // when there is only one option and has a different key
-            // We need to make the key unique to make sure it can
-            // be auto-selected when different serving runtimes have the same one option
-            key: `${selectedRuntimeName} - ${name}`,
+            key: name,
             label: name,
           };
         })}
+        isLoadingOptions={!modelContext && !loaded}
         isFullWidth
         toggleLabel={
           dataFormatVersion
@@ -77,8 +72,7 @@ const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectio
             : dataFormatName || placeholderText
         }
         onChange={(option) => {
-          // De-constructing and omit selected serving runtime name
-          const [, name, version] = option.split(' - ');
+          const [name, version] = option.split(' - ');
           setData('format', { name, version });
         }}
       />
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
index 5f58425fd8..0f17c0410a 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
@@ -205,7 +205,6 @@ const ManageInferenceServiceModal: React.FC<ManageInferenceServiceModalProps> =
                   setData={setCreateData}
                   modelContext={projectContext?.currentServingRuntime?.spec.supportedModelFormats}
                   registeredModelFormat={registeredModelDeployInfo?.modelFormat}
-                  selectedRuntimeName={createData.servingRuntimeName}
                 />
               </StackItem>
               <StackItem>
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/useModelFramework.ts b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/useModelFramework.ts
index 58c3443a42..3a9d4be53a 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/useModelFramework.ts
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/useModelFramework.ts
@@ -7,7 +7,9 @@ const useModelFramework = (
   namespace?: string,
 ): [models: SupportedModelFormats[], loaded: boolean, loadError: Error | undefined] => {
   const [models, setModels] = React.useState<SupportedModelFormats[]>([]);
-  const [loaded, setLoaded] = React.useState(false);
+  const [loadedFrameworksForRuntimeName, setLoadedFrameworksForRuntimeName] = React.useState<
+    string | null
+  >(null);
   const [loadError, setLoadError] = React.useState<Error | undefined>(undefined);
 
   React.useEffect(() => {
@@ -15,18 +17,18 @@ const useModelFramework = (
       return;
     }
     setLoadError(undefined);
-    setLoaded(false);
+    setLoadedFrameworksForRuntimeName(null);
     getServingRuntime(name, namespace)
       .then((servingRuntime) => {
         setModels(servingRuntime.spec.supportedModelFormats || []);
-        setLoaded(true);
+        setLoadedFrameworksForRuntimeName(name);
       })
       .catch((e) => {
         setLoadError(e);
       });
   }, [name, namespace]);
 
-  return [models, loaded, loadError];
+  return [models, loadedFrameworksForRuntimeName === name, loadError];
 };
 
 export default useModelFramework;
diff --git a/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx b/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx
index 3f74b58594..332d41e107 100644
--- a/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx
@@ -376,7 +376,6 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
                     setData={setCreateDataInferenceService}
                     modelContext={servingRuntimeSelected?.spec.supportedModelFormats}
                     registeredModelFormat={registeredModelDeployInfo?.modelFormat}
-                    selectedRuntimeName={servingRuntimeSelected?.metadata.name}
                   />
                   <KServeAutoscalerReplicaSection
                     data={createDataInferenceService}