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

packages/manager-react-components/.storybook/manager.tsx

@@ -0,0 +1,15 @@
+import { addons } from '@storybook/manager-api';
+import theme from './ovh.theme';
+
+addons.setConfig({
+  theme,
+  enableShortcuts: false,
+  showToolbar: true,
+  sidebar: {
+    filters: {
+      patterns: (item: any) => {
+        return !item.tags.includes('isHidden');
+      },
+    },
+  },
+});

packages/manager-react-components/.storybook/ovh.theme.ts

@@ -0,0 +1,35 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  // Brand
+  colorPrimary: '#004FD6',
+  colorSecondary: '#004FD6',
+
+  // UI
+  appBg: '#FF3358',
+  appBorderColor: '#004FD6',
+  appBorderRadius: 0,
+  appContentBg: '#ffffff',
+
+  // Typography
+  fontBase:
+    '"Source Sans Pro", "Trebuchet MS", "Arial", "Segoe UI", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#202124',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barBg: '#f3fcff',
+  barSelectedColor: '#004FD6',
+  barTextColor: '#202124',
+
+  // Form colors
+  inputBg: '#ffffff',
+  inputBorder: '#cccccc',
+  inputBorderRadius: 4,
+  inputTextColor: '#333333',
+});

packages/manager-react-components/.storybook/preview.tsx

@@ -1,15 +1,12 @@
 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 '@ovhcloud/ods-themes/default';
 import i18n from './i18n';
-
-import '@ovhcloud/ods-theme-blue-jeans';
-
-odsSetup();
+import './storybook.css';
 
 const mockQueryClient = new QueryClient({
   defaultOptions: {
@@ -22,6 +19,16 @@ const mockQueryClient = new QueryClient({
 
 const preview: Preview = {
   parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h2, h3',
+        disable: false,
+      },
+      source: {
+        excludeDecorators: true,
+      },
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {

packages/manager-react-components/.storybook/storybook.css

@@ -0,0 +1,66 @@
+#storybook-docs > .sbdocs-wrapper {
+  padding: 1.5rem 3rem 3rem 3rem;
+}
+
+/***************************************
+    * TYPOGRAPHY
+***************************************/
+
+html body *:not(pre):not(code),
+html body .sbdocs-content *:not(pre):not(code) {
+  font-family: var(--ods-font-family-default);
+}
+
+pre,
+code {
+  font-family: var(--ods-font-family-code) !important;
+  padding: 20px;
+  background: inherit;
+}
+
+.sbdocs-content > h1,
+.sbdocs-content > div:not(.sb-unstyled) > h1,
+.sbdocs-content > h2,
+.sbdocs-content > div:not(.sb-unstyled) > h2,
+.sbdocs-content > h3,
+.sbdocs-content > div:not(.sb-unstyled) > h3,
+.sbdocs-content > h4,
+.sbdocs-content > div:not(.sb-unstyled) > h4,
+.sbdocs-content > h5,
+.sbdocs-content > div:not(.sb-unstyled) > h5,
+.sbdocs-content > h6,
+.sbdocs-content > div:not(.sb-unstyled) > h6 {
+  color: var(--ods-color-primary-800);
+}
+
+.sbdocs-content :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)) {
+  font-size: 1rem !important;
+}
+
+.sbdocs-content :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
+  font-size: 1rem !important;
+}
+
+.documentation-overview {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  column-gap: 2rem;
+}
+
+.documentation-overview__table {
+  align-self: flex-start;
+  text-align: left;
+}
+
+.documentation-do-table,
+.documentation-dont-table {
+  width: 100%;
+}
+
+.documentation-do-table tr {
+  background-color: var(--ods-color-success-050) !important;
+}
+
+.documentation-dont-table tr {
+  background-color: var(--ods-color-critical-050) !important;
+}

packages/manager-react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovh-ux/manager-react-components",
-  "version": "1.38.0",
+  "version": "2.0.0",
   "main": "src/lib.ts",
   "repository": {
     "type": "git",
@@ -28,10 +28,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.2",
-    "@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",
+    "@ovhcloud/ods-themes": "18.0.0",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "@types/lodash.isdate": "^4.0.9",
@@ -49,8 +47,11 @@
   "devDependencies": {
     "@babel/core": "7.22.10",
     "@mdx-js/react": "^3.0.1",
-    "@ovh-ux/manager-tailwind-config": "^0.2.0",
     "@ovh-ux/manager-vite-config": "^0.8.0",
+    "@storybook/addon-a11y": "8.0.4",
+    "@storybook/test": "8.0.4",
+    "@storybook/web-components": "8.0.4",
+    "@storybook/web-components-vite": "8.0.4",
     "@storybook/addon-docs": "^7.5.3",
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/addon-interactions": "7.5.3",
@@ -113,4 +114,4 @@
     "react-router-dom": "^6.3.0",
     "zustand": "^4.5.0"
   }
-}
+}

packages/manager-react-components/src/components/ManagerButton/ManagerButton.spec.tsx

@@ -27,13 +27,14 @@ describe('ManagerButton tests', () => {
         isFetched: true,
       });
       renderComponent({
+        id: 'test-manager-button',
         urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
         iamActions: [
           'manager-react-components:apiovh:manager-react-components/attach-action',
         ],
-        children: <div>foo-manager-button</div>,
+        label: 'foo-manager-button',
       });
-      expect(screen.getAllByText('foo-manager-button')).not.toBeNull();
+      expect(screen.getByTestId('manager-button')).not.toBeNull();
     });
 
     it('with false value for useAuthorizationIam', () => {
@@ -43,16 +44,18 @@ describe('ManagerButton tests', () => {
         isFetched: true,
       });
       renderComponent({
+        id: 'test-manager-button',
         urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
         iamActions: [
           'manager-react-components:apiovh:manager-react-components/attach',
         ],
-        children: <div>foo-manager-button</div>,
+        label: 'fo manager button',
       });
-      expect(screen.getAllByText('foo-manager-button')).not.toBeNull();
-      expect(
-        screen.getByText('foo-manager-button').parentElement,
-      ).toBeDisabled();
+      expect(screen.getByTestId('manager-button-tooltip')).not.toBeNull();
+      expect(screen.getByTestId('manager-button-tooltip')).toHaveAttribute(
+        'is-disabled',
+        'true',
+      );
     });
   });
 
