feat: update logs to ods 18

ref: TAPC-2378 Signed-off-by: Lionel Bueno <[email protected]>
ovh · Dec 16, 2024 · 0cdb3ff · 0cdb3ff
1 parent b1ccd3c
commit 0cdb3ff
Show file tree

Hide file tree

Showing 16 changed files with 202 additions and 361 deletions.
diff --git a/packages/manager/modules/manager-pci-common/package.json b/packages/manager/modules/manager-pci-common/package.json
@@ -37,7 +37,8 @@
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "clsx": "2.1.1",
     "date-fns": "^3.6.0",
-    "lodash.isequal": "^4.5.0"
+    "lodash.isequal": "^4.5.0",
+    "@ovh-ux/manager-core-utils": "^0.3.0"
   },
   "devDependencies": {
     "@ovh-ux/manager-core-api": "^0.9.0",

diff --git a/...manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx b/...manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx
@@ -17,10 +17,12 @@ const URL_INFO = {
 
 export type TFlavorLocalzoneChip = {
   isLocalZone: boolean;
+  id: string;
 };
 
 export function FlavorLocalzoneChip({
   isLocalZone,
+  id,
 }: Readonly<TFlavorLocalzoneChip>) {
   const { t } = useTranslation('pci-flavors');
   const { ovhSubsidiary } = useContext(ShellContext).environment.getUser();
@@ -31,7 +33,7 @@ export function FlavorLocalzoneChip({
 
   return (
     <>
-      <div id="popover-trigger">
+      <div id={id}>
         <OdsTag
           className={clsx(
             'text-[--ods-color-primary-500] font-bold text-[14px]',
@@ -51,7 +53,7 @@ export function FlavorLocalzoneChip({
           onClick={(event) => event.stopPropagation()}
         />
       </div>
-      <OdsPopover triggerId="popover-trigger">
+      <OdsPopover triggerId={id}>
         <OdsText preset="span">
           {isLocalZone
             ? t('pci_project_flavors_zone_localzone_tooltip')

diff --git a/...er/modules/manager-pci-common/src/components/flavor-selector/FlavorSelector.component.tsx b/...er/modules/manager-pci-common/src/components/flavor-selector/FlavorSelector.component.tsx
@@ -62,6 +62,7 @@ export function FlavorSelector({
             .map((flavor) => (
               <div key={flavor.id}>
                 <FlavorTile
+                  id={flavor.id}
                   flavorName={flavor.name.toUpperCase()}
                   flavorSpecs={{
                     ram: flavor.ram,

diff --git a/...anager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx b/...anager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx
@@ -26,6 +26,7 @@ export interface FlavorDiskType {
 }
 
 export interface FlavorTileProps {
+  id: string;
   flavorName: string;
   flavorSpecs: {
     ram: number;
@@ -59,6 +60,7 @@ const separatorClass = 'h-px my-5 bg-[#85d9fd] border-0';
 const gigabytes = 10 ** 9;
 
 export function FlavorTile({
+  id,
   flavorName,
   flavorSpecs,
   flavorCompatibility,
@@ -136,9 +138,14 @@ export function FlavorTile({
           {t('pci_project_flavors_zone_compatible')}
         </OdsText>
         <div className="flex gap-4 mt-3">
-          {flavorCompatibility.localzone && <FlavorLocalzoneChip isLocalZone />}
+          {flavorCompatibility.localzone && (
+            <FlavorLocalzoneChip isLocalZone id={`popover-localzone-${id}`} />
+          )}
           {flavorCompatibility.globalzone && (
-            <FlavorLocalzoneChip isLocalZone={false} />
+            <FlavorLocalzoneChip
+              isLocalZone={false}
+              id={`popover-globalzone-${id}`}
+            />
           )}
         </div>
         <hr className={separatorClass} />

diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/BlinkingCursor.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/BlinkingCursor.component.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import style from './blinking-cursor.module.scss';
 
 export function BlinkingCursor() {

diff --git a/...ger/modules/manager-pci-common/src/components/logs/DbaasLogsAccountSelector.component.tsx b/...ger/modules/manager-pci-common/src/components/logs/DbaasLogsAccountSelector.component.tsx
@@ -1,10 +1,6 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import {
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
+import { OdsSelect, OdsSpinner } from '@ovhcloud/ods-components/react';
 import { TDbaasLog } from '../../api/data/dbaas-logs';
 import { useDbaasLogs } from '../../api/hook/useLogs';
 
@@ -26,32 +22,32 @@ export function DbaasLogsAccountSelector({
   if (isPending)
     return (
       <div className="text-center">
-        <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
+        <OdsSpinner size={ODS_SPINNER_SIZE.md} />
       </div>
     );
 
   return (
     <>
       {dbaasLogs?.length && (
         <div className="mt-8">
-          <OsdsSelect
+          <OdsSelect
+            name="select-serviceName"
             className="w-[20rem]"
             value={account?.serviceName}
-            onOdsValueChange={(event) =>
+            onOdsChange={(event) =>
               onAccountChange(
                 dbaasLogs.find(
                   ({ serviceName }) => serviceName === `${event.detail.value}`,
                 ),
               )
             }
-            inline
           >
             {dbaasLogs.map((log) => (
-              <OsdsSelectOption value={log.serviceName} key={log.serviceName}>
+              <option value={log.serviceName} key={log.serviceName}>
                 {log.displayName || log.serviceName}
-              </OsdsSelectOption>
+              </option>
             ))}
-          </OsdsSelect>
+          </OdsSelect>
         </div>
       )}
     </>

diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/LogHowTo.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/LogHowTo.component.tsx
@@ -1,24 +1,16 @@
-import React, { useContext } from 'react';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-} from '@ovhcloud/ods-common-theming';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_SIZE,
 } from '@ovhcloud/ods-components';
 import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsLink,
-  OsdsText,
-  OsdsTile,
+  OdsButton,
+  OdsLink,
+  OdsText,
+  OdsCard,
 } from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAllStreamIds, useDbaasLogs } from '../../api/hook/useLogs';
 import { LogContext } from './LogProvider.component';
@@ -69,64 +61,45 @@ export function LogHowTo({ onGotoStreams }: Readonly<LogHowToProps>) {
     }
   };
 
+  const getLogButtonLabel = () => {
+    if (!hasAccount) {
+      return t('log_button_create_account');
+    }
+    if (hasAccount && !hasStream) {
+      return t('log_button_create_stream');
+    }
+    return t('log_button_transfer_stream');
+  };
+
   return (
     <>
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.primary}
-        level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-        size={ODS_TEXT_SIZE._300}
-      >
-        {t('log_tile_section_title')}
-      </OsdsText>
-      <OsdsTile className="mt-4" color={ODS_THEME_COLOR_INTENT.primary}>
+      <OdsText preset="heading-1">{t('log_tile_section_title')}</OdsText>
+      <OdsCard className="mt-4">
         <div className="flex flex-col">
-          <OsdsText
-            className="block"
-            color={ODS_THEME_COLOR_INTENT.text}
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            size={ODS_TEXT_SIZE._400}
-          >
-            {t('log_tile_title')}
-          </OsdsText>
+          <OdsText preset="heading-2">{t('log_tile_title')}</OdsText>
           {t('log_tile_empty_state_description')}
           {!hasAccount && <p>{t('log_tile_desc_create_account')}</p>}
           {hasAccount && !hasStream && (
             <p>{t('log_tile_desc_create_stream')}</p>
           )}
           {logsGuideURL && (
-            <OsdsLink
+            <OdsLink
+              label={t('log_data_platform_guide_link')}
+              icon={ODS_ICON_NAME.externalLink}
               className="mt-4"
-              color={ODS_THEME_COLOR_INTENT.primary}
               href={logsGuideURL}
-              target={OdsHTMLAnchorElementTarget._blank}
-            >
-              {t('log_data_platform_guide_link')}
-              <span slot="end">
-                <OsdsIcon
-                  aria-hidden="true"
-                  className="ml-4"
-                  name={ODS_ICON_NAME.EXTERNAL_LINK}
-                  hoverable
-                  size={ODS_ICON_SIZE.xxs}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                />
-              </span>
-            </OsdsLink>
+              target="_blank"
+            />
           )}
-          <OsdsButton
+          <OdsButton
             className="mt-8"
-            inline
-            color={ODS_THEME_COLOR_INTENT.primary}
             size={ODS_BUTTON_SIZE.sm}
-            variant={ODS_BUTTON_VARIANT.stroked}
+            variant={ODS_BUTTON_VARIANT.outline}
             onClick={onCreate}
-          >
-            {!hasAccount && t('log_button_create_account')}
-            {hasAccount && !hasStream && t('log_button_create_stream')}
-            {hasAccount && hasStream && t('log_button_transfer_stream')}
-          </OsdsButton>
+            label={getLogButtonLabel()}
+          />
         </div>
-      </OsdsTile>
+      </OdsCard>
     </>
   );
 }
diff --git a/...ger/modules/manager-pci-common/src/components/logs/LogTileUnsubscribeAction.component.tsx b/...ger/modules/manager-pci-common/src/components/logs/LogTileUnsubscribeAction.component.tsx
@@ -1,13 +1,12 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ApiError } from '@ovh-ux/manager-core-api';
-import { OsdsButton, OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsSpinner } from '@ovhcloud/ods-components/react';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useRemoveSubscription } from '../../api/hook/useLogs';
 import { LogContext } from './LogProvider.component';
 
@@ -36,20 +35,18 @@ export function LogTileUnsubscribeAction({
     <>
       {isRemovePending && (
         <div className="text-center mt-8">
-          <OsdsSpinner size={ODS_SPINNER_SIZE.md} inline />
+          <OdsSpinner size={ODS_SPINNER_SIZE.md} />
         </div>
       )}
       {!isRemovePending && (
-        <OsdsButton
+        <OdsButton
+          label={t('list_button_unsubscribe')}
           className="mt-4"
-          inline
           color={ODS_THEME_COLOR_INTENT.primary}
           size={ODS_BUTTON_SIZE.sm}
           variant={ODS_BUTTON_VARIANT.ghost}
           onClick={remove}
-        >
-          {t('list_button_unsubscribe')}
-        </OsdsButton>
+        />
       )}
     </>
   );