feat(manager-react-component): add service state badge component

Signed-off-by: Thibault Barske <[email protected]>

Author: tibs245

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

@@ -23,6 +23,7 @@ jobs:
           yarn exec turbo -- run build --filter="./packages/manager/core/*" --concurrency=5
           yarn exec turbo -- run build --filter="./packages/manager-react-components"
           yarn exec turbo -- run build --filter="./packages/manager/modules/order"
+          yarn exec turbo -- run build --filter="./packages/manager/modules/common-translations"
           yarn exec turbo -- run build --filter="./packages/manager/modules/common-api"
           yarn exec turbo -- run build --filter="./packages/manager/modules/vcd-api"
           yarn exec turbo -- run build --filter="./packages/manager/modules/manager-pci-common"

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,40 @@
+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;
+};
+
+const stateConfig: Record<
+  ResourceStatus,
+  { label: string; color: OdsBadgeColor }
+> = {
+  active: { label: 'service_state_active', color: 'success' },
+  deleted: { label: 'service_state_deleted', color: 'critical' },
+  suspended: { label: 'service_state_suspended', color: 'warning' },
+  toActivate: { label: 'service_state_toActivate', color: 'information' },
+  toDelete: { label: 'service_state_toDelete', color: 'information' },
+  toSuspend: { label: 'service_state_toSuspend', color: 'information' },
+};
+
+export const ServiceStateBadge = ({
+  state,
+  ...rest
+}: ServiceStateBadgeProps) => {
+  const { t } = useTranslation(NAMESPACES.SERVICE);
+
+  const { label, color } = stateConfig[state] ?? {
+    label: state,
+    color: 'information',
+  };
+
+  return <OdsBadge label={t(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);
+}