Merge pull request #12244 from ovh/release/components-w28

* fix(i18n): add missing translations [CDS 3119] Signed-off-by: CDS Translator Agent <[email protected]> * fix(i18n): add missing translations [CDS 3120] Signed-off-by: CDS Translator Agent <[email protected]> * fix(i18n): add missing translations [CDS 3122] Signed-off-by: CDS Translator Agent <[email protected]> * fix: remove unused translations [CDS] Signed-off-by: CDS <[email protected]> * fix(i18n): add missing translations [CDS 3123] Signed-off-by: CDS Translator Agent <[email protected]> * refactor(key-management-service): apply new folder structure (#12117) ref: MANAGER-14283 Signed-off-by: Vincent BONMARCHAND <[email protected]> * fix(pci-rancher): create rancher api standardisation (#12194) Move data to targetSpec and remove ipRestrictions ref: TAPC-1053 Signed-off-by: Lionel Bueno <[email protected]> * fix(i18n): add missing translations [CDS 3125] Signed-off-by: CDS Translator Agent <[email protected]> * feat(pci.project): edit project delete messages (#11739) ref: TAPC-520 Signed-off-by: Rafik Adiche <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]> * refactor(pci-rancher): format edit modal template (#12171) Signed-off-by: Lionel Bueno <[email protected]> * build(deps): same ODS version on all apps (#12119) ref: MANAGER-14262 Signed-off-by: Nicolas Pierre-charles <[email protected]> * fix(i18n): add missing translations [CDS 3133] Signed-off-by: CDS Translator Agent <[email protected]> * feat(manager-components): dashboard template update (#12090) ref: MANAGER-14379 Signed-off-by: Nicolas Pierre-charles <[email protected]> * fix(dedicated): consider ipblock while fetching info (#12203) ref: INC0052140 Signed-off-by: Sachin Ramesh <[email protected]> * feat(dedicated.order): update cloud project link in server sidebar (#11818) ref: TAPC-645 Signed-off-by: Rafik Adiche <[email protected]> * fix(i18n): add missing translations [CDS 3127] (#12224) ref: TAPC-1135 Signed-off-by: CDS Translator Agent <[email protected]> * fix(access.statistics): initialize graph data before adding new (#12128) fix: UXCT-603 Signed-off-by: Stephanie Moallic <[email protected]> * fix(i18n): add missing translations [CDS 3088] (#12052) ref: MANAGER-14503 Signed-off-by: CDS Translator Agent <[email protected]> * feat(manager-components.notifications): add text style for notification (#11738) ref: PRB0041095 Signed-off-by: Quentin Pavy <[email protected]> --------- Signed-off-by: CDS Translator Agent <[email protected]> Signed-off-by: CDS <[email protected]> Signed-off-by: Vincent BONMARCHAND <[email protected]> Signed-off-by: Lionel Bueno <[email protected]> Signed-off-by: Rafik Adiche <[email protected]> Signed-off-by: Nicolas Pierre-charles <[email protected]> Signed-off-by: David Arsène <[email protected]> Signed-off-by: Sachin Ramesh <[email protected]> Signed-off-by: Stephanie Moallic <[email protected]> Signed-off-by: Quentin Pavy <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]> Co-authored-by: ovh ux cds <[email protected]> Co-authored-by: vovh <[email protected]> Co-authored-by: Lio B <[email protected]> Co-authored-by: brofik <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]> Co-authored-by: Nicode <[email protected]> Co-authored-by: David Arsène <[email protected]> Co-authored-by: JacquesLarique <[email protected]> Co-authored-by: Sachin Ramesh <[email protected]> Co-authored-by: selm3n <[email protected]> Co-authored-by: Stéphanie MOALLIC <[email protected]> Co-authored-by: qpavy <[email protected]>
ovh · Jul 9, 2024 · b298bfd · b298bfd
2 parents efcc6aa + d36de38
commit b298bfd
Show file tree

Hide file tree

Showing 211 changed files with 1,606 additions and 1,612 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,6 @@
 node_modules
 cache
 dist
-types
 !**/iam/**/types
 .memsourcerc.yaml
 /docs/docs/public/assets/json/packages.json

diff --git a/packages/manager-components/package.json b/packages/manager-components/package.json
@@ -50,7 +50,6 @@
     "@tanstack/react-query-devtools": "5.29.2",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.5",
     "@types/node": "20.4.9",
     "@types/react": "18.2.20",

diff --git a/packages/manager-components/src/components/content/headers/headers.component.tsx b/packages/manager-components/src/components/content/headers/headers.component.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Description, Title, Subtitle } from '../../typography';
 
 export interface HeadersProps {
@@ -16,13 +15,15 @@ export const Headers: React.FC<HeadersProps> = ({
   headerButton,
 }) => {
   return (
-    <div className="pl-5 flex items-center justify-between">
+    <div className="flex items-center justify-between">
       <div>
-        {title && <Title>{title}</Title>}
+        {title && <Title className="block mb-8">{title}</Title>}
         {subtitle && <Subtitle>{subtitle}</Subtitle>}
-        {description && <Description>{description}</Description>}
+        {description && (
+          <Description className="mb-6">{description}</Description>
+        )}
       </div>
-      <div>{headerButton}</div>
+      {headerButton && <div>{headerButton}</div>}
     </div>
   );
 };

diff --git a/packages/manager-components/src/components/notifications/notifications.spec.tsx b/packages/manager-components/src/components/notifications/notifications.spec.tsx
@@ -34,8 +34,8 @@ describe('notifications component', () => {
     render(<AddNotification />);
     container = render(<Notifications />).container;
     expect(container.children.length).toBe(2);
-    expect(container.children[0].innerHTML).toBe('Notification-1');
-    expect(container.children[1].innerHTML).toBe('Notification-2');
+    expect(container.children[0].children[0].innerHTML).toBe('Notification-1');
+    expect(container.children[1].children[0].innerHTML).toBe('Notification-2');
   });
   it('should clear notifications', async () => {
     let { container } = render(<Notifications />);

diff --git a/packages/manager-components/src/components/notifications/ods-notification.tsx b/packages/manager-components/src/components/notifications/ods-notification.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
-import { OsdsMessage } from '@ovhcloud/ods-components/react';
-import { ODS_MESSAGE_TYPE } from '@ovhcloud/ods-components';
+import { OsdsMessage, OsdsText } from '@ovhcloud/ods-components/react';
+import {
+  ODS_MESSAGE_TYPE,
+  ODS_TEXT_COLOR_INTENT,
+} from '@ovhcloud/ods-components';
+import { ODS_THEME_TYPOGRAPHY_SIZE } from '@ovhcloud/ods-common-theming';
 import {
   Notification,
   NotificationType,
@@ -26,7 +30,24 @@ const getOdsMessageColor = (type: NotificationType) => {
   }
 };
 
-export function OdsNotification({ notification }: OdsNotificationProps) {
+const getOdsTextColor = (type: NotificationType) => {
+  switch (type) {
+    case NotificationType.Success:
+      return ODS_TEXT_COLOR_INTENT.success;
+    case NotificationType.Error:
+      return ODS_TEXT_COLOR_INTENT.error;
+    case NotificationType.Warning:
+      return ODS_TEXT_COLOR_INTENT.warning;
+    case NotificationType.Info:
+      return ODS_TEXT_COLOR_INTENT.info;
+    default:
+      return ODS_TEXT_COLOR_INTENT.info;
+  }
+};
+
+export const OdsNotification: React.FC<OdsNotificationProps> = ({
+  notification,
+}) => {
   const { clearNotification } = useNotifications();
   return (
     <OsdsMessage
@@ -39,9 +60,14 @@ export function OdsNotification({ notification }: OdsNotificationProps) {
           }
         : {})}
     >
-      {notification.content}
+      <OsdsText
+        color={getOdsTextColor(notification.type)}
+        size={ODS_THEME_TYPOGRAPHY_SIZE._400}
+      >
+        {notification.content}
+      </OsdsText>
     </OsdsMessage>
   );
-}
+};
 
 export default OdsNotification;
diff --git a/packages/manager-components/src/components/templates/dashboard/dashboard.component.tsx b/packages/manager-components/src/components/templates/dashboard/dashboard.component.tsx
@@ -1,47 +1,51 @@
 import React from 'react';
-
 import { Headers, HeadersProps } from '../../content';
-
-import { Links, LinksProps } from '../../typography';
+import { Description, LinkType, Links, Subtitle } from '../../typography';
 import { PageLayout } from '../layout/layout.component';
+
 export interface DashboardLayoutProps {
   breadcrumb?: React.ReactElement;
   content?: React.ReactElement;
   header?: HeadersProps;
-  linkProps?: LinksProps;
+  message?: React.ReactElement;
+  description?: string;
+  subtitle?: string;
+  subdescription?: string;
+  backLinkLabel?: string;
   tabs?: React.ReactElement;
   onClickReturn?: () => void;
 }
 
 export const DashboardLayout = ({
-  linkProps,
+  backLinkLabel,
+  onClickReturn,
   breadcrumb,
+  description,
+  subtitle,
+  subdescription,
+  message,
   content,
-  onClickReturn,
   header,
   tabs,
-}: DashboardLayoutProps) => {
-  return (
-    <PageLayout>
-      <div className="mb-3">{breadcrumb}</div>
-      {header && (
-        <Headers
-          title={header.title}
-          description={header.description}
-          headerButton={header.headerButton}
-        />
-      )}
-      {linkProps && (
-        <Links
-          onClickReturn={onClickReturn}
-          href={linkProps.href}
-          label={linkProps.label}
-          target={linkProps.target}
-          type={linkProps.type}
-        />
-      )}
-      <div>{tabs}</div>
-      <div className="mt-8">{content}</div>
-    </PageLayout>
-  );
-};
+}: DashboardLayoutProps) => (
+  <PageLayout>
+    <div className="mb-6">{breadcrumb}</div>
+    {header && <Headers {...header} />}
+    {backLinkLabel && onClickReturn && (
+      <Links
+        className="mb-8"
+        onClickReturn={onClickReturn}
+        label={backLinkLabel}
+        type={LinkType.back}
+      />
+    )}
+    {description && <Description className="mb-8">{description}</Description>}
+    {message && <div className="mb-8">{message}</div>}
+    {subtitle && <Subtitle className="block mb-6">{subtitle}</Subtitle>}
+    {subdescription && (
+      <Description className="mb-8">{subdescription}</Description>
+    )}
+    <div className="mb-6">{tabs}</div>
+    <div>{content}</div>
+  </PageLayout>
+);
diff --git a/packages/manager-components/src/components/templates/dashboard/dashboard.spec.tsx b/packages/manager-components/src/components/templates/dashboard/dashboard.spec.tsx
@@ -1,4 +1,4 @@
-import { waitFor, screen } from '@testing-library/react';
+import { waitFor, screen, fireEvent } from '@testing-library/react';
 import { render } from '../../../utils/test.provider';
 import { DashboardLayout } from './dashboard.component';
 import { defaultProps } from './dashboard.stories';
