feat(pci-kubernetes): delete shadcn and update to ods 19

ref: #TAPC-5164

Signed-off-by: Pierre-Philippe <[email protected]>

Author: ppprevost

packages/manager/apps/pci-kubernetes/package.json

@@ -7,18 +7,15 @@
   "scripts": {
     "build": "tsc --project tsconfig.build.json && vite build",
     "build:strict": "tsc --project tsconfig.json && vite build",
-    "coverage": "vitest run --coverage",
+    "coverage": "manager-test run --coverage",
     "lint": "eslint ./src",
     "lint:modern": "manager-lint --config eslint.config.mjs ./src",
     "lint:modern:fix": "manager-lint --fix --config eslint.config.mjs ./src",
     "start": "vite",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "test": "manager-test run",
+    "test:watch": "manager-test"
   },
   "dependencies": {
-    "@datatr-ux/ods-tailwind-config": "1.0.3",
-    "@datatr-ux/ovhcloud-types": "1.0.8",
-    "@datatr-ux/uxlib": "0.0.10",
     "@hookform/resolvers": "^3.3.4",
     "@ovh-ux/manager-common-translations": "^0.19.2",
     "@ovh-ux/manager-config": "^8.6.4",
@@ -34,7 +31,9 @@
     "@ovhcloud/ods-common-stencil": "17.2.2",
     "@ovhcloud/ods-common-theming": "17.2.2",
     "@ovhcloud/ods-components": "17.2.2",
+    "@ovhcloud/ods-react": "^19.0.2",
     "@ovhcloud/ods-theme-blue-jeans": "17.2.2",
+    "@ovhcloud/ods-themes": "^19.0.2",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.17.3",
     "clsx": "^2.1.1",
@@ -58,21 +57,14 @@
     "@ovh-ux/manager-static-analysis-kit": "^0.11.0",
     "@ovh-ux/manager-vite-config": "^0.13.3",
     "@tanstack/react-query-devtools": "^5.51.21",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "@vitest/coverage-v8": "^2.1.9",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "rollup": "^4.18.0",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5.4.5",
-    "vitest": "^2.1.9"
+    "typescript": "^5.4.5"
   },
   "regions": [
     "CA",

packages/manager/apps/pci-kubernetes/src/components/radio-tile/RadioTile.component.tsx

@@ -33,8 +33,9 @@ const RadioTile = ({
       {...(!disabled && { tabIndex: 0 })}
       onKeyDown={handleLabelKeyDown}
       data-testid="radio-tile-container"
+      className={cn(tileClassName, 'h-full')}
     >
-      <div className={cn(tileClassName)}>
+      <div className="h-full">
         <input
           onChange={(e) => (props.onChange ? props.onChange(e) : null)}
           className="hidden"
@@ -48,13 +49,14 @@ const RadioTile = ({
         <label
           id={labelId}
           className={cn(
-            'flex flex-col h-full w-full group border-2 border-primary-100 rounded-md',
+            'flex flex-col h-full w-full group border-2 border-solid  rounded-md',
             {
-              'border-primary-600  selected': !disabled && props.checked,
-              'border-primary-100 bg-white': !disabled && !props.checked,
-              'hover:shadow-sm hover:border-primary-600 hover:bg-primary-100 cursor-pointer':
+              'border-[--ods-color-blue-600]  selected': !disabled && props.checked,
+              'border-[--ods-color-blue-100] bg-white': !disabled && !props.checked,
+              'hover:shadow-sm  hover:bg-[--ods-color-blue-100] hover:border-[--ods-color-blue-600] cursor-pointer':
                 !disabled,
-              'bg-neutral-100 border-neutral-100 text-neutral-800': disabled,
+              'bg-neutral-100  text-neutral-800 border-[--ods-color-border-readonly-default]':
+                disabled,
             },
 
             labelClassName,
@@ -69,8 +71,4 @@ const RadioTile = ({
   );
 };
 
-RadioTile.Separator = function RadioTileSeparator() {
-  return <div className="w-full border-neutral-100 border-t mt-2 pt-2 " aria-hidden="true"></div>;
-};
-
 export default RadioTile;

packages/manager/apps/pci-kubernetes/src/components/region-selector/KubeDeploymentTile.tsx

@@ -32,10 +32,13 @@ export function KubeDeploymentTile({
       value={title}
       checked={isSelected}
     >
-      <div className="flex flex-col w-full items-center text-center space-y-4 px-[24px] py-[16px] min-h-[200px]">
-        <div className="flex flex-col lg:flex-row gap-4">
+      <article className="flex flex-col items-center text-center  px-[24px] py-[16px] gap-4 lg:gap-2  rounded-md">
+        <div className="flex flex-col lg:flex-row gap-1 lg:gap-4 items-center lg:items-baseline">
           <h2
-            className={clsx('text-base text-[#4d5693]', isSelected ? 'font-bold' : 'font-normal')}
+            className={clsx(
+              'text-base text-[--ods-color-text-500] mb-0 lg:mb-2',
+              isSelected ? 'font-bold' : 'font-normal',
+            )}
           >
             {title}
           </h2>
@@ -44,8 +47,8 @@ export function KubeDeploymentTile({
           </span>
         </div>
         <span className="inline-block px-4">{pillLabel}</span>
-        <p className="text-sm text-[#4d5693]">{description}</p>
-      </div>
+        <p className="text-sm text-[--ods-color-text-500]">{description}</p>
+      </article>
     </RadioTile>
   );
 }

packages/manager/apps/pci-kubernetes/src/index.css

@@ -1,6 +1,3 @@
-@import '@datatr-ux/ods-tailwind-config/style.css';
-@import '@datatr-ux/uxlib/style.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -9,6 +6,10 @@
   @apply md:mx-12 mt-8;
 }
 
+html {
+  font-family: var(--ods-font-family-default);
+}
+
 a:not([class]),
 .oui-link {
   font-family: 'Source Sans Pro', sans-serif;
@@ -43,12 +44,12 @@ code {
   border-radius: 6px !important;
 }
 
-osds-tile,
-osds-input {
-  border-width: var(--ods-size-input-md-border-width);
-  border-color: var(--ods-color-primary-200);
+.log-container {
+  color: var(--ods-color-text-500);
 }
 
+osds-tile,
 osds-input {
+  border-width: var(--ods-size-input-md-border-width);
   border-color: var(--ods-color-primary-200);
 }

packages/manager/apps/pci-kubernetes/src/main.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import ReactDOM from 'react-dom/client';
 
+import '@ovhcloud/ods-themes/default';
+
 import '@ovh-ux/manager-pci-common/dist/style.css';
 import { ShellContext, initI18n, initShellContext } from '@ovh-ux/manager-react-shell-client';
 

packages/manager/apps/pci-kubernetes/src/pages/detail/log/Logs.page.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { useTranslation } from 'react-i18next';
 
@@ -12,18 +12,18 @@ import {
 } from '@ovhcloud/ods-components';
 import { OsdsIcon, OsdsLink, OsdsText } from '@ovhcloud/ods-components/react';
 
-import { LogsView } from '@ovh-ux/manager-pci-common';
+import { LogsView, useParam } from '@ovh-ux/manager-pci-common';
 import { Notifications, useMe } from '@ovh-ux/manager-react-components';
 
 import { KubeLogsProvider } from './KubeLogsProvider';
 import { LOGS_INFO } from './constants';
 
 export default function LogsPage() {
   const { t } = useTranslation('logs');
-  const { kubeId, projectId } = useParams();
+  const { kubeId, projectId } = useParam('kubeId', 'projectId');
   const navigate = useNavigate();
   const ovhSubsidiary = useMe()?.me?.ovhSubsidiary;
-  const infoLink = LOGS_INFO[ovhSubsidiary] || LOGS_INFO.DEFAULT;
+  const infoLink = LOGS_INFO[ovhSubsidiary as keyof typeof LOGS_INFO] || LOGS_INFO.DEFAULT;
 
   return (
     <KubeLogsProvider kubeId={kubeId} projectId={projectId}>
@@ -52,7 +52,9 @@ export default function LogsPage() {
           />
         </span>
       </OsdsLink>
-      <LogsView onGotoStreams={() => navigate('./streams')} />
+      <div className="log-container">
+        <LogsView onGotoStreams={() => navigate('./streams')} />
+      </div>
     </KubeLogsProvider>
   );
 }

packages/manager/apps/pci-kubernetes/src/pages/new/steps/LocationStep.component.tsx

@@ -167,7 +167,7 @@ export function LocationStep({ projectId, onSubmit, step }: Readonly<LocationSte
               />
             </div>
 
-            <div className="grid md:grid-cols-4 gap-4 my-5">
+            <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-6 my-5">
               {tilesData.map(({ title, pillLabel, description, regionType, badge }) => (
                 <KubeDeploymentTile
                   key={regionType}