[RHOAIENG-13320] Storage class duplication isDefault edge case

opendatahub-io · Sep 26, 2024 · cd32753 · cd32753
1 parent 6ca046e
commit cd32753
Show file tree

Hide file tree

Showing 14 changed files with 378 additions and 222 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts b/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts
@@ -140,7 +140,7 @@ class ClusterStorage {
       .findByTestId('storage-class-deprecated-alert')
       .should(
         'contain.text',
-        'Warning alert:Deprecated storage classA storage class has been deprecated by your administrator, but the cluster storage using it is still active. If you want to migrate your data to cluster storage instance using a different storage class, contact your administrator.',
+        'Warning alert:Deprecated storage classA storage class has been deprecated by your administrator, but the cluster storage using it is still active. If you want to migrate your data to a cluster storage instance using a different storage class, contact your administrator.',
       );
   }
 

diff --git a/frontend/src/components/table/TableRowTitleDescription.tsx b/frontend/src/components/table/TableRowTitleDescription.tsx
@@ -9,7 +9,7 @@ type TableRowTitleDescriptionProps = {
   boldTitle?: boolean;
   resource?: K8sResourceCommon;
   subtitle?: React.ReactNode;
-  description?: string;
+  description?: React.ReactNode;
   descriptionAsMarkdown?: boolean;
   truncateDescriptionLines?: number;
   label?: React.ReactNode;
@@ -29,20 +29,21 @@ const TableRowTitleDescription: React.FC<TableRowTitleDescriptionProps> = ({
 }) => {
   let descriptionNode: React.ReactNode;
   if (description) {
-    descriptionNode = descriptionAsMarkdown ? (
-      <MarkdownView conciseDisplay markdown={description} />
-    ) : (
-      <span
-        data-testid="table-row-title-description"
-        style={{ color: 'var(--pf-v5-global--Color--200)' }}
-      >
-        {truncateDescriptionLines !== undefined ? (
-          <TruncatedText maxLines={truncateDescriptionLines} content={description} />
-        ) : (
-          description
-        )}
-      </span>
-    );
+    descriptionNode =
+      descriptionAsMarkdown && typeof description === 'string' ? (
+        <MarkdownView conciseDisplay markdown={description} />
+      ) : (
+        <span
+          data-testid="table-row-title-description"
+          style={{ color: 'var(--pf-v5-global--Color--200)' }}
+        >
+          {truncateDescriptionLines !== undefined && typeof description === 'string' ? (
+            <TruncatedText maxLines={truncateDescriptionLines} content={description} />
+          ) : (
+            description
+          )}
+        </span>
+      );
   }
 
   return (

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx
@@ -62,7 +62,7 @@ const StorageTable: React.FC<StorageTableProps> = ({ pvcs, refresh, onAddPVC })
           }
         >
           A storage class has been deprecated by your administrator, but the cluster storage using
-          it is still active. If you want to migrate your data to cluster storage instance using a
+          it is still active. If you want to migrate your data to a cluster storage instance using a
           different storage class, contact your administrator.
         </Alert>
       )}

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx
@@ -15,6 +15,7 @@ import {
   Text,
   TextVariants,
   Tooltip,
+  Truncate,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon, HddIcon } from '@patternfly/react-icons';
 import { PersistentVolumeClaimKind } from '~/k8sTypes';
