fix: update navigation when new locale is created (#575)

Co-authored-by: matuesz-kleszcz <[email protected]>

Author: mateusz-kleszcz

admin/src/pages/HomePage/components/ChangeLanguageDialog/index.tsx

@@ -26,7 +26,9 @@ export const ChangeLanguageDialog: FC<Props> = ({ onConfirm, onCancel }) => {
     <ConfirmationDialog
       isVisible
       header={formatMessage(getTrad('pages.view.actions.changeLanguage.confirmation.header'))}
-      labelConfirm={formatMessage(getTrad('pages.view.actions.changeLanguage.confirmation.confirm'))}
+      labelConfirm={formatMessage(
+        getTrad('pages.view.actions.changeLanguage.confirmation.confirm')
+      )}
       iconConfirm={refreshIcon}
       mainIcon={refreshIcon}
       onConfirm={onConfirm}

admin/src/pages/HomePage/hooks/index.tsx

@@ -73,6 +73,28 @@ export const useResetContentTypes = () => {
   };
 };
 
+export const useInvalidateNavigations = () => {
+  const fetch = getFetchClient();
+  const apiClient = getApiClient(fetch);
+
+  const queryClient = useQueryClient();
+
+  return () => {
+    queryClient.invalidateQueries({
+      queryKey: apiClient.readAllIndex(),
+    });
+  };
+};
+
+export const useInvalidateLocale = () => {
+  const fetch = getFetchClient();
+  const apiClient = getApiClient(fetch);
+
+  const queryClient = useQueryClient();
+
+  return () => queryClient.invalidateQueries({ queryKey: apiClient.readLocaleIndex() });
+};
+
 export const useNavigations = () => {
   const fetch = getFetchClient();
   const apiClient = getApiClient(fetch);

admin/src/pages/HomePage/index.tsx

@@ -9,7 +9,7 @@ import {
 } from '@strapi/design-system';
 import { Data } from '@strapi/strapi';
 import { Layouts, Page, useRBAC } from '@strapi/strapi/admin';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
 import { first, isEmpty } from 'lodash';
 import { SyntheticEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -32,6 +32,8 @@ import {
   useConfig,
   useCopyNavigationI18n,
   useI18nCopyNavigationItemsModal,
+  useInvalidateLocale,
+  useInvalidateNavigations,
   useLocale,
   useNavigations,
   usePurgeNavigation,
@@ -92,15 +94,19 @@ const Inner = () => {
 
   const [currentLocale, setCurrentLocale] = useState<string>();
   const [isChangeLanguageVisible, setIsChangeLanguageVisible] = useState(false);
-  const changeCurrentLocaleAction = useMemo(() => makeAction<string>({
-    perform: (next) => {
-      setCurrentLocale(next);
-      setIsChangeLanguageVisible(false);
-      setStructureChanged(false);
-    },
-    trigger: () => setIsChangeLanguageVisible(true),
-    cancel: () => setIsChangeLanguageVisible(false),
-  }), [setCurrentLocale, setIsChangeLanguageVisible]);
+  const changeCurrentLocaleAction = useMemo(
+    () =>
+      makeAction<string>({
+        perform: (next) => {
+          setCurrentLocale(next);
+          setIsChangeLanguageVisible(false);
+          setStructureChanged(false);
+        },
+        trigger: () => setIsChangeLanguageVisible(true),
+        cancel: () => setIsChangeLanguageVisible(false),
+      }),
+    [setCurrentLocale, setIsChangeLanguageVisible]
+  );
 
   const viewPermissions = useMemo(
     () => ({
@@ -215,6 +221,9 @@ const Inner = () => {
   const resetContentTypes = useResetContentTypes();
   const resetNavigations = useResetNavigations();
 
+  const invalidateLocaleQuery = useInvalidateLocale();
+  const invalidateNavigationsQuery = useInvalidateNavigations();
+
   const {
     i18nCopyItemsModal,
     i18nCopySourceLocale,
@@ -441,7 +450,6 @@ const Inner = () => {
     }
   }, [navigationsQuery.data, currentNavigation]);
 
-
   useEffect(() => {
     if (currentNavigation && currentLocale !== currentNavigation.locale) {
       setRecentNavigation(undefined);
@@ -469,6 +477,11 @@ const Inner = () => {
     }
   }, [navigationsQuery.data]);
 
+  useEffect(() => {
+    invalidateLocaleQuery();
+    invalidateNavigationsQuery();
+  }, []);
+
   if (!navigationsQuery.data || !localeQuery.data || !!pending) {
     return <Page.Loading />;
   }

admin/src/translations/en.ts

@@ -451,11 +451,11 @@ const en = {
         },
         changeLanguage: {
           confirmation: {
-            header: "Confirmation",
-            confirm: "Continue",
-            content: "You have some unsaved changes. Do you want to continue?"
-          }
-        }
+            header: 'Confirmation',
+            confirm: 'Continue',
+            content: 'You have some unsaved changes. Do you want to continue?',
+          },
+        },
       },
     },
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "3.0.16",
+  "version": "3.0.17",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",

server/src/bootstrap.ts

@@ -4,6 +4,7 @@ import { configSetup } from './config';
 import { navigationSetup } from './i18n';
 import { setupPermissions } from './permissions';
 import { graphQLSetup } from './graphql';
+import { getPluginService } from './utils';
 
 const bootstrap = async (context: { strapi: Core.Strapi }) => {
   await configSetup(context);
@@ -12,5 +13,13 @@ const bootstrap = async (context: { strapi: Core.Strapi }) => {
   await graphQLSetup(context);
 
   await strapi.service('plugin::navigation.migrate').migrateRelatedIdToDocumentId();
+
+  strapi.db.lifecycles.subscribe({
+    models: ['plugin::i18n.locale'],
+    async afterCreate(event) {
+      const adminService = getPluginService(context, 'admin');
+      await adminService.refreshNavigationLocale(event.result?.code);
+    },
+  });
 };
 export default bootstrap;

server/src/services/admin/admin.ts

@@ -540,6 +540,35 @@ const adminService = (context: { strapi: Core.Strapi }) => ({
     await commonService.setDefaultConfig();
   },
 
+  async refreshNavigationLocale(newLocale?: string): Promise<void> {
+    if (!newLocale) {
+      return;
+    }
+
+    const commonService = getPluginService(context, 'common');
+
+    const { defaultLocale } = await commonService.readLocale();
+
+    const repository = getNavigationRepository(context);
+
+    const navigations = await repository.find({
+      limit: Number.MAX_SAFE_INTEGER,
+      locale: defaultLocale,
+    });
+
+    await Promise.all(
+      navigations.map(({ name, visible, slug, documentId }) =>
+        repository.save({
+          name,
+          visible,
+          locale: newLocale,
+          slug,
+          documentId,
+        })
+      )
+    );
+  },
+
   async updateConfig({ config: newConfig }: UpdateConfigInput): Promise<void> {
     const commonService = getPluginService(context, 'common');