@@ -13,7 +13,23 @@ describe('DashboardLayout component', () => {
           'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
         ),
       ).toBeInTheDocument();
-      expect(screen.getByText('Back to the list')).toBeInTheDocument();
     });
   });
+
+  it('clicks on back link triggers return fn', async () => {
+    const backLinkLabel = 'back link';
+    const spy = jest.fn();
+
+    render(
+      <DashboardLayout
+        {...defaultProps}
+        backLinkLabel={backLinkLabel}
+        onClickReturn={spy}
+      />,
+    );
+
+    fireEvent.click(screen.getByText(backLinkLabel));
+
+    await waitFor(() => expect(spy).toHaveBeenCalled());
+  });
 });
diff --git a/packages/manager-components/src/components/templates/dashboard/dashboard.stories.css b/packages/manager-components/src/components/templates/dashboard/dashboard.stories.css
@@ -0,0 +1,3 @@
+body {
+  padding: 0 !important;
+}
diff --git a/packages/manager-components/src/components/templates/dashboard/dashboard.stories.tsx b/packages/manager-components/src/components/templates/dashboard/dashboard.stories.tsx
@@ -11,13 +11,14 @@ import {
 } from '@ovhcloud/ods-components/react';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { ODS_DIVIDER_SIZE } from '@ovhcloud/ods-components';
