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

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

Author: tibs245

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);
+}