fix: [UIE-8447] - refresh drawer after config add/update

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:
 

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;

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:
 

packages/manager/src/factories/databases.ts

@@ -281,7 +281,7 @@ export const databaseEngineConfigFactory = Factory.Sync.makeFactory<DatabaseEngi
       example: 600,
       maximum: 86400,
       minimum: 600,
-      restart_cluster: false,
+      requires_restart: false,
       type: 'integer',
     },
     mysql: {
@@ -291,7 +291,7 @@ export const databaseEngineConfigFactory = Factory.Sync.makeFactory<DatabaseEngi
         example: 10,
         maximum: 3600,
         minimum: 2,
-        restart_cluster: false,
+        requires_restart: false,
         type: 'integer',
       },
       default_time_zone: {
@@ -301,7 +301,7 @@ export const databaseEngineConfigFactory = Factory.Sync.makeFactory<DatabaseEngi
         maxLength: 100,
         minLength: 2,
         pattern: '^([-+][\\d:]*|[\\w/]*)$',
-        restart_cluster: false,
+        requires_restart: false,
         type: 'string',
       },
       innodb_ft_min_token_size: {
@@ -310,7 +310,7 @@ export const databaseEngineConfigFactory = Factory.Sync.makeFactory<DatabaseEngi
         example: 3,
         maximum: 16,
         minimum: 0,
-        restart_cluster: true,
+        requires_restart: true,
         type: 'integer',
       },
       innodb_ft_server_stopword_table: {
@@ -319,22 +319,22 @@ export const databaseEngineConfigFactory = Factory.Sync.makeFactory<DatabaseEngi
         example: 'db_name/table_name',
         maxLength: 1024,
         pattern: '^.+/.+$',
-        restart_cluster: false,
+        requires_restart: false,
         type: ['null', 'string'],
       },
       innodb_print_all_deadlocks: {
         description:
           'When enabled, information about all deadlocks in InnoDB user transactions is recorded in the error log. Disabled by default.',
         example: true,
-        restart_cluster: false,
+        requires_restart: false,
         type: 'boolean',
       },
       log_output: {
         description:
           'The slow log output destination when slow_query_log is ON. To enable MySQL AI Insights, choose INSIGHTS. To use MySQL AI Insights and the mysql.slow_log table at the same time, choose INSIGHTS,TABLE. To only use the mysql.slow_log table, choose TABLE. To silence slow logs, choose NONE.',
         enum: ['INSIGHTS', 'NONE', 'TABLE', 'INSIGHTS,TABLE'],
         example: 'INSIGHTS',
-        restart_cluster: false,
+        requires_restart: false,
         type: 'string',
       },
       long_query_time: {
@@ -343,7 +343,7 @@ export const databaseEngineConfigFactory = Factory.Sync.makeFactory<DatabaseEngi
         example: 10,
         maximum: 3600,
         minimum: 0.0,
-        restart_cluster: false,
+        requires_restart: false,
         type: 'number',
       },
       sql_mode: {
@@ -352,22 +352,22 @@ export const databaseEngineConfigFactory = Factory.Sync.makeFactory<DatabaseEngi
         example: 'ANSI,TRADITIONAL',
         maxLength: 1024,
         pattern: '^[A-Z_]*(,[A-Z_]+)*$',
-        restart_cluster: false,
+        requires_restart: false,
         type: 'string',
       },
       sql_require_primary_key: {
         description:
           'Require primary key to be defined for new tables or old tables modified with ALTER TABLE and fail if missing. It is recommended to always have primary keys because various functionality may break if any large table is missing them.',
         example: true,
-        restart_cluster: false,
+        requires_restart: false,
         type: 'boolean',
       },
     },
     service_log: {
       description:
         'Store logs for the service so that they are available in the HTTP API and console.',
       example: true,
-      restart_cluster: false,
+      requires_restart: false,
       type: ['boolean', 'null'],
     },
   }

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx

@@ -68,9 +68,9 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => {
 
   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<FormValues>({
     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 (existingConfigsArray) {
       reset({ configs: existingConfigsArray });
     }
-  }, [databaseConfig]);
+  }, [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 (
     <Drawer
       NotFoundComponent={NotFound}
-      onClose={onClose}
+      onClose={handleClose}
       open={open}
       title="Advanced Configuration"
     >
@@ -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)}
                 />

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}`}
         </Typography>
-        {configItem?.restart_cluster && (
+        {configItem?.requires_restart && (
           <StyledChip color="warning" label="restarts service" size="small" />
         )}
         {configItem?.description && (

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,
     },

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
     : '';
 };