Fix/v5 i18n (#463)

* fix: i18n for v5 * fix: #461 delete navigation, #459 items ordering, settings page
VirtusLab-Open-Source · Oct 18, 2024 · dbfae3e · dbfae3e
1 parent 154ba72
commit dbfae3e
Show file tree

Hide file tree

Showing 28 changed files with 465 additions and 429 deletions.
diff --git a/README.md b/README.md
@@ -121,7 +121,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v5.0.6 (recently tested)
+- Strapi v5.1.0 (recently tested)
 - Strapi v5.x
 
 > This plugin is designed for **Strapi v5** and is not working with v4.x. To get version for **Strapi v4** install version [v4.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/strapi-v4).
@@ -373,7 +373,7 @@ NOTE: All params are optional
     "visible": true,
     "createdAt": "2023-09-29T12:45:54.399Z",
     "updatedAt": "2023-09-29T13:44:08.702Z",
-    "localeCode": "pl"
+    "locale": "pl"
   },
   {
     "id": 384,
@@ -382,7 +382,7 @@ NOTE: All params are optional
     "visible": true,
     "createdAt": "2023-09-29T12:45:54.399Z",
     "updatedAt": "2023-09-29T13:44:08.725Z",
-    "localeCode": "fr"
+    "locale": "fr"
   },
   {
     "id": 382,
@@ -391,7 +391,7 @@ NOTE: All params are optional
     "visible": true,
     "createdAt": "2023-09-29T12:45:54.173Z",
     "updatedAt": "2023-09-29T13:44:08.747Z",
-    "localeCode": "en"
+    "locale": "en"
   },
   {
     "id": 374,
@@ -400,7 +400,7 @@ NOTE: All params are optional
     "visible": true,
     "createdAt": "2023-09-29T12:22:30.373Z",
     "updatedAt": "2023-09-29T13:44:08.631Z",
-    "localeCode": "pl"
+    "locale": "pl"
   },
   {
     "id": 375,
@@ -409,7 +409,7 @@ NOTE: All params are optional
     "visible": true,
     "createdAt": "2023-09-29T12:22:30.373Z",
     "updatedAt": "2023-09-29T13:44:08.658Z",
-    "localeCode": "fr"
+    "locale": "fr"
   },
   {
     "id": 373,
@@ -418,7 +418,7 @@ NOTE: All params are optional
     "visible": true,
     "createdAt": "2023-09-29T12:22:30.356Z",
     "updatedAt": "2023-09-29T13:44:08.680Z",
-    "localeCode": "en"
+    "locale": "en"
   }
 ]
 ```

diff --git a/admin/src/api/client.ts b/admin/src/api/client.ts
@@ -66,6 +66,15 @@ export const getApiClient = once((fetch: ReturnType<typeof getFetchClient>) => (
     return [URL_PREFIX, 'config'];
   },
 
+  healthCheck() {
+    return fetch
+      .get(`/_health`);
+  },
+
+  healthCheckIndex() {
+    return ['health'];
+  },
+
   readNavigationItemFromLocale({
     source,
     structureId,

diff --git a/admin/src/api/validators.ts b/admin/src/api/validators.ts
@@ -50,7 +50,7 @@ export const navigationSchema = z.object({
   documentId: z.string(),
   name: z.string(),
   slug: z.string(),
-  localeCode: z.string(),
+  locale: z.string(),
   visible: z.boolean(),
   items: z.array(navigationItemSchema),
 });

diff --git a/admin/src/pages/HomePage/components/NavigationHeader/index.tsx b/admin/src/pages/HomePage/components/NavigationHeader/index.tsx
@@ -104,7 +104,7 @@ export const NavigationHeader: React.FC<Props> = ({
                       style={null}
                     >
                       {availableNavigations
-                        .filter(({ localeCode }) => localeCode === currentLocale)
+                        .filter(({ locale }) => locale === currentLocale)
                         .map(({ documentId, name }) => (
                           <SingleSelectOption key={documentId} value={documentId}>
                             {name}

diff --git a/admin/src/pages/HomePage/components/NavigationItemForm/index.tsx b/admin/src/pages/HomePage/components/NavigationItemForm/index.tsx
@@ -51,7 +51,7 @@ type NavigationItemFormProps = {
   onSubmit: SubmitEffect;
   availableLocale: string[];
   permissions?: Partial<{ canUpdate: boolean }>;
-  currentNavigation: Pick<NavigationSchema, 'id' | 'documentId' | 'localeCode'>;
+  currentNavigation: Pick<NavigationSchema, 'id' | 'documentId' | 'locale'>;
 };
 
 const FALLBACK_ADDITIONAL_FIELDS: Array<NavigationItemAdditionalField> = [];
@@ -380,7 +380,7 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
       event.stopPropagation();
 
       const source = navigationsQuery.data?.find(
-        ({ localeCode }) => localeCode === itemLocaleCopyValue
+        ({ locale }) => locale === itemLocaleCopyValue
       );
 
       if (source) {

diff --git a/admin/src/pages/HomePage/components/NavigationItemPopup/index.tsx b/admin/src/pages/HomePage/components/NavigationItemPopup/index.tsx
@@ -18,7 +18,7 @@ interface Props {
   availableLocale: Array<string>;
   locale: string;
   permissions?: { canUpdate?: boolean };
-  currentNavigation: Pick<NavigationSchema, 'id' | 'documentId' | 'localeCode'>;
+  currentNavigation: Pick<NavigationSchema, 'id' | 'documentId' | 'locale'>;
 }
 
 const NavigationItemPopUp: FC<Props> = ({

diff --git a/admin/src/pages/HomePage/components/NavigationManager/AllNavigations/index.tsx b/admin/src/pages/HomePage/components/NavigationManager/AllNavigations/index.tsx
@@ -92,7 +92,7 @@ export const AllNavigations = ({ navigations, selected, setState }: Props) => {
       navigations.filter(
         (navigation) =>
           navigation.documentId === focused.documentId &&
-          navigation.localeCode !== focused.localeCode
+          navigation.locale !== focused.locale
       )
     );
 
@@ -163,7 +163,7 @@ export const AllNavigations = ({ navigations, selected, setState }: Props) => {
         </Thead>
         <Tbody>
           {navigations
-            .filter(({ localeCode }) => localeCode === localeQuery.data?.defaultLocale)
+            .filter(({ locale }) => locale === localeQuery.data?.defaultLocale)
             .map((navigation) => (
               <Tr key={navigation.documentId}>
                 <Td>
@@ -183,7 +183,7 @@ export const AllNavigations = ({ navigations, selected, setState }: Props) => {
                 </Td>
                 <Td>
                   <Typography textColor="neutral800">
-                    {getLocalizations(navigation).map(prop('localeCode')).join(', ')}
+                    {getLocalizations(navigation).map(prop('locale')).join(', ')}
                   </Typography>
                 </Td>
                 <Td>

diff --git a/admin/src/pages/HomePage/components/NavigationManager/types.ts b/admin/src/pages/HomePage/components/NavigationManager/types.ts
@@ -4,7 +4,7 @@ import { NavigationSchema } from '../../../../api/validators';
 
 export type Navigation = Pick<
   NavigationSchema,
-  'id' | 'items' | 'name' | 'localeCode' | 'visible' | 'documentId' | 'slug'
+  'id' | 'items' | 'name' | 'locale' | 'visible' | 'documentId' | 'slug'
 >;
 
 export type NewNavigation = Omit<Navigation, 'id' | 'documentId' | 'slug'>;

diff --git a/admin/src/pages/HomePage/index.tsx b/admin/src/pages/HomePage/index.tsx
@@ -1,3 +1,4 @@
+import { Data } from '@strapi/strapi';
 import {
   Box,
   Button,
@@ -9,7 +10,7 @@ import {
 } from '@strapi/design-system';
 import { Layouts, Page, useRBAC } from '@strapi/strapi/admin';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { isEmpty } from 'lodash';
+import { first, isEmpty } from 'lodash';
 import { SyntheticEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -48,6 +49,7 @@ const Inner = () => {
 
   const localeQuery = useLocale();
 
+  const [recentNavigation, setRecentNavigation] = useState<{ documentId?: string, id?: Data.ID }>();
   const [currentNavigation, setCurrentNavigation] = useState<NavigationSchema>();
 
   const [activeNavigationItem, setActiveNavigationItemState] = useState<
@@ -179,16 +181,16 @@ const Inner = () => {
     useCallback(
       (sourceLocale) => {
         const source = navigationsQuery.data?.find(
-          ({ localeCode, documentId }) =>
-            localeCode === sourceLocale && documentId === currentNavigation?.documentId
+          ({ locale, documentId }) =>
+            locale === sourceLocale && documentId === currentNavigation?.documentId
         );
 
         if (source) {
           if (source.documentId && currentNavigation?.documentId) {
             copyNavigationI18nMutation.mutate(
               {
-                source: source.localeCode,
-                target: currentNavigation.localeCode,
+                source: source.locale,
+                target: currentNavigation.locale,
                 documentId: source.documentId,
               },
               {
@@ -210,6 +212,10 @@ const Inner = () => {
   }, [setI18nCopyModalOpened, i18nCopySourceLocale]);
 
   const updateNavigationMutation = useUpdateNavigation(() => {
+    setRecentNavigation({
+      documentId: currentNavigation?.documentId,
+      id: currentNavigation?.id,
+    });
     setCurrentNavigation(undefined);
   });
 
@@ -369,7 +375,17 @@ const Inner = () => {
 
   useEffect(() => {
     if (!currentNavigation && navigationsQuery.data?.[0]) {
-      setCurrentNavigation(navigationsQuery.data[0]);
+
+      let navigation;
+      if (recentNavigation?.documentId) {
+        navigation = navigationsQuery.data.find((nav) => 
+          (nav.documentId === recentNavigation.documentId) &&
+          (nav.id === recentNavigation.id)
+        )
+      }
+
+      setRecentNavigation(undefined);
+      setCurrentNavigation(navigation ? navigation : first(navigationsQuery.data));
     }
   }, [navigationsQuery.data]);
 
@@ -380,17 +396,19 @@ const Inner = () => {
   }, [navigationsQuery.data]);
 
   useEffect(() => {
-    if (currentNavigation && currentLocale !== currentNavigation.localeCode) {
+    if (currentNavigation && currentLocale !== currentNavigation.locale) {
+      setRecentNavigation(undefined);
+
       const nextNavigation = navigationsQuery.data?.find(
         (navigation) =>
           navigation.documentId === currentNavigation.documentId &&
-          navigation.localeCode === currentLocale
+          navigation.locale === currentLocale
       );
 
       if (
         nextNavigation &&
         nextNavigation.documentId === currentNavigation.documentId &&
-        nextNavigation.localeCode !== currentNavigation.localeCode
+        nextNavigation.locale !== currentNavigation.locale
       ) {
         setCurrentNavigation(nextNavigation);
       }

diff --git a/admin/src/pages/SettingsPage/hooks/index.ts b/admin/src/pages/SettingsPage/hooks/index.ts
@@ -24,8 +24,19 @@ export const useRestart = () => {
   const fetch = getFetchClient();
   const apiClient = getApiClient(fetch);
 
+  const healthCheck = useQuery({
+    queryKey: apiClient.healthCheckIndex(),
+    queryFn: () => apiClient.healthCheck(),
+    retry: true,
+    retryDelay: 1000 * 5,
+    enabled: false,
+  });
+
   return useMutation({
-    mutationFn: () => apiClient.restart(),
+    mutationFn: () => {
+      return apiClient.restart()
+        .then(() => healthCheck.refetch());
+    },
   });
 };
 
@@ -79,6 +90,7 @@ export const useSaveConfig = () => {
   });
 };
 
+
 export type UiFormSchema = z.infer<typeof uiFormSchema>;
 
 export const uiFormSchema = configSchema.omit({ contentTypesNameFields: true }).extend({

diff --git a/admin/src/pages/SettingsPage/index.tsx b/admin/src/pages/SettingsPage/index.tsx
@@ -2,7 +2,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useIntl } from 'react-intl';
-import { get, isEmpty, isNil, isObject, isString, set, sortBy } from 'lodash';
+import { get, isEmpty, isNaN, isNil, isObject, isString, set, sortBy } from 'lodash';
 import { Field, usePluginTheme } from "@sensinum/strapi-utils";
 
 import {
@@ -239,13 +239,13 @@ const Inner = () => {
     restartMutation.mutate(undefined, {
       onSuccess() {
         setRestartStatus({ required: false });
+        window.location.reload();
       },
       onError() {
         setRestartStatus({ required: false });
+        window.location.reload();
       },
     });
-    // TODO: Reload
-    window.location.reload();
   };
   const handleRestartDiscard = () => setRestartStatus({ required: false });
 
@@ -365,8 +365,8 @@ const Inner = () => {
                                 name="preferCustomContentTypes"
                                 checked={values.preferCustomContentTypes}
                                 onChange={(eventOrPath: FormChangeEvent) => handleChange(eventOrPath, !values.preferCustomContentTypes, onChange)}
-                                onLabel={formatMessage(getTrad('component.toggle.enabled'))}
-                                offLabel={formatMessage(getTrad('component.toggle.disabled'))}
+                                onLabel={formatMessage(getTrad('components.toggle.enabled'))}
+                                offLabel={formatMessage(getTrad('components.toggle.disabled'))}
                                 disabled={restartStatus.required}
                                 width="100%"
                               />
@@ -660,10 +660,17 @@ const Inner = () => {
                             <NumberInput
                               width="100%"
                               name="allowedLevels"
+                              type="number"
                               placeholder={formatMessage(
                                 getTrad('pages.settings.form.allowedLevels.placeholder')
                               )}
-                              onChange={(eventOrPath: FormChangeEvent, value?: any) => handleChange(eventOrPath, value, onChange)}
+                              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);
+                              }}
                               value={values.allowedLevels}
                               disabled={restartStatus.required}
                             />
@@ -682,8 +689,8 @@ const Inner = () => {
                             name="cascadeMenuAttached"
                             checked={values.cascadeMenuAttached}
                             onChange={(eventOrPath: FormChangeEvent) => handleChange(eventOrPath, !values.cascadeMenuAttached, onChange)}
-                            onLabel={formatMessage(getTrad('component.toggle.enabled'))}
-                            offLabel={formatMessage(getTrad('component.toggle.disabled'))}
+                            onLabel={formatMessage(getTrad('components.toggle.enabled'))}
+                            offLabel={formatMessage(getTrad('components.toggle.disabled'))}
                             disabled={restartStatus.required}
                           />
                         </Field>
@@ -697,8 +704,8 @@ const Inner = () => {
                             name="audienceFieldChecked"
                             checked={values.audienceFieldChecked}
                             onChange={(eventOrPath: FormChangeEvent) => handleChange(eventOrPath, !values.audienceFieldChecked, onChange)}
-                            onLabel={formatMessage(getTrad('component.toggle.enabled'))}
-                            offLabel={formatMessage(getTrad('component.toggle.disabled'))}
+                            onLabel={formatMessage(getTrad('components.toggle.enabled'))}
+                            offLabel={formatMessage(getTrad('components.toggle.disabled'))}
                             disabled={restartStatus.required}
                             width="100%"
                           />
@@ -714,8 +721,8 @@ const Inner = () => {
                               name="isCacheEnabled"
                               checked={values.isCacheEnabled}
                               onChange={(eventOrPath: FormChangeEvent) => handleChange(eventOrPath, !values.isCacheEnabled, onChange)}
-                              onLabel={formatMessage(getTrad('component.toggle.enabled'))}
-                              offLabel={formatMessage(getTrad('component.toggle.disabled'))}
+                              onLabel={formatMessage(getTrad('components.toggle.enabled'))}
+                              offLabel={formatMessage(getTrad('components.toggle.disabled'))}
                               disabled={restartStatus.required}
                               width="100%"
                             />

diff --git a/admin/src/translations/ca.ts b/admin/src/translations/ca.ts
@@ -432,6 +432,10 @@ const ca = {
     },
   },
   components: {
+    toggle: {
+      enabled: "Activé",
+      disabled: "Désactivé",
+    },
     navigationItem: {
       action: {
         newItem: "Ajouter un élément imbriqué",