feat(manager-react-components): upgrade ods version 18

ref: MANAGER-14622 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Aug 28, 2024 · 2e50b13 · 2e50b13
1 parent 3675b01
commit 2e50b13
Show file tree

Hide file tree

Showing 19 changed files with 270 additions and 288 deletions.
diff --git a/packages/manager-react-components/.storybook/preview.tsx b/packages/manager-react-components/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import React, { Suspense, useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { odsSetup } from '@ovhcloud/ods-common-core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
+import '../src/lib.scss';
 import { Preview } from '@storybook/react';
 import '../src/tailwind/theme.css';
 import i18n from './i18n';

diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json
@@ -31,10 +31,8 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@ovh-ux/manager-core-api": "^0.8.0",
     "@ovh-ux/manager-react-shell-client": "^0.7.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.0.0-alpha.1",
+    "@ovhcloud/ods-themes": "18.0.0-alpha.1",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "@types/lodash.isdate": "^4.0.9",

diff --git a/packages/manager-react-components/src/components/ManagerButton/ManagerButton.stories.tsx b/packages/manager-react-components/src/components/ManagerButton/ManagerButton.stories.tsx
@@ -3,7 +3,8 @@ import { ManagerButton, ManagerButtonProps } from './ManagerButton';
 
 export const Default = {
   args: {
-    children: 'Remove button',
+    id: 'iam-button-urn-action-1',
+    label: 'Remove button',
     urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
     iamActions: ['vrackServices:apiovh:iam/resource/tag/remove'],
   },

diff --git a/packages/manager-react-components/src/components/ManagerButton/ManagerButton.tsx b/packages/manager-react-components/src/components/ManagerButton/ManagerButton.tsx
@@ -1,9 +1,5 @@
 import React, { PropsWithChildren, RefAttributes, HTMLAttributes } from 'react';
-import {
-  OsdsButton,
-  OsdsTooltip,
-  OsdsTooltipContent,
-} from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsTooltip } from '@ovhcloud/ods-components/react';
 import { JSX } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { StyleReactProps } from '@ovhcloud/ods-components/react/dist/types/react-component-lib/interfaces';
@@ -12,47 +8,59 @@ import './translations';
 import { useAuthorizationIam } from '../../hooks/iam';
 
 export type ManagerButtonProps = PropsWithChildren<{
+  id: string;
   iamActions?: string[];
   urn?: string;
   displayTooltip?: boolean;
   isIamTrigger?: boolean;
 }>;
 
 export const ManagerButton = ({
+  id,
   children,
+  label,
   iamActions,
   urn,
   displayTooltip = true,
   isIamTrigger = true,
   ...restProps
 }: ManagerButtonProps &
   Partial<
-    JSX.OsdsButton &
-      Omit<HTMLAttributes<HTMLOsdsButtonElement>, 'style' | 'id'> &
+    JSX.OdsButton &
+      Omit<HTMLAttributes<HTMLOdsButtonElement>, 'style' | 'id'> &
       StyleReactProps &
-      RefAttributes<HTMLOsdsButtonElement>
+      RefAttributes<HTMLOdsButtonElement>
   >) => {
   const { t } = useTranslation('iam');
   const { isAuthorized } = useAuthorizationIam(iamActions, urn, isIamTrigger);
 
   if (!isAuthorized) {
     if (!displayTooltip) {
       return (
-        <OsdsButton {...restProps} disabled onClick={null}>
-          {children}
-        </OsdsButton>
+        <OdsButton
+          {...restProps}
+          isDisabled={true}
+          onClick={null}
+          label={label}
+        />
       );
     }
     return (
-      <OsdsTooltip>
-        <OsdsButton {...restProps} disabled onClick={null}>
-          {children}
-        </OsdsButton>
-        <OsdsTooltipContent slot="tooltip-content">
+      <>
+        <div id={id} className="w-fit">
+          <OdsButton
+            {...restProps}
+            isDisabled={true}
+            label={label}
+            content="true"
+            onClick={null}
+          />
+        </div>
+        <OdsTooltip triggerId={id} with-arrow>
           <div>{t('common_iam_actions_message')}</div>
-        </OsdsTooltipContent>
-      </OsdsTooltip>
+        </OdsTooltip>
+      </>
     );
   }
-  return <OsdsButton {...restProps}>{children}</OsdsButton>;
+  return <OdsButton {...restProps} label={label} />;
 };
diff --git a/packages/manager-react-components/src/components/ManagerText/ManagerText.tsx b/packages/manager-react-components/src/components/ManagerText/ManagerText.tsx
@@ -1,10 +1,6 @@
 import React, { PropsWithChildren, RefAttributes, HTMLAttributes } from 'react';
 import { JSX } from '@ovhcloud/ods-components';
-import {
-  OsdsText,
-  OsdsTooltip,
-  OsdsTooltipContent,
-} from '@ovhcloud/ods-components/react';
+import { OdsText, OdsTooltip } from '@ovhcloud/ods-components/react';
 import { StyleReactProps } from '@ovhcloud/ods-components/react/dist/types/react-component-lib/interfaces';
 import { useTranslation } from 'react-i18next';
 import './translations';
@@ -23,22 +19,25 @@ export const ManagerText = ({
   ...restProps
 }: ManagerTextProps &
   Partial<
-    JSX.OsdsText &
-      Omit<HTMLAttributes<HTMLOsdsTextElement>, 'style'> &
+    JSX.OdsText &
+      Omit<HTMLAttributes<HTMLOdsTextElement>, 'style'> &
       StyleReactProps &
-      RefAttributes<HTMLOsdsTextElement>
+      RefAttributes<HTMLOdsTextElement>
   >) => {
   const { t } = useTranslation('iam');
   const { isAuthorized } = useAuthorizationIam(iamActions, urn);
+
   if (!isAuthorized) {
     return (
-      <OsdsTooltip>
-        <OsdsText {...restProps}>{t('iam_hidden_text').toUpperCase()}</OsdsText>
-        <OsdsTooltipContent slot="tooltip-content">
+      <>
+        <div id="tooltip-iam" className="w-fit">
+          <OdsText {...restProps}>{t('iam_hidden_text').toUpperCase()}</OdsText>
+        </div>
+        <OdsTooltip triggerId="tooltip-iam" with-arrow>
           <div>{t('common_iam_actions_message')}</div>
-        </OsdsTooltipContent>
-      </OsdsTooltip>
+        </OdsTooltip>
+      </>
     );
   }
-  return <OsdsText {...restProps}>{children}</OsdsText>;
+  return <OdsText {...restProps}>{children}</OdsText>;
 };
diff --git a/packages/manager-react-components/src/components/clipboard/clipboard.component.tsx b/packages/manager-react-components/src/components/clipboard/clipboard.component.tsx
@@ -1,31 +1,19 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OdsClipboardAttribute } from '@ovhcloud/ods-components';
-import { OsdsClipboard, OsdsText } from '@ovhcloud/ods-components/react';
+import type { OdsClipboard as OdsClipboardAttribute } from '@ovhcloud/ods-components';
+import { OdsClipboard } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import './translations';
+import './index.scss';
 
 export const Clipboard: React.FC<OdsClipboardAttribute> = (props) => {
   const { t } = useTranslation('clipboard');
 
   return (
-    <OsdsClipboard {...props} data-testid="clipboard">
-      <span slot="success-message">
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.success}
-          data-testid="clipboard-success"
-        >
-          {t('clipboard_copy_success')}
-        </OsdsText>
-      </span>
-      <span slot="error-message">
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.error}
-          data-testid="clipboard-error"
-        >
-          {t('clipboard_copy_error')}
-        </OsdsText>
-      </span>
-    </OsdsClipboard>
+    <OdsClipboard
+      {...props}
+      data-testid="clipboard"
+      labelCopySuccess={t('clipboard_copy_success')}
+      labelCopy={t('clipboard_copy"')}
+    />
   );
 };
