Draft/add billing informations tiles on mrc

packages/manager-react-components/package.json

@@ -55,6 +55,7 @@
     "@ovh-ux/manager-react-shell-client": "^0.8.5",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/manager-vite-config": "^0.9.0",
+    "@ovh-ux/manager-module-common-api": "^0.2.3",
     "@ovhcloud/ods-components": "^18.3.0",
     "@ovhcloud/ods-themes": "^18.3.0",
     "@storybook/addon-docs": "^7.5.3",
@@ -108,9 +109,12 @@
     "vite-plugin-dts": "3.5.1",
     "vite-plugin-static-copy": "^2.0.0",
     "vitest": "^1.2.0",
-    "zustand": "^4.5.5"
+    "zustand": "^4.5.5",
+    "axios-mock-adapter": "^2.1.0",
+    "@ovh-ux/manager-common-translations": "*"
   },
   "peerDependencies": {
+    "@ovh-ux/manager-common-translations": "*",
     "@ovh-ux/manager-core-api": "^0.9.0-alpha.0",
     "@ovh-ux/manager-react-shell-client": "^0.8.5",
     "@ovhcloud/ods-components": "^18.3.0",

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

@@ -0,0 +1,31 @@
+import fr_FR from '@ovh-ux/manager-common-translations/dist/@ovh-ux/manager-common-translations/service/Messages_fr_FR.json';
+import { ResourceStatus } from '@ovh-ux/manager-module-common-api';
+import React from 'react';
+import { vitest } from 'vitest';
+import { render } from '../../utils/test.provider';
+import { ServiceStateBadge } from './ServiceStateBadge';
+
+vitest.mock('../../hooks/iam');
+
+const renderComponent = (
+  props: React.ComponentProps<typeof ServiceStateBadge>,
+) => {
+  return render(<ServiceStateBadge {...props} data-testid="badge" />);
+};
+
+describe('should display manager state with the good color', () => {
+  it.each([
+    { state: 'active', label: fr_FR.service_state_active, color: 'success' },
+    { state: 'deleted', label: fr_FR.service_state_deleted, color: 'critical' },
+    { state: 'unknown', label: 'unknown', color: 'information' },
+  ])(
+    `'should display manager state badge for $color`,
+    ({ state, label, color }) => {
+      const container = renderComponent({ state: state as ResourceStatus });
+      const badge = container.getByTestId('badge');
+      expect(badge).toBeDefined();
+      expect(badge.getAttribute('label')).toBe(label);
+      expect(badge.getAttribute('color')).toBe(color);
+    },
+  );
+});

packages/manager-react-components/src/components/ServiceStateBadge/ServiceStateBadge.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { ServiceStateBadge } from './ServiceStateBadge';
+import { ResourceStatus } from '../../hooks/services/services.type';
+
+export const ServiceStateBadgeActive = () => (
+  <ServiceStateBadge state="active" />
+);
+
+export const ServiceStateBadgeDeleted = () => (
+  <ServiceStateBadge state="deleted" />
+);
+
+export const ServiceStateBadgeSuspended = () => (
+  <ServiceStateBadge state="suspended" />
+);
+
+export const ServiceStateBadgeToActivate = () => (
+  <ServiceStateBadge state="toActivate" />
+);
+
+export const ServiceStateBadgeToDelete = () => (
+  <ServiceStateBadge state="toDelete" />
+);
+
+export const ServiceStateBadgeToSuspend = () => (
+  <ServiceStateBadge state="toSuspend" />
+);
+
+export const ServiceStateBadgeUnknown = () => (
+  <ServiceStateBadge state={'unknown' as unknown as ResourceStatus} />
+);
+
+const meta: Meta<typeof ServiceStateBadge> = {
+  title: 'Components/ServiceStateBadge',
+  component: ServiceStateBadge,
+  argTypes: {
+    state: {
+      control: { type: 'select' },
+      options: [
+        'active',
+        'deleted',
+        'suspended',
+        'toActivate',
+        'toDelete',
+        'toSuspend',
+        'unknown',
+      ],
+      description: 'Select the state of the service.',
+    },
+  },
+  args: {
+    state: 'active',
+  },
+  decorators: [],
+};
+
+export default meta;

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

@@ -0,0 +1,57 @@
+import './translations';
+import React from 'react';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
+import { useTranslation } from 'react-i18next';
+import { OdsBadgeColor } from '@ovhcloud/ods-components';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
+import { ResourceStatus } from '../../hooks/services/services.type';
+
+export type ServiceStateBadgeProps = Omit<
+  React.ComponentProps<typeof OdsBadge>,
+  'color' | 'label'
+> & {
+  state: ResourceStatus;
+};
+
+export const ServiceStateBadge = ({
+  state,
+  ...rest
+}: ServiceStateBadgeProps) => {
+  const { t } = useTranslation(NAMESPACES.SERVICE);
+
+  let label = '';
+  let color: OdsBadgeColor;
+
+  switch (state) {
+    case 'active':
+      label = t('service_state_active');
+      color = 'success';
+      break;
+    case 'deleted':
+      label = t('service_state_deleted');
+      color = 'critical';
+      break;
+    case 'suspended':
+      label = t('service_state_suspended');
+      color = 'warning';
+      break;
+    case 'toActivate':
+      label = t('service_state_toActivate');
+      color = 'information';
+      break;
+    case 'toDelete':
+      label = t('service_state_toDelete');
+      color = 'information';
+      break;
+    case 'toSuspend':
+      label = t('service_state_toSuspend');
+      color = 'information';
+      break;
+    default:
+      label = state;
+      color = 'information';
+      break;
+  }
+
+  return <OdsBadge label={label} color={color} {...rest}></OdsBadge>;
+};

packages/manager-react-components/src/components/ServiceStateBadge/translations/index.ts

@@ -0,0 +1,13 @@
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
+import i18next from 'i18next';
+import service_fr_FR from '@ovh-ux/manager-common-translations/dist/@ovh-ux/manager-common-translations/service/Messages_fr_FR.json';
+
+function addTranslations() {
+  i18next.addResources('fr_FR', NAMESPACES.SERVICE, service_fr_FR);
+}
+
+if (i18next.isInitialized) {
+  addTranslations();
+} else {
+  i18next.on('initialized', addTranslations);
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export type TileBlockProps = React.PropsWithChildren<{
+  label?: string;
+}>;
+
+export const ManagerTileItem = ({ children }: React.PropsWithChildren) => {
+  return <dl className="flex flex-col gap-y-[8px] my-0">{children}</dl>;
+};
+
+const ManagerTileItemLabel = ({ children }: React.PropsWithChildren) => {
+  return (
+    <dt className="tile-block-title m-0 text-[--ods-color-heading] text-[16px] leading-[16px] font-semibold">
+      {children}
+    </dt>
+  );
+};
+
+const ManagerTileItemDescription = ({ children }: React.PropsWithChildren) => {
+  return (
+    <dt className="tile-block-title m-0 text-[--ods-color-heading] text-[16px] leading-[16px] font-semibold">
+      {children}
+    </dt>
+  );
+};
+
+ManagerTileItem.Label = ManagerTileItemLabel;
+ManagerTileItem.Description = ManagerTileItemDescription;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { OdsDivider, OdsCard } from '@ovhcloud/ods-components/react';
+import { ODS_CARD_COLOR } from '@ovhcloud/ods-components';
+import { ManagerTileItem } from './manager-tile-item.component';
+
+export type ManagerTileProps = React.ComponentProps<typeof OdsCard>;
+
+export const ManagerTile = ({
+  className,
+  children,
+  ...props
+}: ManagerTileProps) => {
+  return (
+    <OdsCard
+      className={`w-full flex-col p-[1rem] ${className}`}
+      color={ODS_CARD_COLOR.neutral}
+      {...props}
+    >
+      <div className="flex flex-col w-full">{children}</div>
+    </OdsCard>
+  );
+};
+
+type ManagerTileTitleProps = React.PropsWithChildren;
+const ManagerTileTitle = ({ children }: ManagerTileTitleProps) => {
+  return (
+    <h4 className="dashboard-tile-title m-0 text-[--ods-color-heading] text-[20px] leading-[28px] font-bold">
+      {children}
+    </h4>
+  );
+};
+
+const ManagerTileDivider = () => <OdsDivider spacing="24" />;
+
+ManagerTile.Title = ManagerTileTitle;
+ManagerTile.Item = ManagerTileItem;
+ManagerTile.Divider = ManagerTileDivider;

packages/manager-react-components/src/components/content/ManagerTile/manager-tile.stories.tsx

@@ -0,0 +1,110 @@
+import React, { useId } from 'react';
+import { Meta } from '@storybook/react';
+import { OdsSkeleton } from '@ovhcloud/ods-components/react';
+import { ManagerTile } from './manager-tile.component';
+import ActionMenu from '../../navigation/menus/action/action.component';
+
+const actionItems = [
+  {
+    id: 1,
+    href: 'https://ovhcloud.com',
+    label: 'Action 1',
+  },
+  {
+    id: 2,
+    onClick: () => window.open('https://ovhcloud.com', '_blank', 'noopener'),
+    label: 'Action 2',
+  },
+];
+
+export const CompleteExample = () => {
+  const id = useId();
+  return (
+    <ManagerTile>
+      <ManagerTile.Title>Complete example</ManagerTile.Title>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <span>Test</span>
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <OdsSkeleton />
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Text Directly</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          Text example
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Menu Example</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <span>
+            <div className="flex">
+              <div className="mr-auto">Test value</div>
+              <ActionMenu isCompact items={actionItems} id={id} />
+            </div>
+          </span>
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <span>Test</span>
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+    </ManagerTile>
+  );
+};
+
+export const SimpleExampleWithTitle = () => (
+  <ManagerTile>
+    <ManagerTile.Title>Sample example with title</ManagerTile.Title>
+    <ManagerTile.Divider />
+    <ManagerTile.Item>
+      <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label>
+      <ManagerTile.Item.Description>Test</ManagerTile.Item.Description>
+    </ManagerTile.Item>
+    <ManagerTile.Divider />
+    <ManagerTile.Item>
+      <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label>
+      <ManagerTile.Item.Description>
+        <OdsSkeleton />
+      </ManagerTile.Item.Description>
+    </ManagerTile.Item>
+  </ManagerTile>
+);
+
+export const NoTitle = () => (
+  <ManagerTile>
+    <ManagerTile.Item>
+      <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label>
+      <ManagerTile.Item.Description>Test</ManagerTile.Item.Description>
+    </ManagerTile.Item>
+    <ManagerTile.Divider />
+    <ManagerTile.Item>
+      <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label>
+      <ManagerTile.Item.Description>
+        <OdsSkeleton />
+      </ManagerTile.Item.Description>
+    </ManagerTile.Item>
+  </ManagerTile>
+);
+
+const meta: Meta = {
+  title: 'Content/Manager Tile',
+  component: ManagerTile,
+  argTypes: {},
+  args: {},
+};
+
+export default meta;