feat(web.office): add licences datagrid

ref: MANAGER-16124

Signed-off-by: Guillaume Hyenne <[email protected]>

packages/manager/apps/container/src/container/legacy/server-sidebar/universe/WebSidebar.tsx

@@ -264,7 +264,7 @@ export default function WebSidebar() {
             id: 'web-office',
             label: t('sidebar_license_office'),
             icon: getIcon('ms-Icon ms-Icon--OfficeLogo'),
-            routeMatcher: new RegExp(`^/web-office`),
+            routeMatcher: new RegExp('^/web-office'),
             async loader() {
               const services = await loadServices('/license/office');
               return [

packages/manager/apps/web-office/public/translations/dashboard/Messages_fr_FR.json

@@ -1,7 +1,7 @@
 {
   "title": "Dashboard page",
   "error_service": "No services info",
-  "general_informations": "Informations générales",
-  "tab2": "Tab 2",
+  "microsoft_office_dashboard_consumption": "Consommation",
+  "microsoft_office_dashboard_licences": "Licences",
   "back_link": "Retour à la liste"
 }

packages/manager/apps/web-office/public/translations/dashboard/users/Messages_fr_FR.json

@@ -0,0 +1,18 @@
+{
+  "dashboard_users_table_firstName": "Prénom",
+  "dashboard_users_table_lastName": " Nom",
+  "dashboard_users_table_activationEmail": "Email d'activation",
+  "dashboard_users_table_licences": "Licences",
+  "dashboard_users_table_status": "Statut",
+  "dashboard_users_download_text": "Les programmes d'installation pour PC et MAC sont disponibles sur le site de microsoft <officeLink/>.",
+  "dashboard_users_download_info": "Pour smartphones et tablettes, rendez-vous directement dans votre App Store.",
+  "dashboard_users_download_id": "Les identifiants de connexion et d'installation vous sont transmis par email lorsque vous ajoutez une nouvelle licence.",
+  "dashboard_users_status_creating": "En création",
+  "dashboard_users_status_updating": "Mise à jour",
+  "dashboard_users_status_deleting": "En suppression",
+  "dashboard_users_status_ok": "Créé",
+  "dashboard_users_status_unconfigured": "Non configuré",
+  "dashboard_users_action_user_change_password": "Changer le mot de passe",
+  "dashboard_users_action_user_edit": "Editer le compte",
+  "dashboard_users_action_user_delete": "Supprimer le compte"
+}

packages/manager/apps/web-office/src/api/_mock_/index.ts

@@ -0,0 +1,2 @@
+export * from './license';
+export * from './user';

packages/manager/apps/web-office/src/api/_mock_/license.ts

@@ -1,4 +1,5 @@
-import { LicenseType } from '../license/type';
+import { LicenseEnum, UserStateEnum } from '../api.type';
+import { LicensePrepaidType, LicenseType } from '../license/type';
 
 export const licensesMock: LicenseType[] = [
   {
@@ -11,7 +12,7 @@ export const licensesMock: LicenseType[] = [
     phone: '0033123456789',
     serviceName: 'user123.o365.ovh.com',
     serviceType: 'payAsYouGo',
-    status: 'active',
+    status: UserStateEnum.OK,
     zipCode: '75001',
     iam: {
       id: '12345abc-6789-def0-gh12-3456789ijklm',
@@ -28,11 +29,53 @@ export const licensesMock: LicenseType[] = [
     phone: '0033123456789',
     serviceName: 'topuser125.o365.ovh.com',
     serviceType: 'payAsYouGo',
-    status: 'active',
+    status: UserStateEnum.OK,
     zipCode: '59000',
     iam: {
       id: '12345abc-6789-def0-gh12-3456789ijklm',
       urn: 'urn:v1:eu:resource:licenseOffice:user123.o365.ovh.com',
     },
   },
 ];
+
+export const licensesPrepaidMock: string[] = [
+  'office5678.o365.ovh.com-1234',
+  'office1234.o365.ovh.com-5678',
+];
+
+export const licensesPrepaidExpandedMock: LicensePrepaidType[] = [
+  {
+    activationEmail: '[email protected]',
+    firstName: 'configureme',
+    isVirtual: true,
+    lastName: 'configureme',
+    licences: [LicenseEnum.OFFICE_PRO_PLUS],
+    serviceName: 'office5678.o365.ovh.com-1234',
+    status: UserStateEnum.OK,
+    taskPendingId: 0,
+    tenantServiceName: 'office5678.o365.ovh.com',
+    usageLocation: 'fr',
+    iam: {
+      id: '96faec97-1257-4ae8-b2f5-49d8bc74bdd2',
+      urn:
+        'urn:v1:eu:resource:licenseOfficePrepaid:office5678.o365.ovh.com-1234',
+    },
+  },
+  {
+    activationEmail: '[email protected]',
+    firstName: 'i',
+    isVirtual: false,
+    lastName: 'i',
+    licences: [LicenseEnum.OFFICE_PRO_PLUS],
+    serviceName: 'office1234.o365.ovh.com-5678',
+    status: UserStateEnum.OK,
+    taskPendingId: 0,
+    tenantServiceName: 'office1234.o365.ovh.com',
+    usageLocation: 'fr',
+    iam: {
+      id: 'da75876b-cc2a-429d-8942-ef0e26fced73',
+      urn:
+        'urn:v1:eu:resource:licenseOfficePrepaid:office1234.o365.ovh.com-5678',
+    },
+  },
+];

packages/manager/apps/web-office/src/api/_mock_/user.ts

@@ -0,0 +1,27 @@
+import { LicenseEnum, UserStateEnum } from '../api.type';
+import { UserNativeType } from '../users/type';
+
+export const usersMock: UserNativeType[] = [
+  {
+    activationEmail: '[email protected]',
+    deleteAtExpiration: false,
+    firstName: 'First',
+    isVirtual: false,
+    lastName: 'Name',
+    licences: [LicenseEnum.OFFICE_BUSINESS],
+    status: UserStateEnum.OK,
+    taskPendingId: 0,
+    usageLocation: 'fr',
+  },
+  {
+    activationEmail: '[email protected]',
+    deleteAtExpiration: false,
+    firstName: 'test',
+    isVirtual: false,
+    lastName: 'test',
+    licences: [LicenseEnum.OFFICE_BUSINESS],
+    status: UserStateEnum.OK,
+    taskPendingId: 0,
+    usageLocation: 'fr',
+  },
+];

packages/manager/apps/web-office/src/api/api.type.ts

@@ -0,0 +1,14 @@
+export enum UserStateEnum {
+  CREATING = 'creating',
+  DELETING = 'deleting',
+  OK = 'ok',
+  UNCONFIGURED = 'unconfigured',
+  SUSPENDED = 'suspended',
+  SUSPENDING = 'suspending',
+  UNSUSPENDING = 'unsuspending',
+}
+
+export enum LicenseEnum {
+  OFFICE_BUSINESS = 'officeBusiness',
+  OFFICE_PRO_PLUS = 'officeProPlus',
+}

packages/manager/apps/web-office/src/api/license/api.ts

@@ -1,18 +1,42 @@
-import { v6 } from '@ovh-ux/manager-core-api';
-import { GetOfficeLicenseServiceParams } from './type';
-import { getApiPath } from '../utils/apiPath';
+import { aapi, v6 } from '@ovh-ux/manager-core-api';
+import { getApiPath, getApiPathWithoutServiceName } from '../utils/apiPath';
 
 // GET
 
-export const getlicenseOfficeServiceQueryKey = (
-  params: GetOfficeLicenseServiceParams,
-) => [`get/license/office/${params.serviceName}`];
+export const getOfficeGlobalLicenses = async () => {
+  const { data } = await aapi.get('service', {
+    params: {
+      external: false,
+      type: '/license/office',
+    },
+  });
+  return data;
+};
 
 export const getOfficeLicenseDetails = async (serviceName: string) => {
   const { data } = await v6.get(`${getApiPath(serviceName)}`);
   return data;
 };
 
+export const getOfficePrepaidLicenseDetails = async (serviceName: string) => {
+  const { data } = await v6.get(`${getApiPath(serviceName)}`);
+  return data;
+};
+
+export const getOfficeLicenses = async (serviceName: string) => {
+  const { data } = await v6.get<string[]>(
+    getApiPathWithoutServiceName(serviceName),
+  );
+  return data;
+};
+
+export const getOfficePrepaidLicenses = async (serviceName: string) => {
+  const { data } = await v6.get<string[]>(
+    getApiPathWithoutServiceName(serviceName),
+  );
+  return data;
+};
+
 // POST
 
 // PUT

packages/manager/apps/web-office/src/api/license/index.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './key';
+export * from './type';

packages/manager/apps/web-office/src/api/license/key.ts

@@ -1,5 +1,12 @@
+import { getApiPath } from '../utils/apiPath';
+
 export const getOfficeLicenseDetailsQueryKey = (serviceName: string) => [
-  `get/license/office/${serviceName}`,
+  'get',
+  getApiPath(serviceName),
+  serviceName,
 ];
 
-export const getOfficeLicenseQueryKey = () => [`get/license/office`];
+export const getOfficeLicenseQueryKey = (serviceName: string) => [
+  'get',
+  getApiPath(serviceName),
+];

packages/manager/apps/web-office/src/api/license/type.ts

@@ -1,3 +1,5 @@
+import { LicenseEnum, UserStateEnum } from '../api.type';
+
 export type LicenseType = {
   address: string;
   city: string;
@@ -8,13 +10,30 @@ export type LicenseType = {
   phone: string;
   serviceName: string;
   serviceType: string;
-  status: string;
+  status: UserStateEnum;
   zipCode: string;
   iam: {
     id: string;
     urn: string;
   };
-  [key: string]: string | { id: string; urn: string };
+  [key: string]: string | number | boolean | { id: string; urn: string };
+};
+
+export type LicensePrepaidType = {
+  activationEmail: string;
+  firstName: string;
+  isVirtual: boolean;
+  lastName: string;
+  licences: LicenseEnum[];
+  serviceName: string;
+  status: UserStateEnum;
+  taskPendingId: number;
+  tenantServiceName: string;
+  usageLocation: string;
+  iam: {
+    id: string;
+    urn: string;
+  };
 };
 
 export type GetOfficeLicenseServiceParams = {

packages/manager/apps/web-office/src/api/users/api.ts

@@ -0,0 +1,21 @@
+import { fetchIcebergV6 } from '@ovh-ux/manager-core-api';
+import { getApiPath } from '../utils/apiPath';
+import { UserNativeType } from './type';
+
+// GET
+
+export const getOfficeUsers = async (
+  serviceName: string,
+): Promise<UserNativeType[]> => {
+  const { data } = await fetchIcebergV6<UserNativeType>({
+    route: `${getApiPath(serviceName)}user`,
+    disableCache: true,
+  });
+  return data;
+};
+
+// POST
+
+// PUT
+
+// DELETE

packages/manager/apps/web-office/src/api/users/index.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './key';
+export * from './type';

packages/manager/apps/web-office/src/api/users/key.ts

@@ -0,0 +1,7 @@
+export const getOfficeUsersQueryKey = (serviceName: string) => [
+  'get',
+  'license',
+  'office',
+  serviceName,
+  'user',
+];

packages/manager/apps/web-office/src/api/users/type.ts

@@ -0,0 +1,19 @@
+import { LicenseEnum, UserStateEnum } from '../api.type';
+
+export type UserNativeType = {
+  activationEmail: string;
+  deleteAtExpiration: boolean;
+  firstName: string;
+  isVirtual: boolean;
+  lastName: string;
+  licences: LicenseEnum[];
+  status: UserStateEnum;
+  taskPendingId: number;
+  usageLocation: string;
+  [key: string]:
+    | string
+    | number
+    | boolean
+    | LicenseEnum[]
+    | { id: string; urn: string };
+};

packages/manager/apps/web-office/src/api/utils/apiPath.ts

@@ -1,2 +1,15 @@
-export const getApiPath = (serviceName: string) =>
-  `/license/office/${serviceName}/`;
+import { useOfficeServiceType } from '@/hooks';
+
+export const getApiPath = (serviceName: string) => {
+  const serviceType = useOfficeServiceType(serviceName);
+  return `/license/${
+    serviceType === 'payAsYouGo' ? 'office' : 'officePrepaid'
+  }/${serviceName}/`;
+};
+
+export const getApiPathWithoutServiceName = (serviceName: string) => {
+  const serviceType = useOfficeServiceType(serviceName);
+  return `/license/${
+    serviceType === 'payAsYouGo' ? 'office' : 'officePrepaid'
+  }/`;
+};

packages/manager/apps/web-office/src/components/BadgeStatus.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
+import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
+import { UserStateEnum } from '@/api/api.type';
+
+export type BadgeStatusProps = {
+  itemStatus: string;
+  'data-testid'?: string;
+};
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case UserStateEnum.OK:
+      return ODS_BADGE_COLOR.success;
+    case UserStateEnum.DELETING:
+      return ODS_BADGE_COLOR.critical;
+    default:
+      return ODS_BADGE_COLOR.information;
+  }
+};
+
+export const BadgeStatus: React.FC<BadgeStatusProps> = (props) => {
+  const { t } = useTranslation('dashboard/users');
+  const statusColor = useMemo(() => getStatusColor(props.itemStatus), [
+    props.itemStatus,
+  ]);
+
+  return (
+    <OdsBadge
+      data-testid={props['data-testid']}
+      color={statusColor}
+      label={t(`dashboard_users_status_${props.itemStatus}`)}
+    />
+  );
+};