+import { ODS_DIVIDER_SIZE, ODS_ICON_NAME } from '@ovhcloud/ods-components';
 import { Headers } from '../../content';
 import { DashboardLayout, DashboardLayoutProps } from './dashboard.component';
-import { LinkType } from '../../typography/links/links.component';
 import GuideButton, {
   GuideItem,
 } from '../../navigation/menus/guide/guide.component';
+import './dashboard.stories.css';
+import { DashboardGridLayout } from '../layout/layout.component';
 
 const guideItems: GuideItem[] = [
   {
@@ -36,18 +37,28 @@ const guideItems: GuideItem[] = [
 
 export const defaultProps: DashboardLayoutProps = {
   header: {
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
     title: 'Vrack Services',
     headerButton: <GuideButton items={guideItems} />,
   },
-
-  linkProps: {
-    label: 'Back to the list',
-    href: 'https://www.ovhcloud.com',
-    target: OdsHTMLAnchorElementTarget._blank,
-    type: LinkType.back,
+  description:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  message: (
+    <OsdsMessage
+      icon={ODS_ICON_NAME.SUCCESS_CIRCLE}
+      removable
+      className="w-full"
+      color={ODS_THEME_COLOR_INTENT.success}
+    >
+      Votre service a été créé avec succès
+    </OsdsMessage>
+  ),
+  subtitle: 'Lorem ipsum',
+  backLinkLabel: 'Retour à la XXX',
+  onClickReturn: () => {
+    console.log('back link click');
   },
+  subdescription:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia rutrum interdum. Nullam tempor, mi eu imperdiet scelerisque, lorem nisl blandit ligula, eget sodales erat nulla a odio. Donec efficitur posuere quam. Maecenas metus sem, venenatis id mattis eget, sollicitudin sit amet nulla. Sed ac erat fermentum, porta ligula ac,',
   tabs: (
     <>
       <OsdsTabs>
@@ -67,51 +78,37 @@ export const defaultProps: DashboardLayoutProps = {
     </>
   ),
   content: (
-    <div className="w-full block">
-      <div>
-        <OsdsMessage
-          removable
-          className="mb-5 w-full"
-          color={ODS_THEME_COLOR_INTENT.success}
-        >
-          Votre service a été créé avec succès
-        </OsdsMessage>
-      </div>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div>
-          <OsdsTile rounded>
-            <span slot="start">
-              <Headers subtitle="Tile 1" />
-            </span>
-          </OsdsTile>
-        </div>
-        <OsdsTile rounded>
-          <span slot="start">
-            <Headers subtitle="Tile 2" />
-          </span>
-        </OsdsTile>
-        <OsdsTile rounded>
-          <span slot="start">
-            <Headers subtitle="Tile 3" />
-          </span>
-        </OsdsTile>
-      </div>
-    </div>
+    <DashboardGridLayout>
+      <OsdsTile rounded>
+        <span slot="start">
+          <Headers subtitle="Tile 1" />
+        </span>
+      </OsdsTile>
+      <OsdsTile rounded>
+        <span slot="start">
+          <Headers subtitle="Tile 2" />
+        </span>
+      </OsdsTile>
+      <OsdsTile rounded>
+        <span slot="start">
+          <Headers subtitle="Tile 3" />
+        </span>
+      </OsdsTile>
+    </DashboardGridLayout>
   ),
   breadcrumb: (
     <OsdsBreadcrumb
       className="flex-start"
       items={[
-        { label: 'Network', href: '/Network' },
-        { label: 'vrackServices', href: '/vrackServices' },
+        { label: 'vRack Services', href: '/vrack-services' },
+        { label: 'vrs-abc-def-ghi', href: '/vrs-abc-def-ghi' },
       ]}
     />
   ),
 };
 
 const meta: Meta<typeof DashboardLayout> = {
   title: 'Templates/Dashboard',
-  decorators: [(story) => <div className="w-4/5">{story()}</div>],
   component: DashboardLayout,
   argTypes: {},
   args: defaultProps,

diff --git a/packages/manager-components/src/components/templates/layout/layout.component.tsx b/packages/manager-components/src/components/templates/layout/layout.component.tsx
@@ -1,5 +1,15 @@
 import React from 'react';
 
-export const PageLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return <div className="m-10">{children}</div>;
-};
+export const PageLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <div className="py-8 px-4 md:py-9 md:px-10 md:mt-2">{children}</div>
+);
+
+export const DashboardGridLayout: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => (
+  <div className="w-full block">
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
+      {children}
+    </div>
+  </div>
+);
diff --git a/packages/manager-components/src/components/typography/description/description.component.tsx b/packages/manager-components/src/components/typography/description/description.component.tsx
@@ -9,13 +9,15 @@ import { OsdsText } from '@ovhcloud/ods-components/react';
 
 export interface DescriptionProps {
   children?: string;
+  className?: string;
 }
 export const Description: React.FC<DescriptionProps> = ({
   children,
+  className,
 }: DescriptionProps) => {
   return (
     <OsdsText
-      className="block mb-6"
+      className={`block ${className}`}
       level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
       size={ODS_THEME_TYPOGRAPHY_SIZE._400}
       color={ODS_THEME_COLOR_INTENT.text}