EVEREST-1280 | Moving Storage class from first step to Advanced Configurations step

ui/apps/everest/src/components/advanced-card/advanced-card.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Card, CardContent, Typography, Box } from '@mui/material';
+
+type AdvancedCardProps = {
+  title: string;
+  description: string | React.ReactNode;
+  controlComponent: React.ReactNode;
+  gapFromText?: number;
+};
+
+const AdvancedCard: React.FC<AdvancedCardProps> = ({
+  title,
+  description,
+  controlComponent,
+  gapFromText = 48,
+}) => {
+  return (
+    <Card variant="outlined" sx={{ marginBottom: 2, padding: 2 }}>
+      <CardContent>
+        <Box display="flex" alignItems="center" gap={gapFromText}>
+          <Typography variant="h6" sx={{ flexShrink: 0 }}>
+            {title}
+          </Typography>
+          <Box sx={{ flexGrow: 2, textAlign: 'right' }}>{controlComponent}</Box>
+        </Box>
+        {typeof description === 'string' ? (
+          <Typography variant="body2" color="textSecondary" mt={1}>
+            {description}
+          </Typography>
+        ) : (
+          <Box mt={1}>{description}</Box>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AdvancedCard;

ui/apps/everest/src/components/advanced-card/index.ts

@@ -0,0 +1 @@
+export { default } from './advanced-card';

ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration-schema.ts

@@ -21,6 +21,17 @@ import { Messages } from './messages';
 export const advancedConfigurationsSchema = () =>
   z
     .object({
+      [AdvancedConfigurationFields.storageClass]: z
+        .string()
+        .nullable()
+        .superRefine((input, ctx) => {
+          if (!input) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: Messages.errors.storageClass.invalid,
+            });
+          }
+        }),
       [AdvancedConfigurationFields.externalAccess]: z.boolean(),
       [AdvancedConfigurationFields.sourceRanges]: z.array(
         z.object({ sourceRange: z.string().optional() })

ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration.tsx

@@ -13,29 +13,80 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { SwitchInput, TextArray, TextInput } from '@percona/ui-lib';
+import {
+  AutoCompleteInput,
+  SwitchInput,
+  TextArray,
+  TextInput,
+} from '@percona/ui-lib';
 import { Messages } from './messages';
 import { AdvancedConfigurationFields } from './advanced-configuration.types';
 import { useFormContext } from 'react-hook-form';
 import { DbType } from '@percona/types';
 import { getParamsPlaceholderFromDbType } from './advanced-configuration.utils';
 import { Stack } from '@mui/material';
+import { useKubernetesClusterInfo } from 'hooks/api/kubernetesClusters/useKubernetesClusterInfo';
+import { useEffect } from 'react';
+import { DbWizardFormFields } from 'consts';
+import { useDatabasePageMode } from 'pages/database-form/useDatabasePageMode';
+import AdvancedCard from 'components/advanced-card';
 
 interface AdvancedConfigurationFormProps {
   dbType: DbType;
+  loadingDefaultsForEdition?: boolean;
 }
 
 export const AdvancedConfigurationForm = ({
   dbType,
+  loadingDefaultsForEdition,
 }: AdvancedConfigurationFormProps) => {
-  const { watch } = useFormContext();
+  const { watch, setValue, getFieldState } = useFormContext();
+  const mode = useDatabasePageMode();
   const [externalAccess, engineParametersEnabled] = watch([
     AdvancedConfigurationFields.externalAccess,
     AdvancedConfigurationFields.engineParametersEnabled,
+    AdvancedConfigurationFields.storageClass,
   ]);
+  const { data: clusterInfo, isLoading: clusterInfoLoading } =
+    useKubernetesClusterInfo(['wizard-k8-info']);
 
+  // setting the storage class default value
+  useEffect(() => {
+    const { isTouched: storageClassTouched } = getFieldState(
+      DbWizardFormFields.storageClass
+    );
+
+    if (
+      !storageClassTouched &&
+      mode === 'new' &&
+      clusterInfo?.storageClassNames &&
+      clusterInfo.storageClassNames.length > 0
+    ) {
+      setValue(
+        DbWizardFormFields.storageClass,
+        clusterInfo?.storageClassNames[0]
+      );
+    }
+  }, [clusterInfo]);
   return (
     <>
+      <AdvancedCard
+        title={Messages.cards.storage.title}
+        description={Messages.cards.storage.description}
+        gapFromText={96}
+        controlComponent={
+          <AutoCompleteInput
+            name={AdvancedConfigurationFields.storageClass}
+            label={Messages.labels.storageClass}
+            loading={clusterInfoLoading}
+            options={clusterInfo?.storageClassNames || []}
+            autoCompleteProps={{
+              disableClearable: true,
+              disabled: loadingDefaultsForEdition,
+            }}
+          />
+        }
+      />
       <SwitchInput
         label={Messages.enableExternalAccess.title}
         labelCaption={Messages.enableExternalAccess.caption}

ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration.types.ts

@@ -18,4 +18,5 @@ export enum AdvancedConfigurationFields {
   sourceRanges = 'sourceRanges',
   engineParametersEnabled = 'engineParametersEnabled',
   engineParameters = 'engineParameters',
+  storageClass = 'storageClass',
 }

ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration.utils.ts

@@ -48,6 +48,8 @@ export const advancedConfigurationModalDefaultValues = (
     : dbCluster?.spec?.proxy.ipSourceRanges;
 
   return {
+    [AdvancedConfigurationFields.storageClass]:
+      dbCluster?.spec?.engine?.storage?.class || null,
     [AdvancedConfigurationFields.externalAccess]: isProxy(
       dbCluster?.spec?.proxy
     )

ui/apps/everest/src/components/cluster-form/advanced-configuration/messages.ts

@@ -30,10 +30,23 @@ export const Messages = {
     caption:
       'Set your database engine configuration to adjust your database system to your workload and performance needs. For configuration format and specific parameters, check your database type documentation.',
   },
+  labels: {
+    storageClass: 'Storage class',
+  },
+  cards: {
+    storage: {
+      title: 'Storage',
+      description:
+        'Defines the type and performance of storage for your database. Select based on workload needs, such as high IOPS for fast access or cost-effective options for less frequent use.',
+    },
+  },
   errors: {
     sourceRange: {
       invalid: INVALID_SOURCE_RANGE_ERROR,
     },
+    storageClass: {
+      invalid: 'Invalid storage class',
+    },
     engineParameters: {
       invalid: 'Invalid',
     },

ui/apps/everest/src/pages/database-form/database-form-body/steps/advanced-configurations/advanced-configurations.test.tsx

@@ -3,6 +3,9 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { TestWrapper } from 'utils/test';
 import { AdvancedConfigurations } from './advanced-configurations';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 const FormProviderWrapper = ({ children }: { children: React.ReactNode }) => {
   const methods = useForm({
@@ -25,7 +28,12 @@ describe('FourthStep', () => {
     render(
       <TestWrapper>
         <FormProviderWrapper>
-          <AdvancedConfigurations />
+          <QueryClientProvider client={queryClient}>
+            <AdvancedConfigurations
+              loadingDefaultsForEdition={false}
+              alreadyVisited={false}
+            />
+          </QueryClientProvider>
         </FormProviderWrapper>
       </TestWrapper>
     );
@@ -45,7 +53,12 @@ describe('FourthStep', () => {
     render(
       <TestWrapper>
         <FormProviderWrapper>
-          <AdvancedConfigurations />
+          <QueryClientProvider client={queryClient}>
+            <AdvancedConfigurations
+              loadingDefaultsForEdition={false}
+              alreadyVisited={false}
+            />
+          </QueryClientProvider>
         </FormProviderWrapper>
       </TestWrapper>
     );

ui/apps/everest/src/pages/database-form/database-form-body/steps/advanced-configurations/advanced-configurations.tsx

@@ -20,16 +20,22 @@ import { DbWizardFormFields } from 'consts.ts';
 import { StepHeader } from '../step-header/step-header.tsx';
 import AdvancedConfigurationForm from 'components/cluster-form/advanced-configuration/advanced-configuration.tsx';
 import { FormGroup } from '@mui/material';
+import { StepProps } from 'pages/database-form/database-form.types.ts';
 
-export const AdvancedConfigurations = () => {
+export const AdvancedConfigurations = ({
+  loadingDefaultsForEdition,
+}: StepProps) => {
   const { watch } = useFormContext();
   const dbType = watch(DbWizardFormFields.dbType);
 
   return (
     <>
       <StepHeader pageTitle={Messages.advanced} />
       <FormGroup sx={{ mt: 3 }}>
-        <AdvancedConfigurationForm dbType={dbType} />
+        <AdvancedConfigurationForm
+          dbType={dbType}
+          loadingDefaultsForEdition={loadingDefaultsForEdition}
+        />
       </FormGroup>
     </>
   );

ui/apps/everest/src/pages/database-form/database-form-body/steps/first/first-step.messages.ts

@@ -21,7 +21,6 @@ export const Messages = {
     k8sNamespace: 'Namespace',
     dbEnvironment: 'Database environment',
     dbVersion: 'Database version',
-    storageClass: 'Storage class',
     shardedCluster: 'Sharded Cluster',
   },
   placeholders: {

ui/apps/everest/src/pages/database-form/database-form-body/steps/first/first-step.test.tsx

@@ -66,7 +66,6 @@ vi.mock('api/kubernetesClusterApi', () => ({
   getKubernetesClusterInfoFn: vi.fn(() =>
     Promise.resolve({
       clusterType: 'generic',
-      storageClassNames: ['local-path'],
     })
   ),
 }));

ui/apps/everest/src/pages/database-form/database-form-body/steps/first/first-step.tsx

@@ -25,7 +25,6 @@ import {
   TextInput,
 } from '@percona/ui-lib';
 import { dbTypeToDbEngine } from '@percona/utils';
-import { useKubernetesClusterInfo } from 'hooks/api/kubernetesClusters/useKubernetesClusterInfo';
 import { useFormContext } from 'react-hook-form';
 import { DbEngineToolStatus } from 'shared-types/dbEngines.types';
 import {
@@ -57,9 +56,6 @@ export const FirstStep = ({ loadingDefaultsForEdition }: StepProps) => {
   const { watch, setValue, getFieldState, resetField, trigger } =
     useFormContext();
 
-  const { data: clusterInfo, isLoading: clusterInfoLoading } =
-    useKubernetesClusterInfo(['wizard-k8-info']);
-
   const dbType: DbType = watch(DbWizardFormFields.dbType);
   const dbVersion: DbType = watch(DbWizardFormFields.dbVersion);
   const dbNamespace = watch(DbWizardFormFields.k8sNamespace);
@@ -102,25 +98,6 @@ export const FirstStep = ({ loadingDefaultsForEdition }: StepProps) => {
   const disableSharding =
     mode !== 'new' || notSupportedMongoOperatorVersionForSharding;
 
-  // setting the storage class default value
-  useEffect(() => {
-    const { isTouched: storageClassTouched } = getFieldState(
-      DbWizardFormFields.storageClass
-    );
-
-    if (
-      !storageClassTouched &&
-      mode === 'new' &&
-      clusterInfo?.storageClassNames &&
-      clusterInfo.storageClassNames.length > 0
-    ) {
-      setValue(
-        DbWizardFormFields.storageClass,
-        clusterInfo?.storageClassNames[0]
-      );
-    }
-  }, [clusterInfo]);
-
   const { canCreate, isLoading } =
     useNamespacePermissionsForResource('database-clusters');
 
@@ -258,16 +235,6 @@ export const FirstStep = ({ loadingDefaultsForEdition }: StepProps) => {
           availableVersions={dbEngineData?.availableVersions.engine}
           loading={dbEnginesFoDbEngineTypesFetching || isLoading}
         />
-        <AutoCompleteInput
-          name={DbWizardFormFields.storageClass}
-          label={Messages.labels.storageClass}
-          loading={clusterInfoLoading}
-          options={clusterInfo?.storageClassNames || []}
-          autoCompleteProps={{
-            disableClearable: true,
-            disabled: loadingDefaultsForEdition,
-          }}
-        />
         {dbType === DbType.Mongo && (
           <Box sx={{ marginY: '30px' }}>
             <ActionableLabeledContent

ui/apps/everest/src/pages/database-form/database-form-schema.ts

@@ -19,17 +19,6 @@ const basicInfoSchema = () =>
         .nonempty(),
       [DbWizardFormFields.k8sNamespace]: z.string().nullable(),
       ...dbVersionSchemaObject,
-      [DbWizardFormFields.storageClass]: z
-        .string()
-        .nullable()
-        .superRefine((input, ctx) => {
-          if (!input) {
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              message: Messages.errors.storageClass.invalid,
-            });
-          }
-        }),
       [DbWizardFormFields.sharding]: z.boolean(),
     })
     .passthrough();

ui/apps/everest/src/pages/database-form/database-form.messages.ts

@@ -35,9 +35,6 @@ export const Messages = {
     dbName: {
       tooLong: errorMessages.tooLong('database'),
     },
-    storageClass: {
-      invalid: 'Invalid storage class',
-    },
     monitoringEndpoint: {
       invalidOption:
         'Invalid option. Please make sure you added a monitoring endpoint and select it from the dropdown',

ui/apps/everest/src/pages/database-form/database-form.utils.ts

@@ -130,9 +130,6 @@ export const DbClusterPayloadToFormValues = (
       ).toString(),
       'G'
     ).value,
-    [DbWizardFormFields.storageClass]:
-      dbCluster?.spec?.engine?.storage?.class || null,
-
     //backups
     [DbWizardFormFields.backupsEnabled]: !!backup?.enabled,
     [DbWizardFormFields.pitrEnabled]:

ui/apps/everest/src/pages/database-form/database-preview/sections/advanced-configurations-section.tsx

@@ -5,8 +5,10 @@ export const AdvancedConfigurationsPreviewSection = ({
   externalAccess,
   engineParametersEnabled,
   engineParameters,
+  storageClass,
 }: AdvancedConfigurationType) => (
   <>
+    <PreviewContentText text={`Storage class: ${storageClass ?? ''}`} />
     <PreviewContentText
       text={`External access ${externalAccess ? 'enabled' : 'disabled'}`}
     />

ui/apps/everest/src/pages/database-form/database-preview/sections/section-one.tsx

@@ -7,7 +7,6 @@ export const PreviewSectionOne = ({
   dbName,
   dbVersion,
   dbType,
-  storageClass,
   k8sNamespace,
   sharding,
 }: SectionProps) => (
@@ -16,7 +15,6 @@ export const PreviewSectionOne = ({
     <PreviewContentText text={`Type: ${beautifyDbTypeName(dbType)}`} />
     <PreviewContentText text={`Name: ${dbName}`} />
     <PreviewContentText text={`Version: ${dbVersion}`} />
-    <PreviewContentText text={`Storage class: ${storageClass ?? ''}`} />
     {dbType === DbType.Mongo && (
       <PreviewContentText
         text={`Sharding: ${sharding ? 'enabled' : 'disabled'}`}