fix: code config values and UI settings save both ignored defaults

admin/src/pages/SettingsPage/components/AdditionalSettingsPanel/index.tsx

@@ -1,5 +1,4 @@
 import { useIntl } from 'react-intl';
-import { isObject } from 'lodash';
 
 import { Box, Flex, Grid, NumberInput, Toggle, Typography } from '@strapi/design-system';
 import { Field } from '@sensinum/strapi-utils';
@@ -34,20 +33,11 @@ export const AdditionalSettingsPanel = () => {
                 <NumberInput
                   width="100%"
                   name="allowedLevels"
-                  type="number"
                   placeholder={formatMessage(
                     getTrad('pages.settings.form.allowedLevels.placeholder')
                   )}
-                  onChange={(eventOrPath: FormChangeEvent, value?: any) => {
-                    if (isObject(eventOrPath)) {
-                      const parsedVal = parseInt(eventOrPath.target.value);
-                      return handleChange(
-                        eventOrPath.target.name,
-                        isNaN(parsedVal) ? 0 : parsedVal,
-                        onChange
-                      );
-                    }
-                    return handleChange(eventOrPath, value, onChange);
+                  onValueChange={(value: number | undefined) => {
+                    handleChange('allowedLevels', value ?? 0, onChange);
                   }}
                   value={values.allowedLevels}
                   disabled={restartStatus.required}

admin/src/pages/SettingsPage/hooks/useAPI.ts

@@ -1,5 +1,5 @@
 import { getFetchClient } from '@strapi/strapi/admin';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { getApiClient } from '../../../api';
 import { resolveGlobalLikeId } from '../utils';
@@ -61,6 +61,7 @@ export const useContentTypes = () => {
 export const useSaveConfig = () => {
   const fetch = getFetchClient();
   const apiClient = getApiClient(fetch);
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn(data: UiFormSchema) {
@@ -85,5 +86,8 @@ export const useSaveConfig = () => {
         },
       });
     },
+    onSuccess() {
+      queryClient.invalidateQueries({ queryKey: apiClient.readSettingsConfigIndex() });
+    },
   });
 };

admin/src/pages/SettingsPage/hooks/useInitialConfig.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { UiFormSchema } from '../schemas';
 import { ConfigSchema } from '../../../schemas';
 
