fix(zimbra): load all available data when needed

ref: MANAGER-16552 Signed-off-by: Tristan WAGNER <[email protected]>
ovh · Jan 2, 2025 · 2a46bbb · 2a46bbb
1 parent 15059fa
commit 2a46bbb
Show file tree

Hide file tree

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

diff --git a/packages/manager/apps/zimbra/src/api/account/key.ts b/packages/manager/apps/zimbra/src/api/account/key.ts
@@ -4,13 +4,21 @@ export const getZimbraPlatformAccountsQueryKey = (
     organizationId?: string;
     domainId?: string;
   },
+  shouldFetchAll?: boolean,
 ) => {
   const params = new URLSearchParams(queryParameters).toString();
   const queryString = params ? `?${params}` : '';
-  return [`get/zimbra/platform/${platformId}/account${queryString}`];
+  return [
+    'get',
+    'account',
+    'zimbra',
+    platformId,
+    queryString,
+    shouldFetchAll ? 'all' : '',
+  ].filter(Boolean);
 };
 
 export const getZimbraPlatformAccountDetailQueryKey = (
   platformId: string,
   accountId?: string,
-) => [`get/zimbra/platform/${platformId}/account/${accountId}`];
+) => ['get', 'account', 'zimbra', platformId, accountId];
diff --git a/packages/manager/apps/zimbra/src/api/domain/api.ts b/packages/manager/apps/zimbra/src/api/domain/api.ts
@@ -1,23 +1,26 @@
 import { fetchIcebergV2, v2, v6 } from '@ovh-ux/manager-core-api';
 import { DomainBodyParamsType, DomainType } from './type';
 import { getApiPath } from '../utils/apiPath';
+import { APIV2_DEFAULT_PAGESIZE } from '@/utils';
 
 // GET
 
 export const getZimbraPlatformDomains = ({
   platformId,
   organizationId,
   pageParam,
+  pageSize = APIV2_DEFAULT_PAGESIZE,
 }: {
   platformId: string;
   organizationId?: string;
   pageParam?: unknown;
+  pageSize?: number;
 }) =>
   fetchIcebergV2<DomainType[]>({
     route: `${getApiPath(platformId)}domain${
       organizationId ? `?organizationId=${organizationId}` : ''
     }`,
-    pageSize: 25,
+    pageSize,
     cursor: pageParam as string,
   });
 

diff --git a/packages/manager/apps/zimbra/src/api/domain/key.ts b/packages/manager/apps/zimbra/src/api/domain/key.ts
@@ -1,13 +1,20 @@
 export const getZimbraPlatformDomainsQueryKey = (
   platformId: string,
   organizationId?: string,
-) => [
-  `get/zimbra/platform/${platformId}/domain?organizationId=${organizationId}`,
-];
+  shouldFetchAll?: boolean,
+) =>
+  [
+    'get',
+    'zimbra',
+    'domain',
+    platformId,
+    shouldFetchAll ? 'all' : '',
+    organizationId,
+  ].filter(Boolean);
 
 export const getZimbraPlatformDomainQueryKey = (
   platformId: string,
   domainId: string,
-) => [`get/zimbra/platform/${platformId}/domain/${domainId}`];
+) => ['get', 'domain', 'zimbra', platformId, domainId];
 
-export const getDomainsZoneListQueryKey = ['get/domain/zone'];
+export const getDomainsZoneListQueryKey = ['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,19 +1,22 @@
 import { fetchIcebergV2, v2 } from '@ovh-ux/manager-core-api';
 import { OrganizationBodyParamsType, OrganizationType } from './type';
 import { getApiPath } from '../utils/apiPath';
+import { APIV2_DEFAULT_PAGESIZE } from '@/utils';
 
 // GET
 
 export const getZimbraPlatformOrganization = ({
   platformId,
   pageParam,
+  pageSize = APIV2_DEFAULT_PAGESIZE,
 }: {
   platformId: string;
   pageParam?: unknown;
+  pageSize?: number;
 }) =>
   fetchIcebergV2<OrganizationType[]>({
     route: `${getApiPath(platformId)}organization`,
-    pageSize: 25,
+    pageSize,
     cursor: pageParam as string,
   });
 

diff --git a/packages/manager/apps/zimbra/src/api/organization/key.ts b/packages/manager/apps/zimbra/src/api/organization/key.ts
@@ -1,8 +1,16 @@
-export const getZimbraPlatformOrganizationQueryKey = (platformId: string) => [
-  `get/zimbra/platform/${platformId}/organization`,
-];
+export const getZimbraPlatformOrganizationQueryKey = (
+  platformId: string,
+  shouldFetchAll?: boolean,
+) =>
+  [
+    'get',
+    'organization',
+    'zimbra',
+    platformId,
+    shouldFetchAll ? 'all' : '',
+  ].filter(Boolean);
 
 export const getZimbraPlatformOrganizationDetailsQueryKey = (
   platformId: string,
   organizationId: string,
-) => [`get/zimbra/platform/${platformId}/organization/${organizationId}`];
+) => ['get', 'organization', 'zimbra', platformId, organizationId];
diff --git a/packages/manager/apps/zimbra/src/hooks/useAccountList.ts b/packages/manager/apps/zimbra/src/hooks/useAccountList.ts
@@ -4,23 +4,26 @@ import {
   UseInfiniteQueryResult,
 } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
