feat(database-creation-flow): add default instance type for managed (#…

…1756) * feat(database-creation-flow): add default instance type for managed * fix: test
Qovery · Nov 14, 2024 · e6c3105 · e6c3105
1 parent 5557486
commit e6c3105
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 20 deletions.
diff --git a/libs/pages/database/src/lib/ui/page-settings-resources/page-settings-resources.tsx b/libs/pages/database/src/lib/ui/page-settings-resources/page-settings-resources.tsx
@@ -53,6 +53,7 @@ export function PageSettingsResources(props: PageSettingsResourcesProps) {
               isManaged={database.mode === DatabaseModeEnum.MANAGED}
               displayInstanceTypesWarning={displayInstanceTypesWarning}
               displayStorageWarning={displayStorageWarning}
+              isSetting
             />
           </Section>
 

diff --git a/...rc/lib/feature/page-database-create-feature/step-general-feature/step-general-feature.tsx b/...rc/lib/feature/page-database-create-feature/step-general-feature/step-general-feature.tsx
@@ -140,7 +140,6 @@ export function StepGeneralFeature() {
   })
 
   const watchModeDatabase = methods.watch('mode')
-  const watchTypeDatabase = methods.watch('type')
 
   const { databaseTypeOptions, databaseVersionOptions } = generateDatabasesTypesAndVersionOptions(
     databaseConfigurations,
@@ -154,13 +153,6 @@ export function StepGeneralFeature() {
   const publicOptionNotAvailable =
     cluster?.kubernetes === KubernetesEnum.K3_S && watchModeDatabase === DatabaseModeEnum.CONTAINER
 
-  useEffect(() => {
-    if (methods.formState.isDirty) {
-      methods.setValue('version', '')
-      if (watchTypeDatabase) methods.trigger('version')
-    }
-  }, [watchModeDatabase, methods.setValue])
-
   const onSubmit = methods.handleSubmit((data) => {
     const cloneData = {
       ...data,

diff --git a/...ature/page-database-create-feature/step-resources-feature/step-resources-feature.spec.tsx b/...ature/page-database-create-feature/step-resources-feature/step-resources-feature.spec.tsx
@@ -8,6 +8,9 @@ import StepResourcesFeature from './step-resources-feature'
 jest.mock('@qovery/domains/cloud-providers/feature', () => ({
   useCloudProviderDatabaseInstanceTypes: () => ({
     data: [
+      {
+        name: 'db.t3.small',
+      },
       {
         name: 'db.t3.medium',
       },
@@ -97,7 +100,7 @@ describe('PageDatabaseCreateResourcesFeature', () => {
             storage: 1,
             cpu: 100,
             memory: 100,
-            instance_type: 'db.t3.medium',
+            instance_type: 'db.t3.small',
           },
           setResourcesData: mockSetResourcesData,
           creationFlowUrl: '/organization/1/project/2/environment/3/services/create/database',
@@ -108,10 +111,10 @@ describe('PageDatabaseCreateResourcesFeature', () => {
     )
 
     const realSelect = screen.getByLabelText('Instance type')
-    await selectEvent.select(realSelect, 'db.t3.medium')
-    await waitFor(() => expect(screen.getAllByText('db.t3.medium')).toHaveLength(1))
+    await selectEvent.select(realSelect, 'db.t3.small')
+    await waitFor(() => expect(screen.getAllByText('db.t3.small')).toHaveLength(1))
 
-    expect(screen.getByText('db.t3.medium')).toBeInTheDocument()
+    expect(screen.getByText('db.t3.small')).toBeInTheDocument()
 
     const button = screen.getByTestId('button-submit')
     expect(button).toBeInTheDocument()

diff --git a/...ib/feature/page-database-create-feature/step-resources-feature/step-resources-feature.tsx b/...ib/feature/page-database-create-feature/step-resources-feature/step-resources-feature.tsx
@@ -19,7 +19,6 @@ export function StepResourcesFeature() {
   const { setCurrentStep, resourcesData, setResourcesData, generalData, creationFlowUrl } = useDatabaseCreateContext()
   const { organizationId = '', projectId = '', environmentId = '' } = useParams()
   const navigate = useNavigate()
-  const pathCreate = `${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_DATABASE_CREATION_URL}`
 
   useEffect(() => {
     !generalData?.name &&

diff --git a/libs/pages/services/src/lib/ui/page-database-create/step-general/step-general.tsx b/libs/pages/services/src/lib/ui/page-database-create/step-general/step-general.tsx
@@ -51,7 +51,7 @@ export function StepGeneral({
   cloudProvider,
   showManagedWithVpcOptions,
 }: StepGeneralProps) {
-  const { control, formState, watch } = useFormContext<GeneralData>()
+  const { control, formState, watch, resetField } = useFormContext<GeneralData>()
   const { organizationId = '', environmentId = '', projectId = '', slug, option } = useParams()
   const navigate = useNavigate()
   const [openExtraAttributes, setOpenExtraAttributes] = useState(false)
@@ -119,7 +119,6 @@ export function StepGeneral({
                   <>
                     <InputRadio
                       value={DatabaseModeEnum.CONTAINER}
-                      className="mb-3"
                       name={field.name}
                       description="Deployed on your Kubernetes cluster. Not for production purposes, no back-ups nor snapshots."
                       onChange={field.onChange}
@@ -130,7 +129,6 @@ export function StepGeneral({
                       cloudProvider === CloudProviderEnum.AWS &&
                       cluster.kubernetes !== 'SELF_MANAGED' && (
                         <InputRadio
-                          className="mb-3"
                           value={DatabaseModeEnum.MANAGED}
                           name={field.name}
                           description="Managed by your cloud provider. Back-ups and snapshots will be periodically created."
@@ -169,7 +167,10 @@ export function StepGeneral({
               <InputSelect
                 label="Database type"
                 options={databaseTypeOptions || []}
-                onChange={field.onChange}
+                onChange={(e) => {
+                  field.onChange(e)
+                  resetField('version')
+                }}
                 value={field.value}
                 error={error?.message}
               />

diff --git a/libs/pages/services/src/lib/ui/page-database-create/step-resources/step-resources.tsx b/libs/pages/services/src/lib/ui/page-database-create/step-resources/step-resources.tsx
@@ -23,7 +23,7 @@ export function StepResources({ onSubmit, isManaged, onBack, databaseType }: Ste
 
         <Section className="gap-4">
           <Heading>Resources configuration</Heading>
-          <DatabaseSettingsResources isDatabase isManaged={isManaged} databaseType={databaseType} />
+          <DatabaseSettingsResources isManaged={isManaged} databaseType={databaseType} />
         </Section>
 
         <div className="flex justify-between">

diff --git a/...re/settings-resources-instance-types-feature/setting-resources-instance-types-feature.tsx b/...re/settings-resources-instance-types-feature/setting-resources-instance-types-feature.tsx
@@ -3,7 +3,8 @@ import {
   type DatabaseTypeEnum,
   type ManagedDatabaseInstanceTypeResponse,
 } from 'qovery-typescript-axios'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
+import { useFormContext } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
 import { match } from 'ts-pattern'
 import { useCloudProviderDatabaseInstanceTypes } from '@qovery/domains/cloud-providers/feature'
@@ -14,13 +15,16 @@ import SettingsResourcesInstanceTypes from '../../ui/settings-resources-instance
 export interface SettingsResourcesInstanceTypesFeatureProps {
   databaseType: DatabaseTypeEnum
   displayWarning: boolean
+  isSetting: boolean
 }
 
 export function SettingsResourcesInstanceTypesFeature({
   databaseType,
   displayWarning,
+  isSetting,
 }: SettingsResourcesInstanceTypesFeatureProps) {
   const { organizationId = '', environmentId = '' } = useParams()
+  const { setValue } = useFormContext()
 
   const { data: environment } = useEnvironment({ environmentId })
   const { data: cluster } = useCluster({ organizationId, clusterId: environment?.cluster_id ?? '' })
@@ -55,6 +59,20 @@ export function SettingsResourcesInstanceTypesFeature({
     [databaseInstanceTypes]
   )
 
+  // Set default value when component mounts or database type changes
+  useEffect(() => {
+    if (!isSetting && databaseInstanceTypes) {
+      const defaultInstanceType = match(databaseType)
+        .with('POSTGRESQL', () => 'db.t3.small')
+        .with('MONGODB', () => 'db.t3.small')
+        .with('MYSQL', () => 'db.t3.small')
+        .with('REDIS', () => 'cache.t3.small')
+        .exhaustive()
+
+      setValue('instance_type', defaultInstanceType)
+    }
+  }, [databaseInstanceTypes, setValue])
+
   return (
     <SettingsResourcesInstanceTypes
       databaseInstanceTypes={formatDatabaseInstanceTypes}

diff --git a/...atabase-settings-resources/ui/database-settings-resources/database-settings-resources.tsx b/...atabase-settings-resources/ui/database-settings-resources/database-settings-resources.tsx
@@ -10,12 +10,12 @@ import SettingsResourcesInstanceTypesFeature from '../../feature/settings-resour
 
 export interface DatabaseSettingsResourcesProps {
   database?: Database
-  isDatabase?: boolean
   isManaged?: boolean
   clusterId?: string
   databaseType?: DatabaseTypeEnum
   displayInstanceTypesWarning?: boolean
   displayStorageWarning?: boolean
+  isSetting?: boolean
 }
 
 export function DatabaseSettingsResources({
@@ -25,6 +25,7 @@ export function DatabaseSettingsResources({
   clusterId = '',
   displayInstanceTypesWarning = false,
   displayStorageWarning = false,
+  isSetting = false,
 }: DatabaseSettingsResourcesProps) {
   const { control } = useFormContext()
   const { organizationId = '', environmentId } = useParams()
@@ -142,6 +143,7 @@ export function DatabaseSettingsResources({
         <SettingsResourcesInstanceTypesFeature
           databaseType={databaseType}
           displayWarning={displayInstanceTypesWarning}
+          isSetting={isSetting}
         />
       )}
       <Controller