fix(muk): correct hook useTranslatedMicroRegion

packages/manager-ui-kit/src/hooks/region/__tests__/useTranslatedMicroRegions.spec.tsx

@@ -1,13 +1,18 @@
 import { renderHook } from '@testing-library/react';
 import { vitest } from 'vitest';
 
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
+
 import { getMacroRegion, isLocalZone } from '../Regions.utils';
 import { useTranslatedMicroRegions } from '../useTranslatedMicroRegions';
 
+const mockExists = vitest.fn();
+const mockT = vitest.fn((key: string) => key);
+
 vitest.mock('react-i18next', () => ({
   useTranslation: () => ({
-    t: (key: string) => key,
-    i18n: { exists: () => true },
+    t: mockT,
+    i18n: { exists: mockExists },
   }),
 }));
 
@@ -38,8 +43,88 @@ describe('getMacroRegion', () => {
 });
 
 describe('useTranslatedMicroRegions', () => {
-  it('returns translated region', () => {
-    const { result } = renderHook(() => useTranslatedMicroRegions());
-    expect(result.current.translateMicroRegion('WES-1')).toBe('region_WES_micro');
+  beforeEach(() => {
+    mockExists.mockClear();
+    mockT.mockClear();
+  });
+
+  describe('translateMicroRegion', () => {
+    it('returns translated micro region when translation exists', () => {
+      mockExists.mockReturnValue(true);
+      const { result } = renderHook(() => useTranslatedMicroRegions());
+      const translated = result.current.translateMicroRegion('WES-1');
+
+      expect(mockExists).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_WES_micro`);
+      expect(mockT).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_WES_micro`, {
+        micro: 'WES-1',
+      });
+      expect(translated).toBe(`${NAMESPACES.REGION}:region_WES_micro`);
+    });
+
+    it('returns empty string when translation does not exist', () => {
+      mockExists.mockReturnValue(false);
+      const { result } = renderHook(() => useTranslatedMicroRegions());
+      const translated = result.current.translateMicroRegion('WES-1');
+
+      expect(mockExists).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_WES_micro`);
+      expect(mockT).not.toHaveBeenCalled();
+      expect(translated).toBe('');
+    });
+
+    it('handles local zone regions correctly', () => {
+      mockExists.mockReturnValue(true);
+      const { result } = renderHook(() => useTranslatedMicroRegions());
+      const translated = result.current.translateMicroRegion('EU-WEST-LZ-MAD-A');
+
+      expect(mockExists).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_MAD_micro`);
+      expect(mockT).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_MAD_micro`, {
+        micro: 'EU-WEST-LZ-MAD-A',
+      });
+      expect(translated).toBe(`${NAMESPACES.REGION}:region_MAD_micro`);
+    });
+  });
+
+  describe('translateMacroRegion', () => {
+    it('returns translated macro region when translation exists', () => {
+      mockExists.mockReturnValue(true);
+      const { result } = renderHook(() => useTranslatedMicroRegions());
+      const translated = result.current.translateMacroRegion('WES-1');
+
+      expect(mockExists).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_WES`);
+      expect(mockT).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_WES`);
+      expect(translated).toBe(`${NAMESPACES.REGION}:region_WES`);
+    });
+
+    it('returns empty string when translation does not exist', () => {
+      mockExists.mockReturnValue(false);
+      const { result } = renderHook(() => useTranslatedMicroRegions());
+      const translated = result.current.translateMacroRegion('WES-1');
+
+      expect(mockExists).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_WES`);
+      expect(mockT).not.toHaveBeenCalled();
+      expect(translated).toBe('');
+    });
+  });
+
+  describe('translateContinentRegion', () => {
+    it('returns translated continent region when translation exists', () => {
+      mockExists.mockReturnValue(true);
+      const { result } = renderHook(() => useTranslatedMicroRegions());
+      const translated = result.current.translateContinentRegion('WES-1');
+
+      expect(mockExists).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_continent_WES`);
+      expect(mockT).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_continent_WES`);
+      expect(translated).toBe(`${NAMESPACES.REGION}:region_continent_WES`);
+    });
+
+    it('returns empty string when translation does not exist', () => {
+      mockExists.mockReturnValue(false);
+      const { result } = renderHook(() => useTranslatedMicroRegions());
+      const translated = result.current.translateContinentRegion('WES-1');
+
+      expect(mockExists).toHaveBeenCalledWith(`${NAMESPACES.REGION}:region_continent_WES`);
+      expect(mockT).not.toHaveBeenCalled();
+      expect(translated).toBe('');
+    });
   });
 });

