ovh · rjamet-ovh · Feb 10, 2025 · Feb 7, 2025
@@ -23,7 +23,6 @@
     "@ovh-ux/logs-to-customer": "^1.0.0",
     "@ovh-ux/manager-config": "^8.0.2",
     "@ovh-ux/manager-core-api": "^0.10.0",
-    "@ovh-ux/manager-core-test-utils": "^0.3.1",
     "@ovh-ux/manager-core-utils": "*",
     "@ovh-ux/manager-module-common-api": "^0.3.0",
     "@ovh-ux/manager-module-order": "^0.9.4",
@@ -37,16 +36,17 @@
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "date-fns": "^3.6.0",
-    "i18next-http-backend": "^2.4.3",
     "i18next": "^23.8.2",
+    "i18next-http-backend": "^2.4.3",
+    "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "^14.0.5",
-    "react-router-dom": "^6.3.0",
     "react-router": "^6.21.3",
-    "react": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "tailwindcss": "^3.4.4"
   },
   "devDependencies": {
+    "@ovh-ux/manager-core-test-utils": "^0.3.1",
     "@ovh-ux/manager-vite-config": "^0.9.0",
     "@tanstack/react-query-devtools": "^5.51.21",
     "@testing-library/jest-dom": "^6.6.3",

@@ -1,8 +1,8 @@
 import React from 'react';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import LogsToCustomerModule from '@ovh-ux/logs-to-customer/src/LogsToCustomer.module';
-import { Description } from '@ovh-ux/manager-react-components';
 import { useOKMSById } from '@/data/hooks/useOKMS';
 import { trackClickMap } from './LogsTracking.constant';
 
@@ -14,7 +14,9 @@ export default function KmsLogs() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Description>{t('key_management_service_logs_description')}</Description>
+      <OdsText preset="paragraph">
+        {t('key_management_service_logs_description')}
+      </OdsText>
       <LogsToCustomerModule
         logApiVersion="v2"
         logApiUrls={{

@@ -18,8 +18,11 @@
   },
   "devDependencies": {
     "@ovh-ux/manager-core-api": "^0.9.0",
-    "@ovh-ux/manager-react-components": "^1.41.1",
+    "@ovh-ux/manager-core-test-utils": "^0.3.1",
+    "@ovh-ux/manager-react-components": "^2.7.1",
     "@ovh-ux/manager-vite-config": "^0.9.0",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -34,14 +37,13 @@
   },
   "peerDependencies": {
     "@ovh-ux/manager-core-api": "^0.9.0",
+    "@ovh-ux/manager-core-test-utils": "^0.3.1",
     "@ovh-ux/manager-core-utils": "^0.3.0",
-    "@ovh-ux/manager-react-components": "^1.41.1",
+    "@ovh-ux/manager-react-components": "^2.7.1",
     "@ovh-ux/manager-react-shell-client": "^0.8.1",
     "@ovh-ux/manager-tailwind-config": "^0.2.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",
     "element-internals-polyfill": "^1.3.11",
     "i18next": "^23.8.2",

@@ -2,13 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from '@tanstack/react-query';
-import {
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
-import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import { Description } from '@ovh-ux/manager-react-components';
+import { OdsSelect, OdsSpinner, OdsText } from '@ovhcloud/ods-components/react';
 import {
   PageLocation,
   ButtonType,
@@ -86,11 +80,7 @@ export default function LogsToCustomerModule({
   if (isPending)
     return (
       <div className="flex py-8">
-        <OsdsSpinner
-          inline
-          size={ODS_SPINNER_SIZE.md}
-          data-testid="logKinds-spinner"
-        />
+        <OdsSpinner size="md" data-testid="logKinds-spinner" />
       </div>
     );
 
@@ -108,19 +98,28 @@ export default function LogsToCustomerModule({
     );
 
   if (logKinds.length === 0)
-    return <Description>{t('log_kind_empty_state_description')}</Description>;
+    return (
+      <OdsText preset="paragraph">
+        {t('log_kind_empty_state_description')}
+      </OdsText>
+    );
 
   if (!currentLogKind)
-    return <Description>{t('log_kind_no_kind_selected')}</Description>;
+    return (
+      <OdsText preset="paragraph">{t('log_kind_no_kind_selected')}</OdsText>
+    );
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-6">
       {logKinds.length > 1 && (
-        <div className="flex flex-col gap-4 ">
-          <Description>{t('log_kind_selector_select_label')}</Description>
-          <OsdsSelect
+        <div className="flex flex-col gap-2 ">
+          <OdsText preset="paragraph">
+            {t('log_kind_selector_select_label')}
+          </OdsText>
+          <OdsSelect
+            name="select-log-kind"
             value={currentLogKind?.kindId}
-            onOdsValueChange={(event) => {
+            onOdsChange={(event) => {
               const newLogKind = logKinds.find(
                 (k) => k.kindId === event.detail.value,
               );
@@ -138,15 +137,15 @@ export default function LogsToCustomerModule({
             data-testid={'logKindSelect'}
           >
             {logKinds.map((k) => (
-              <OsdsSelectOption
+              <option
                 key={k.kindId}
                 value={k.kindId}
                 data-testid={'logKindOption'}
               >
                 {k.displayName}
-              </OsdsSelectOption>
+              </option>
             ))}
-          </OsdsSelect>
+          </OdsSelect>
         </div>
       )}
       <LogsContext.Provider value={LogsContextValues}>

@@ -1,14 +1,4 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import {
-  ODS_BUTTON_SIZE,
-  ODS_BUTTON_VARIANT,
-  ODS_MESSAGE_TYPE,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsButton,
-  OsdsMessage,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsMessage } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -22,24 +12,14 @@ export default function ApiError({ error, onRetry, testId }: Readonly<IError>) {
   const { t } = useTranslation('error');
 
   return (
-    <div className="flex flex-col gap-4" data-testid={testId}>
-      <OsdsMessage
-        color={ODS_THEME_COLOR_INTENT.error}
-        type={ODS_MESSAGE_TYPE.error}
-      >
-        <OsdsText color={ODS_THEME_COLOR_INTENT.error}>
-          <div>{t('error_title')}</div>
+    <div className="flex flex-col gap-2" data-testid={testId}>
+      <OdsMessage color="danger" isDismissible={false}>
+        <span>
+          {`${t('error_title')}: `}
           <strong>{error.message}</strong>
-        </OsdsText>
-      </OsdsMessage>
-      <OsdsButton
-        size={ODS_BUTTON_SIZE.sm}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        variant={ODS_BUTTON_VARIANT.flat}
-        onClick={onRetry}
-      >
-        {t('error_retry_button')}
-      </OsdsButton>
+        </span>
+      </OdsMessage>
+      <OdsButton size="sm" onClick={onRetry} label={t('error_retry_button')} />
     </div>
   );
 }
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsSkeleton } from '@ovhcloud/ods-components/react';
+import { OdsSkeleton } from '@ovhcloud/ods-components/react';
 import { useLogSubscriptions } from '../../data/hooks/useLogSubscriptions';
 import { Stream } from '../../data/types/dbaas/logs';
 import { LogsContext } from '../../LogsToCustomer.context';
@@ -27,7 +27,7 @@ const DataStreamActions = ({ stream }: TDataStreamActions) => {
 
   if (isPending)
     return (
-      <OsdsSkeleton data-testid={DATA_STREAM_SUBSCRIPTION_LOADING_TEST_ID} />
+      <OdsSkeleton data-testid={DATA_STREAM_SUBSCRIPTION_LOADING_TEST_ID} />
     );
 
   if (error) return <span>{t('error_datagrid_cell')}</span>;

@@ -1,42 +1,42 @@
+import { OdsBadge } from '@ovhcloud/ods-components/react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import {
-  OdsChipAttribute,
-  ODS_CHIP_SIZE,
-  ODS_TEXT_COLOR_INTENT,
+  OdsBadge as OdsBadgeType,
+  ODS_BADGE_COLOR,
 } from '@ovhcloud/ods-components';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
 import { Stream } from '../../data/types/dbaas/logs';
 
 export const DATA_STREAM_INDEXING_STATUS_TEST_ID =
   'data-stream-indexing-status-test-id';
 
-export type DataStreamIndexingProps = Omit<OdsChipAttribute, 'color'> &
+export type DataStreamIndexingProps = Partial<
+  Omit<OdsBadgeType, 'color' | 'label'>
+> &
   Pick<Stream, 'indexingEnabled'>;
 
 const DataStreamIndexingStatus = ({
   indexingEnabled,
-  size = ODS_CHIP_SIZE.sm,
+  size = 'md',
   ...props
 }: DataStreamIndexingProps) => {
   const { t } = useTranslation('logStream');
 
   const label = indexingEnabled
     ? t('log_stream_indexing_active')
     : t('log_stream_indexing_inactive');
-  const color: ODS_TEXT_COLOR_INTENT = indexingEnabled
-    ? ODS_TEXT_COLOR_INTENT.success
-    : ODS_TEXT_COLOR_INTENT.warning;
+  const color: ODS_BADGE_COLOR = indexingEnabled
+    ? ODS_BADGE_COLOR.success
+    : ODS_BADGE_COLOR.warning;
 
   return (
-    <OsdsChip
+    <OdsBadge
+      label={label}
       size={size}
       color={color}
       data-testid={DATA_STREAM_INDEXING_STATUS_TEST_ID}
       {...props}
-    >
-      {label}
-    </OsdsChip>
+    />
   );
 };
 

@@ -1,6 +1,6 @@
 import {
-  OdsChipAttribute,
-  ODS_TEXT_COLOR_INTENT,
+  OdsBadge as OdsBadgeType,
+  ODS_BADGE_COLOR,
 } from '@ovhcloud/ods-components';
 import { render } from '@testing-library/react';
 import React from 'react';
@@ -12,19 +12,19 @@ import DataStreamIndexingStatus, {
 describe('data-stream indexing status', () => {
   type TTestCases = {
     indexingEnabled: Stream['indexingEnabled'];
-    color: OdsChipAttribute['color'];
+    color: OdsBadgeType['color'];
     label: string;
   };
 
   const testCases: TTestCases[] = [
     {
       indexingEnabled: false,
-      color: ODS_TEXT_COLOR_INTENT.warning,
+      color: ODS_BADGE_COLOR.warning,
       label: 'log_stream_indexing_inactive',
     },
     {
       indexingEnabled: true,
-      color: ODS_TEXT_COLOR_INTENT.success,
+      color: ODS_BADGE_COLOR.success,
       label: 'log_stream_indexing_active',
     },
   ];
@@ -37,7 +37,7 @@ describe('data-stream indexing status', () => {
       );
 
       const comp = getByTestId(DATA_STREAM_INDEXING_STATUS_TEST_ID);
-      expect(comp).toHaveTextContent(label);
+      expect(comp).toHaveAttribute('label', label);
       expect(comp).toHaveAttribute('color', color);
     },
   );

@@ -1,7 +1,7 @@
 import * as dateFnsLocales from 'date-fns/locale';
 import { useTranslation } from 'react-i18next';
+import { OdsSkeleton } from '@ovhcloud/ods-components/react';
 import { getDateFnsLocale } from '@ovh-ux/manager-core-utils';
-import { OsdsSkeleton } from '@ovhcloud/ods-components/react';
 import React, { useRef } from 'react';
 import { useLogRetention } from '../../data/hooks/useLogRetention';
 import { Service, Stream } from '../../data/types/dbaas/logs';
@@ -33,7 +33,7 @@ const DataStreamRetention = ({
   );
 
   if (isPending)
-    return <OsdsSkeleton data-testid={DATA_STREAM_RETENTION_LOADING_TEST_ID} />;
+    return <OdsSkeleton data-testid={DATA_STREAM_RETENTION_LOADING_TEST_ID} />;
 
   if (error) return <span>{t('error_datagrid_cell')}</span>;
 

@@ -1,13 +1,5 @@
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsIcon } from '@ovhcloud/ods-components/react';
-import {
-  ODS_BUTTON_SIZE,
-  ODS_BUTTON_VARIANT,
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-} from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ManagerButton } from '@ovh-ux/manager-react-components';
 import { usePostLogSubscription } from '../../data/hooks/useLogSubscriptions';
 import { Stream } from '../../data/types/dbaas/logs';
@@ -36,24 +28,16 @@ const SubscribeButton = ({ stream }: { stream: Stream }) => {
 
   return (
     <ManagerButton
-      size={ODS_BUTTON_SIZE.sm}
-      variant={ODS_BUTTON_VARIANT.stroked}
-      color={ODS_THEME_COLOR_INTENT.primary}
+      size="sm"
+      variant="outline"
       onClick={handleClick}
-      disabled={isPending || !!stream.parentStreamId || null}
+      isLoading={isPending}
+      isDisabled={!!stream.parentStreamId}
       iamActions={logIamActions.deleteSubscription}
       urn={resourceURN}
-    >
-      {isPending ? (
-        <OsdsIcon
-          name={ODS_ICON_NAME.REFRESH}
-          color={ODS_THEME_COLOR_INTENT.primary}
-          size={ODS_ICON_SIZE.sm}
-        />
-      ) : (
-        t('log_streams_subscribe')
-      )}
-    </ManagerButton>
+      id={'stream-subscription-btn'}
+      label={t('log_streams_subscribe')}
+    />
   );
 };