From b92d61b97d9e3a641477e195b0123f64ddf2920a Mon Sep 17 00:00:00 2001 From: mpolotsk Date: Mon, 7 Apr 2025 11:13:32 +0200 Subject: [PATCH 1/4] fix: [UIE-8447] - refresh drawer after config add/update --- packages/api-v4/src/databases/types.ts | 2 +- packages/manager/src/factories/databases.ts | 22 +++++++++---------- .../DatabaseAdvancedConfigurationDrawer.tsx | 18 ++++++++------- .../DatabaseConfigurationItem.tsx | 7 ++++-- .../src/features/Databases/utilities.test.ts | 10 ++++----- .../src/features/Databases/utilities.ts | 2 +- 6 files changed, 33 insertions(+), 28 deletions(-) diff --git a/packages/api-v4/src/databases/types.ts b/packages/api-v4/src/databases/types.ts index 07048a3fb77..444b391a18b 100644 --- a/packages/api-v4/src/databases/types.ts +++ b/packages/api-v4/src/databases/types.ts @@ -60,7 +60,7 @@ export interface ConfigurationItem { pattern?: string; type?: string | [string, null] | string[]; enum?: string[]; - restart_cluster?: boolean; + requires_restart?: boolean; } export type ConfigValue = number | string | boolean; diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts index 2dabc3119b8..0677cd00e05 100644 --- a/packages/manager/src/factories/databases.ts +++ b/packages/manager/src/factories/databases.ts @@ -281,7 +281,7 @@ export const databaseEngineConfigFactory = Factory.Sync.makeFactory { const configurations = convertEngineConfigToOptions(databaseConfig); - const existingConfigsArray = convertExistingConfigsToArray( - existingConfigurations, - databaseConfig + const existingConfigsArray = useMemo( + () => convertExistingConfigsToArray(existingConfigurations, databaseConfig), + [existingConfigurations, databaseConfig] ); const { @@ -81,6 +81,7 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { watch, } = useForm({ defaultValues: { configs: existingConfigsArray }, + mode: 'onBlur', resolver: yupResolver( createDynamicAdvancedConfigSchema( configurations @@ -96,10 +97,10 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { const configs = watch('configs'); useEffect(() => { - if (databaseConfig) { + if (databaseConfig && open) { reset({ configs: existingConfigsArray }); } - }, [databaseConfig]); + }, [databaseConfig, open, reset, existingConfigsArray]); const usedConfigs = useMemo( () => new Set(fields.map((config) => config.label)), @@ -109,7 +110,7 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { (config) => !usedConfigs.has(config.label) ); - const hasRestartCluster = fields.some((item) => item.restart_cluster); + const hasRestartCluster = fields.some((item) => item.requires_restart); const handleAddConfiguration = (config: ConfigurationOption | null) => { if (!config || usedConfigs.has(config.label)) { @@ -140,7 +141,7 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { engine_config: formatConfigPayload(formData.configs, configurations), }; await updateDatabase(payload).then(() => { - onClose(); + handleClose(); enqueueSnackbar('Advanced Configuration settings saved', { variant: 'success', }); @@ -150,7 +151,7 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { return ( @@ -208,6 +209,7 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { configItem={config} engine={engine} errorText={fieldState.error?.message} + onBlur={field.onBlur} onChange={field.onChange} onRemove={() => handleRemoveConfig(index)} /> diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx index acd1a3c046d..78eb0ca831e 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx @@ -27,12 +27,13 @@ interface Props { configItem?: ConfigurationOption; engine: string; errorText: string | undefined; + onBlur?: () => void; onChange: (config: ConfigValue) => void; onRemove?: (label: string) => void; } export const DatabaseConfigurationItem = (props: Props) => { - const { configItem, engine, errorText, onChange, onRemove } = props; + const { configItem, engine, errorText, onBlur, onChange, onRemove } = props; const configLabel = configItem?.label || ''; const renderInputField = () => { @@ -82,6 +83,7 @@ export const DatabaseConfigurationItem = (props: Props) => { fullWidth label="" name={configLabel} + onBlur={onBlur} onChange={(e) => onChange(Number(e.target.value))} type="number" value={Number(configItem.value)} @@ -101,6 +103,7 @@ export const DatabaseConfigurationItem = (props: Props) => { fullWidth label="" name={configLabel} + onBlur={onBlur} onChange={(e) => onChange(e.target.value)} placeholder={String(configItem.example)} type="text" @@ -126,7 +129,7 @@ export const DatabaseConfigurationItem = (props: Props) => { > {`${engine}.${configLabel}`} - {configItem?.restart_cluster && ( + {configItem?.requires_restart && ( )} {configItem?.description && ( diff --git a/packages/manager/src/features/Databases/utilities.test.ts b/packages/manager/src/features/Databases/utilities.test.ts index 0834e92f814..4ffcf30709c 100644 --- a/packages/manager/src/features/Databases/utilities.test.ts +++ b/packages/manager/src/features/Databases/utilities.test.ts @@ -604,7 +604,7 @@ describe('findConfigItem', () => { example: 600, maximum: 86400, minimum: 600, - restart_cluster: false, + requires_restart: false, type: 'integer', }; @@ -614,7 +614,7 @@ describe('findConfigItem', () => { example: 10, maximum: 3600, minimum: 2, - restart_cluster: false, + requires_restart: false, type: 'integer', }; it('should return the correct ConfigurationItem for a given targetKey', () => { @@ -653,7 +653,7 @@ describe('convertExistingConfigsToArray', () => { label: 'connect_timeout', maximum: 3600, minimum: 2, - restart_cluster: false, + requires_restart: false, type: 'integer', value: 10, }, @@ -666,7 +666,7 @@ describe('convertExistingConfigsToArray', () => { maxLength: 100, minLength: 2, pattern: '^([-+][\\d:]*|[\\w/]*)$', - restart_cluster: false, + requires_restart: false, type: 'string', value: '+03:00', }, @@ -678,7 +678,7 @@ describe('convertExistingConfigsToArray', () => { label: 'binlog_retention_period', maximum: 86400, minimum: 600, - restart_cluster: false, + requires_restart: false, type: 'integer', value: 600, }, diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts index 0ef3190b4ba..42effa10ac5 100644 --- a/packages/manager/src/features/Databases/utilities.ts +++ b/packages/manager/src/features/Databases/utilities.ts @@ -456,6 +456,6 @@ export const getDefaultConfigValue = (config: ConfigurationOption) => { : isConfigStringWithEnum(config) ? config.enum?.[0] ?? '' : config?.type === 'number' || config?.type === 'integer' - ? 0 + ? config.minimum ?? 0 : ''; }; From dc1c05c5a0a928ff312e3acf982d1ed99b074354 Mon Sep 17 00:00:00 2001 From: mpolotsk Date: Mon, 7 Apr 2025 16:04:53 +0200 Subject: [PATCH 2/4] fix: [UIE-8447] - update changelog --- packages/api-v4/CHANGELOG.md | 1 + packages/manager/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/api-v4/CHANGELOG.md b/packages/api-v4/CHANGELOG.md index 85e30c3389b..8514e69fac1 100644 --- a/packages/api-v4/CHANGELOG.md +++ b/packages/api-v4/CHANGELOG.md @@ -8,6 +8,7 @@ ### Changed: - DBaaS Advanced Configurations: remove `engine_config` from the DatabaseEngineConfig type ([#11885](https://github.com/linode/manager/pull/11885)) +- DBaaS Advanced Configurations: rename `restart_cluster` to `requires_restart` to align with the API response ([#11979](https://github.com/linode/manager/pull/11979)) ### Fixed: diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md index 5ce97db0236..601edf78d3e 100644 --- a/packages/manager/CHANGELOG.md +++ b/packages/manager/CHANGELOG.md @@ -30,6 +30,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - PAT Token drawer logic when Child Account Access is hidden ([#11935](https://github.com/linode/manager/pull/11935)) - Profile Menu Icon Size Inconsistency ([#11946](https://github.com/linode/manager/pull/11946)) - Unclearable ACL IP addresses for LKE clusters ([#11947](https://github.com/linode/manager/pull/11947)) +- DBaaS Advanced Configuration: drawer shows outdated config values after save and reopen ([#11979](https://github.com/linode/manager/pull/11979)) ### Removed: From ba9482c7ca97851aef7e56c226bef8428224fa13 Mon Sep 17 00:00:00 2001 From: mpolotsk Date: Mon, 7 Apr 2025 16:45:22 +0200 Subject: [PATCH 3/4] fix: [UIE-8447] - fix loading state --- .../DatabaseAdvancedConfigurationDrawer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx index 9b3382dc962..28ecf672a6e 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx @@ -97,10 +97,10 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { const configs = watch('configs'); useEffect(() => { - if (databaseConfig && open) { + if (existingConfigsArray && open) { reset({ configs: existingConfigsArray }); } - }, [databaseConfig, open, reset, existingConfigsArray]); + }, [open, existingConfigsArray]); const usedConfigs = useMemo( () => new Set(fields.map((config) => config.label)), From b169b6b870bf12ec87df446a6e7aac2b9ac54f6f Mon Sep 17 00:00:00 2001 From: mpolotsk Date: Mon, 7 Apr 2025 17:22:10 +0200 Subject: [PATCH 4/4] fix: [UIE-8447] - fix delay in drawer --- .../DatabaseAdvancedConfigurationDrawer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx index 28ecf672a6e..a435c9fd20d 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx @@ -97,10 +97,10 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => { const configs = watch('configs'); useEffect(() => { - if (existingConfigsArray && open) { + if (existingConfigsArray) { reset({ configs: existingConfigsArray }); } - }, [open, existingConfigsArray]); + }, [existingConfigsArray]); const usedConfigs = useMemo( () => new Set(fields.map((config) => config.label)),