Make SimpleSelect one-option hook triggered on key instead of the opt…

…ions (opendatahub-io#3488)
ppadti · Nov 19, 2024 · a2e37f7 · a2e37f7
1 parent 49a9e6c
commit a2e37f7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/frontend/src/components/SimpleSelect.tsx b/frontend/src/components/SimpleSelect.tsx
@@ -27,6 +27,7 @@ export type SimpleSelectOption = {
   isDisabled?: boolean;
   isFavorited?: boolean;
   dataTestId?: string;
+  optionKey?: string; // Used to differentiate the only option with the same key to trigger the one-option hook in the component
 };
 
 export type SimpleGroupSelectOption = {
@@ -37,7 +38,6 @@ export type SimpleGroupSelectOption = {
 
 type SimpleSelectProps = {
   options?: SimpleSelectOption[];
-  isLoadingOptions?: boolean;
   groupedOptions?: SimpleGroupSelectOption[];
   value?: string;
   toggleLabel?: React.ReactNode;
@@ -59,7 +59,6 @@ const SimpleSelect: React.FC<SimpleSelectProps> = ({
   isDisabled,
   onChange,
   options,
-  isLoadingOptions = false,
   groupedOptions,
   placeholder = 'Select...',
   value,
@@ -92,15 +91,16 @@ const SimpleSelect: React.FC<SimpleSelectProps> = ({
     [options, groupedOptionsFlat],
   );
 
+  const singleOptionKey =
+    totalOptions.length === 1 ? totalOptions[0].optionKey || totalOptions[0].key : null;
   // If there is only one option, call the onChange function
   React.useEffect(() => {
-    const singleOptionKey = totalOptions.length === 1 ? totalOptions[0].key : null;
-    if (singleOptionKey && !isLoadingOptions) {
-      onChange(singleOptionKey, false);
+    if (singleOptionKey && !isSkeleton) {
+      onChange(totalOptions[0].key, false);
     }
     // We don't want the callback function to be a dependency
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [totalOptions, isLoadingOptions]);
+  }, [singleOptionKey, isSkeleton]);
 
   if (isSkeleton) {
     return (

diff --git a/.../modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx b/.../modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
@@ -17,13 +17,15 @@ type InferenceServiceFrameworkSectionProps = {
   setData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
   modelContext?: SupportedModelFormats[];
   registeredModelFormat?: string;
+  servingRuntimeName?: string;
 };
 
 const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectionProps> = ({
   data,
   setData,
   modelContext,
   registeredModelFormat,
+  servingRuntimeName,
 }) => {
   const [modelsContextLoaded, loaded, loadError] = useModelFramework(
     modelContext ? undefined : data.servingRuntimeName,
@@ -56,12 +58,12 @@ const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectio
             ? `${framework.name} - ${framework.version}`
             : `${framework.name}`;
           return {
+            optionKey: `${servingRuntimeName}-${name}`,
             key: name,
             label: name,
           };
         })}
         isSkeleton={!modelContext && !loaded && data.servingRuntimeName !== ''}
-        isLoadingOptions={!modelContext && !loaded}
         isFullWidth
         toggleLabel={
           dataFormatVersion

diff --git a/...pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx b/...pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
@@ -203,6 +203,7 @@ const ManageInferenceServiceModal: React.FC<ManageInferenceServiceModalProps> =
                 <InferenceServiceFrameworkSection
                   data={createData}
                   setData={setCreateData}
+                  servingRuntimeName={projectContext?.currentServingRuntime?.metadata.name}
                   modelContext={projectContext?.currentServingRuntime?.spec.supportedModelFormats}
                   registeredModelFormat={registeredModelDeployInfo?.modelFormat}
                 />

diff --git a/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx b/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx
@@ -390,6 +390,7 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
                   <InferenceServiceFrameworkSection
                     data={createDataInferenceService}
                     setData={setCreateDataInferenceService}
+                    servingRuntimeName={servingRuntimeSelected?.metadata.name}
                     modelContext={servingRuntimeSelected?.spec.supportedModelFormats}
                     registeredModelFormat={registeredModelDeployInfo?.modelFormat}
                   />