feat(zimbra): add loading to datagrids

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

Hide file tree

Showing 7 changed files with 110 additions and 45 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,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<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[] =
@@ -104,7 +110,7 @@ export default function Domains() {
 
   return (
     <>
-      {!isOverriddedPage && (
+      {!isOverridedPage && (
         <div className="py-6 mt-8">
           <Notifications />
           <div className="flex items-center justify-between">
@@ -131,14 +137,24 @@ export default function Domains() {
               </ManagerButton>
             )}
           </div>
-          <Datagrid
-            columns={columns.map((column) => ({
-              ...column,
-              label: t(column.label),
-            }))}
-            items={items}
-            totalItems={items.length}
-          />
+          {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}
+            />
+          )}
         </div>
       )}
       <Outlet />

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) => ({
@@ -132,7 +139,7 @@ export default function EmailAccounts() {
       <Outlet />
       <div className="py-6 mt-8">
         <Notifications />
-        {!isOverriddedPage && (
+        {!isOverridedPage && (
           <>
             <div className="mb-8">
               <OsdsText
@@ -172,14 +179,24 @@ export default function EmailAccounts() {
                 <span slot="end">{t('zimbra_account_account_add')}</span>
               </ManagerButton>
             )}
-            <Datagrid
-              columns={columns.map((column) => ({
-                ...column,
-                label: t(column.label),
-              }))}
-              items={items}
-              totalItems={items.length}
-            />
+            {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}
+              />
+            )}
           </>
         )}
       </div>

diff --git 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<OrganizationItem>[] = [
 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() {
           </ManagerButton>
         )}
       </div>
-      <Datagrid
-        columns={columns.map((column) => ({
-          ...column,
-          label: t(column.label),
-        }))}
-        items={items}
-        totalItems={platformId?.length || 0}
-      />
+      {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={platformId?.length || 0}
+        />
+      )}
     </div>
   );
 }