New release

.github/CODEOWNERS

@@ -14,8 +14,8 @@ packages/manager/modules/ @ovh/team-manager-dev-angularjs
 *.tsx @ovh/team-manager-dev-reactjs @ovh/su-digital-tools-core-stack
 /playwright-helpers/ @ovh/team-manager-dev-reactjs
 
-# Manager-components
-/packages/manager-components @ovh/team-manager-control-tower
+# Manager-React-Components
+/packages/manager-react-components @ovh/team-manager-control-tower
 
 # Continuous Integration and scripts
 .github/workflows @ovh/su-digital-tools-core-service-delivery

.github/ISSUE_TEMPLATE/manager_components_bug_report.yml

@@ -1,8 +1,8 @@
 name: Bug Report on  Manager Components (Internal)
 description: File a bug report on Manager components
-title: '[manager-components]: <TITLE>'
-labels: ['manager-components', 'bug']
-projects: ["ovh/22"]
+title: '[manager-react-components]: <TITLE>'
+labels: ['manager-react-components', 'bug']
+projects: ['ovh/22']
 body:
   - type: markdown
     attributes:
@@ -32,19 +32,19 @@ body:
       description: The browser(s) this issue occurred with.
     validations:
       required: false
-  - type: "checkboxes"
-    id: "operating-system"
+  - type: 'checkboxes'
+    id: 'operating-system'
     attributes:
-      label: "Operating System"
-      description: "The operating system(s) this issue occurred with."
+      label: 'Operating System'
+      description: 'The operating system(s) this issue occurred with.'
       options:
-        - label: "macOS"
-        - label: "Windows"
-        - label: "Linux"
-  - type: "textarea"
-    id: "additional-information"
+        - label: 'macOS'
+        - label: 'Windows'
+        - label: 'Linux'
+  - type: 'textarea'
+    id: 'additional-information'
     attributes:
-      label: "Additional Information"
+      label: 'Additional Information'
       description: |
         Use this section to provide any additional information you might have
         like screenshots, notes, or links to ideas.

.github/ISSUE_TEMPLATE/manager_components_feature_request.yml

@@ -1,8 +1,8 @@
 name: New Feature Request for Manager Components (Internal)
 description: Request for new component/hook/util
-title: '[manager-components]: <TITLE>'
-labels: ['manager-components', 'feature']
-projects: ["ovh/22"]
+title: '[manager-react-components]: <TITLE>'
+labels: ['manager-react-components', 'feature']
+projects: ['ovh/22']
 body:
   - type: markdown
     attributes:
@@ -12,8 +12,8 @@ body:
       value: Please make sure to check if similar component already exists.
   - type: checkboxes
     attributes:
-      label: Have you already checked if a similar item is present on manager-components?
-      description: Before to open a request on our GitHub repository, did you already check if the similar item is present on the manager-components storybook?
+      label: Have you already checked if a similar item is present on manager-react-components?
+      description: Before to open a request on our GitHub repository, did you already check if the similar item is present on the manager-react-components storybook?
       options:
         - label: Yes, I have already checked the existing components/hooks/utils.
           required: false

.github/labeler.yml

