feat(hycu): add listing page

ref: MANAGER-14497

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

packages/manager-react-components/src/hooks/services/services.type.ts

@@ -80,7 +80,7 @@ export type ServiceDetails = {
         actions: LifecycleAction[];
       };
       current: {
-        createDate: string;
+        creationDate: string;
         pendingActions: LifecycleAction[];
         state: LifecycleState;
         terminationDate: string;

packages/manager/apps/hycu/package.json

@@ -48,6 +48,7 @@
     "@ovh-ux/manager-vite-config": "*",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.13",
     "@vitejs/plugin-react": "^4.3.2",
     "element-internals-polyfill": "^1.3.12",

packages/manager/apps/hycu/public/translations/error/Messages_fr_FR.json

@@ -0,0 +1,3 @@
+{
+  "manager_error_page_default": "Une erreur est survenue lors du chargement de la page."
+}

packages/manager/apps/hycu/public/translations/listing/Messages_fr_FR.json

@@ -1,4 +1,16 @@
 {
-  "title": "Listing page",
-  "listing_resultats": "résultats"
+  "title": "HYCU",
+  "listing_resultats": "résultats",
+  "hycu_status_activated": "Active",
+  "hycu_status_toActivate": "A activer",
+  "hycu_status_pending": "En cours d'activation",
+  "hycu_status_error": "Error d'activation",
+  "hycu-cloud-vm-pack-unknown": "Pack inconnu",
+  "hycu_name": "Nom",
+  "hycu_controller_id": "Controller ID",
+  "hycu_status": "Status",
+  "hycu_commercial_name": "Type de pack",
+  "hycu_subscribed_date": "Date de souscription",
+  "hycu_order": "Commander",
+  "hycu_service_listing_terminate": "Résilié"
 }

packages/manager/apps/hycu/src/hooks/services/usePackTypeLabel.ts

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+import { packTypeLabel } from '@/constants';
+
+export const usePackTypeLabel = (packType: string) => {
+  const { t } = useTranslation('listing');
+
+  return (
+    packTypeLabel[packType as keyof typeof packTypeLabel] ??
+    t('hycu-cloud-vm-pack-unknown')
+  );
+};

packages/manager/apps/hycu/src/hooks/useFormattedDate.ts

@@ -0,0 +1,24 @@
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useContext, useMemo } from 'react';
+
+type UseDateProps = {
+  date: Date;
+  options: Intl.DateTimeFormatOptions;
+};
+
+function isValidDate(date: unknown) {
+  // eslint-disable-next-line no-restricted-globals
+  return date instanceof Date && !isNaN(date.getMilliseconds());
+}
+
+export const useFormattedDate = ({ date, options }: UseDateProps): string => {
+  const {
+    environment: { userLocale },
+  } = useContext(ShellContext);
+
+  return useMemo(() => {
+    return isValidDate(date)
+      ? Intl.DateTimeFormat(userLocale.replace('_', '-'), options).format(date)
+      : '-';
+  }, [userLocale, date]);
+};

packages/manager/apps/hycu/src/mocks/licenseHycu/licenseHycu.data.ts

@@ -1,18 +1,28 @@
-export const licenseHycu: unknown[] = [
+import { IHycuDetails, LicenseStatus } from '@/type/hycu.details.interface';
+
+export const licensesHycu: IHycuDetails[] = [
   {
-    displayName: '425802fa-fb70-4b2a-9d5b-ec4de86bb40c',
-    extraParams: null,
-    parentName: null,
+    iam: {
+      id: '4a26ef55-d46b-4b71-88c8-76ad71b154b4',
+      urn:
+        'urn:v1:eu:resource:licenseHycu:425802fa-fb70-4b2a-9d5b-ec4de86bb40c',
+    },
+    comment: '',
     serviceName: '425802fa-fb70-4b2a-9d5b-ec4de86bb40c',
-    stateParams: ['425802fa-fb70-4b2a-9d5b-ec4de86bb40c'],
-    url: '#/425802fa-fb70-4b2a-9d5b-ec4de86bb40c',
+    controllerId: '',
+    licenseStatus: LicenseStatus.TO_ACTIVATE,
+    expirationDate: '0001-01-01T00:00:00Z',
   },
   {
-    displayName: 'c1b7cb4f-6b63-45da-9a8a-f731f1a67b2c',
-    extraParams: null,
-    parentName: null,
+    iam: {
+      id: '06a89efa-cf14-431b-ab84-af5b3913e2ef',
+      urn:
+        'urn:v1:eu:resource:licenseHycu:c1b7cb4f-6b63-45da-9a8a-f731f1a67b2c',
+    },
+    comment: '',
     serviceName: 'c1b7cb4f-6b63-45da-9a8a-f731f1a67b2c',
-    stateParams: ['c1b7cb4f-6b63-45da-9a8a-f731f1a67b2c'],
-    url: '#/c1b7cb4f-6b63-45da-9a8a-f731f1a67b2c',
+    controllerId: '',
+    licenseStatus: LicenseStatus.ACTIVATED,
+    expirationDate: '0001-01-01T00:00:00Z',
   },
 ];

packages/manager/apps/hycu/src/mocks/licenseHycu/licenseHycu.ts

@@ -1,24 +1,24 @@
 import { Handler } from '../../../../../../../playwright-helpers';
-import { licenseHycu } from './licenseHycu.data';
+import { licensesHycu } from './licenseHycu.data';
 
 export type GetLicenseHycuMocksParams = {
-  isBackupKo?: boolean;
+  isGetLicenseHycuKo?: boolean;
   nbLicenseHycu?: number;
 };
 
 export const getLicenseHycuMocks = ({
-  isBackupKo,
+  isGetLicenseHycuKo,
   nbLicenseHycu = Number.POSITIVE_INFINITY,
 }: GetLicenseHycuMocksParams): Handler[] => {
   return [
     {
       url: 'license/hycu',
-      response: isBackupKo
+      response: isGetLicenseHycuKo
         ? {
             message: 'Backup error',
           }
-        : licenseHycu.slice(0, nbLicenseHycu),
-      status: isBackupKo ? 500 : 200,
+        : licensesHycu.slice(0, nbLicenseHycu),
+      status: isGetLicenseHycuKo ? 500 : 200,
       api: 'v6',
     },
   ];