feat(zimbra-beta): show accounts statistics in tab

ref: MANAGER-15562 Signed-off-by: Tristan WAGNER <[email protected]>
ovh · Oct 10, 2024 · 83e5905 · 83e5905
1 parent 3043a0c
commit 83e5905
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 20 deletions.
diff --git a/packages/manager/apps/zimbra/src/api/_mock_/platform.ts b/packages/manager/apps/zimbra/src/api/_mock_/platform.ts
@@ -5,7 +5,18 @@ export const platformMock: ZimbraPlatformType[] = [
   {
     checksum: 'c6022a95d9ce258d6d534ec355bec6c9',
     currentState: {
-      accountsStatistics: [],
+      accountsStatistics: [
+        {
+          availableAccountsCount: 1,
+          configuredAccountsCount: 5,
+          offer: 'BUSINESS',
+        },
+        {
+          availableAccountsCount: 2,
+          configuredAccountsCount: 5,
+          offer: 'STARTER',
+        },
+      ],
       description: 'some description',
       name: 'Manager Team platform',
       numberOfOrganizations: 0,

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx
@@ -27,6 +27,7 @@ import {
   Links,
   LinkType,
   ManagerButton,
+  ManagerText,
   Notifications,
 } from '@ovh-ux/manager-react-components';
 import { Outlet } from 'react-router-dom';
@@ -36,6 +37,7 @@ import {
   useGenerateUrl,
   useAccountList,
   usePlatform,
+  useOrganization,
   useDomains,
 } from '@/hooks';
 import LabelChip from '@/components/LabelChip';
@@ -49,7 +51,7 @@ import {
 import { IAM_ACTIONS } from '@/utils/iamAction.constants';
 import Loading from '@/components/Loading/Loading';
 import { BadgeStatus } from '@/components/BadgeStatus';
-import { ResourceStatus } from '@/api/api.type';
+import { ResourceStatus, AccountStatistics } from '@/api/api.type';
 
 export type EmailsItem = {
   id: string;
@@ -124,8 +126,9 @@ const columns: DatagridColumn<EmailsItem>[] = [
 ];
 
 export default function EmailAccounts() {
-  const { t } = useTranslation('accounts');
-  const { platformUrn } = usePlatform();
+  const { t } = useTranslation(['accounts', 'dashboard']);
+  const { data: platform, platformUrn } = usePlatform();
+  const { data: organisation } = useOrganization();
   const isOverridedPage = useOverridePage();
   const {
     data,
@@ -155,6 +158,10 @@ export default function EmailAccounts() {
       status: item.resourceStatus,
     })) ?? [];
 
+  const accountsStatistics: AccountStatistics[] = organisation
+    ? organisation.currentState.accountsStatistics
+    : platform?.currentState?.accountsStatistics;
+
   const webmailUrl = guidesConstants.GUIDES_LIST.webmail.url;
 
   const hrefAddEmailAccount = useGenerateUrl('./add', 'href');
@@ -165,21 +172,52 @@ export default function EmailAccounts() {
       <Outlet />
       {platformUrn && !isOverridedPage && (
         <>
-          <div className="mb-8">
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              hue={ODS_TEXT_COLOR_HUE._500}
-              size={ODS_TEXT_SIZE._200}
-              className="font-bold mr-4"
-            >
-              {t('zimbra_account_datagrid_webmail_label')}
-            </OsdsText>
-            <Links
-              href={webmailUrl}
-              type={LinkType.external}
-              label={webmailUrl}
-              target={OdsHTMLAnchorElementTarget._blank}
-            ></Links>
+          <div className="mb-8 flex gap-8">
+            <div>
+              <OsdsText
+                color={ODS_THEME_COLOR_INTENT.text}
+                hue={ODS_TEXT_COLOR_HUE._500}
+                size={ODS_TEXT_SIZE._200}
+                className="font-bold mr-4"
+              >
+                {t('zimbra_account_datagrid_webmail_label')}
+              </OsdsText>
+              <Links
+                href={webmailUrl}
+                type={LinkType.external}
+                label={webmailUrl}
+                target={OdsHTMLAnchorElementTarget._blank}
+              ></Links>
+            </div>
+            <div>
+              <ManagerText
+                className="flex gap-8"
+                urn={platformUrn}
+                iamActions={[IAM_ACTIONS.account.get]}
+              >
+                {accountsStatistics?.length > 0
+                  ? accountsStatistics?.map((stats: AccountStatistics) => (
+                      <div key={stats.offer}>
+                        <OsdsText
+                          color={ODS_THEME_COLOR_INTENT.text}
+                          hue={ODS_TEXT_COLOR_HUE._500}
+                          size={ODS_TEXT_SIZE._200}
+                          className="font-bold mr-4"
+                        >
+                          {`Zimbra ${stats.offer.toLowerCase()} :`}
+                        </OsdsText>
+                        <span>{`${
+                          stats.configuredAccountsCount
+                        } / ${stats.configuredAccountsCount +
+                          stats.availableAccountsCount}`}</span>
+                      </div>
+                    ))
+                  : t(
+                      'zimbra_dashboard_tile_serviceConsumption_noAccountOffer',
+                      { ns: 'dashboard' },
+                    )}
+              </ManagerText>
+            </div>
           </div>
           {(data?.length > 0 || dataDomains?.length > 0) && (
             <ManagerButton

diff --git a/...ages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/__test__/EmailAccount.spec.tsx b/...ages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/__test__/EmailAccount.spec.tsx
@@ -3,14 +3,23 @@ import { vi, describe, expect } from 'vitest';
 import EmailAccounts from '../EmailAccounts';
 import { render } from '@/utils/test.provider';
 import accountTranslation from '@/public/translations/accounts/Messages_fr_FR.json';
-import { accountMock, platformMock, domainMock } from '@/api/_mock_';
+import {
+  accountMock,
+  platformMock,
+  domainMock,
+  organizationDetailMock,
+} from '@/api/_mock_';
 
 vi.mock('@/hooks', () => {
   return {
     usePlatform: vi.fn(() => ({
       platformId: platformMock[0].id,
       platformUrn: platformMock[0].iam.urn,
     })),
+    useOrganization: vi.fn(() => ({
+      data: organizationDetailMock,
+      isLoading: false,
+    })),
     useAccountList: vi.fn(() => ({
       data: accountMock,
       isLoading: false,