feat(zimbra): migrate to @ovhcloud/ods-components v18.3.1

packages/manager/apps/zimbra/package.json

@@ -25,16 +25,14 @@
     "@ovh-ux/manager-core-api": "^0.9.0",
     "@ovh-ux/manager-core-utils": "^0.3.0",
     "@ovh-ux/manager-module-order": "^0.8.0",
-    "@ovh-ux/manager-react-components": "^1.41.1",
+    "@ovh-ux/manager-react-components": "^2.3.0",
     "@ovh-ux/manager-react-core-application": "^0.11.1",
     "@ovh-ux/manager-react-shell-client": "^0.8.1",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/request-tagger": "^0.4.0",
     "@ovh-ux/shell": "^4.0.1",
-    "@ovhcloud/ods-common-core": "17.2.2",
-    "@ovhcloud/ods-common-theming": "17.2.2",
-    "@ovhcloud/ods-components": "17.2.2",
-    "@ovhcloud/ods-theme-blue-jeans": "17.2.2",
+    "@ovhcloud/ods-components": "^18.3.1",
+    "@ovhcloud/ods-themes": "^18.3.1",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "element-internals-polyfill": "^1.3.10",

packages/manager/apps/zimbra/src/App.tsx

@@ -1,14 +1,11 @@
 import React, { useEffect, useContext } from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { odsSetup } from '@ovhcloud/ods-common-core';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { RouterProvider, createHashRouter } from 'react-router-dom';
 import { Routes } from './routes/routes';
 import queryClient from './queryClient';
 
-odsSetup();
-
 function App() {
   const { shell } = useContext(ShellContext);
   const router = createHashRouter(Routes);

packages/manager/apps/zimbra/src/components/BadgeStatus.tsx

@@ -1,29 +1,34 @@
-import React from 'react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
+import React, { useMemo } from 'react';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
+import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
 import { ResourceStatus } from '@/api/api.type';
 
 export type BadgeStatusProps = {
   itemStatus: string;
+  'data-testid'?: string;
 };
 
-export const BadgeStatus: React.FC<BadgeStatusProps> = ({ itemStatus }) => {
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case ResourceStatus.READY:
-        return ODS_THEME_COLOR_INTENT.success;
-      case ResourceStatus.ERROR:
-        return ODS_THEME_COLOR_INTENT.error;
-      default:
-        return ODS_THEME_COLOR_INTENT.primary;
-    }
-  };
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case ResourceStatus.READY:
+      return ODS_BADGE_COLOR.success;
+    case ResourceStatus.ERROR:
+      return ODS_BADGE_COLOR.critical;
+    default:
+      return ODS_BADGE_COLOR.information;
+  }
+};
 
-  const statusColor = getStatusColor(itemStatus);
+export const BadgeStatus: React.FC<BadgeStatusProps> = (props) => {
+  const statusColor = useMemo(() => getStatusColor(props.itemStatus), [
+    props.itemStatus,
+  ]);
 
   return (
-    <OsdsChip inline color={statusColor}>
-      {itemStatus}
-    </OsdsChip>
+    <OdsBadge
+      data-testid={props['data-testid']}
+      color={statusColor}
+      label={props.itemStatus}
+    />
   );
 };

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

@@ -1,7 +1,16 @@
-import React from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import React, { useMemo } from 'react';
+import {
+  useParams,
+  useSearchParams,
+  createSearchParams,
+  useLocation,
+} from 'react-router-dom';
+import {
+  OdsBreadcrumb,
+  OdsBreadcrumbItem,
+} from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
+import { ODS_LINK_COLOR } from '@ovhcloud/ods-components';
 import { urls } from '@/routes/routes.constants';
 import { useGenerateUrl, useOrganization } from '@/hooks';
 
@@ -10,57 +19,80 @@ export type BreadcrumbProps = {
   overviewUrl?: string;
 };
 
+const whiteListedSearchParams = ['organizationId'];
+
 export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items = [],
   overviewUrl,
 }) => {
   const { serviceName } = useParams();
   const { t } = useTranslation('dashboard');
-  const navigate = useNavigate();
   const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const params = useMemo(() => {
+    return Array.from(searchParams.entries()).filter(([key]) =>
+      whiteListedSearchParams.includes(key),
+    );
+  }, [searchParams]);
+  const search = useMemo(
+    () => (params.length ? `?${createSearchParams(params)}` : ''),
+    [params],
+  );
   const { data: organization, isLoading } = useOrganization();
 
+  const rootUrl = serviceName
+    ? '#/:serviceName'.replace(':serviceName', serviceName)
+    : '#/';
+
   const overviewUrlValue = useGenerateUrl(
     overviewUrl ||
       (serviceName ? urls.overview.replace(':serviceName', serviceName) : '/'),
-    'path',
+    'href',
   );
-  const pathParts = location.pathname.split('/').filter(Boolean);
-  const breadcrumbParts = pathParts.slice(1);
-  const breadcrumbItems = [
-    {
-      label: t('zimbra_dashboard_title'),
-      onClick: () => navigate(urls.root),
-    },
-    ...(organization && !isLoading
-      ? [
-          {
-            label: organization?.currentState.name,
-            onClick: () => navigate(overviewUrlValue),
-          },
-        ]
-      : []),
-    ...breadcrumbParts.map((_, index) => {
-      const url = `/${pathParts
-        .slice(0, index + 2)
-        .join('/')}${location.search ?? ''}`;
-      const label = t(
-        `zimbra_dashboard_${breadcrumbParts.slice(0, index + 1).join('_')}`,
-      );
-      return {
-        label,
-        onClick: () => navigate(url),
-      };
-    }),
-    ...items,
-  ].filter(Boolean);
+
+  const breadcrumbItems = useMemo(() => {
+    const pathParts = location.pathname.split('/').filter(Boolean);
+    const breadcrumbParts = pathParts.slice(1);
+
+    return [
+      {
+        label: t('zimbra_dashboard_title'),
+        href: rootUrl,
+      },
+      ...(organization && !isLoading
+        ? [
+            {
+              label: organization?.currentState.name,
+              href: overviewUrlValue,
+            },
+          ]
+        : []),
+      ...breadcrumbParts.map((_, index) => {
+        const url = `#/${pathParts.slice(0, index + 2).join('/')}${search}`;
+        const label = t(
+          `zimbra_dashboard_${breadcrumbParts.slice(0, index + 1).join('_')}`,
+        );
+        return {
+          label,
+          href: url,
+        };
+      }),
+      ...items,
+    ].filter(Boolean);
+  }, [location, organization]);
 
   return (
-    <OsdsBreadcrumb
-      data-testid="breadcrumb"
-      className="mb-4"
-      items={breadcrumbItems}
-    />
+    <OdsBreadcrumb data-testid="breadcrumb" className="mb-4">
+      {breadcrumbItems.map((item) => (
+        <OdsBreadcrumbItem
+          key={item.label}
+          href={item.href}
+          color={ODS_LINK_COLOR.primary}
+          label={item.label}
+          target="_self"
+        />
+      ))}
+    </OdsBreadcrumb>
   );
 };