feat(kms): ods18 migration

packages/manager/apps/key-management-service/package.json

@@ -11,9 +11,6 @@
   "license": "BSD-3-Clause",
   "author": "OVH SAS",
   "scripts": {
-    "beta-test:e2e": "tsc && npx playwright test --headed",
-    "beta-test:e2e:cii": "tsc && npx playwright test",
-    "beta-test:e2e:script": "tsc && node ../../../../scripts/run-playwright.js",
     "build": "tsc && vite build",
     "dev": "tsc && vite",
     "start": "lerna exec --stream --scope='@ovh-ux/manager-key-management-service-app' --include-dependencies -- npm run build --if-present",
@@ -25,43 +22,40 @@
   "dependencies": {
     "@ovh-ux/manager-config": "^8.0.2",
     "@ovh-ux/manager-core-api": "^0.9.0",
+    "@ovh-ux/manager-core-test-utils": "^0.2.0",
     "@ovh-ux/manager-core-utils": "*",
+    "@ovh-ux/manager-module-common-api": "^0.2.0",
     "@ovh-ux/manager-module-order": "^0.9.3",
-    "@ovh-ux/manager-react-components": "^1.41.1",
+    "@ovh-ux/manager-react-components": "^2.5.1",
     "@ovh-ux/manager-react-core-application": "^0.11.5",
     "@ovh-ux/manager-react-shell-client": "^0.8.5",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/request-tagger": "^0.4.0",
-    "@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.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
-    "date-fns": "^3.6.0",
     "i18next": "^23.8.2",
     "i18next-http-backend": "^2.4.3",
     "react": "^18.2.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
-    "react-router": "^6.21.3",
     "react-router-dom": "^6.3.0",
     "tailwindcss": "^3.4.4"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@ovh-ux/manager-vite-config": "^0.9.0",
-    "@playwright/test": "^1.49.1",
     "@tanstack/react-query-devtools": "^5.51.21",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
     "element-internals-polyfill": "^1.3.11",
     "msw": "2.1.7",
     "typescript": "^5.1.6",
     "vite": "^5.2.13",
-    "vitest": "^1.2.0"
+    "vitest": "^2.1.8"
   },
   "regions": [
     "CA",

packages/manager/apps/key-management-service/src/App.tsx

@@ -1,13 +1,10 @@
 import React, { useEffect, useContext } from 'react';
 import { QueryClientProvider, QueryClient } 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 appRoutes from './routes/routes';
 
-odsSetup();
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

packages/manager/apps/key-management-service/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import {
+  OdsBreadcrumb,
+  OdsBreadcrumbItem,
+} from '@ovhcloud/ods-components/react';
 import {
   BreadcrumbItem,
   useBreadcrumb,
@@ -18,7 +21,13 @@ function Breadcrumb({ items }: Readonly<BreadcrumbProps>): JSX.Element {
     items,
   });
 
-  return <OsdsBreadcrumb items={breadcrumbItems} />;
+  return (
+    <OdsBreadcrumb>
+      {breadcrumbItems.map(({ label, ...props }) => (
+        <OdsBreadcrumbItem key={label} label={label} {...props} />
+      ))}
+    </OdsBreadcrumb>
+  );
 }
 
 export default Breadcrumb;

packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.spec.tsx

@@ -5,7 +5,7 @@ import { describe, it, vi } from 'vitest';
 import {
   useFeatureAvailability,
   UseFeatureAvailabilityResult,
-} from '@ovh-ux/manager-react-components';
+} from '@ovh-ux/manager-module-common-api';
 import KmsGuidesHeader from './KmsGuidesHeader';
 import { FEATURES } from '@/utils/feature-availability/feature-availability.constants';
 import { GUIDE_LIST, SUPPORT_URL } from '@/hooks/guide/guidesLinks.constant';
@@ -34,9 +34,9 @@ vi.mock('@ovh-ux/manager-react-shell-client', () => ({
   }),
 }));
 
-vi.mock('@ovh-ux/manager-react-components', async (importOriginal) => {
+vi.mock('@ovh-ux/manager-module-common-api', async (importOriginal) => {
   const module = await importOriginal<
-    typeof import('@ovh-ux/manager-react-components')
+    typeof import('@ovh-ux/manager-module-common-api')
   >();
   return { ...module, useFeatureAvailability: vi.fn() };
 });
@@ -62,30 +62,30 @@ describe('KMS Guides Header tests suite', () => {
     } as UseFeatureAvailabilityResult);
 
     // act
-    const { getByText } = renderComponent();
+    const { getByTestId } = renderComponent();
 
     // then
     await waitFor(() => {
-      let guideElement = getByText('guides_header_quick_start');
+      let guideElement = getByTestId('guides_header_quick_start');
       expect(guideElement).toBeInTheDocument();
-      let osdsLinkElement = guideElement.closest('osds-link');
-      expect(osdsLinkElement).toHaveAttribute(
+      let odsLinkElement = guideElement.closest('ods-link');
+      expect(odsLinkElement).toHaveAttribute(
         'href',
         `${SUPPORT_URL.EU}${GUIDE_LIST.quickStart.FR}`,
       );
 
-      guideElement = getByText('guides_header_kms_usage');
+      guideElement = getByTestId('guides_header_kms_usage');
       expect(guideElement).toBeInTheDocument();
-      osdsLinkElement = guideElement.closest('osds-link');
-      expect(osdsLinkElement).toHaveAttribute(
+      odsLinkElement = guideElement.closest('ods-link');
+      expect(odsLinkElement).toHaveAttribute(
         'href',
         `${SUPPORT_URL.EU}${GUIDE_LIST.usage.FR}`,
       );
 
-      guideElement = getByText('guides_header_connect_kmip_product');
+      guideElement = getByTestId('guides_header_connect_kmip_product');
       expect(guideElement).toBeInTheDocument();
-      osdsLinkElement = guideElement.closest('osds-link');
-      expect(osdsLinkElement).toHaveAttribute(
+      odsLinkElement = guideElement.closest('ods-link');
+      expect(odsLinkElement).toHaveAttribute(
         'href',
         `${SUPPORT_URL.EU}${GUIDE_LIST.kmip.FR}`,
       );
@@ -102,14 +102,14 @@ describe('KMS Guides Header tests suite', () => {
     } as UseFeatureAvailabilityResult);
 
     // act
-    const { getByText, queryByText } = renderComponent();
+    const { getByTestId, queryByTestId } = renderComponent();
 
     // then
     await waitFor(() => {
-      expect(getByText('guides_header_quick_start')).toBeInTheDocument();
-      expect(queryByText('guides_header_kms_usage')).not.toBeInTheDocument();
+      expect(getByTestId('guides_header_quick_start')).toBeInTheDocument();
+      expect(queryByTestId('guides_header_kms_usage')).not.toBeInTheDocument();
       expect(
-        queryByText('guides_header_connect_kmip_product'),
+        queryByTestId('guides_header_connect_kmip_product'),
       ).not.toBeInTheDocument();
     });
   });