@@ -70,8 +70,8 @@ enabler:
   - packages/manager/apps/carbon-calculator/**
   - packages/manager/apps/iam/**
   - packages/manager/apps/key-management-service/**
-manager-components:
-  - packages/manager-components/src/**
+manager-react-components:
+  - packages/manager-react-components/src/**
 common:
   - packages/components/**
   - packages/manager/core/**
@@ -104,6 +104,6 @@ common:
   - packages/manager/modules/trusted-nic/**
   - packages/manager/modules/web-universe-components/**
   - packages/manager/tools/**
-  - packages/manager-components/**
+  - packages/manager-react-components/**
   - playwright-helpers/**
   - scripts/**

.github/workflows/run-bdd-tests.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Build BDD covered packages and dependencies
         run: |
           yarn exec turbo -- run build --filter="./packages/manager/core/*" --concurrency=5
-          yarn exec turbo -- run build --filter="./packages/manager/manager-components/*" --concurrency=5
+          yarn exec turbo -- run build --filter="./packages/manager-react-components" --concurrency=5
           yarn exec turbo -- run build --filter="./packages/manager/modules/order" --concurrency=5
       # This task is for running the jest tests outside microApps
       - name: Run tests Jest

packages/components/ng-ovh-mondial-relay/package.json

@@ -41,7 +41,7 @@
     "set-value": "^2.0.1"
   },
   "dependencies": {
-    "@ovh-ux/ui-kit": "^6.10.4",
+    "@ovh-ux/ui-kit": "^6.10.5",
     "bootstrap": "~3.4.1",
     "lodash": "^4.17.15",
     "ovh-ui-kit-bs": "^4.2.0"

packages/manager-react-components/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@ovh-ux/manager-react-components",
-  "private": true,
   "version": "1.31.0",
-  "main": "src/lib.ts",
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS",
+  "types": "dist/types/packages/manager-react-components/src/index.d.ts",
+  "main": "dist/manager-react-components-lib.es.ts",
+  "browser": "dist/manager-react-components-lib.es.ts",
+  "homepage": "https://github.com/ovh/manager/blob/master/packages/manager-react-components/README.md",
+  "bugs": {
+    "url": "https://github.com/ovh/manager/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ovh/manager.git",
@@ -12,9 +19,10 @@
     "dist"
   ],
   "scripts": {
-    "build": "echo build",
+    "build": "vite build && tsc",
+    "dev": "vite build && tsc",
     "build:storybook": "storybook build",
-    "dev": "tsc",
+    "prepare": "vite build && tsc",
     "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
     "start": "storybook dev -p 6006",
     "test": "jest --coverage -u",
@@ -28,7 +36,6 @@
     ]
   },
   "dependencies": {
-    "@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",
@@ -39,18 +46,24 @@
     "@tanstack/react-table": "^8.20.1",
     "@types/lodash.isdate": "^4.0.9",
     "@types/lodash.isequal": "^4.5.0",
-    "babel-preset-react-app": "^10.0.1",
     "clsx": "^2.1.1",
+    "i18next": "^23.8.2",
     "lodash.isdate": "^4.0.1",
     "lodash.isequal": "^4.5.0",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-i18next": "^11.18.1",
+    "react-router-dom": "^6.3.0",
     "react-use": "^17.5.0",
     "sass": "1.71.0",
     "tailwindcss": "^3.4.4",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "7.22.10",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "babel-preset-react-app": "^10.0.1",
     "@mdx-js/react": "^3.0.1",
     "@ovh-ux/manager-tailwind-config": "^0.2.0",
     "@ovh-ux/manager-vite-config": "^0.8.0",
@@ -93,26 +106,13 @@
     "postcss": "8.4.31",
     "prettier": "3.0.1",
     "prop-types": "15.8.1",
-    "react-dom": "18.2.0",
-    "react-i18next": "^14.0.5",
-    "react-router-dom": "^6.3.0",
-    "react-use": "^17.5.0",
     "storybook": "7.5.3",
     "storybook-addon-react-router-v6": "^2.0.10",
     "ts-jest": "^29.1.1",
     "typescript": "^4.3.2",
     "undici": "5.28.4",
     "vite": "^5.2.13",
     "vite-plugin-dts": "3.5.1",
-    "vitest": "^1.2.0",
-    "zustand": "^4.5.0"
-  },
-  "optionalDependencies": {
-    "i18next": "^23.8.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-i18next": "^11.18.1",
-    "react-router-dom": "^6.3.0",
-    "zustand": "^4.5.0"
+    "vitest": "^1.2.0"
   }
 }

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

@@ -11,7 +11,8 @@ const renderComponent = (props: ManagerButtonProps) => {
   return render(<ManagerButton {...props} />);
 };
 
-const mockedHook = useAuthorizationIam as jest.Mock<IamAuthorizationResponse>;
+const mockedHook =
+  useAuthorizationIam as unknown as jest.Mock<IamAuthorizationResponse>;
 
 describe('ManagerButton tests', () => {
   afterEach(() => {
@@ -26,8 +27,7 @@ describe('ManagerButton tests', () => {
         isFetched: true,
       });
       renderComponent({
-        urn:
-          'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
+        urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
         iamActions: [
           'manager-react-components:apiovh:manager-react-components/attach-action',
         ],
@@ -43,8 +43,7 @@ describe('ManagerButton tests', () => {
         isFetched: true,
       });
       renderComponent({
-        urn:
-          'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
+        urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
         iamActions: [
           'manager-react-components:apiovh:manager-react-components/attach',
         ],
@@ -65,8 +64,7 @@ describe('ManagerButton tests', () => {
         isFetched: true,
       });
       renderComponent({
-        urn:
-          'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
+        urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
         iamActions: [
           'manager-react-components:apiovh:manager-react-components/attach-action',
         ],

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

@@ -35,24 +35,22 @@ export const ManagerButton = ({
   const { t } = useTranslation('iam');
   const { isAuthorized } = useAuthorizationIam(iamActions, urn, isIamTrigger);
 
-  if (!isAuthorized) {
-    if (!displayTooltip) {
-      return (
-        <OsdsButton {...restProps} disabled onClick={null}>
-          {children}
-        </OsdsButton>
-      );
-    }
-    return (
-      <OsdsTooltip>
-        <OsdsButton {...restProps} disabled onClick={null}>
-          {children}
-        </OsdsButton>
-        <OsdsTooltipContent slot="tooltip-content">
-          <div>{t('common_iam_actions_message')}</div>
-        </OsdsTooltipContent>
-      </OsdsTooltip>
-    );
+  if (isAuthorized) {
+    return <OsdsButton {...restProps}>{children}</OsdsButton>;
   }
-  return <OsdsButton {...restProps}>{children}</OsdsButton>;
+
+  return !displayTooltip ? (
+    <OsdsButton {...restProps} disabled onClick={null}>
+      {children}
+    </OsdsButton>
+  ) : (
+    <OsdsTooltip>
+      <OsdsButton {...restProps} disabled onClick={null}>
+        {children}
+      </OsdsButton>
+      <OsdsTooltipContent slot="tooltip-content">
+        <div>{t('common_iam_actions_message')}</div>
+      </OsdsTooltipContent>
+    </OsdsTooltip>
+  );
 };

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

@@ -10,7 +10,8 @@ jest.mock('../../hooks/iam');
 const renderComponent = (props: ManagerTextProps) => {
   return render(<ManagerText {...props} />);
 };
-const mockedHook = useAuthorizationIam as jest.Mock<IamAuthorizationResponse>;
+const mockedHook =
+  useAuthorizationIam as unknown as jest.Mock<IamAuthorizationResponse>;
 
 describe('ManagerText tests', () => {
   afterEach(() => {
@@ -25,8 +26,7 @@ describe('ManagerText tests', () => {
         isFetched: true,
       });
       renderComponent({
-        urn:
-          'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
+        urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
         iamActions: [
           'manager-react-components:apiovh:manager-react-components/get-display',
         ],
@@ -43,8 +43,7 @@ describe('ManagerText tests', () => {
         isFetched: true,
       });
       renderComponent({
-        urn:
-          'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
+        urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
         iamActions: [
           'manager-react-components:apiovh:manager-react-components/get-display',
         ],

packages/manager-react-components/src/components/action-banner/pci/translations/free-localzones/Messages_de_DE.json

@@ -1,5 +1,5 @@
 {
-  "pci_free_local_zones_banner_text": "Lassen Sie sich unser Einführungsangebot nicht entgehen: Alle Ihre Local Zones Dienste sind bis zum 31. August kostenlos!",
-  "pci_free_local_zones_banner_text_confirm": "Mit unserem Einführungsangebot für Local Zones sind alle Ihre Local Zones Dienste bis zum 31. August<b> </b>kostenlos!",
+  "pci_free_local_zones_banner_text": "Lassen Sie sich unser Einführungsangebot nicht entgehen: Alle Ihre Local Zones Dienste sind bis zum 31. August kostenlos!",
+  "pci_free_local_zones_banner_text_confirm": "Mit unserem Einführungsangebot für Local Zones sind alle Ihre Local Zones Dienste bis zum 31. August<b> </b>kostenlos!",
   "pci_free_local_zones_banner_link": "Mehr erfahren"
 }

packages/manager-react-components/src/components/clipboard/clipboard.component.tsx

@@ -5,23 +5,30 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import './translations';
 
-export const Clipboard: React.FC<OdsClipboardAttribute> = (props) => {
+interface IClipboardAttibutes extends OdsClipboardAttribute {
+  'data-testid'?: string;
+}
+
+export const Clipboard: React.FC<IClipboardAttibutes> = ({
+  'data-testid': testId = 'clipboard',
+  ...props
+}) => {
   const { t } = useTranslation('clipboard');
 
   return (
-    <OsdsClipboard {...props} data-testid="clipboard">
+    <OsdsClipboard {...props} data-testid={testId}>
       <span slot="success-message">
         <OsdsText
           color={ODS_THEME_COLOR_INTENT.success}
-          data-testid="clipboard-success"
+          data-testid={`${testId}-success`}
         >
           {t('clipboard_copy_success')}
         </OsdsText>
       </span>
       <span slot="error-message">
         <OsdsText
           color={ODS_THEME_COLOR_INTENT.error}
-          data-testid="clipboard-error"
+          data-testid={`${testId}-error`}
         >
           {t('clipboard_copy_error')}
         </OsdsText>

packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_COLOR_HUE,
+} from '@ovhcloud/ods-common-theming';
 import {
   OsdsDivider,
   OsdsText,
@@ -23,14 +26,15 @@ export const DashboardTile: React.FC<DashboardTileProps> = ({
   title,
   items,
 }) => (
-  <OsdsTile className="w-full h-full flex-col" inline rounded>
+  <OsdsTile className="w-full flex-col" inline rounded>
     <div className="flex flex-col w-full">
       {title && (
         <>
           <OsdsText
             size={ODS_TEXT_SIZE._400}
             level={ODS_TEXT_LEVEL.heading}
-            color={ODS_THEME_COLOR_INTENT.text}
+            color={ODS_THEME_COLOR_INTENT.primary}
+            hue={ODS_THEME_COLOR_HUE._800}
           >
             {title}
           </OsdsText>