diff --git a/packages/manager-react-components/src/components/clipboard/clipboard.stories.tsx b/packages/manager-react-components/src/components/clipboard/clipboard.stories.tsx
@@ -17,15 +17,14 @@ export const regular: Story = {
 export const disabled: Story = {
   args: {
     value: 'Disabled clipboard',
-    disabled: true,
+    isDisabled: true,
   },
 };
 
-export const inline: Story = {
-  args: {
-    value: 'Inline clipboard',
-    inline: true,
-  },
-};
+// export const inline: Story = {
+//   args: {
+//     value: 'Inline clipboard',
+//   },
+// };
 
 export default meta;
diff --git a/packages/manager-react-components/src/components/container/step/Step.component.tsx b/packages/manager-react-components/src/components/container/step/Step.component.tsx
@@ -1,21 +1,15 @@
 import React, { Suspense } from 'react';
 import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsLink,
-  OsdsSpinner,
-  OsdsText,
+  OdsButton,
+  OdsIcon,
+  OdsSpinner,
+  OdsText,
 } from '@ovhcloud/ods-components/react';
-import {
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_COLOR_INTENT,
-} from '@ovhcloud/ods-common-theming';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { v4 as uuidV4 } from 'uuid';
 import {
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
   ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
 import { clsx } from 'clsx';
@@ -57,9 +51,8 @@ export const StepComponent = ({
     <section className="flex flex-row border-0 border-t-[1px] border-solid border-t-[#b3b3b3] pt-5 mb-5">
       <div className="basis-[40px]">
         {isChecked ? (
-          <OsdsIcon
-            size={ODS_ICON_SIZE.sm}
-            name={ODS_ICON_NAME.CHECK}
+          <OdsIcon
+            name={ODS_ICON_NAME.check}
             className={'mr-2'}
             color={ODS_THEME_COLOR_INTENT.primary}
           />
@@ -70,17 +63,15 @@ export const StepComponent = ({
               isOpen ? 'border-[#0050d7]' : 'border-[grey]',
             )}
           >
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._500}
+            <OdsText
               color={
                 isOpen
                   ? ODS_THEME_COLOR_INTENT.text
                   : ODS_THEME_COLOR_INTENT.default
               }
             >
               {order}
-            </OsdsText>
+            </OdsText>
           </div>
         )}
       </div>
@@ -98,7 +89,8 @@ export const StepComponent = ({
           </div>
           {edit?.action && isLocked && (
             <div className="text-2xl w-full md:w-1/6" data-testid="edit">
-              <OsdsLink
+              <OdsButton
+                label={edit.label as string}
                 data-testid="edit-cta"
                 className="float-left md:float-right"
                 color={ODS_THEME_COLOR_INTENT.primary}
@@ -108,9 +100,7 @@ export const StepComponent = ({
                     edit.action(id);
                   }
                 }}
-              >
-                {edit.label}
-              </OsdsLink>
+              />
             </div>
           )}
         </div>
@@ -124,26 +114,23 @@ export const StepComponent = ({
                 isLocked && 'cursor-not-allowed pointer-events-none opacity-50',
               )}
             >
-              <Suspense
-                fallback={<OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />}
-              >
+              <Suspense fallback={<OdsSpinner size={ODS_SPINNER_SIZE.md} />}>
                 {children}
               </Suspense>
             </div>
             {next?.action && !isLocked && (
               <div className="mt-6" data-testid="next">
-                <OsdsButton
+                <OdsButton
                   data-testid="next-cta"
+                  label={next.label as string}
                   size={ODS_BUTTON_SIZE.md}
                   color={ODS_THEME_COLOR_INTENT.primary}
                   onClick={() => {
                     next.action(id);
                   }}
                   className="w-fit"
                   {...(next.isDisabled ? { disabled: true } : {})}
-                >
-                  {next.label}
-                </OsdsButton>
+                />
               </div>
             )}
           </>

diff --git a/packages/manager-react-components/src/components/container/tabs/Tabs.component.tsx b/packages/manager-react-components/src/components/container/tabs/Tabs.component.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { clsx } from 'clsx';
 import { v4 as uuidV4 } from 'uuid';
-import { OsdsIcon } from '@ovhcloud/ods-components/react';
-import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
+import { OdsIcon } from '@ovhcloud/ods-components/react';
+import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { hashCode } from '../../../utils';
 
@@ -129,19 +129,15 @@ export function TabsComponent<Item>({
                 </div>
                 <div className="w-fit flex items-center">
                   {!Object.is(state.selectedItem, item) ? (
-                    <OsdsIcon
-                      className=""
-                      name={ODS_ICON_NAME.CHEVRON_DOWN}
-                      size={ODS_ICON_SIZE.sm}
+                    <OdsIcon
+                      name={ODS_ICON_NAME.chevronDown}
                       color={ODS_THEME_COLOR_INTENT.primary}
-                    ></OsdsIcon>
+                    ></OdsIcon>
                   ) : (
-                    <OsdsIcon
-                      className=""
-                      name={ODS_ICON_NAME.CHEVRON_UP}
-                      size={ODS_ICON_SIZE.sm}
+                    <OdsIcon
+                      name={ODS_ICON_NAME.chevronUp}
                       color={ODS_THEME_COLOR_INTENT.primary}
-                    ></OsdsIcon>
+                    ></OdsIcon>
                   )}
                 </div>
               </button>