feat(catalog): implement common translations

ref: #MANAGER-19820

Signed-off-by: Maxime Bajeux <[email protected]>

Author: MaximeBajeux

packages/manager/apps/catalog/package.json

@@ -20,6 +20,7 @@
     "test:watch": "manager-test watch"
   },
   "dependencies": {
+    "@ovh-ux/manager-common-translations": "^0.21.0",
     "@ovh-ux/manager-core-api": "^0.19.0",
     "@ovh-ux/manager-core-utils": "^0.4.6",
     "@ovh-ux/manager-react-components": "^1.48.0",

packages/manager/apps/catalog/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 
 import { useTranslation } from 'react-i18next';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 
 import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
 
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 
 function Breadcrumb() {
   const { shell } = React.useContext(ShellContext);
-  const { t } = useTranslation('catalog');
+  const { t } = useTranslation(NAMESPACES.NAVIGATION);
   const [href, setHref] = React.useState('');
 
   React.useEffect(() => {
@@ -28,7 +29,10 @@ function Breadcrumb() {
     href: String(href),
   };
 
-  const items = [rootItem, { label: t('title'), href: '#' }];
+  const items = [
+    rootItem,
+    { label: t('manager_navigation_catalog'), href: '#' },
+  ];
   return <OsdsBreadcrumb items={items} />;
 }
 

packages/manager/apps/catalog/src/components/Filters/Filters.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
 import { OsdsButton, OsdsLink, OsdsText } from '@ovhcloud/ods-components/react';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 
 import { Product } from '@/api';
 import {
@@ -82,7 +83,8 @@ const Filters: React.FC<FiltersProps> = ({
     setParentSelectedUniverses([]);
   };
 
-  const { t } = useTranslation('catalog/filters');
+  const { t: tNavigation } = useTranslation(NAMESPACES.NAVIGATION);
+  const { t: tActions } = useTranslation(NAMESPACES.ACTIONS);
 
   const handleCheckboxChange = (
     type: 'category' | 'universe',
@@ -105,14 +107,14 @@ const Filters: React.FC<FiltersProps> = ({
   return (
     <>
       <span className="filters-container filters-container grid grid-cols-1 md:flex text-left">
-        <span className="filters-universes flex-[2]">
+        <span className="filters-universes flex-2">
           <OsdsText
             level={ODS_TEXT_LEVEL.heading}
             size={ODS_TEXT_SIZE._400}
             color={ODS_THEME_COLOR_INTENT.text}
             className="inline-block"
           >
-            {t('manager_catalog_filters_universes')}
+            {tNavigation('manager_navigation_universes')}
           </OsdsText>
           <span className="grid grid-cols-1">
             {universes.length ? (
@@ -124,7 +126,9 @@ const Filters: React.FC<FiltersProps> = ({
                     label={data.universe}
                     count={data.count}
                     type="universe"
-                    isChecked={selectedUniverses.includes(toFilterValue(data.universe))}
+                    isChecked={selectedUniverses.includes(
+                      toFilterValue(data.universe),
+                    )}
                     onCheckboxChange={handleCheckboxChange}
                   />
                 );
@@ -134,14 +138,14 @@ const Filters: React.FC<FiltersProps> = ({
             )}
           </span>
         </span>
-        <span className="filters-categories grid flex-[4]">
+        <span className="filters-categories grid flex-4">
           <OsdsText
             level={ODS_TEXT_LEVEL.heading}
             size={ODS_TEXT_SIZE._400}
             color={ODS_THEME_COLOR_INTENT.text}
             className="title"
           >
-            {t('manager_catalog_filters_categories')}
+            {tNavigation('manager_navigation_categories')}
           </OsdsText>
           <span className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
             {categories.length ? (
@@ -152,7 +156,9 @@ const Filters: React.FC<FiltersProps> = ({
                     label={item.category}
                     count={item.count}
                     type="category"
-                    isChecked={selectedCategories.includes(toFilterValue(item.category))}
+                    isChecked={selectedCategories.includes(
+                      toFilterValue(item.category),
+                    )}
                     onCheckboxChange={handleCheckboxChange}
                   />
                 );
@@ -168,19 +174,23 @@ const Filters: React.FC<FiltersProps> = ({
           <OsdsLink
             color={ODS_THEME_COLOR_INTENT.primary}
             onClick={() => resetFilters()}
-            onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && resetFilters()}
+            onKeyDown={(event: React.KeyboardEvent) =>
+              event.key === 'Enter' && resetFilters()
+            }
             data-tracking="filter::reset"
           >
-            {t('manager_catalog_filters_reset')}
+            {tActions('reset')}
           </OsdsLink>
           <OsdsButton
             disabled={!hasInteracted || undefined}
             color={ODS_THEME_COLOR_INTENT.primary}
             onClick={() => setFilters()}
-            onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setFilters()}
+            onKeyDown={(event: React.KeyboardEvent) =>
+              event.key === 'Enter' && setFilters()
+            }
             data-tracking="filter::apply"
           >
-            {t('manager_catalog_filters_button_apply')}
+            {tActions('filters_apply')}
           </OsdsButton>
         </span>
       </span>

packages/manager/apps/catalog/src/components/SearchBar/SearchBar.tsx

@@ -14,11 +14,15 @@ import {
   OdsInputValueChangeEventDetail,
   OsdsSearchBarCustomEvent,
 } from '@ovhcloud/ods-components';
-import { OsdsButton, OsdsIcon, OsdsSearchBar } from '@ovhcloud/ods-components/react';
+import {
+  OsdsButton,
+  OsdsIcon,
+  OsdsSearchBar,
+} from '@ovhcloud/ods-components/react';
 
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { Product } from '@/api';
 import Filters from '@/components/Filters/Filters';
-
 import FilterChip from '../Filters/FilterChip';
 
 interface SearchbarProps {
@@ -41,6 +45,7 @@ const SearchBar: React.FC<SearchbarProps> = ({
   setIsRouterInitialized,
 }) => {
   const { t } = useTranslation('catalog/search');
+  const { t: tActions } = useTranslation(NAMESPACES.ACTIONS);
 
   const [showFilters, setShowFilters] = useState(false);
   const [localSearchValue, setLocalSearchValue] = useState('');
@@ -56,11 +61,15 @@ const SearchBar: React.FC<SearchbarProps> = ({
     }
   }, [location.search]);
 
-  const onSearchSubmit = (event: CustomEvent<{ optionValue: string; inputValue: string }>) => {
+  const onSearchSubmit = (
+    event: CustomEvent<{ optionValue: string; inputValue: string }>,
+  ) => {
     setSearchValue(event.detail.inputValue.trim());
   };
 
-  const onSearchChanged = (event: OsdsSearchBarCustomEvent<OdsInputValueChangeEventDetail>) => {
+  const onSearchChanged = (
+    event: OsdsSearchBarCustomEvent<OdsInputValueChangeEventDetail>,
+  ) => {
     setLocalSearchValue(event.detail.value);
     setSearchValue(event.detail.value);
   };
@@ -96,18 +105,21 @@ const SearchBar: React.FC<SearchbarProps> = ({
             variant={ODS_BUTTON_VARIANT.stroked}
             color={ODS_THEME_COLOR_INTENT.primary}
             onKeyDown={(event: KeyboardEvent) =>
-              event.key === 'Enter' && setShowFilters((filterState) => !filterState)
+              event.key === 'Enter' &&
+              setShowFilters((filterState) => !filterState)
             }
             onClick={() => setShowFilters((filterState) => !filterState)}
-            data-tracking={`filter::${showFilters ? 'show-filter' : 'hide-filter'}`}
+            data-tracking={`filter::${
+              showFilters ? 'show-filter' : 'hide-filter'
+            }`}
           >
             <OsdsIcon
               name={ODS_ICON_NAME.FILTER}
               size={ODS_ICON_SIZE.xs}
               color={ODS_THEME_COLOR_INTENT.primary}
               className="mr-2"
             />
-            {t('manager_catalog_search_filter_button')}
+            {tActions('show_hide_filters')}
           </OsdsButton>
         </span>
       </div>

packages/manager/apps/catalog/src/pages/index.tsx

@@ -10,8 +10,8 @@ import {
   ODS_THEME_TYPOGRAPHY_SIZE,
 } from '@ovhcloud/ods-common-theming';
 import { OsdsDivider, OsdsText } from '@ovhcloud/ods-components/react';
-
 import { Card } from '@ovh-ux/manager-react-components';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 
 import { Product } from '@/api';
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
@@ -23,7 +23,8 @@ import { getSearchUrlFromFilterParams } from '@/utils/utils';
 import Loading from '../components/Loading/Loading';
 
 export default function Catalog() {
-  const { t } = useTranslation('catalog');
+  const { t: tNavigation } = useTranslation(NAMESPACES.NAVIGATION);
+  const { t: tDashboard } = useTranslation(NAMESPACES.DASHBOARD);
   const [, setSearchParams] = useSearchParams();
   const [searchText, setSearchText] = React.useState('');
   const [categories, setCategories] = React.useState<string[]>([]);
@@ -56,7 +57,7 @@ export default function Catalog() {
         color={ODS_THEME_COLOR_INTENT.text}
         className="mb-3"
       >
-        {t('title')}
+        {tNavigation('manager_navigation_catalog')}
         {isLoading ? '' : ` (${results.length})`}
       </OsdsText>
       <SearchBar
@@ -92,7 +93,9 @@ export default function Catalog() {
         )}
       </div>
       {!isLoading && results.length === 0 && (
-        <OsdsText className="text-center grid w-full">{t('no_result')}</OsdsText>
+        <OsdsText className="text-center grid w-full">
+          {tDashboard('no_result_found')}
+        </OsdsText>
       )}
     </div>
   );