fix(zimbra): feature load more on datagrid

ref: MANAGER-15231 Signed-off-by: Guillaume Hyenne <[email protected]>
ovh · Oct 10, 2024 · 3043a0c · 3043a0c
1 parent 22638c5
commit 3043a0c
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 82 deletions.
diff --git a/packages/manager/apps/zimbra/src/api/account/api.ts b/packages/manager/apps/zimbra/src/api/account/api.ts
@@ -1,22 +1,28 @@
-import { v2 } from '@ovh-ux/manager-core-api';
+import { fetchIcebergV2, v2 } from '@ovh-ux/manager-core-api';
 import { AccountBodyParamsType, AccountType } from './type';
 import { getApiPath } from '../utils/apiPath';
 
 // GET
 
-export const getZimbraPlatformAccounts = async (
-  platformId: string,
+export const getZimbraPlatformAccounts = ({
+  platformId,
+  queryParameters,
+  pageParam,
+}: {
+  platformId: string;
   queryParameters?: {
     organizationId?: string;
     domainId?: string;
-  },
-) => {
+  };
+  pageParam?: unknown;
+}) => {
   const params = new URLSearchParams(queryParameters).toString();
   const queryString = params ? `?${params}` : '';
-  const { data } = await v2.get<AccountType[]>(
-    `${getApiPath(platformId)}account${queryString}`,
-  );
-  return data;
+  return fetchIcebergV2<AccountType[]>({
+    route: `${getApiPath(platformId)}account${queryString}`,
+    pageSize: 25,
+    cursor: pageParam as string,
+  });
 };
 
 export const getZimbraPlatformAccountDetail = async (

diff --git a/packages/manager/apps/zimbra/src/api/domain/api.ts b/packages/manager/apps/zimbra/src/api/domain/api.ts
@@ -1,20 +1,25 @@
-import { v2, v6 } from '@ovh-ux/manager-core-api';
+import { fetchIcebergV2, v2, v6 } from '@ovh-ux/manager-core-api';
 import { DomainBodyParamsType, DomainType } from './type';
 import { getApiPath } from '../utils/apiPath';
 
 // GET
 
-export const getZimbraPlatformDomains = async (
-  platformId: string,
-  organizationId?: string,
-) => {
-  const { data } = await v2.get<DomainType[]>(
-    `${getApiPath(platformId)}domain${
+export const getZimbraPlatformDomains = ({
+  platformId,
+  organizationId,
+  pageParam,
+}: {
+  platformId: string;
+  organizationId?: string;
+  pageParam?: unknown;
+}) =>
+  fetchIcebergV2<DomainType[]>({
+    route: `${getApiPath(platformId)}domain${
       organizationId ? `?organizationId=${organizationId}` : ''
     }`,
-  );
-  return data;
-};
+    pageSize: 25,
+    cursor: pageParam as string,
+  });
 
 export const getDomainsZoneList = async () => {
   const { data } = await v6.get('/domain/zone');

diff --git a/packages/manager/apps/zimbra/src/api/organization/api.ts b/packages/manager/apps/zimbra/src/api/organization/api.ts
@@ -1,15 +1,21 @@
-import { v2 } from '@ovh-ux/manager-core-api';
+import { fetchIcebergV2, v2 } from '@ovh-ux/manager-core-api';
 import { OrganizationBodyParamsType, OrganizationType } from './type';
 import { getApiPath } from '../utils/apiPath';
 
 // GET
 
-export const getZimbraPlatformOrganization = async (platformId: string) => {
-  const { data } = await v2.get<OrganizationType[]>(
-    `${getApiPath(platformId)}organization`,
-  );
-  return data;
-};
+export const getZimbraPlatformOrganization = ({
+  platformId,
+  pageParam,
+}: {
+  platformId: string;
+  pageParam?: unknown;
+}) =>
+  fetchIcebergV2<OrganizationType[]>({
+    route: `${getApiPath(platformId)}organization`,
+    pageSize: 25,
+    cursor: pageParam as string,
+  });
 
 export const getZimbraPlatformOrganizationDetails = async (
   platformId: string,

diff --git a/packages/manager/apps/zimbra/src/hooks/__test__/useAccountList.spec.tsx b/packages/manager/apps/zimbra/src/hooks/__test__/useAccountList.spec.tsx
@@ -15,7 +15,9 @@ vi.mock('@/hooks', () => {
 });
 
 vi.mock('@/api/account/api', () => {
-  const apiZimbraPlatformAccount = vi.fn(() => Promise.resolve(accountMock));
+  const apiZimbraPlatformAccount = vi.fn(() =>
+    Promise.resolve({ data: accountMock }),
+  );
   return {
     getZimbraPlatformAccounts: apiZimbraPlatformAccount,
   };

diff --git a/packages/manager/apps/zimbra/src/hooks/__test__/useDomains.spec.tsx b/packages/manager/apps/zimbra/src/hooks/__test__/useDomains.spec.tsx
@@ -18,7 +18,7 @@ vi.mock('@/hooks', () => {
 });
 
 vi.mock('@/api/domain/api', () => {
-  const apiGetDomains = vi.fn(() => Promise.resolve(domainMock));
+  const apiGetDomains = vi.fn(() => Promise.resolve({ data: domainMock }));
   return {
     getZimbraPlatformDomains: apiGetDomains,
   };

diff --git a/packages/manager/apps/zimbra/src/hooks/__test__/useOrganizationsList.spec.tsx b/packages/manager/apps/zimbra/src/hooks/__test__/useOrganizationsList.spec.tsx
@@ -15,7 +15,9 @@ vi.mock('@/hooks', () => {
 });
 
 vi.mock('@/api/organization/api', () => {
-  const apiOrganization = vi.fn(() => Promise.resolve(organizationListMock));
+  const apiOrganization = vi.fn(() =>
+    Promise.resolve({ data: organizationListMock }),
+  );
   return {
     getZimbraPlatformOrganization: apiOrganization,
   };

diff --git a/packages/manager/apps/zimbra/src/hooks/useAccountList.ts b/packages/manager/apps/zimbra/src/hooks/useAccountList.ts
@@ -1,7 +1,7 @@
 import {
-  useQuery,
-  UseQueryOptions,
-  UseQueryResult,
+  useInfiniteQuery,
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
 } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 import { usePlatform } from '@/hooks';
@@ -12,8 +12,8 @@ import {
 } from '@/api/account';
 
 type UseAccountListParams = Omit<
-  UseQueryOptions,
-  'queryKey' | 'queryFn' | 'select'
+  UseInfiniteQueryOptions,
+  'queryKey' | 'queryFn' | 'select' | 'getNextPageParam' | 'initialPageParam'
 > & {
   domainId?: string;
   organizationId?: string;
@@ -33,12 +33,24 @@ export const useAccountList = (props: UseAccountListParams = {}) => {
     ...(selectedDomainId && { domainId: selectedDomainId }),
   };
 
-  return useQuery({
+  return useInfiniteQuery({
     ...options,
+    initialPageParam: null,
     queryKey: getZimbraPlatformAccountsQueryKey(platformId, queryParameters),
-    queryFn: () => getZimbraPlatformAccounts(platformId, queryParameters),
+    queryFn: ({ pageParam }) =>
+      getZimbraPlatformAccounts({
+        platformId,
+        queryParameters,
+        pageParam,
+      }),
     enabled:
       (typeof options.enabled !== 'undefined' ? options.enabled : true) &&
       !!platformId,
-  }) as UseQueryResult<AccountType[]>;
+    getNextPageParam: (lastPage: { cursorNext?: string }) =>
+      lastPage.cursorNext,
+    select: (data) =>
+      data?.pages.flatMap(
+        (page: UseInfiniteQueryResult<AccountType[]>) => page.data,
+      ),
+  });
 };
diff --git a/packages/manager/apps/zimbra/src/hooks/useDomains.ts b/packages/manager/apps/zimbra/src/hooks/useDomains.ts
@@ -1,7 +1,7 @@
 import {
-  useQuery,
-  UseQueryOptions,
-  UseQueryResult,
+  useInfiniteQuery,
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
 } from '@tanstack/react-query';
 import { usePlatform, useOrganization } from '@/hooks';
 
@@ -12,8 +12,8 @@ import {
 } from '@/api/domain';
 
 type UseDomainsParams = Omit<
-  UseQueryOptions,
-  'queryKey' | 'queryFn' | 'select'
+  UseInfiniteQueryOptions,
+  'queryKey' | 'queryFn' | 'select' | 'getNextPageParam' | 'initialPageParam'
 > & {
   organizationId?: string;
 };
@@ -24,19 +24,28 @@ export const useDomains = (props: UseDomainsParams = {}) => {
   const { data: organization } = useOrganization();
   const selectedOrganizationId = organization?.id;
 
-  return useQuery({
+  return useInfiniteQuery({
     ...options,
+    initialPageParam: null,
     queryKey: getZimbraPlatformDomainsQueryKey(
       platformId,
       organizationId || selectedOrganizationId,
     ),
-    queryFn: () =>
-      getZimbraPlatformDomains(
+    queryFn: ({ pageParam }) =>
+      getZimbraPlatformDomains({
         platformId,
-        organizationId || selectedOrganizationId,
-      ),
+        organizationId: organizationId || selectedOrganizationId,
+        pageParam,
+      }),
     enabled:
       (typeof options.enabled !== 'undefined' ? options.enabled : true) &&
       !!platformId,
-  }) as UseQueryResult<DomainType[]>;
+    staleTime: Infinity,
+    getNextPageParam: (lastPage: { cursorNext?: string }) =>
+      lastPage.cursorNext,
+    select: (data) =>
+      data?.pages.flatMap(
+        (page: UseInfiniteQueryResult<DomainType[]>) => page.data,
+      ),
+  });
 };
diff --git a/packages/manager/apps/zimbra/src/hooks/useOrganizationsList.ts b/packages/manager/apps/zimbra/src/hooks/useOrganizationsList.ts
@@ -1,7 +1,7 @@
 import {
-  useQuery,
-  UseQueryOptions,
-  UseQueryResult,
+  useInfiniteQuery,
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
 } from '@tanstack/react-query';
 import { usePlatform } from '@/hooks';
 import {
@@ -11,16 +11,27 @@ import {
 } from '@/api/organization';
 
 export const useOrganizationList = (
-  options: Omit<UseQueryOptions, 'queryKey' | 'queryFn' | 'select'> = {},
+  options: Omit<
+    UseInfiniteQueryOptions,
+    'queryKey' | 'queryFn' | 'select' | 'getNextPageParam' | 'initialPageParam'
+  > = {},
 ) => {
   const { platformId } = usePlatform();
 
-  return useQuery({
+  return useInfiniteQuery({
     ...options,
+    initialPageParam: null,
     queryKey: getZimbraPlatformOrganizationQueryKey(platformId),
-    queryFn: () => getZimbraPlatformOrganization(platformId),
+    queryFn: ({ pageParam }) =>
+      getZimbraPlatformOrganization({ platformId, pageParam }),
     enabled:
       (typeof options.enabled !== 'undefined' ? options.enabled : true) &&
       !!platformId,
-  }) as UseQueryResult<OrganizationType[]>;
+    getNextPageParam: (lastPage: { cursorNext?: string }) =>
+      lastPage.cursorNext,
+    select: (data) =>
+      data?.pages.flatMap(
+        (page: UseInfiniteQueryResult<OrganizationType[]>) => page.data,
+      ),
+  });
 };
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx
@@ -98,7 +98,13 @@ export default function Domains() {
   const { platformUrn } = usePlatform();
   const isOverridedPage = useOverridePage();
 
-  const { data, isLoading } = useDomains({
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useDomains({
     refetchInterval: DATAGRID_REFRESH_INTERVAL,
     refetchOnMount: DATAGRID_REFRESH_ON_MOUNT,
     enabled: !isOverridedPage,
@@ -185,14 +191,19 @@ export default function Domains() {
           {isLoading ? (
             <Loading />
           ) : (
-            <Datagrid
-              columns={columns.map((column) => ({
-                ...column,
-                label: t(column.label),
-              }))}
-              items={items}
-              totalItems={items.length}
-            />
+            <>
+              <Datagrid
+                columns={columns.map((column) => ({
+                  ...column,
+                  label: t(column.label),
+                }))}
+                items={items}
+                totalItems={items.length}
+                hasNextPage={!isFetchingNextPage && hasNextPage}
+                onFetchNextPage={fetchNextPage}
+              />
+              {isFetchingNextPage && <Loading />}
+            </>
           )}
         </>
       )}

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx
@@ -127,7 +127,13 @@ export default function EmailAccounts() {
   const { t } = useTranslation('accounts');
   const { platformUrn } = usePlatform();
   const isOverridedPage = useOverridePage();
-  const { data, isLoading } = useAccountList({
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useAccountList({
     refetchInterval: DATAGRID_REFRESH_INTERVAL,
     refetchOnMount: DATAGRID_REFRESH_ON_MOUNT,
     enabled: !isOverridedPage,
@@ -229,14 +235,19 @@ export default function EmailAccounts() {
           {isLoading ? (
             <Loading />
           ) : (
-            <Datagrid
-              columns={columns.map((column) => ({
-                ...column,
-                label: t(column.label),
-              }))}
-              items={items}
-              totalItems={items.length}
-            />
+            <>
+              <Datagrid
+                columns={columns.map((column) => ({
+                  ...column,
+                  label: t(column.label),
+                }))}
+                items={items}
+                totalItems={items.length}
+                hasNextPage={!isFetchingNextPage && hasNextPage}
+                onFetchNextPage={fetchNextPage}
+              />
+              {isFetchingNextPage && <Loading />}
+            </>
           )}
         </>
       )}