@@ -100,17 +101,20 @@ const StorageTableRow: React.FC<StorageTableRowProps> = ({
         </Td>
 
         {isStorageClassesAvailable && (
-          <Td dataLabel="Storage class">
+          <Td modifier="truncate" dataLabel="Storage class">
             <Flex
               spaceItems={{ default: 'spaceItemsSm' }}
               alignItems={{ default: 'alignItemsCenter' }}
             >
               <FlexItem>
-                <Text>
-                  {storageClassConfig?.displayName ??
+                <Truncate
+                  content={
+                    storageClassConfig?.displayName ??
                     obj.storageClass?.metadata.name ??
-                    obj.pvc.spec.storageClassName}
-                </Text>
+                    obj.pvc.spec.storageClassName ??
+                    ''
+                  }
+                />
               </FlexItem>
               {storageClassesLoaded && (
                 <FlexItem>

diff --git a/frontend/src/pages/projects/screens/spawner/storage/StorageClassSelect.tsx b/frontend/src/pages/projects/screens/spawner/storage/StorageClassSelect.tsx
@@ -28,6 +28,7 @@ const StorageClassSelect: React.FC<StorageClassSelectProps> = ({
   menuAppendTo,
 }) => {
   const [storageClasses, storageClassesLoaded] = useStorageClasses();
+  const hasStorageClassConfigs = storageClasses.some((sc) => !!getStorageClassConfig(sc));
 
   const enabledStorageClasses = storageClasses
     .filter((sc) => getStorageClassConfig(sc)?.isEnabled)
@@ -76,7 +77,7 @@ const StorageClassSelect: React.FC<StorageClassSelectProps> = ({
     };
   });
 
-  return (
+  return hasStorageClassConfigs ? (
     <FormGroup label="Storage class" fieldId="storage-class">
       <SimpleSelect
         dataTestId="storage-classes-selector"
@@ -88,7 +89,7 @@ const StorageClassSelect: React.FC<StorageClassSelectProps> = ({
           setStorageClassName(selection);
         }}
         isDisabled={
-          disableStorageClassSelect || !storageClassesLoaded || storageClasses.length <= 1
+          disableStorageClassSelect || !storageClassesLoaded || enabledStorageClasses.length <= 1
         }
         placeholder="Select storage class"
         popperProps={{ appendTo: menuAppendTo }}
@@ -114,7 +115,7 @@ const StorageClassSelect: React.FC<StorageClassSelectProps> = ({
         )}
       </FormHelperText>
     </FormGroup>
-  );
+  ) : null;
 };
 
 export default StorageClassSelect;
diff --git a/frontend/src/pages/storageClasses/ResetCorruptConfigValueAlert.tsx b/frontend/src/pages/storageClasses/ResetCorruptConfigValueAlert.tsx
@@ -10,7 +10,7 @@ import { CorruptedMetadataAlert } from './CorruptedMetadataAlert';
 interface ResetCorruptConfigValueAlertProps extends Pick<AlertProps, 'variant'> {
   storageClassName: string;
   storageClassConfig: StorageClassConfig;
-  refresh: () => Promise<void | StorageClassKind[]>;
+  onSuccess: () => Promise<void | StorageClassKind[]>;
   popoverText?: string;
 }
 
@@ -19,7 +19,7 @@ export const ResetCorruptConfigValueAlert: React.FC<ResetCorruptConfigValueAlert
   storageClassConfig,
   variant,
   popoverText = 'Refresh the field to correct the corrupted metadata.',
-  refresh,
+  onSuccess,
 }) => {
   const [error, setError] = React.useState<string>();
   const [isUpdating, setIsUpdating] = React.useState(false);
@@ -29,13 +29,13 @@ export const ResetCorruptConfigValueAlert: React.FC<ResetCorruptConfigValueAlert
 
     try {
       await updateStorageClassConfig(storageClassName, storageClassConfig);
-      await refresh();
+      await onSuccess();
     } catch {
       setError('Failed to refresh the field. Try again later.');
     } finally {
       setIsUpdating(false);
     }
-  }, [storageClassName, storageClassConfig, refresh]);
+  }, [storageClassName, storageClassConfig, onSuccess]);
 
   return (
     <CorruptedMetadataAlert

diff --git a/frontend/src/pages/storageClasses/StorageClassConfigValue.tsx b/frontend/src/pages/storageClasses/StorageClassConfigValue.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+type StrorageClassConfigValueProps = React.PropsWithChildren & { alert: React.ReactNode };
+
+export const StrorageClassConfigValue: React.FC<StrorageClassConfigValueProps> = ({
+  alert,
+  children,
+}) => {
+  if (!children) {
+    return alert;
+  }
+
+  return children;
+};
diff --git a/frontend/src/pages/storageClasses/StorageClassDefaultRadio.tsx b/frontend/src/pages/storageClasses/StorageClassDefaultRadio.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import { Flex, Radio, Spinner, Tooltip } from '@patternfly/react-core';
+
+import { Flex, FlexItem, Radio, Spinner, Tooltip } from '@patternfly/react-core';
 import { updateStorageClassConfig } from '~/services/StorageClassService';
+import { useStorageClassContext } from './StorageClassesContext';
 
 interface StorageClassDefaultRadioProps {
   storageClassName: string;
@@ -15,6 +17,7 @@ export const StorageClassDefaultRadio: React.FC<StorageClassDefaultRadioProps> =
   isDisabled,
   onChange,
 }) => {
+  const { setIsLoadingDefault } = useStorageClassContext();
   const [isChecked, setIsChecked] = React.useState(isInitialChecked);
   const [isUpdating, setIsUpdating] = React.useState(false);
   const id = `${storageClassName}-default-radio`;
@@ -26,16 +29,18 @@ export const StorageClassDefaultRadio: React.FC<StorageClassDefaultRadioProps> =
 
   const update = React.useCallback(async () => {
     setIsUpdating(true);
+    setIsLoadingDefault(true);
 
     try {
       await updateStorageClassConfig(storageClassName, { isDefault: true });
       await onChange();
     } finally {
       setIsUpdating(false);
+      setIsChecked(true);
+      // Delay table loading state for smoother transition between default selections
+      setTimeout(() => setIsLoadingDefault(false), 250);
     }
-
-    setIsChecked(true);
-  }, [storageClassName, onChange]);
+  }, [storageClassName, setIsLoadingDefault, onChange]);
 
   const radioInput = React.useMemo(
     () => (
@@ -54,17 +59,21 @@ export const StorageClassDefaultRadio: React.FC<StorageClassDefaultRadioProps> =
 
   return (
     <Flex spaceItems={{ default: 'spaceItemsMd' }} alignItems={{ default: 'alignItemsCenter' }}>
-      {isDisabled ? (
-        <Tooltip content="Enable this class to set it as the default.">{radioInput}</Tooltip>
-      ) : (
-        radioInput
-      )}
+      <FlexItem>
+        {isDisabled ? (
+          <Tooltip content="Enable this class to set it as the default.">{radioInput}</Tooltip>
+        ) : (
+          radioInput
+        )}
+      </FlexItem>
 
-      <Spinner
-        size="md"
-        aria-label="Loading default radio selection"
-        style={{ visibility: isUpdating ? 'visible' : 'hidden' }}
-      />
+      <FlexItem>
+        <Spinner
+          size="md"
+          aria-label="Loading default radio selection"
+          style={{ visibility: isUpdating ? 'visible' : 'hidden' }}
+        />
+      </FlexItem>
     </Flex>
   );
 };
diff --git a/frontend/src/pages/storageClasses/StorageClassEnableSwitch.tsx b/frontend/src/pages/storageClasses/StorageClassEnableSwitch.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Flex, FlexItem, Switch, Tooltip } from '@patternfly/react-core';
 import { updateStorageClassConfig } from '~/services/StorageClassService';
-import { StorageClassKind } from '~/k8sTypes';
+import { ResponseStatus } from '~/types';
 
 interface StorageClassEnableSwitchProps {
   storageClassName: string;
   isChecked: boolean;
   isDisabled: boolean;
-  onChange: () => Promise<void | StorageClassKind[]>;
+  onChange: (update: () => Promise<ResponseStatus>) => Promise<void>;
 }
 
 export const StorageClassEnableSwitch: React.FC<StorageClassEnableSwitchProps> = ({
@@ -29,8 +29,7 @@ export const StorageClassEnableSwitch: React.FC<StorageClassEnableSwitchProps> =
       setIsUpdating(true);
 
       try {
-        await updateStorageClassConfig(storageClassName, { isEnabled: checked });
-        await onChange();
+        await onChange(() => updateStorageClassConfig(storageClassName, { isEnabled: checked }));
       } finally {
         setIsUpdating(false);
       }