feat(kms): ods18 upgrade

ref: MANAGER-15416 Signed-off-by: Nicolas Pierre-charles <[email protected]>
ovh · Dec 13, 2024 · 46dfde3 · 46dfde3
1 parent 9506324
commit 46dfde3
Show file tree

Hide file tree

Showing 122 changed files with 2,810 additions and 3,267 deletions.
diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json
@@ -55,8 +55,8 @@
     "@ovh-ux/manager-react-shell-client": "^0.8.3",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/manager-vite-config": "^0.8.3",
-    "@ovhcloud/ods-components": "^18.3.0",
-    "@ovhcloud/ods-themes": "^18.3.0",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@storybook/addon-docs": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
@@ -113,8 +113,8 @@
   "peerDependencies": {
     "@ovh-ux/manager-core-api": "^0.9.0-alpha.0",
     "@ovh-ux/manager-react-shell-client": "^0.8.3",
-    "@ovhcloud/ods-components": "^18.3.0",
-    "@ovhcloud/ods-themes": "^18.3.0",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "i18next": "^23.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/packages/manager-react-components/src/components/clipboard/clipboard.component.tsx b/packages/manager-react-components/src/components/clipboard/clipboard.component.tsx
@@ -4,15 +4,17 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import './translations';
 
-export const Clipboard: React.FC<Partial<OdsClipboardAttribute>> = (props) => {
+export const Clipboard: React.FC<
+  Partial<OdsClipboardAttribute> & { className?: string }
+> = (props) => {
   const { t } = useTranslation('clipboard');
 
   return (
     <OdsClipboard
-      {...props}
       data-testid="clipboard"
       labelCopySuccess={t('clipboard_copy_success')}
       labelCopy={t('clipboard_copy')}
+      {...props}
     />
   );
 };
diff --git a/...nager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx b/...nager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx
@@ -5,7 +5,7 @@ import { TileBlock } from './tile-block.component';
 
 export type DashboardTileBlockItem = {
   id: string;
-  label?: string;
+  label?: React.ReactNode;
   value: React.ReactNode;
 };
 

diff --git a/...s/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx b/...s/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText } from '@ovhcloud/ods-components/react';
 
 export type TileBlockProps = React.PropsWithChildren<{
-  label?: string;
+  label?: React.ReactNode;
 }>;
 
 export const TileBlock: React.FC<React.PropsWithChildren<TileBlockProps>> = ({
   label,
   children,
 }) => (
-  <dl className="flex flex-col gap-y-[8px] my-0">
-    <dt className="tile-block-title m-0 text-[--ods-color-heading] text-[16px] leading-[16px] font-semibold">
-      {label}
-    </dt>
-    <dd className="tile-block-description m-0 text-[--ods-color-text] text-[16px] leading-[16px] min-h-[16px]">
-      {children}
-    </dd>
-  </dl>
+  <div className="grid gap-1">
+    <OdsText preset={ODS_TEXT_PRESET.heading6}>{label}</OdsText>
+    <OdsText preset={ODS_TEXT_PRESET.paragraph}>{children}</OdsText>
+  </div>
 );
diff --git a/packages/manager-react-components/src/components/guides-header/guides-header.component.tsx b/packages/manager-react-components/src/components/guides-header/guides-header.component.tsx
@@ -24,7 +24,7 @@ export function GuidesHeader({
     <>
       <div id="guides-header-trigger">
         <OdsButton
-          slot={'menu-title'}
+          slot="menu-title"
           variant={ODS_BUTTON_VARIANT.ghost}
           icon={ODS_ICON_NAME.book}
           label={label}

diff --git a/...ages/manager-react-components/src/components/navigation/menus/action/action.component.tsx b/...ages/manager-react-components/src/components/navigation/menus/action/action.component.tsx
@@ -3,8 +3,10 @@ import {
   ODS_BUTTON_VARIANT,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
+  ODS_BUTTON_COLOR,
+  ODS_LINK_COLOR,
 } from '@ovhcloud/ods-components';
-import { OdsButton, OdsPopover } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsLink, OdsPopover } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import '../translations/translation';
 
@@ -13,6 +15,7 @@ import { ManagerButton } from '../../../ManagerButton/ManagerButton';
 export interface ActionMenuItem {
   id: number;
   rel?: string;
+  href?: string;
   download?: string;
   target?: string;
   onClick?: () => void;
@@ -21,6 +24,9 @@ export interface ActionMenuItem {
   iamActions?: string[];
   urn?: string;
   className?: string;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  color?: ODS_BUTTON_COLOR;
 }
 
 export interface ActionMenuProps {
@@ -30,6 +36,7 @@ export interface ActionMenuProps {
   variant?: ODS_BUTTON_VARIANT;
   id: string;
   isDisabled?: boolean;
+  isLoading?: boolean;
 }
 
 const MenuItem = ({
@@ -48,26 +55,29 @@ const MenuItem = ({
     className: 'w-full action-menu-item',
     ...item,
   };
+
+  if (item.href) {
+    return (
+      <div className="-mx-[2px]">
+        <OdsLink
+          className="block w-full action-menu-item p-2"
+          color={ODS_LINK_COLOR.primary}
+          href={item.href}
+          download={item.download}
+          label={item.label}
+          isDisabled={item.isDisabled}
+          onClick={item.onClick}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="-mx-[2px]">
       {!item?.iamActions || item?.iamActions?.length === 0 ? (
-        <OdsButton {...buttonProps} label={item.label}>
-          <span slot="start">
-            <span>{item.label}</span>
-          </span>
-        </OdsButton>
+        <OdsButton {...buttonProps} />
       ) : (
-        <ManagerButton
-          id={`${id}`}
-          isIamTrigger={isTrigger}
-          iamActions={item.iamActions}
-          urn={item.urn}
-          {...buttonProps}
-        >
-          <span slot="start">
-            <span>{item.label}</span>
-          </span>
-        </ManagerButton>
+        <ManagerButton id={`${id}`} isIamTrigger={isTrigger} {...buttonProps} />
       )}
     </div>
   );
@@ -79,6 +89,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   icon,
   variant = ODS_BUTTON_VARIANT.outline,
   isDisabled = false,
+  isLoading = false,
   id,
 }) => {
   const { t } = useTranslation('buttons');
@@ -94,6 +105,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
           id={id}
           variant={variant}
           isDisabled={isDisabled}
+          isLoading={isLoading}
           size={ODS_BUTTON_SIZE.sm}
           onClick={() => setIsTrigger(true)}
           {...(!isCompact && { label: t('common_actions') })}
@@ -110,16 +122,14 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
         triggerId={`navigation-action-trigger-${id}`}
         with-arrow
       >
-        {items.map(({ id: itemId, ...item }) => {
-          return (
-            <MenuItem
-              id={itemId}
-              key={itemId}
-              item={item}
-              isTrigger={isTrigger}
-            />
-          );
-        })}
+        {items.map(({ id: itemId, ...item }) => (
+          <MenuItem
+            id={itemId}
+            key={itemId}
+            item={item}
+            isTrigger={isTrigger}
+          />
+        ))}
       </OdsPopover>
     </>
   );

diff --git a/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx b/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx
@@ -21,14 +21,19 @@ export interface GuideItem {
 
 export interface GuideButtonProps {
   items: GuideItem[];
+  isLoading?: boolean;
 }
 
-export const GuideButton: React.FC<GuideButtonProps> = ({ items }) => {
+export const GuideButton: React.FC<GuideButtonProps> = ({
+  items,
+  isLoading,
+}) => {
   const { t } = useTranslation('buttons');
   return (
     <>
       <div id="navigation-menu-guide-trigger">
         <OdsButton
+          isLoading={isLoading}
           slot="menu-title"
           className="block mb-6"
           variant={ODS_BUTTON_VARIANT.ghost}
@@ -38,10 +43,11 @@ export const GuideButton: React.FC<GuideButtonProps> = ({ items }) => {
         />
       </div>
 
-      <OdsPopover triggerId="navigation-menu-guide-trigger" with-arrow="true">
+      <OdsPopover triggerId="navigation-menu-guide-trigger" withArrow>
         {items.map((item) => (
           <div key={item.id}>
             <Links
+              className="block py-2"
               href={item.href}
               target={item.target}
               download={item.download}

diff --git a/packages/manager-react-components/src/components/templates/base/base.component.tsx b/packages/manager-react-components/src/components/templates/base/base.component.tsx
@@ -3,6 +3,7 @@ import { Headers, HeadersProps } from '../../content';
 import { OdsText } from '@ovhcloud/ods-components/react';
 import { LinkType, Links, Subtitle } from '../../typography';
 import { PageLayout } from '../layout/layout.component';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 
 export type BaseLayoutProps = React.PropsWithChildren<{
   breadcrumb?: React.ReactElement;
@@ -31,14 +32,14 @@ export const BaseLayout = ({
   tabs,
 }: BaseLayoutProps) => (
   <PageLayout>
-    <div>{breadcrumb}</div>
+    <div className="mb-5">{breadcrumb}</div>
     {header && (
-      <div className="mt-[24px]">
+      <div className="mb-4">
         <Headers {...header} />
       </div>
     )}
     {backLinkLabel && (onClickReturn || hrefPrevious) && (
-      <div className="mb-[16px]">
+      <div className="mb-4">
         <Links
           data-testid="manager-back-link"
           onClickReturn={onClickReturn}
@@ -50,7 +51,7 @@ export const BaseLayout = ({
       </div>
     )}
     {description && (
-      <OdsText className="mb-[16px]" preset="span">
+      <OdsText className="mb-4 block" preset={ODS_TEXT_PRESET.paragraph}>
         {description}
       </OdsText>
     )}

diff --git a/...manager-react-components/src/components/templates/delete-modal/delete-modal.component.tsx b/...manager-react-components/src/components/templates/delete-modal/delete-modal.component.tsx
@@ -16,9 +16,11 @@ import {
   ODS_BUTTON_COLOR,
   ODS_MESSAGE_COLOR,
   ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import { handleClick } from '../../../utils/click-utils';
 import './translations/translations';
+import { Subtitle } from '../../typography';
 
 export const defaultDeleteModalTerminateValue = 'TERMINATE';
 
@@ -61,27 +63,21 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
   return (
     <OdsModal
       color={ODS_MODAL_COLOR.warning}
-      class="modal-actions"
       onOdsClose={close}
       isOpen={isOpen}
     >
-      <div>
-        <span className="delete-modal-headline text-[--ods-color-heading] text-[24px] leading-[32px] font-bold">
-          {headline}
-        </span>
-      </div>
+      <Subtitle>{headline}</Subtitle>
       {!!error && (
         <OdsMessage color={ODS_MESSAGE_COLOR.warning}>
-          <OdsText preset="span">{t('deleteModalError', { error })}</OdsText>
+          {t('deleteModalError', { error })}
         </OdsMessage>
       )}
-      <span className="delete-modal-description text-[--ods-color-text] text-[14px] leading-[18px] my-[8px]">
-        {description}
-      </span>
-      <OdsFormField className="mb-8">
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{description}</OdsText>
+      <OdsFormField className="block mb-8">
         <label slot="label">{deleteInputLabel}</label>
         <OdsInput
-          name=""
+          className="block"
+          name="delete-input"
           aria-label="delete-input"
           isDisabled={isLoading || undefined}
           type={ODS_INPUT_TYPE.text}
@@ -92,7 +88,6 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
         />
       </OdsFormField>
       <OdsButton
-        isDisabled={isLoading}
         slot="actions"
         data-testid="manager-delete-modal-cancel"
         variant={ODS_BUTTON_VARIANT.ghost}