diff --git a/libs/pages/database/src/lib/feature/page-settings-general-feature/page-settings-general-feature.tsx b/libs/pages/database/src/lib/feature/page-settings-general-feature/page-settings-general-feature.tsx index 77c8a9aba2b..2ab4d58a2ce 100644 --- a/libs/pages/database/src/lib/feature/page-settings-general-feature/page-settings-general-feature.tsx +++ b/libs/pages/database/src/lib/feature/page-settings-general-feature/page-settings-general-feature.tsx @@ -41,6 +41,7 @@ export function PageSettingsGeneralFeature() { accessibility: database?.accessibility, annotations_groups: database?.annotations_groups?.map((group) => group.id), labels_groups: database?.labels_groups?.map((group) => group.id), + apply_immediately: false, }, }) diff --git a/libs/pages/database/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx b/libs/pages/database/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx index cb3326f1bd0..9c6db679839 100644 --- a/libs/pages/database/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx +++ b/libs/pages/database/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx @@ -1,20 +1,20 @@ import { type FieldValues, FormProvider, useForm } from 'react-hook-form' import { useParams } from 'react-router-dom' +import { type DatabaseEditRequest } from 'qovery-typescript-axios' import { useEnvironment } from '@qovery/domains/environments/feature' import { type Database } from '@qovery/domains/services/data-access' import { useEditService, useService } from '@qovery/domains/services/feature' import { buildEditServicePayload } from '@qovery/shared/util-services' import PageSettingsResources from '../../ui/page-settings-resources/page-settings-resources' -export const handleSubmit = (data: FieldValues, database: Database) => { - const cloneDatabase = Object.assign({}, database) - - cloneDatabase.cpu = data['cpu'] - cloneDatabase.memory = Number(data['memory']) - cloneDatabase.storage = Number(data['storage']) - cloneDatabase.instance_type = data['instance_type'] - - return cloneDatabase +export const handleSubmit = (data: FieldValues, database: Database): Partial => { + return { + cpu: data['cpu'], + memory: Number(data['memory']), + storage: Number(data['storage']), + instance_type: data['instance_type'], + apply_immediately: data['apply_immediately'], + } } export function PageSettingsResourcesFeature() { @@ -36,6 +36,7 @@ export function PageSettingsResourcesFeature() { storage: database?.storage, cpu: database?.cpu || 10, instance_type: database?.instance_type, + apply_immediately: false, }, }) diff --git a/libs/pages/database/src/lib/ui/page-settings-general/page-settings-general.tsx b/libs/pages/database/src/lib/ui/page-settings-general/page-settings-general.tsx index ff19ba8f84c..1e5b9e86923 100644 --- a/libs/pages/database/src/lib/ui/page-settings-general/page-settings-general.tsx +++ b/libs/pages/database/src/lib/ui/page-settings-general/page-settings-general.tsx @@ -5,7 +5,7 @@ import { match } from 'ts-pattern' import { AnnotationSetting, LabelSetting } from '@qovery/domains/organizations/feature' import { type Database } from '@qovery/domains/services/data-access' import { GeneralSetting } from '@qovery/domains/services/feature' -import { SettingsHeading } from '@qovery/shared/console-shared' +import { ApplyImmediatelyCheckbox, SettingsHeading } from '@qovery/shared/console-shared' import { type Value } from '@qovery/shared/interfaces' import { Button, @@ -150,22 +150,7 @@ export function PageSettingsGeneral({ )} {databaseMode === DatabaseModeEnum.MANAGED && formState.dirtyFields['version'] && ( - - - - - - Once triggered, the update will be managed by your cloud provider and applied during the - configured maintenance window. Moreover, the operation might cause a service interruption.{' '} - - Have a look at the documentation first - - - + )} )} 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 cc293380da0..c0501ee0cdb 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 @@ -2,8 +2,7 @@ import { DatabaseModeEnum } from 'qovery-typescript-axios' import { type FormEventHandler } from 'react' import { useFormContext } from 'react-hook-form' import { type Database } from '@qovery/domains/services/data-access' -import { DatabaseSettingsResources } from '@qovery/shared/console-shared' -import { SettingsHeading } from '@qovery/shared/console-shared' +import { ApplyImmediatelyCheckbox, DatabaseSettingsResources, SettingsHeading } from '@qovery/shared/console-shared' import { Button, Callout, Heading, Icon, Section } from '@qovery/shared/ui' export interface PageSettingsResourcesProps { @@ -55,6 +54,11 @@ export function PageSettingsResources(props: PageSettingsResourcesProps) { displayStorageWarning={displayStorageWarning} isSetting /> + {(displayInstanceTypesWarning || displayStorageWarning) && ( +
+ +
+ )}
diff --git a/libs/shared/console-shared/src/index.ts b/libs/shared/console-shared/src/index.ts index 3ce58cb8069..abd3d85a62c 100644 --- a/libs/shared/console-shared/src/index.ts +++ b/libs/shared/console-shared/src/index.ts @@ -29,3 +29,4 @@ export * from './lib/application-settings/ui/application-settings-resources/appl export * from './lib/application-settings/ui/application-settings-healthchecks/application-settings-healthchecks' export * from './lib/application-settings/utils/probe-formatted' export * from './lib/settings-heading/settings-heading' +export * from './lib/apply-immediately-checkbox/apply-immediately-checkbox' diff --git a/libs/shared/console-shared/src/lib/apply-immediately-checkbox/apply-immediately-checkbox.spec.tsx b/libs/shared/console-shared/src/lib/apply-immediately-checkbox/apply-immediately-checkbox.spec.tsx new file mode 100644 index 00000000000..6affd626eb8 --- /dev/null +++ b/libs/shared/console-shared/src/lib/apply-immediately-checkbox/apply-immediately-checkbox.spec.tsx @@ -0,0 +1,59 @@ +import { FormProvider, useForm } from 'react-hook-form' +import { renderWithProviders, screen } from '@qovery/shared/util-tests' +import { ApplyImmediatelyCheckbox } from './apply-immediately-checkbox' + +function Wrapper({ children, defaultValues = {} }: { children: React.ReactNode; defaultValues?: any }) { + const methods = useForm({ + defaultValues: { + apply_immediately: false, + ...defaultValues, + }, + }) + + return {children} +} + +describe('ApplyImmediatelyCheckbox', () => { + it('should render successfully', () => { + const { baseElement } = renderWithProviders( + + + + ) + expect(baseElement).toBeTruthy() + }) + + it('should display warning when checkbox is checked', async () => { + const { userEvent } = renderWithProviders( + + + + ) + + const checkbox = screen.getByRole('checkbox') + await userEvent.click(checkbox) + + expect(screen.getByTestId('apply-immediately-warning')).toBeInTheDocument() + }) + + it('should not display warning when checkbox is unchecked', () => { + renderWithProviders( + + + + ) + + expect(screen.queryByTestId('apply-immediately-warning')).not.toBeInTheDocument() + }) + + it('should be disabled when disabled prop is true', () => { + renderWithProviders( + + + + ) + + const checkbox = screen.getByRole('checkbox') + expect(checkbox).toBeDisabled() + }) +}) diff --git a/libs/shared/console-shared/src/lib/apply-immediately-checkbox/apply-immediately-checkbox.tsx b/libs/shared/console-shared/src/lib/apply-immediately-checkbox/apply-immediately-checkbox.tsx new file mode 100644 index 00000000000..af8d2feb4a7 --- /dev/null +++ b/libs/shared/console-shared/src/lib/apply-immediately-checkbox/apply-immediately-checkbox.tsx @@ -0,0 +1,60 @@ +import { Controller, useFormContext } from 'react-hook-form' +import { Callout, Checkbox, ExternalLink, Icon } from '@qovery/shared/ui' + +export interface ApplyImmediatelyCheckboxProps { + disabled?: boolean +} + +export function ApplyImmediatelyCheckbox({ disabled = false }: ApplyImmediatelyCheckboxProps) { + const { control, watch } = useFormContext() + + const applyImmediately = watch('apply_immediately') + + return ( +
+ ( + + )} + /> + + + + + + +
+
+ Once triggered, the update will be managed by your cloud provider and applied during the configured + maintenance window. Moreover, the operation might cause a service interruption.{' '} + + Have a look at the documentation first + +
+ {applyImmediately && ( +
+ Warning: Applying changes immediately may cause a brief service + interruption. The operation will be performed outside of your configured maintenance window. +
+ )} +
+ + +
+ ) +} + +export default ApplyImmediatelyCheckbox diff --git a/libs/shared/console-shared/src/lib/database-settings-resources/ui/database-settings-resources/database-settings-resources.tsx b/libs/shared/console-shared/src/lib/database-settings-resources/ui/database-settings-resources/database-settings-resources.tsx index f04e963b0cb..a73637cb82f 100644 --- a/libs/shared/console-shared/src/lib/database-settings-resources/ui/database-settings-resources/database-settings-resources.tsx +++ b/libs/shared/console-shared/src/lib/database-settings-resources/ui/database-settings-resources/database-settings-resources.tsx @@ -5,7 +5,7 @@ import { match } from 'ts-pattern' import { useEnvironment } from '@qovery/domains/environments/feature' import { type Database } from '@qovery/domains/services/data-access' import { CLUSTER_SETTINGS_RESOURCES_URL, CLUSTER_SETTINGS_URL, CLUSTER_URL } from '@qovery/shared/routes' -import { Callout, ExternalLink, Icon, InputText, Link, inputSizeUnitRules } from '@qovery/shared/ui' +import { InputText, Link, inputSizeUnitRules } from '@qovery/shared/ui' import SettingsResourcesInstanceTypesFeature from '../../feature/settings-resources-instance-types-feature/setting-resources-instance-types-feature' export interface DatabaseSettingsResourcesProps { @@ -176,23 +176,6 @@ export function DatabaseSettingsResources({ /> )} /> - {displayStorageWarning && ( - - - - - - Once triggered, the update will be managed by your cloud provider and applied during the configured - maintenance window. Moreover, the operation might cause a service interruption.{' '} - - Have a look at the documentation first - - - - )} ) } diff --git a/libs/shared/console-shared/src/lib/database-settings-resources/ui/settings-resources-instance-types/setting-resources-instance-types.tsx b/libs/shared/console-shared/src/lib/database-settings-resources/ui/settings-resources-instance-types/setting-resources-instance-types.tsx index 4bb53587a07..2a464ef961c 100644 --- a/libs/shared/console-shared/src/lib/database-settings-resources/ui/settings-resources-instance-types/setting-resources-instance-types.tsx +++ b/libs/shared/console-shared/src/lib/database-settings-resources/ui/settings-resources-instance-types/setting-resources-instance-types.tsx @@ -1,6 +1,6 @@ import { Controller, useFormContext } from 'react-hook-form' import { type Value } from '@qovery/shared/interfaces' -import { Callout, ExternalLink, Icon, InputSelect } from '@qovery/shared/ui' +import { InputSelect } from '@qovery/shared/ui' export interface SettingsResourcesInstanceTypesProps { databaseInstanceTypes?: Value[] @@ -14,43 +14,24 @@ export function SettingsResourcesInstanceTypes({ const { control } = useFormContext() return ( - <> - ( - - )} - /> - {displayWarning && ( - - - - - - Once triggered, the update will be managed by your cloud provider and applied during the configured - maintenance window. Moreover, the operation might cause a service interruption.{' '} - - Have a look at the documentation first - - - + ( + )} - + /> ) } diff --git a/package.json b/package.json index 5ac1054330b..19798326a64 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "mermaid": "^11.6.0", "monaco-editor": "0.53.0", "posthog-js": "^1.260.1", - "qovery-typescript-axios": "^1.1.821", + "qovery-typescript-axios": "^1.1.822", "react": "18.3.1", "react-country-flag": "^3.0.2", "react-datepicker": "^4.12.0", diff --git a/yarn.lock b/yarn.lock index 6b01286efdf..1243a4421a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5679,7 +5679,7 @@ __metadata: prettier: ^3.2.5 prettier-plugin-tailwindcss: ^0.5.14 pretty-quick: ^4.0.0 - qovery-typescript-axios: ^1.1.821 + qovery-typescript-axios: ^1.1.822 qovery-ws-typescript-axios: ^0.1.420 react: 18.3.1 react-country-flag: ^3.0.2 @@ -24520,12 +24520,12 @@ __metadata: languageName: node linkType: hard -"qovery-typescript-axios@npm:^1.1.821": - version: 1.1.821 - resolution: "qovery-typescript-axios@npm:1.1.821" +"qovery-typescript-axios@npm:^1.1.822": + version: 1.1.822 + resolution: "qovery-typescript-axios@npm:1.1.822" dependencies: axios: 1.12.2 - checksum: e51d1d3b1d96d8f55e6e9522efbb86d47994c63bcf11b8fb6240e45b9d396d2c198255ec2e43c6a7a15b8c0bbcd9c442aaaa3daeb51f117e9f2cd338ddf024dd + checksum: 8b36527588e8c40002f09fdac722df24eb49e38a9dd2d13e14b89f47498346ab2dd4efec2b16258487080786d4459363c8e3fb9ce746aee952f46fb8b638e7fd languageName: node linkType: hard