+import { useEffect } from 'react';
 import { usePlatform } from '@/hooks';
 import {
   AccountType,
   getZimbraPlatformAccounts,
   getZimbraPlatformAccountsQueryKey,
 } from '@/api/account';
+import { APIV2_MAX_PAGESIZE } from '@/utils';
 
 type UseAccountListParams = Omit<
   UseInfiniteQueryOptions,
   'queryKey' | 'queryFn' | 'select' | 'getNextPageParam' | 'initialPageParam'
 > & {
   domainId?: string;
   organizationId?: string;
+  shouldFetchAll?: boolean;
 };
 
 export const useAccountList = (props: UseAccountListParams = {}) => {
-  const { domainId, organizationId, ...options } = props;
+  const { domainId, organizationId, shouldFetchAll, ...options } = props;
   const { platformId } = usePlatform();
   const [searchParams] = useSearchParams();
 
@@ -33,19 +36,24 @@ export const useAccountList = (props: UseAccountListParams = {}) => {
     ...(selectedDomainId && { domainId: selectedDomainId }),
   };
 
-  return useInfiniteQuery({
+  const query = useInfiniteQuery({
     ...options,
     initialPageParam: null,
-    queryKey: getZimbraPlatformAccountsQueryKey(platformId, queryParameters),
+    queryKey: getZimbraPlatformAccountsQueryKey(
+      platformId,
+      queryParameters,
+      shouldFetchAll,
+    ),
     queryFn: ({ pageParam }) =>
       getZimbraPlatformAccounts({
         platformId,
         queryParameters,
         pageParam,
+        ...(shouldFetchAll ? { pageSize: APIV2_MAX_PAGESIZE } : {}),
       }),
-    enabled: (query) =>
+    enabled: (q) =>
       (typeof options.enabled === 'function'
-        ? options.enabled(query)
+        ? options.enabled(q)
         : typeof options.enabled !== 'boolean' || options.enabled) &&
       !!platformId,
     getNextPageParam: (lastPage: { cursorNext?: string }) =>
@@ -55,4 +63,12 @@ export const useAccountList = (props: UseAccountListParams = {}) => {
         (page: UseInfiniteQueryResult<AccountType[]>) => page.data,
       ),
   });
+
+  useEffect(() => {
+    if (shouldFetchAll && query.hasNextPage) {
+      query.fetchNextPage();
+    }
+  }, [query.data]);
+
+  return query;
 };
diff --git a/packages/manager/apps/zimbra/src/hooks/useDomains.ts b/packages/manager/apps/zimbra/src/hooks/useDomains.ts
@@ -3,43 +3,48 @@ import {
   UseInfiniteQueryOptions,
   UseInfiniteQueryResult,
 } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { usePlatform, useOrganization } from '@/hooks';
 
 import {
   DomainType,
   getZimbraPlatformDomains,
   getZimbraPlatformDomainsQueryKey,
 } from '@/api/domain';
+import { APIV2_MAX_PAGESIZE } from '@/utils';
 
 type UseDomainsParams = Omit<
   UseInfiniteQueryOptions,
   'queryKey' | 'queryFn' | 'select' | 'getNextPageParam' | 'initialPageParam'
 > & {
   organizationId?: string;
+  shouldFetchAll?: boolean;
 };
 
 export const useDomains = (props: UseDomainsParams = {}) => {
-  const { organizationId, ...options } = props;
+  const { organizationId, shouldFetchAll, ...options } = props;
   const { platformId } = usePlatform();
   const { data: organization } = useOrganization();
   const selectedOrganizationId = organization?.id;
 
-  return useInfiniteQuery({
+  const query = useInfiniteQuery({
     ...options,
     initialPageParam: null,
     queryKey: getZimbraPlatformDomainsQueryKey(
       platformId,
       organizationId || selectedOrganizationId,
+      shouldFetchAll,
     ),
     queryFn: ({ pageParam }) =>
       getZimbraPlatformDomains({
         platformId,
         organizationId: organizationId || selectedOrganizationId,
         pageParam,
+        ...(shouldFetchAll ? { pageSize: APIV2_MAX_PAGESIZE } : {}),
       }),
-    enabled: (query) =>
+    enabled: (q) =>
       (typeof options.enabled === 'function'
-        ? options.enabled(query)
+        ? options.enabled(q)
         : typeof options.enabled !== 'boolean' || options.enabled) &&
       !!platformId,
     getNextPageParam: (lastPage: { cursorNext?: string }) =>
@@ -49,4 +54,12 @@ export const useDomains = (props: UseDomainsParams = {}) => {
         (page: UseInfiniteQueryResult<DomainType[]>) => page.data,
       ),
   });
+
+  useEffect(() => {
+    if (shouldFetchAll && query.hasNextPage) {
+      query.fetchNextPage();
+    }
+  }, [query.data]);
+
+  return query;
 };
diff --git a/packages/manager/apps/zimbra/src/hooks/useOrganizationsList.ts b/packages/manager/apps/zimbra/src/hooks/useOrganizationsList.ts
@@ -3,30 +3,39 @@ import {
   UseInfiniteQueryOptions,
   UseInfiniteQueryResult,
 } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { usePlatform } from '@/hooks';
 import {
   getZimbraPlatformOrganization,
   getZimbraPlatformOrganizationQueryKey,
   OrganizationType,
 } from '@/api/organization';
+import { APIV2_MAX_PAGESIZE } from '@/utils';
 
-export const useOrganizationList = (
-  options: Omit<
-    UseInfiniteQueryOptions,
-    'queryKey' | 'queryFn' | 'select' | 'getNextPageParam' | 'initialPageParam'
-  > = {},
-) => {
+type UseOrganizationListParams = Omit<
+  UseInfiniteQueryOptions,
+  'queryKey' | 'queryFn' | 'select' | 'getNextPageParam' | 'initialPageParam'
+> & {
+  shouldFetchAll?: boolean;
+};
+
+export const useOrganizationList = (props: UseOrganizationListParams = {}) => {
+  const { shouldFetchAll, ...options } = props;
   const { platformId } = usePlatform();
 
-  return useInfiniteQuery({
+  const query = useInfiniteQuery({
     ...options,
     initialPageParam: null,
-    queryKey: getZimbraPlatformOrganizationQueryKey(platformId),
+    queryKey: getZimbraPlatformOrganizationQueryKey(platformId, shouldFetchAll),
     queryFn: ({ pageParam }) =>
-      getZimbraPlatformOrganization({ platformId, pageParam }),
-    enabled: (query) =>
+      getZimbraPlatformOrganization({
+        platformId,
+        pageParam,
+        ...(shouldFetchAll ? { pageSize: APIV2_MAX_PAGESIZE } : {}),
+      }),
+    enabled: (q) =>
       (typeof options.enabled === 'function'
-        ? options.enabled(query)
+        ? options.enabled(q)
         : typeof options.enabled !== 'boolean' || options.enabled) &&
       !!platformId,
     getNextPageParam: (lastPage: { cursorNext?: string }) =>
@@ -36,4 +45,12 @@ export const useOrganizationList = (
         (page: UseInfiniteQueryResult<OrganizationType[]>) => page.data,
       ),
   });
+
+  useEffect(() => {
+    if (shouldFetchAll && query.hasNextPage) {
+      query.fetchNextPage();
+    }
+  }, [query.data]);
+
+  return query;
 };
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AddAutoReply.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AddAutoReply.page.tsx
@@ -194,6 +194,7 @@ export default function AddAutoReply() {
 
   const { data: domains, isLoading } = useDomains({
     enabled: !editEmailAccountId,
+    shouldFetchAll: true,
   });
 
   const selectedDomain = useMemo(() => {
@@ -205,12 +206,14 @@ export default function AddAutoReply() {
   const { data: domainAccounts } = useAccountList({
     enabled: !editEmailAccountId && !!selectedDomain,
     domainId: selectedDomain?.id,
+    shouldFetchAll: true,
   });
 
   const { data: orgAccounts, isLoading: isOrgAccountsLoading } = useAccountList(
     {
       enabled: !!form.sendCopy.value && !!selectedOrganizationId,
       organizationId: selectedOrganizationId,
+      shouldFetchAll: true,
     },
   );
 

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/AddDomain.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/AddDomain.page.tsx
@@ -81,7 +81,9 @@ export default function AddDomain() {
 
   const { platformId } = usePlatform();
   const { data: organization } = useOrganization();
-  const { data: organizations, isLoading } = useOrganizationList();
+  const { data: organizations, isLoading } = useOrganizationList({
+    shouldFetchAll: true,
+  });
 
   const [selectedOrganization, setSelectedOrganization] = useState(
     organization?.id || '',

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalEditDomain.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalEditDomain.component.tsx
@@ -52,7 +52,7 @@ export default function ModalEditDomain() {
   const {
     data: organizationsList,
     isLoading: isLoadingOrganizations,
-  } = useOrganizationList();
+  } = useOrganizationList({ shouldFetchAll: true });
 
   const { addError, addSuccess } = useNotifications();