packages/manager-ui-kit/src/hooks/region/useTranslatedMicroRegions.tsx

@@ -9,23 +9,23 @@ export const useTranslatedMicroRegions = () => {
 
   return {
     translateMicroRegion: (region: string) => {
-      const macro = getMacroRegion(region);
-      if (i18n.exists(`region:region_${macro}_micro`)) {
-        return t(`region_${macro}_micro`, { micro: region });
+      const macro = getMacroRegion(region)?.toUpperCase();
+      if (i18n.exists(`${NAMESPACES.REGION}:region_${macro}_micro`)) {
+        return t(`${NAMESPACES.REGION}:region_${macro}_micro`, { micro: region });
       }
       return '';
     },
     translateMacroRegion: (region: string) => {
-      const macro = getMacroRegion(region);
-      if (i18n.exists(`region:region_${macro}`)) {
-        return t(`region_${macro}`);
+      const macro = getMacroRegion(region)?.toUpperCase();
+      if (i18n.exists(`${NAMESPACES.REGION}:region_${macro}`)) {
+        return t(`${NAMESPACES.REGION}:region_${macro}`);
       }
       return '';
     },
     translateContinentRegion: (region: string) => {
-      const macro = getMacroRegion(region);
-      if (i18n.exists(`region:region_continent_${macro}`)) {
-        return t(`region_continent_${macro}`);
+      const macro = getMacroRegion(region)?.toUpperCase();
+      if (i18n.exists(`${NAMESPACES.REGION}:region_continent_${macro}`)) {
+        return t(`${NAMESPACES.REGION}:region_continent_${macro}`);
       }
       return '';
     },

packages/manager-wiki/.storybook/i18n.ts

@@ -1,14 +1,31 @@
+/// <reference types="vite/client" />
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import I18NextHttpBackend from 'i18next-http-backend';
 
-i18n.use(initReactI18next).init({
+i18n
+.use(initReactI18next)
+.use(I18NextHttpBackend)
+.use({
+  type: 'postProcessor',
+  name: 'normalize',
+  process: (value: string) => (value ? value.replace(/&amp;/g, '&') : value),
+})
+.init({
   fallbackLng: 'fr_FR',
   interpolation: {
     escapeValue: false,
   },
-  resources: {
-    en: {},
+  defaultNS: 'common',
+  ns: ['common'],
+  backend: {
+    loadPath: (lngs: string[], namespaces: string[]) => {
+      const [lng] = lngs;
+      const [ns] = namespaces;
+      return `${import.meta.env.BASE_URL}translations/${ns}/Messages_${lng}.json`;
+    },
   },
+  postProcess: 'normalize',
 });
 
 export default i18n;

packages/manager-wiki/.storybook/main.tsx

@@ -23,7 +23,14 @@ const config: StorybookConfig = {
       },
     },
   },
-  staticDirs: ['./public/assets', './public'],
+  staticDirs: [
+    './public/assets',
+    './public',
+    {
+      from: '../../manager/modules/common-translations/public/translations',
+      to: '/translations/@ovh-ux/manager-common-translations',
+    },
+  ],
   docs: {
     autodocs: true,
     defaultName: 'Technical information',