feat(zimbra): add loading to datagrids

ref: MANAGER-15389 Signed-off-by: Tristan WAGNER <[email protected]>
ovh · Sep 24, 2024 · 5be3332 · 5be3332
1 parent f523e37
commit 5be3332
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 135 deletions.
diff --git 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<AccountType>;
 };
diff --git 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<AccountType[]>;
 };
diff --git a/packages/manager/apps/zimbra/src/hooks/useDomains.ts b/packages/manager/apps/zimbra/src/hooks/useDomains.ts
@@ -13,14 +13,13 @@ import {
 
 type UseDomainsParams = Omit<
   UseQueryOptions,
-  'queryKey' | 'queryFn' | 'select' | 'enabled' | 'gcTime'
+  'queryKey' | 'queryFn' | 'select'
 > & {
   organizationId?: string;
-  noCache?: boolean;
 };
 
 export const useDomains = (props: UseDomainsParams = {}) => {
-  const { organizationId, noCache, ...options } = props;
+  const { organizationId, ...options } = props;
   const { platformId } = usePlatform();
   const { data: organization } = useOrganization();
   const selectedOrganizationId = organization?.id;
@@ -36,7 +35,8 @@ export const useDomains = (props: UseDomainsParams = {}) => {
         platformId,
         organizationId || selectedOrganizationId,
       ),
-    enabled: !!platformId,
-    gcTime: noCache ? 0 : 5000,
+    enabled:
+      (typeof options.enabled !== 'undefined' ? options.enabled : true) &&
+      !!platformId,
   }) as UseQueryResult<DomainType[]>;
 };
diff --git 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<UseQueryOptions, 'queryKey' | 'queryFn' | 'select'> = {},
+) => {
   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<OrganizationType[]>;
 };
diff --git 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<DomainsItem>[] = [
 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[] =
@@ -102,46 +108,63 @@ export default function Domains() {
       ),
     })) ?? [];
 
+  if (!platformUrn) {
+    return (
+      <div className="py-6 mt-8">
+        <Notifications />
+        <Outlet />
+      </div>
+    );
+  }
+
   return (
-    <>
-      {!isOverriddedPage && (
-        <div className="py-6 mt-8">
-          <Notifications />
+    <div className="py-6 mt-8">
+      <Notifications />
+      <Outlet />
+      {!isOverridedPage && (
+        <>
           <div className="flex items-center justify-between">
-            {platformUrn && (
-              <ManagerButton
-                color={ODS_THEME_COLOR_INTENT.primary}
-                inline
-                size={ODS_BUTTON_SIZE.sm}
-                href={hrefAddDomain}
-                urn={platformUrn}
-                iamActions={[IAM_ACTIONS.domain.create]}
-                data-testid="add-domain-btn"
-                className="mb-6"
-              >
-                <span slot="start">
-                  <OsdsIcon
-                    name={ODS_ICON_NAME.PLUS}
-                    size={ODS_ICON_SIZE.sm}
-                    color={ODS_THEME_COLOR_INTENT.primary}
-                    contrasted
-                  ></OsdsIcon>
-                </span>
-                <span slot="end">{t('zimbra_domains_add_domain_title')}</span>
-              </ManagerButton>
-            )}
+            <ManagerButton
+              color={ODS_THEME_COLOR_INTENT.primary}
+              inline
+              size={ODS_BUTTON_SIZE.sm}
+              href={hrefAddDomain}
+              urn={platformUrn}
+              iamActions={[IAM_ACTIONS.domain.create]}
+              data-testid="add-domain-btn"
+              className="mb-6"
+            >
+              <span slot="start">
+                <OsdsIcon
+                  name={ODS_ICON_NAME.PLUS}
+                  size={ODS_ICON_SIZE.sm}
+                  color={ODS_THEME_COLOR_INTENT.primary}
+                  contrasted
+                ></OsdsIcon>
+              </span>
+              <span slot="end">{t('zimbra_domains_add_domain_title')}</span>
+            </ManagerButton>
           </div>
-          <Datagrid
-            columns={columns.map((column) => ({
-              ...column,
-              label: t(column.label),
-            }))}
-            items={items}
-            totalItems={items.length}
-          />
-        </div>
+          {isLoading ? (
+            <div className="flex justify-center my-5">
+              <OsdsSpinner
+                mode={ODS_SPINNER_MODE.indeterminate}
+                size={ODS_SPINNER_SIZE.md}
+                inline
+              ></OsdsSpinner>
+            </div>
+          ) : (
+            <Datagrid
+              columns={columns.map((column) => ({
+                ...column,
+                label: t(column.label),
+              }))}
+              items={items}
+              totalItems={items.length}
+            />
+          )}
+        </>
       )}
-      <Outlet />
-    </>
+    </div>
   );
 }
diff --git 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<EmailsItem>[] = [
 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) => ({
@@ -127,51 +134,66 @@ export default function EmailAccounts() {
 
   const hrefAddEmailAccount = useGenerateUrl('./add', 'href');
 
-  return (
-    <>
-      <Outlet />
+  if (!platformUrn) {
+    return (
       <div className="py-6 mt-8">
         <Notifications />
-        {!isOverriddedPage && (
-          <>
-            <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>
-            {platformUrn && (
-              <ManagerButton
+        <Outlet />
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-6 mt-8">
+      <Notifications />
+      <Outlet />
+      {!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>
+          <ManagerButton
+            color={ODS_THEME_COLOR_INTENT.primary}
+            inline
+            size={ODS_BUTTON_SIZE.sm}
+            urn={platformUrn}
+            iamActions={[IAM_ACTIONS.account.create]}
+            href={hrefAddEmailAccount}
+            data-testid="add-account-btn"
+            className="mb-6"
+          >
+            <span slot="start">
+              <OsdsIcon
+                name={ODS_ICON_NAME.PLUS}
+                size={ODS_ICON_SIZE.sm}
                 color={ODS_THEME_COLOR_INTENT.primary}
+                contrasted
+              ></OsdsIcon>
+            </span>
+            <span slot="end">{t('zimbra_account_account_add')}</span>
+          </ManagerButton>
+          {isLoading ? (
+            <div className="flex justify-center my-5">
+              <OsdsSpinner
+                mode={ODS_SPINNER_MODE.indeterminate}
+                size={ODS_SPINNER_SIZE.md}
                 inline
-                size={ODS_BUTTON_SIZE.sm}
-                urn={platformUrn}
-                iamActions={[IAM_ACTIONS.account.create]}
-                href={hrefAddEmailAccount}
-                data-testid="add-account-btn"
-                className="mb-6"
-              >
-                <span slot="start">
-                  <OsdsIcon
-                    name={ODS_ICON_NAME.PLUS}
-                    size={ODS_ICON_SIZE.sm}
-                    color={ODS_THEME_COLOR_INTENT.primary}
-                    contrasted
-                  ></OsdsIcon>
-                </span>
-                <span slot="end">{t('zimbra_account_account_add')}</span>
-              </ManagerButton>
-            )}
+              ></OsdsSpinner>
+            </div>
+          ) : (
             <Datagrid
               columns={columns.map((column) => ({
                 ...column,
@@ -180,9 +202,9 @@ export default function EmailAccounts() {
               items={items}
               totalItems={items.length}
             />
-          </>
-        )}
-      </div>
-    </>
+          )}
+        </>
+      )}
+    </div>
   );
 }