From e6c3105e0e75669fa4f3d93ad43cd801557f2db7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Bonnet?= Date: Thu, 14 Nov 2024 09:52:36 +0100 Subject: [PATCH] feat(database-creation-flow): add default instance type for managed (#1756) * feat(database-creation-flow): add default instance type for managed * fix: test --- .../page-settings-resources.tsx | 1 + .../step-general-feature.tsx | 8 -------- .../step-resources-feature.spec.tsx | 11 ++++++---- .../step-resources-feature.tsx | 1 - .../step-general/step-general.tsx | 9 +++++---- .../step-resources/step-resources.tsx | 2 +- ...tting-resources-instance-types-feature.tsx | 20 ++++++++++++++++++- .../database-settings-resources.tsx | 4 +++- 8 files changed, 36 insertions(+), 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 index c4a71c69fed..cc293380da0 100644 --- 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 /> diff --git a/libs/pages/services/src/lib/feature/page-database-create-feature/step-general-feature/step-general-feature.tsx b/libs/pages/services/src/lib/feature/page-database-create-feature/step-general-feature/step-general-feature.tsx index 14d9d8d3d69..7538e9f07f3 100644 --- a/libs/pages/services/src/lib/feature/page-database-create-feature/step-general-feature/step-general-feature.tsx +++ b/libs/pages/services/src/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/libs/pages/services/src/lib/feature/page-database-create-feature/step-resources-feature/step-resources-feature.spec.tsx b/libs/pages/services/src/lib/feature/page-database-create-feature/step-resources-feature/step-resources-feature.spec.tsx index 4388eea3e23..189e12c6d0d 100644 --- a/libs/pages/services/src/lib/feature/page-database-create-feature/step-resources-feature/step-resources-feature.spec.tsx +++ b/libs/pages/services/src/lib/feature/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/libs/pages/services/src/lib/feature/page-database-create-feature/step-resources-feature/step-resources-feature.tsx b/libs/pages/services/src/lib/feature/page-database-create-feature/step-resources-feature/step-resources-feature.tsx index 203609233f6..97a125b9d20 100644 --- a/libs/pages/services/src/lib/feature/page-database-create-feature/step-resources-feature/step-resources-feature.tsx +++ b/libs/pages/services/src/lib/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 index f53f12dbf3d..cae53cbb144 100644 --- 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() + const { control, formState, watch, resetField } = useFormContext() const { organizationId = '', environmentId = '', projectId = '', slug, option } = useParams() const navigate = useNavigate() const [openExtraAttributes, setOpenExtraAttributes] = useState(false) @@ -119,7 +119,6 @@ export function StepGeneral({ <> { + 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 index 6179129152e..e828c16d414 100644 --- 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
Resources configuration - +
diff --git a/libs/shared/console-shared/src/lib/database-settings-resources/feature/settings-resources-instance-types-feature/setting-resources-instance-types-feature.tsx b/libs/shared/console-shared/src/lib/database-settings-resources/feature/settings-resources-instance-types-feature/setting-resources-instance-types-feature.tsx index 8cc339dc407..962dd617119 100644 --- a/libs/shared/console-shared/src/lib/database-settings-resources/feature/settings-resources-instance-types-feature/setting-resources-instance-types-feature.tsx +++ b/libs/shared/console-shared/src/lib/database-settings-resources/feature/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 ( )}