feat(hycu): add hycu dashboard

ref: MANAGER-14499

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

packages/manager-react-components/package.json

@@ -16,7 +16,6 @@
     "start": "storybook dev -p 6006",
     "test": "jest --coverage -u",
     "test:cov": "vitest run --coverage",
-    "test:e2e": "tsc && npx playwright test --ui --debug",
     "test:watch": "jest --watch"
   },
   "lint-staged": {

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

@@ -55,6 +55,21 @@ export type ResourceStatus =
   | 'toDelete'
   | 'toSuspend';
 
+export type Renew = {
+  current: CurrentRenew;
+  capacities: RenewCapacities;
+};
+
+export type CurrentRenew = {
+  mode: RenewMode | null;
+  nextDate: string | null;
+  period: string;
+};
+
+export type RenewCapacities = {
+  mode: RenewMode[];
+};
+
 export type ServiceDetails = {
   billing: {
     engagement: {
@@ -115,14 +130,7 @@ export type ServiceDetails = {
       pricingMode: string;
       pricingType: PricingType;
     };
-  };
-  renew: {
-    capacities: { mode: RenewMode[] };
-    current: {
-      mode: RenewMode | null;
-      nextDate: string | null;
-      period: string;
-    };
+    renew: Renew;
   };
   customer: {
     contacts: CustomerContact[];

packages/manager/apps/hycu/.gitignore

@@ -1,2 +1,3 @@
 e2e/reports
 e2e/coverage
+coverage

packages/manager/apps/hycu/package.json

@@ -16,7 +16,8 @@
     "start": "lerna exec --stream --scope='@ovh-ux/manager-hycu-app' --include-dependencies -- npm run build --if-present",
     "start:dev": "lerna exec --stream --scope='@ovh-ux/manager-hycu-app' --include-dependencies -- npm run dev --if-present",
     "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-hycu-app' --include-dependencies -- npm run dev:watch --if-present",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@ovh-ux/manager-config": "*",
@@ -46,17 +47,20 @@
   "devDependencies": {
     "@cucumber/cucumber": "^10.3.1",
     "@ovh-ux/manager-vite-config": "*",
+    "@ovh-ux/url-builder": "^1.2.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.13",
     "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-v8": "^2.1.3",
     "element-internals-polyfill": "^1.3.12",
     "eslint-plugin-prettier": "^5.2.1",
     "msw": "2.1.7",
     "typescript": "^5.1.6",
     "vite": "^5.2.13",
-    "vitest": "^2.1.2"
+    "vitest": "^2.1.3"
   },
   "regions": [
     "CA",

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

@@ -2,5 +2,9 @@
   "hycu_crumb": "HYCU",
   "tabs_2": "Tabs 2",
   "hycu_description": "Simplifiez vos sauvegardes, plans de reprise après sinistre et migrations de votre infrastructure Nutanix. Ce service vous propose différents packs de licences HYCU Hybrid Cloud pour protéger vos charges de travail Nutanix.",
-  "hycu_cloud_vm_pack_unknown": "Pack inconnu"
+  "hycu_cloud_vm_pack_unknown": "Pack inconnu",
+  "hycu_status_activated": "Active",
+  "hycu_status_toActivate": "À activer",
+  "hycu_status_pending": "En cours d'activation",
+  "hycu_status_error": "Erreur d'activation"
 }

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

@@ -0,0 +1,25 @@
+{
+  "hycu_dashboard_generals_informations_title": "Informations générales",
+  "hycu_dashboard_label_name": "Nom",
+  "hycu_dashboard_label_status": "Statut",
+  "hycu_dashboard_label_pack_type": "Type de pack",
+  "hycu_dashboard_label_controller_id": "Controller ID",
+  "hycu_dashboard_label_license_key": "Clé de licence",
+  "hycu_dashboard_shortcuts_title": "Raccourcis",
+  "hycu_dashboard_link_activate": "Activer la licence",
+  "hycu_dashboard_link_reactivate": "Regénérer la licence",
+  "hycu_dashboard_link_terminated": "Résilier la licence",
+  "hycu_dashboard_link_change_pack_type": "Modifier le type de pack",
+  "hycu_dashboard_field_label_contacts": "Contacts",
+  "hycu_dashboard_contact_type_administrator": "Administrateur",
+  "hycu_dashboard_contact_type_technical": "Technique",
+  "hycu_dashboard_contact_type_billing": "Facturation",
+  "hycu_dashboard_action_billing_terminate": "Résilier",
+  "hycu_dashboard_field_label_manage_contacts": "Gérer les contacts",
+  "hycu_dashboard_label_renew": "Renouvellement automatique",
+  "hycu_dashboard_subscription_title": "Abonnement",
+  "hycu_dashboard_field_label_date_creation": "Date de création",
+  "hycu_dashboard_download_license_file": "Télécharger la license",
+  "hycu_dashboard_back_link": "Retour à la liste",
+  "hycu_dashboard_wait_for_activation": "En attente d'activation"
+}

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

@@ -1,8 +1,4 @@
 {
-  "hycu_status_activated": "Active",
-  "hycu_status_toActivate": "À activer",
-  "hycu_status_pending": "En cours d'activation",
-  "hycu_status_error": "Erreur d'activation",
   "hycu_cloud_vm_pack_unknown": "Pack inconnu",
   "hycu_name": "Nom",
   "hycu_controller_id": "Controller ID",

packages/manager/apps/hycu/src/components/Loading/Loading.component.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { OsdsSpinner } from '@ovhcloud/ods-components/react';
 
+/* v8 ignore start */
 export default function Loading() {
   return (
     <div className="flex justify-center">

packages/manager/apps/hycu/src/data/api/hycu.ts

@@ -1,16 +1,18 @@
+import { AxiosResponse } from 'axios';
 import { fetchIcebergV6, apiClient } from '@ovh-ux/manager-core-api';
+import { IHycuDetails } from '@/type/hycu.details.interface';
 
 export type GetlicenseHycuListParams = {
   /** Filter resources on IAM tags */
-  iamTags: any;
+  iamTags: string;
 };
 
 export const getlicenseHycuListQueryKey = ['get/license/hycu'];
 
 /**
  * Manage HYCU licenses : Get list of owned HYCU licenses
  */
-export const getlicenseHycuList = async (
+export const getlicenseHycuList = (
   params: GetlicenseHycuListParams,
 ): Promise<unknown> => apiClient.v6.get('/license/hycu', { data: params });
 
@@ -19,16 +21,13 @@ export type GetlicenseHycuServiceParams = {
   serviceName?: string;
 };
 
-export const getlicenseHycuServiceQueryKey = (
-  params: GetlicenseHycuServiceParams,
-) => [`get/license/hycu/${params.serviceName}`];
-
 /**
  * Manage HYCU licenses : Get HYCU license info
  */
-export const getlicenseHycuService = async (
+export const getlicenseHycuService = (
   params: GetlicenseHycuServiceParams,
-): Promise<any> => apiClient.v6.get(`/license/hycu/${params.serviceName}`);
+): Promise<AxiosResponse<IHycuDetails>> =>
+  apiClient.v6.get<IHycuDetails>(`/license/hycu/${params.serviceName}`);
 
 /**
  *  Get listing with iceberg V6

packages/manager/apps/hycu/src/hooks/api/license.ts

@@ -0,0 +1,15 @@
+import { AxiosResponse } from 'axios';
+import { DefinedInitialDataOptions, useQuery } from '@tanstack/react-query';
+import { getlicenseHycuService } from '@/data/api/hycu';
+import { IHycuDetails } from '@/type/hycu.details.interface';
+
+export const useDetailsLicenseHYCU = (
+  serviceName: string,
+  options?: DefinedInitialDataOptions<AxiosResponse<IHycuDetails>>,
+) => {
+  return useQuery({
+    queryKey: ['license/hycu', 'get', serviceName],
+    queryFn: () => getlicenseHycuService({ serviceName }),
+    ...(options ?? {}),
+  });
+};

packages/manager/apps/hycu/src/hooks/shell/useNavigationGetUrl.spec.tsx

@@ -0,0 +1,44 @@
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { vitest } from 'vitest';
+import { ParamValueType } from '@ovh-ux/url-builder';
+import React, { PropsWithChildren, useState } from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useNavigationGetUrl } from './useNavigationGetUrl';
+
+const mockGetURL = vitest.fn();
+
+const wrapper = ({ children }: PropsWithChildren) => {
+  const [queryClient] = useState(new QueryClient());
+  const [mockContextValue] = useState({
+    shell: { navigation: { getURL: mockGetURL } },
+  });
+  return (
+    <ShellContext.Provider value={mockContextValue as never}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ShellContext.Provider>
+  );
+};
+
+describe('useNavigationGetUrl', () => {
+  it('should call navigation.getURL with correct linkParams', async () => {
+    const linkParams: [string, string, Record<string, ParamValueType>] = [
+      'param1',
+      'param2',
+      { key: 'value' },
+    ];
+    mockGetURL.mockResolvedValue('mockedUrl');
+
+    const { result } = renderHook(
+      () => useNavigationGetUrl(linkParams, { retry: false }),
+      {
+        wrapper,
+      },
+    );
+
+    await waitFor(() => result.current.isSuccess);
+
+    await waitFor(() => expect(mockGetURL).toHaveBeenCalledWith(...linkParams));
+    expect(result.current.data).toBe('mockedUrl');
+  });
+});

packages/manager/apps/hycu/src/hooks/shell/useNavigationGetUrl.ts

@@ -0,0 +1,21 @@
+import { ParamValueType } from '@ovh-ux/url-builder';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { DefinedInitialDataOptions, useQuery } from '@tanstack/react-query';
+import { useContext } from 'react';
+
+export const useNavigationGetUrl = (
+  linkParams: [string, string, Record<string, ParamValueType>],
+  options?: Partial<DefinedInitialDataOptions<unknown>>,
+) => {
+  const {
+    shell: { navigation },
+  } = useContext(ShellContext);
+
+  return useQuery({
+    queryKey: ['shell', 'getUrl', linkParams],
+    queryFn: () => navigation.getURL(...linkParams),
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    ...(options ?? {}),
+  });
+};

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

@@ -1 +1,2 @@
 export * from './licenseHycu/licenseHycu';
+export * from './serviceLicenseHycu/serviceLicenseHycu';

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

@@ -21,7 +21,7 @@ export const licensesHycu: IHycuDetails[] = [
     },
     comment: '',
     serviceName: 'c1b7cb4f-6b63-45da-9a8a-f731f1a67b2c',
-    controllerId: '',
+    controllerId: 'test-id',
     licenseStatus: LicenseStatus.ACTIVATED,
     expirationDate: '0001-01-01T00:00:00Z',
   },

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

@@ -1,14 +1,17 @@
+import { LicenseStatus } from '@/type/hycu.details.interface';
 import { Handler } from '../../../../../../../playwright-helpers';
 import { licensesHycu } from './licenseHycu.data';
 
 export type GetLicenseHycuMocksParams = {
   isGetLicenseHycuKo?: boolean;
   nbLicenseHycu?: number;
+  licenseStatus?: LicenseStatus;
 };
 
 export const getLicenseHycuMocks = ({
   isGetLicenseHycuKo,
   nbLicenseHycu = Number.POSITIVE_INFINITY,
+  licenseStatus = LicenseStatus.TO_ACTIVATE,
 }: GetLicenseHycuMocksParams): Handler[] => {
   return [
     {
@@ -17,7 +20,24 @@ export const getLicenseHycuMocks = ({
         ? {
             message: 'Backup error',
           }
-        : licensesHycu.slice(0, nbLicenseHycu),
+        : licensesHycu
+            .slice(0, nbLicenseHycu)
+            .map((license) => ({ ...license, licenseStatus })),
+      status: isGetLicenseHycuKo ? 500 : 200,
+      api: 'v6',
+    },
+    {
+      url: 'license/hycu/:serviceName',
+      response: isGetLicenseHycuKo
+        ? {
+            message: 'Backup error',
+          }
+        : {
+            ...licensesHycu[0],
+            licenseStatus,
+            controllerId:
+              licenseStatus !== LicenseStatus.TO_ACTIVATE ? 'test-id' : '',
+          },
       status: isGetLicenseHycuKo ? 500 : 200,
       api: 'v6',
     },