fix: [UIE-8516] - DBaaS: Advanced Config - refactoring, validation fix, unit test

Author: mpolotsk-akamai

packages/api-v4/.changeset/pr-11885-changed-1742400890057.md

@@ -2,4 +2,4 @@
 "@linode/api-v4": Changed
 ---
 
-Remove `engine_config` from the DatabaseEngineConfig type ([#11885](https://github.com/linode/manager/pull/11885))
+DBaaS Advanced Configurations: remove `engine_config` from the DatabaseEngineConfig type ([#11885](https://github.com/linode/manager/pull/11885))

packages/api-v4/src/databases/types.ts

@@ -58,7 +58,7 @@ export interface ConfigurationItem {
   maxLength?: number;
   minLength?: number;
   pattern?: string;
-  type?: string | number | boolean | [string, null] | string[];
+  type?: string | [string, null] | string[];
   enum?: string[];
   restart_cluster?: boolean;
 }

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.style.ts

@@ -9,7 +9,10 @@ export const StyledConfigValue = styled(StyledValueGrid, {
 }));
 
 export const GroupHeader = styled('div')(({ theme }) => ({
-  background: theme.tokens.color.Neutrals[5],
+  background:
+    theme.palette.mode === 'dark'
+      ? theme.tokens.color.Neutrals[90]
+      : theme.tokens.color.Neutrals[10],
   color:
     theme.palette.mode === 'dark'
       ? theme.tokens.color.Neutrals[5]

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

@@ -25,8 +25,7 @@ import {
   convertExistingConfigsToArray,
   findConfigItem,
   formatConfigPayload,
-  isConfigBoolean,
-  isConfigStringWithEnum,
+  getDefaultConfigValue,
 } from '../../utilities';
 import { DatabaseConfigurationItem } from './DatabaseConfigurationItem';
 import { DatabaseConfigurationSelect } from './DatabaseConfigurationSelect';
@@ -125,11 +124,7 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => {
       category: config?.category ?? '',
       isNew: true,
       label: config?.label ?? '',
-      value: isConfigBoolean(config)
-        ? false
-        : isConfigStringWithEnum(config)
-        ? config.enum?.[0] ?? ''
-        : '',
+      value: getDefaultConfigValue(config),
     });
 
     setSelectedConfig(null);

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.style.ts

@@ -10,7 +10,10 @@ export const StyledWrapper = styled(Box, {
 export const StyledBox = styled(Box, {
   label: 'StyledBox',
 })(({ theme }) => ({
-  background: theme.tokens.color.Neutrals[5],
+  background:
+    theme.palette.mode === 'dark'
+      ? theme.tokens.color.Neutrals[100]
+      : theme.tokens.color.Neutrals[10],
   padding: theme.tokens.spacing.S8,
   width: '100%',
 }));

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.style.ts

@@ -28,7 +28,10 @@ export const StyledGridContainer = styled(Grid2, {
 export const StyledLabelTypography = styled(Typography, {
   label: 'StyledLabelTypography',
 })(({ theme }) => ({
-  background: theme.tokens.color.Neutrals[5],
+  background:
+    theme.palette.mode === 'dark'
+      ? theme.tokens.color.Neutrals[100]
+      : theme.tokens.color.Neutrals[10],
   color: theme.palette.mode === 'dark' ? theme.color.grey6 : 'inherit',
   font: theme.font.bold,
   height: '100%',

packages/manager/src/features/Databases/utilities.test.ts

@@ -14,6 +14,7 @@ import {
   formatConfigPayload,
   formatConfigValue,
   getDatabasesDescription,
+  getDefaultConfigValue,
   hasPendingUpdates,
   isDateOutsideBackup,
   isDefaultDatabase,
@@ -771,3 +772,42 @@ describe('formatConfigPayload', () => {
     });
   });
 });
+
+describe('getDefaultConfigValue', () => {
+  it('should return false for boolean type', () => {
+    const config: ConfigurationOption = {
+      category: '',
+      label: '',
+      type: 'boolean',
+    };
+    expect(getDefaultConfigValue(config)).toBe(false);
+  });
+
+  it('should return first enum value for string with enum', () => {
+    const config: ConfigurationOption = {
+      category: '',
+      enum: ['option1', 'option2'],
+      label: '',
+      type: 'string',
+    };
+    expect(getDefaultConfigValue(config)).toBe('option1');
+  });
+
+  it('should return 0 for number type', () => {
+    const config: ConfigurationOption = {
+      category: '',
+      label: '',
+      type: 'number',
+    };
+    expect(getDefaultConfigValue(config)).toBe(0);
+  });
+
+  it('should return 0 for integer type', () => {
+    const config: ConfigurationOption = {
+      category: '',
+      label: '',
+      type: 'integer',
+    };
+    expect(getDefaultConfigValue(config)).toBe(0);
+  });
+});

packages/manager/src/features/Databases/utilities.ts

@@ -394,6 +394,7 @@ export const convertExistingConfigsToArray = (
   }
   return options;
 };
+
 /**
  * Formats the configuration payload by organizing form data into categorized fields.
  *
@@ -442,3 +443,19 @@ export const isConfigStringWithEnum = (config: ConfigurationOption) => {
       config.enum)
   );
 };
+
+/**
+ * Determines the default value for a configuration item based on its type.
+ *
+ * @param config - The configuration object
+ * @returns - The default value for the given configuration
+ */
+export const getDefaultConfigValue = (config: ConfigurationOption) => {
+  return isConfigBoolean(config)
+    ? false
+    : isConfigStringWithEnum(config)
+    ? config.enum?.[0] ?? ''
+    : config?.type === 'number' || config?.type === 'integer'
+    ? 0
+    : '';
+};