@@ -64,17 +67,19 @@ describe('ManagerButton tests', () => {
         isFetched: true,
       });
       renderComponent({
+        id: 'manager-button',
         urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
         iamActions: [
           'manager-react-components:apiovh:manager-react-components/attach-action',
         ],
-        children: <div>foo-manager-button</div>,
+        label: 'foo-manager-button',
       });
-      expect(screen.getAllByText('foo-manager-button')).not.toBeNull();
-      expect(
-        screen.getByText('foo-manager-button').parentElement,
-      ).toBeDisabled();
-      const button = screen.getByText('foo-manager-button');
+      expect(screen.getByTestId('manager-button-tooltip')).not.toBeNull();
+      expect(screen.getByTestId('manager-button-tooltip')).toHaveAttribute(
+        'is-disabled',
+        'true',
+      );
+      const button = screen.getByTestId('manager-button-tooltip');
       fireEvent.mouseOver(button);
       expect(
         screen.getAllByText(fr_FR.common_iam_actions_message),

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'],
   },

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,45 +8,60 @@ import './translations';
 import { useAuthorizationIam } from '../../hooks/iam';
 
 export type ManagerButtonProps = PropsWithChildren<{
+  id: string;
   iamActions?: string[];
   urn?: string;
   displayTooltip?: boolean;
   isIamTrigger?: boolean;
+  label: string;
 }>;
 
 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) {
-    return <OsdsButton {...restProps}>{children}</OsdsButton>;
+    return (
+      <OdsButton data-testid="manager-button" {...restProps} label={label} />
+    );
   }
-
-  return !displayTooltip ? (
-    <OsdsButton {...restProps} disabled onClick={null}>
-      {children}
-    </OsdsButton>
-  ) : (
-    <OsdsTooltip>
-      <OsdsButton {...restProps} disabled onClick={null}>
-        {children}
-      </OsdsButton>
-      <OsdsTooltipContent slot="tooltip-content">
+  return displayTooltip ? (
+    <>
+      <div id={id} className="w-fit">
+        <OdsButton
+          {...restProps}
+          data-testid="manager-button-tooltip"
+          isDisabled={true}
+          label={label}
+          onClick={null}
+        />
+      </div>
+      <OdsTooltip triggerId={id} with-arrow>
         <div>{t('common_iam_actions_message')}</div>
-      </OsdsTooltipContent>
-    </OsdsTooltip>
+      </OdsTooltip>
+    </>
+  ) : (
+    <OdsButton
+      {...restProps}
+      data-testid="manager-button-without-tooltip"
+      isDisabled={true}
+      onClick={null}
+      label={label}
+    />
   );
 };