feat(zimbra): add ods version 18.1

ref:MANAGER-15662 Signed-off-by: stif59100 <[email protected]> Signed-off-by: Tristan WAGNER <[email protected]>
ovh · Oct 18, 2024 · cf36844 · cf36844
1 parent b6d19af
commit cf36844
Show file tree

Hide file tree

Showing 52 changed files with 1,369 additions and 2,276 deletions.
diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json
@@ -28,8 +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-components": "18.0.0",
-    "@ovhcloud/ods-themes": "18.0.0",
+    "@ovhcloud/ods-components": "18.1.0",
+    "@ovhcloud/ods-themes": "18.1.0",
     "@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/content/headers/headers.stories.tsx b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
@@ -46,7 +46,7 @@ const guideItems = [
 const HeadingWithActionButton: HeadersProps = {
   title: 'Example for header with actions ',
   description: 'description for header',
-  headerButton: <ActionMenu items={actionItems} />,
+  headerButton: <ActionMenu id="1" items={actionItems} />,
 };
 const HeadingWithGuideButton: HeadersProps = {
   title: 'Example for header with guides',

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
@@ -14,12 +14,11 @@ export interface ActionMenuItem {
   id: number;
   rel?: string;
   download?: string;
-  href?: string;
   target?: string;
   onClick?: () => void;
   label: string;
   variant?: ODS_BUTTON_VARIANT;
-  disabled?: boolean;
+  isDisabled?: boolean;
   iamActions?: string[];
   urn?: string;
 }
@@ -29,7 +28,8 @@ export interface ActionMenuProps {
   isCompact?: boolean;
   icon?: ODS_ICON_NAME;
   variant?: ODS_BUTTON_VARIANT;
-  disabled?: boolean;
+  isDisabled?: boolean;
+  id: string;
 }
 
 const MenuItem = ({
@@ -52,7 +52,7 @@ const MenuItem = ({
       {!item?.iamActions || item?.iamActions?.length === 0 ? (
         <OdsButton
           {...buttonProps}
-          isDisabled={buttonProps.disabled}
+          isDisabled={buttonProps.isDisabled}
           label={item.label}
         >
           <span slot="start">
@@ -66,7 +66,7 @@ const MenuItem = ({
           iamActions={item.iamActions}
           urn={item.urn}
           {...buttonProps}
-          isDisabled={buttonProps.disabled || undefined}
+          isDisabled={buttonProps.isDisabled || undefined}
         >
           <span slot="start">
             <span>{item.label}</span>
@@ -82,19 +82,21 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   isCompact,
   icon,
   variant = ODS_BUTTON_VARIANT.outline,
-  disabled,
+  isDisabled,
+  id,
 }) => {
   const { t } = useTranslation('buttons');
   const [isTrigger, setIsTrigger] = React.useState(false);
 
   return (
     <>
-      <div id="navigation-action-trigger">
+      <div key={id} id={`navigation-action-trigger-${id}`}>
         <OdsButton
           data-testid="navigation-action-trigger-action"
           slot="menu-title"
+          id={id}
           variant={variant}
-          isDisabled={disabled}
+          isDisabled={isDisabled}
           size={ODS_BUTTON_SIZE.sm}
           onClick={() => setIsTrigger(true)}
           {...(!isCompact && { label: t('common_actions') })}
@@ -107,12 +109,17 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
       </div>
       <OdsPopover
         className="py-[8px] px-0 overflow-hidden"
-        triggerId="navigation-action-trigger"
+        triggerId={`navigation-action-trigger-${id}`}
         with-arrow
       >
-        {items.map(({ id, ...item }) => {
+        {items.map(({ id: itemId, ...item }) => {
           return (
-            <MenuItem id={id} key={id} item={item} isTrigger={isTrigger} />
+            <MenuItem
+              id={itemId}
+              key={itemId}
+              item={item}
+              isTrigger={isTrigger}
+            />
           );
         })}
       </OdsPopover>

diff --git a/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx b/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx
@@ -8,6 +8,7 @@ import { IamAuthorizationResponse } from '../../../../hooks/iam/iam.interface';
 jest.mock('../../../../hooks/iam');
 
 const actionItems: ActionMenuProps = {
+  id: 'action-menu-test-id',
   items: [
     {
       id: 1,

diff --git a/packages/manager-react-components/src/components/typography/links/links.component.tsx b/packages/manager-react-components/src/components/typography/links/links.component.tsx
@@ -1,20 +1,30 @@
 import React from 'react';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import {
+  ODS_ICON_NAME,
+  ODS_LINK_COLOR,
+  ODS_LINK_ICON_ALIGNMENT,
+} from '@ovhcloud/ods-components';
 import { OdsLink } from '@ovhcloud/ods-components/react';
 
 export enum LinkType {
   back = 'back',
   next = 'next',
   external = 'external',
 }
+export enum IconLinkAlignmentType {
+  left = 'left',
+  right = 'right',
+}
 
 export interface LinksProps {
   className?: string;
+  color?: ODS_LINK_COLOR;
   download?: string;
   label?: string;
   href?: string;
   rel?: string;
   target?: string;
+  iconAlignment?: IconLinkAlignmentType;
   type?: LinkType;
   onClickReturn?: () => void;
 }
@@ -24,12 +34,22 @@ export const Links: React.FC<LinksProps> = ({
   onClickReturn,
   type,
   href,
+  color,
+  iconAlignment,
   ...props
 }: LinksProps) => (
   <OdsLink
     href={href}
     onClick={onClickReturn}
+    color={color}
+    {...(iconAlignment === IconLinkAlignmentType.left && {
+      iconAlignment: ODS_LINK_ICON_ALIGNMENT.left,
+    })}
+    {...(iconAlignment === IconLinkAlignmentType.right && {
+      iconAlignment: ODS_LINK_ICON_ALIGNMENT.right,
+    })}
     {...props}
+    {...(type === LinkType.back && { icon: ODS_ICON_NAME.arrowLeft })}
     {...(type === LinkType.next && { icon: ODS_ICON_NAME.arrowRight })}
     {...(type === LinkType.external && { icon: ODS_ICON_NAME.externalLink })}
     label={label}

diff --git a/packages/manager/apps/zimbra/package.json b/packages/manager/apps/zimbra/package.json
@@ -24,16 +24,14 @@
     "@ovh-ux/manager-config": "^7.4.0",
     "@ovh-ux/manager-core-api": "^0.8.0",
     "@ovh-ux/manager-core-utils": "^0.3.0",
-    "@ovh-ux/manager-react-components": "^1.38.0",
+    "@ovh-ux/manager-react-components": "2.0.0",
     "@ovh-ux/manager-react-core-application": "^0.10.2",
     "@ovh-ux/manager-react-shell-client": "^0.7.2",
-    "@ovh-ux/manager-tailwind-config": "^0.2.0",
+    "@ovh-ux/manager-tailwind-config": "*",
     "@ovh-ux/request-tagger": "^0.3.0",
     "@ovh-ux/shell": "^3.8.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.1.0",
+    "@ovhcloud/ods-themes": "18.1.0",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "element-internals-polyfill": "^1.3.10",

diff --git a/packages/manager/apps/zimbra/src/components/BadgeStatus.tsx b/packages/manager/apps/zimbra/src/components/BadgeStatus.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
+import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
 import { ResourceStatus } from '@/api/api.type';
 
 export type BadgeStatusProps = {
@@ -11,19 +11,15 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({ itemStatus }) => {
   const getStatusColor = (status: string) => {
     switch (status) {
       case ResourceStatus.READY:
-        return ODS_THEME_COLOR_INTENT.success;
+        return ODS_BADGE_COLOR.success;
       case ResourceStatus.ERROR:
-        return ODS_THEME_COLOR_INTENT.error;
+        return ODS_BADGE_COLOR.critical;
       default:
-        return ODS_THEME_COLOR_INTENT.primary;
+        return ODS_BADGE_COLOR.information;
     }
   };
 
   const statusColor = getStatusColor(itemStatus);
 
-  return (
-    <OsdsChip inline color={statusColor}>
-      {itemStatus}
-    </OsdsChip>
-  );
+  return <OdsBadge color={statusColor} label={itemStatus} />;
 };
diff --git a/packages/manager/apps/zimbra/src/components/Breadcrumb/Breadcrumb.tsx b/packages/manager/apps/zimbra/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import { useParams, useLocation } from 'react-router-dom';
+import {
+  OdsBreadcrumb,
+  OdsBreadcrumbItem,
+} from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { urls } from '@/routes/routes.constants';
 import { useGenerateUrl, useOrganization } from '@/hooks';
@@ -16,7 +19,6 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
 }) => {
   const { serviceName } = useParams();
   const { t } = useTranslation('dashboard');
-  const navigate = useNavigate();
   const location = useLocation();
   const { data: organization, isLoading } = useOrganization();
 
@@ -30,13 +32,13 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   const breadcrumbItems = [
     {
       label: t('zimbra_dashboard_title'),
-      onClick: () => navigate(urls.root),
+      href: urls.root,
     },
     ...(organization && !isLoading
       ? [
           {
             label: organization?.currentState.name,
-            onClick: () => navigate(overviewUrlValue),
+            href: overviewUrlValue,
           },
         ]
       : []),
@@ -49,18 +51,22 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
       );
       return {
         label,
-        onClick: () => navigate(url),
+        href: url,
       };
     }),
     ...items,
   ].filter(Boolean);
 
   return (
-    <OsdsBreadcrumb
-      data-testid="breadcrumb"
-      className="mb-4"
-      items={breadcrumbItems}
-    />
+    <OdsBreadcrumb data-testid="breadcrumb" className="mb-4">
+      {breadcrumbItems.map((item) => (
+        <OdsBreadcrumbItem
+          key={item.href}
+          href={item.href}
+          label={item.label}
+        />
+      ))}
+    </OdsBreadcrumb>
   );
 };
 

diff --git a/packages/manager/apps/zimbra/src/components/ButtonTooltip/ButtonTooltip.tsx b/packages/manager/apps/zimbra/src/components/ButtonTooltip/ButtonTooltip.tsx
diff --git a/packages/manager/apps/zimbra/src/components/ButtonTooltip/__test__/ButtonTooltip.spec.tsx b/packages/manager/apps/zimbra/src/components/ButtonTooltip/__test__/ButtonTooltip.spec.tsx