Refactor useDefaultStorageClass hook to use FetchState (#3319)

opendatahub-io · Oct 10, 2024 · 355fbf7 · 355fbf7
1 parent 998d320
commit 355fbf7
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 27 deletions.
diff --git a/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx b/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
@@ -84,7 +84,7 @@ const SpawnerPage: React.FC = () => {
   const [variableRows, setVariableRows] = React.useState<VariableRow[]>([]);
   const [submitError, setSubmitError] = React.useState<Error | null>(null);
 
-  const defaultStorageClass = useDefaultStorageClass();
+  const [defaultStorageClass, defaultStorageClassLoaded] = useDefaultStorageClass();
 
   const [selectedAcceleratorProfile, setSelectedAcceleratorProfile] =
     useGenericObjectState<AcceleratorProfileSelectFieldState>({
@@ -99,7 +99,8 @@ const SpawnerPage: React.FC = () => {
       ({ errors, variables }) =>
         Object.keys(errors).length > 0 ||
         variables.find((variable) => !variable.name || variable.name === EMPTY_KEY),
-    );
+    ) ||
+    !defaultStorageClassLoaded;
 
   React.useEffect(() => {
     const setFirstValidImage = () => {

diff --git a/frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.tsx b/frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.tsx
@@ -28,7 +28,7 @@ type AddStorageModalProps = {
 const ManageStorageModal: React.FC<AddStorageModalProps> = ({ existingData, isOpen, onClose }) => {
   const isStorageClassesAvailable = useIsAreaAvailable(SupportedArea.STORAGE_CLASSES).status;
   const preferredStorageClass = usePreferredStorageClass();
-  const defaultStorageClass = useDefaultStorageClass();
+  const [defaultStorageClass] = useDefaultStorageClass();
 
   const [createData, setCreateData, resetData] = useCreateStorageObjectForNotebook(existingData);
   const [actionInProgress, setActionInProgress] = React.useState(false);

diff --git a/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx b/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
@@ -70,7 +70,7 @@ const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
   >();
   const [storageDataWithoutDefault, setStorageData] = useStorageDataObject(existingNotebook);
 
-  const defaultStorageClass = useDefaultStorageClass();
+  const [defaultStorageClass] = useDefaultStorageClass();
   const preferredStorageClass = usePreferredStorageClass();
   const isStorageClassesAvailable = useIsAreaAvailable(SupportedArea.STORAGE_CLASSES).status;
   const defaultStorageClassName = isStorageClassesAvailable

diff --git a/frontend/src/pages/projects/screens/spawner/storage/StorageClassSelect.tsx b/frontend/src/pages/projects/screens/spawner/storage/StorageClassSelect.tsx
@@ -30,7 +30,7 @@ const StorageClassSelect: React.FC<StorageClassSelectProps> = ({
 }) => {
   const [storageClasses, storageClassesLoaded] = useStorageClasses();
   const hasStorageClassConfigs = storageClasses.some((sc) => !!getStorageClassConfig(sc));
-  const defaultSc = useDefaultStorageClass();
+  const [defaultSc] = useDefaultStorageClass();
 
   const enabledStorageClasses = storageClasses
     .filter((sc) => getStorageClassConfig(sc)?.isEnabled === true)

diff --git a/frontend/src/pages/projects/screens/spawner/storage/useDefaultStorageClass.ts b/frontend/src/pages/projects/screens/spawner/storage/useDefaultStorageClass.ts
@@ -3,35 +3,50 @@ import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import useStorageClasses from '~/concepts/k8s/useStorageClasses';
 import { StorageClassKind } from '~/k8sTypes';
 import { getStorageClassConfig } from '~/pages/storageClasses/utils';
+import useFetchState, {
+  FetchState,
+  FetchStateCallbackPromise,
+  NotReadyError,
+} from '~/utilities/useFetchState';
 
-const useDefaultStorageClass = (): StorageClassKind | undefined => {
+const useDefaultStorageClass = (): FetchState<StorageClassKind | null> => {
   const isStorageClassesAvailable = useIsAreaAvailable(SupportedArea.STORAGE_CLASSES).status;
-  const [storageClasses, storageClassesLoaded] = useStorageClasses();
-  const [defaultStorageClass, setDefaultStorageClass] = React.useState<
-    StorageClassKind | undefined
-  >();
+  const [storageClasses, storageClassesLoaded, storageClassesError] = useStorageClasses();
 
-  React.useEffect(() => {
-    if (!storageClassesLoaded || !isStorageClassesAvailable) {
-      return;
-    }
+  const fetchDefaultStorageClass: FetchStateCallbackPromise<StorageClassKind | null> =
+    React.useCallback(
+      () =>
+        new Promise((resolve, reject) => {
+          if (!isStorageClassesAvailable) {
+            resolve(null);
+          }
+          if (!storageClassesLoaded) {
+            reject(new NotReadyError('Storage classes are not loaded'));
+          }
+          if (storageClassesError) {
+            resolve(null);
+          }
 
-    const enabledStorageClasses = storageClasses.filter(
-      (sc) => getStorageClassConfig(sc)?.isEnabled === true,
-    );
+          const enabledStorageClasses = storageClasses.filter(
+            (sc) => getStorageClassConfig(sc)?.isEnabled === true,
+          );
 
-    const defaultSc = enabledStorageClasses.find(
-      (sc) => getStorageClassConfig(sc)?.isDefault === true,
-    );
+          const defaultSc = enabledStorageClasses.find(
+            (sc) => getStorageClassConfig(sc)?.isDefault === true,
+          );
 
-    if (!defaultSc && enabledStorageClasses.length > 0) {
-      setDefaultStorageClass(enabledStorageClasses[0]);
-    } else {
-      setDefaultStorageClass(defaultSc);
-    }
-  }, [storageClasses, storageClassesLoaded, isStorageClassesAvailable]);
+          if (!defaultSc && enabledStorageClasses.length > 0) {
+            resolve(enabledStorageClasses[0]);
+          } else if (defaultSc) {
+            resolve(defaultSc);
+          } else {
+            resolve(null);
+          }
+        }),
+      [storageClasses, storageClassesLoaded, storageClassesError, isStorageClassesAvailable],
+    );
 
-  return defaultStorageClass;
+  return useFetchState(fetchDefaultStorageClass, null);
 };
 
 export default useDefaultStorageClass;