feat(web-office): add button order user or licences

ref:MANAGER-16542 Signed-off-by: stif59100 <[email protected]> Co-authored-by: Guillaume Hyenne <[email protected]>
ovh · Jan 10, 2025 · 0159e5c · 0159e5c
1 parent 5a85803
commit 0159e5c
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 33 deletions.
diff --git a/packages/manager/apps/web-office/public/translations/dashboard/users/Messages_fr_FR.json b/packages/manager/apps/web-office/public/translations/dashboard/users/Messages_fr_FR.json
@@ -15,5 +15,6 @@
   "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",
-  "dashboard_users_order_button_licenses": "Commander plus de licenses"
+  "dashboard_users_order_button_licenses": "Commander plus de licences",
+  "dashboard_users_order_button_users": "Ajouter un utilisateur"
 }
diff --git a/packages/manager/apps/web-office/src/pages/dashboard/users/Users.tsx b/packages/manager/apps/web-office/src/pages/dashboard/users/Users.tsx
@@ -28,10 +28,6 @@ export default function Users() {
     isLoading: isLoadingLicenceDetail,
   } = useOfficeLicenseDetail();
 
-  if (isLoadingUsers || isLoadingLicenceDetail) {
-    return <Loading />;
-  }
-
   const columns: DatagridColumn<UserNativeType>[] = [
     {
       id: 'firstName',
@@ -113,21 +109,31 @@ export default function Users() {
         <p>{t('dashboard_users_download_info')}</p>
         <strong>{t('dashboard_users_download_id')}</strong>
       </OdsText>
-      <OdsButton
-        label={t('dashboard_users_order_button_licenses')}
-        variant={ODS_BUTTON_VARIANT.outline}
-        className="block"
-      />
-      {columns && (
-        <Datagrid
-          columns={columns.map((column) => ({
-            ...column,
-            label: t(column.label),
-          }))}
-          items={dataUsers || []}
-          totalItems={dataUsers?.length || 0}
-          className="mt-4"
-        />
+
+      {isLoadingUsers || isLoadingLicenceDetail ? (
+        <Loading />
+      ) : (
+        <>
+          <OdsButton
+            data-testid="user-or-licenses-order-button"
+            label={
+              !dataLicenceDetail?.serviceType
+                ? t('dashboard_users_order_button_licenses')
+                : t('dashboard_users_order_button_users')
+            }
+            variant={ODS_BUTTON_VARIANT.outline}
+            className="block mb-4"
+          />
+          <Datagrid
+            columns={columns.map((column) => ({
+              ...column,
+              label: t(column.label),
+            }))}
+            items={dataUsers || []}
+            totalItems={dataUsers?.length || 0}
+            className="mt-4"
+          />
+        </>
       )}
     </div>
   );

diff --git a/packages/manager/apps/web-office/src/pages/dashboard/users/__test__/Users.spec.tsx b/packages/manager/apps/web-office/src/pages/dashboard/users/__test__/Users.spec.tsx
@@ -2,21 +2,54 @@ import React from 'react';
 import { describe, expect, vi } from 'vitest';
 import Users from '../Users';
 import { render } from '@/utils/test.provider';
-import usersTranslation from '@/public/translations/dashboard/users/Messages_fr_FR.json';
-import { licensesMock, usersMock } from '@/api/_mock_';
+import {
+  licensesMock,
+  licensesPrepaidExpandedMock,
+  usersMock,
+} from '@/api/_mock_';
+
+const hoistedMock = vi.hoisted(() => ({
+  useOfficeUsers: vi.fn(),
+  useOfficeLicenseDetail: vi.fn(),
+}));
+
+vi.mock('@/hooks', async (importActual) => {
+  const actual = await importActual<typeof import('@/hooks')>();
+  return {
+    ...actual,
+    useOfficeUsers: hoistedMock.useOfficeUsers,
+    useOfficeLicenseDetail: hoistedMock.useOfficeLicenseDetail,
+  };
+});
 
 describe('Users page', () => {
-  vi.mock('@/hooks', () => {
-    return {
-      useOfficeUsers: vi.fn(() => usersMock),
-      useOfficeLicenseDetail: vi.fn(() => licensesMock),
-    };
+  it('Page for payAsYouGo', () => {
+    hoistedMock.useOfficeLicenseDetail.mockReturnValue({
+      data: licensesMock[0],
+      isLoading: false,
+    });
+    hoistedMock.useOfficeUsers.mockReturnValue({
+      data: usersMock,
+      isLoading: false,
+    });
+
+    const { getByTestId } = render(<Users />);
+    const orderButton = getByTestId('user-or-licenses-order-button');
+    expect(orderButton).toHaveAttribute('label', 'Ajouter un utilisateur');
   });
 
-  it('Page should display correctly', async () => {
-    const { findByText } = render(<Users />);
-    expect(
-      await findByText(usersTranslation.dashboard_users_download_info),
-    ).toBeVisible();
+  it('Page for prepaid', () => {
+    hoistedMock.useOfficeLicenseDetail.mockReturnValue({
+      data: licensesPrepaidExpandedMock[0],
+      isLoading: false,
+    });
+    hoistedMock.useOfficeUsers.mockReturnValue({
+      data: licensesPrepaidExpandedMock[0],
+      isLoading: false,
+    });
+
+    const { getByTestId } = render(<Users />);
+    const orderButton = getByTestId('user-or-licenses-order-button');
+    expect(orderButton).toHaveAttribute('label', 'Commander plus de licences');
   });
 });
diff --git a/packages/manager/apps/web-office/src/utils/test.setup.tsx b/packages/manager/apps/web-office/src/utils/test.setup.tsx
@@ -54,7 +54,9 @@ vi.mock('@/api/license', async (importActual) => {
     }),
     getOfficeLicenseDetails: vi.fn((serviceName) => {
       return Promise.resolve(
-        licensesMock.find((license) => license.serviceName === serviceName),
+        [...licensesMock, ...licensesPrepaidExpandedMock].find(
+          (license) => license.serviceName === serviceName,
+        ),
       );
     }),
     getOfficePrepaidLicenses: vi.fn(() => {