From e998cf46d4083397094eb2472cba0e167da464c5 Mon Sep 17 00:00:00 2001 From: Tristan WAGNER Date: Tue, 24 Sep 2024 15:36:35 +0200 Subject: [PATCH] feat(zimbra): add loading to datagrids ref: MANAGER-15389 Signed-off-by: Tristan WAGNER --- .../apps/zimbra/src/hooks/useAccount.ts | 7 +++- .../apps/zimbra/src/hooks/useAccountList.ts | 6 ++- .../apps/zimbra/src/hooks/useDomains.ts | 6 ++- .../zimbra/src/hooks/useOrganizationsList.ts | 17 ++++++-- .../src/pages/dashboard/Domains/Domains.tsx | 42 +++++++++++++------ .../dashboard/EmailAccounts/EmailAccounts.tsx | 41 ++++++++++++------ .../dashboard/Organizations/Organizations.tsx | 36 +++++++++++----- 7 files changed, 110 insertions(+), 45 deletions(-) diff --git a/packages/manager/apps/zimbra/src/hooks/useAccount.ts b/packages/manager/apps/zimbra/src/hooks/useAccount.ts index 4ef08cadbf1a..15fecf469ce9 100644 --- a/packages/manager/apps/zimbra/src/hooks/useAccount.ts +++ b/packages/manager/apps/zimbra/src/hooks/useAccount.ts @@ -12,7 +12,7 @@ import { type UseAccountParams = Omit< UseQueryOptions, - 'queryKey' | 'queryFn' | 'enabled' | 'gcTime' + 'queryKey' | 'queryFn' | 'gcTime' > & { accountId?: string; noCache?: boolean; @@ -25,7 +25,10 @@ export const useAccount = (props: UseAccountParams) => { ...options, queryKey: getZimbraPlatformAccountDetailQueryKey(platformId, accountId), queryFn: () => getZimbraPlatformAccountDetail(platformId, accountId), - enabled: !!accountId && !!platformId, + enabled: + (typeof options.enabled !== 'undefined' ? options.enabled : true) && + !!platformId && + !!accountId, gcTime: noCache ? 0 : 5000, }) as UseQueryResult; }; diff --git a/packages/manager/apps/zimbra/src/hooks/useAccountList.ts b/packages/manager/apps/zimbra/src/hooks/useAccountList.ts index dcfb35af98a8..b0fc1c9ee37e 100644 --- a/packages/manager/apps/zimbra/src/hooks/useAccountList.ts +++ b/packages/manager/apps/zimbra/src/hooks/useAccountList.ts @@ -13,7 +13,7 @@ import { type UseAccountListParams = Omit< UseQueryOptions, - 'queryKey' | 'queryFn' | 'select' | 'enabled' + 'queryKey' | 'queryFn' | 'select' > & { domainId?: string; organizationId?: string; @@ -37,6 +37,8 @@ export const useAccountList = (props: UseAccountListParams = {}) => { ...options, queryKey: getZimbraPlatformAccountsQueryKey(platformId, queryParameters), queryFn: () => getZimbraPlatformAccounts(platformId, queryParameters), - enabled: !!platformId, + enabled: + (typeof options.enabled !== 'undefined' ? options.enabled : true) && + !!platformId, }) as UseQueryResult; }; diff --git a/packages/manager/apps/zimbra/src/hooks/useDomains.ts b/packages/manager/apps/zimbra/src/hooks/useDomains.ts index 78677529ff37..7c926bd485cc 100644 --- a/packages/manager/apps/zimbra/src/hooks/useDomains.ts +++ b/packages/manager/apps/zimbra/src/hooks/useDomains.ts @@ -13,7 +13,7 @@ import { type UseDomainsParams = Omit< UseQueryOptions, - 'queryKey' | 'queryFn' | 'select' | 'enabled' | 'gcTime' + 'queryKey' | 'queryFn' | 'select' | 'gcTime' > & { organizationId?: string; noCache?: boolean; @@ -36,7 +36,9 @@ export const useDomains = (props: UseDomainsParams = {}) => { platformId, organizationId || selectedOrganizationId, ), - enabled: !!platformId, + enabled: + (typeof options.enabled !== 'undefined' ? options.enabled : true) && + !!platformId, gcTime: noCache ? 0 : 5000, }) as UseQueryResult; }; diff --git a/packages/manager/apps/zimbra/src/hooks/useOrganizationsList.ts b/packages/manager/apps/zimbra/src/hooks/useOrganizationsList.ts index 53ada32cdd6f..76f6a64bdf75 100644 --- a/packages/manager/apps/zimbra/src/hooks/useOrganizationsList.ts +++ b/packages/manager/apps/zimbra/src/hooks/useOrganizationsList.ts @@ -1,17 +1,26 @@ -import { useQuery } from '@tanstack/react-query'; +import { + useQuery, + UseQueryOptions, + UseQueryResult, +} from '@tanstack/react-query'; import { usePlatform } from '@/hooks'; import { getZimbraPlatformOrganization, getZimbraPlatformOrganizationQueryKey, + OrganizationType, } from '@/api/organization'; -export const useOrganizationList = (options = {}) => { +export const useOrganizationList = ( + options: Omit = {}, +) => { const { platformId } = usePlatform(); return useQuery({ ...options, queryKey: getZimbraPlatformOrganizationQueryKey(platformId), queryFn: () => getZimbraPlatformOrganization(platformId), - enabled: !!platformId, - }); + enabled: + (typeof options.enabled !== 'undefined' ? options.enabled : true) && + !!platformId, + }) as UseQueryResult; }; diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx index 7a92e953a82c..6b6c486ca0e1 100644 --- a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx +++ b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx @@ -1,11 +1,17 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react'; +import { + OsdsIcon, + OsdsSpinner, + OsdsText, +} from '@ovhcloud/ods-components/react'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; import { ODS_BUTTON_SIZE, ODS_ICON_NAME, ODS_ICON_SIZE, + ODS_SPINNER_MODE, + ODS_SPINNER_SIZE, ODS_TEXT_LEVEL, ODS_TEXT_SIZE, } from '@ovhcloud/ods-components'; @@ -81,14 +87,14 @@ const columns: DatagridColumn[] = [ export default function Domains() { const { t } = useTranslation('domains'); const { platformUrn } = usePlatform(); + const isOverridedPage = useOverridePage(); - const { data } = useDomains({ + const { data, isLoading } = useDomains({ refetchInterval: DATAGRID_REFRESH_INTERVAL, refetchOnMount: DATAGRID_REFRESH_ON_MOUNT, + enabled: !isOverridedPage, }); - const isOverriddedPage = useOverridePage(); - const hrefAddDomain = useGenerateUrl('./add', 'href'); const items: DomainsItem[] = @@ -104,7 +110,7 @@ export default function Domains() { return ( <> - {!isOverriddedPage && ( + {!isOverridedPage && (
@@ -131,14 +137,24 @@ export default function Domains() { )}
- ({ - ...column, - label: t(column.label), - }))} - items={items} - totalItems={items.length} - /> + {isLoading ? ( +
+ +
+ ) : ( + ({ + ...column, + label: t(column.label), + }))} + items={items} + totalItems={items.length} + /> + )}
)} diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx index e646a9bf659e..3f8dd21511b1 100644 --- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx +++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx @@ -1,12 +1,18 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react'; +import { + OsdsIcon, + OsdsSpinner, + OsdsText, +} from '@ovhcloud/ods-components/react'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core'; import { ODS_BUTTON_SIZE, ODS_ICON_NAME, ODS_ICON_SIZE, + ODS_SPINNER_MODE, + ODS_SPINNER_SIZE, ODS_TEXT_COLOR_HUE, ODS_TEXT_LEVEL, ODS_TEXT_SIZE, @@ -106,11 +112,12 @@ const columns: DatagridColumn[] = [ export default function EmailAccounts() { const { t } = useTranslation('accounts'); const { platformUrn } = usePlatform(); - const { data } = useAccountList({ + const isOverridedPage = useOverridePage(); + const { data, isLoading } = useAccountList({ refetchInterval: DATAGRID_REFRESH_INTERVAL, refetchOnMount: DATAGRID_REFRESH_ON_MOUNT, + enabled: !isOverridedPage, }); - const isOverriddedPage = useOverridePage(); const items: EmailsItem[] = data?.map((item: AccountType) => ({ @@ -132,7 +139,7 @@ export default function EmailAccounts() {
- {!isOverriddedPage && ( + {!isOverridedPage && ( <>
{t('zimbra_account_account_add')} )} - ({ - ...column, - label: t(column.label), - }))} - items={items} - totalItems={items.length} - /> + {isLoading ? ( +
+ +
+ ) : ( + ({ + ...column, + label: t(column.label), + }))} + items={items} + totalItems={items.length} + /> + )} )}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/Organizations.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/Organizations.tsx index f731f0ec9a2d..a448fa9cc31c 100644 --- a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/Organizations.tsx +++ b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/Organizations.tsx @@ -1,12 +1,18 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react'; +import { + OsdsIcon, + OsdsSpinner, + OsdsText, +} from '@ovhcloud/ods-components/react'; import { Outlet } from 'react-router-dom'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; import { ODS_BUTTON_SIZE, ODS_ICON_NAME, ODS_ICON_SIZE, + ODS_SPINNER_MODE, + ODS_SPINNER_SIZE, ODS_TEXT_LEVEL, ODS_TEXT_SIZE, } from '@ovhcloud/ods-components'; @@ -80,7 +86,7 @@ const columns: DatagridColumn[] = [ export default function Organizations() { const { t } = useTranslation('organizations'); const { platformId, platformUrn } = usePlatform(); - const { data } = useOrganizationList({ + const { data, isLoading } = useOrganizationList({ refetchInterval: DATAGRID_REFRESH_INTERVAL, refetchOnMount: DATAGRID_REFRESH_ON_MOUNT, }); @@ -126,14 +132,24 @@ export default function Organizations() { )}
- ({ - ...column, - label: t(column.label), - }))} - items={items} - totalItems={platformId?.length || 0} - /> + {isLoading ? ( +
+ +
+ ) : ( + ({ + ...column, + label: t(column.label), + }))} + items={items} + totalItems={platformId?.length || 0} + /> + )} ); }