@@ -24,8 +24,11 @@ type UseInitialConfigParams = {
 };
 
 export const useInitialConfig = ({ config, setFormValue }: UseInitialConfigParams) => {
+  const initialized = useRef(false);
+
   useEffect(() => {
-    if (config) {
+    if (config && !initialized.current) {
+      initialized.current = true;
       const {
         additionalFields,
         contentTypes,

admin/src/pages/SettingsPage/index.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { get, isNil, isObject, isString, set } from 'lodash';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Button, Flex } from '@strapi/design-system';
@@ -203,7 +203,9 @@ const Inner = () => {
 };
 
 export default function SettingsPage() {
-  queryClient.invalidateQueries();
+  useEffect(() => {
+    queryClient.invalidateQueries();
+  }, []);
 
   return (
     <QueryClientProvider client={queryClient}>

jest.config.ts

@@ -13,6 +13,7 @@ const config: JestConfigWithTsJest = {
   reporters: ['default', 'jest-junit'],
   globals: {
     'ts-jest': {
+      tsconfig: './server/tsconfig.json',
       diagnostics: {
         warnOnly: true,
       },

server/src/config/setup.ts

@@ -33,22 +33,21 @@ export const configSetup = async ({
     name: 'navigation',
   });
   const getFromPluginDefaults: PluginDefaultConfigGetter = await strapi.plugin('navigation').config;
+  const dbConfig = forceDefault
+    ? ({} as Partial<NavigationPluginConfigDBSchema>)
+    : (((await pluginStore.get({ key: 'config' })) ?? {}) as Partial<NavigationPluginConfigDBSchema>);
+
   const configRaw = forceDefault
     ? ({} as NavigationPluginConfigDBSchema)
-    : {
-        ...configBase.default,
-        ...((await pluginStore.get({
-          key: 'config',
-        })) ?? configBase.default),
-      };
+    : ({ ...configBase.default, ...dbConfig } as NavigationPluginConfigDBSchema);
 
-  let config = isEmpty(configRaw)
-    ? configRaw
-    : (DynamicSchemas.configSchema.parse(configRaw) as unknown as ConfigSchema);
+  if (!isEmpty(configRaw)) {
+    DynamicSchemas.configSchema.parse(configRaw);
+  }
 
-  const getWithFallback = getWithFallbackFactory(config, getFromPluginDefaults);
+  const getWithFallback = getWithFallbackFactory(dbConfig, getFromPluginDefaults);
 
-  config = {
+  const config: ConfigSchema = {
     additionalFields: getWithFallback<NavigationItemAdditionalField[]>('additionalFields'),
     contentTypes: getWithFallback<string[]>('contentTypes'),
     contentTypesNameFields: getWithFallback<PluginConfigNameFields>('contentTypesNameFields'),
@@ -75,9 +74,12 @@ export const configSetup = async ({
 };
 
 const getWithFallbackFactory =
-  (config: NavigationPluginConfigDBSchema, fallback: PluginDefaultConfigGetter) =>
+  (dbConfig: Partial<NavigationPluginConfigDBSchema>, fallback: PluginDefaultConfigGetter) =>
   <T extends ReturnType<PluginDefaultConfigGetter>>(key: PluginConfigKeys) => {
-    const value = config?.[key] ?? fallback(key);
+    const value =
+      dbConfig?.[key] ??
+      fallback(key) ??
+      (configBase.default as Record<string, unknown>)[key];
 
     assertNotEmpty(value, new Error(`[Navigation] Config "${key}" is undefined`));
 

server/tests/config/setup.test.ts

@@ -37,7 +37,7 @@ describe('Navigation', () => {
         it('should read all from default plugin config when nothing is present in database', async () => {
           // Given
           getStore.mockReturnValue({});
-          getFromConfig.mockReturnValue({});
+          getFromConfig.mockReturnValue(undefined);
           getContentTypes.mockReturnValue({});
 
           // When
@@ -66,7 +66,7 @@ describe('Navigation', () => {
           getStore.mockReturnValue({
             allowedLevels: faker.string.alphanumeric(),
           });
-          getFromConfig.mockReturnValue({});
+          getFromConfig.mockReturnValue(undefined);
           getContentTypes.mockReturnValue({});
 
           // Then
@@ -88,7 +88,7 @@ describe('Navigation', () => {
           getStore.mockReturnValue({
             additionalFields: invalidField,
           });
-          getFromConfig.mockReturnValue({});
+          getFromConfig.mockReturnValue(undefined);
           getContentTypes.mockReturnValue({});
 
           // Then
@@ -107,7 +107,24 @@ describe('Navigation', () => {
           getStore.mockReturnValue({
             allowedLevels,
           });
-          getFromConfig.mockReturnValue({});
+          getFromConfig.mockReturnValue(undefined);
+          getContentTypes.mockReturnValue({});
+
+          // When
+          const result = await configSetup({ strapi });
+
+          // Then
+          expect(result).toHaveProperty('allowedLevels', allowedLevels);
+        });
+
+        it('should use code config values when DB is empty', async () => {
+          // Given
+          const allowedLevels = 5; // non-default value (default is 2)
+
+          getStore.mockReturnValue(null);
+          getFromConfig.mockImplementation((key: string) =>
+            key === 'allowedLevels' ? allowedLevels : undefined
+          );
           getContentTypes.mockReturnValue({});
 
           // When
@@ -146,7 +163,7 @@ describe('Navigation', () => {
           getStore.mockReturnValue({
             contentTypes: allContentTypes,
           });
-          getFromConfig.mockReturnValue({});
+          getFromConfig.mockReturnValue(undefined);
 
           // When
           const result = await configSetup({ strapi });
@@ -174,7 +191,7 @@ describe('Navigation', () => {
             preferCustomContentTypes,
             isCacheEnabled,
           });
-          getFromConfig.mockReturnValue({});
+          getFromConfig.mockReturnValue(undefined);
           getContentTypes.mockReturnValue({});
 
           // When

server/tsconfig.json

@@ -4,6 +4,8 @@
   "compilerOptions": {
     "rootDir": "../",
     "baseUrl": ".",
-    "strict": true
+    "outDir": "./dist",
+    "strict": true,
+    "types": ["jest"]
   }
 }