EVEREST-1782 | fix: db cluster creation button loading status (#968)

* fix: db cluster creation button loading status * fix: only show engines available for db creation in button menu
percona · Dec 24, 2024 · e39385e · e39385e
1 parent c791a38
commit e39385e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 31 deletions.
diff --git a/ui/apps/everest/src/hooks/api/namespaces/useNamespaces.ts b/ui/apps/everest/src/hooks/api/namespaces/useNamespaces.ts
@@ -32,8 +32,12 @@ export const useNamespaces = () =>
     queryFn: getNamespacesFn,
   });
 
-export const useDBEnginesForNamespaces = (retrieveUpgradingEngines = false) => {
-  const { data: namespaces = [] } = useNamespaces();
+export const useDBEnginesForNamespaces = (
+  retrieveUpgradingEngines = false,
+  options?: PerconaQueryOptions<DbEngine[], unknown, DbEngine[]>
+) => {
+  const { data: namespaces = [], isFetching: fetchingNamespaces } =
+    useNamespaces();
   const { canRead } = useNamespacePermissionsForResource('database-engines');
 
   const queries = namespaces.map<
@@ -49,6 +53,7 @@ export const useDBEnginesForNamespaces = (retrieveUpgradingEngines = false) => {
       return dbEnginesQuerySelect(data, retrieveUpgradingEngines);
     },
     enabled: canRead.includes(namespace),
+    ...options,
   }));
 
   const queryResults = useQueries({
@@ -63,7 +68,7 @@ export const useDBEnginesForNamespaces = (retrieveUpgradingEngines = false) => {
     namespace: namespaces[i],
     ...item,
   }));
-  return { results, refetchAll };
+  return { results, refetchAll, fetchingNamespaces };
 };
 
 export interface DbEngineForNamedpaceExpanded {
@@ -76,16 +81,20 @@ export interface DbEnginesForDbTypeExpanded {
   dbEngines: DbEngineForNamedpaceExpanded[];
 }
 export const useDBEnginesForDbEngineTypes = (
-  dbEngineType?: DbEngineType
+  dbEngineType?: DbEngineType,
+  options?: PerconaQueryOptions<DbEngine[], unknown, DbEngine[]>
 ): [
   dbEnginesFoDbEngineTypes: DbEnginesForDbTypeExpanded[],
   dbEnginesFoDbEngineTypesFetching: boolean,
   refetch: () => void,
 ] => {
-  const { results: dbEnginesForNamespaces, refetchAll } =
-    useDBEnginesForNamespaces();
+  const {
+    results: dbEnginesForNamespaces,
+    refetchAll,
+    fetchingNamespaces,
+  } = useDBEnginesForNamespaces(false, options);
   const dbEnginesFetching = dbEnginesForNamespaces.some(
-    (result) => result.isFetching
+    (result) => result.isLoading || fetchingNamespaces
   );
 
   const dbEngineTypes = useMemo(

diff --git a/ui/apps/everest/src/pages/databases/create-db-button/create-db-button.tsx b/ui/apps/everest/src/pages/databases/create-db-button/create-db-button.tsx
@@ -14,33 +14,38 @@
 // limitations under the License.
 
 import { useEffect, useState } from 'react';
-import { Box, Button, Menu, MenuItem, Skeleton, Stack } from '@mui/material';
+import { Box, Button, Menu, MenuItem } from '@mui/material';
 import { ArrowDropDownIcon } from '@mui/x-date-pickers/icons';
 import { Messages } from '../dbClusterView.messages';
 import { useDBEnginesForDbEngineTypes } from 'hooks';
 import { dbEngineToDbType } from '@percona/utils';
 import { humanizeDbType } from '@percona/ui-lib';
 import { Link, useNavigate } from 'react-router-dom';
+import { useNamespacePermissionsForResource } from 'hooks/rbac';
 
 export const CreateDbButton = () => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [showDropdownButton, setShowDropdownButton] = useState(false);
+  const { canCreate } = useNamespacePermissionsForResource('database-clusters');
 
   const open = Boolean(anchorEl);
 
-  const [availableDbTypes, availableDbTypesFetching, refetch] =
-    useDBEnginesForDbEngineTypes();
+  const [availableDbTypes, availableDbTypesFetching] =
+    useDBEnginesForDbEngineTypes(undefined, {
+      refetchInterval: 30 * 1000,
+    });
 
-  const availableEngines = availableDbTypes.filter((item) => !!item.available);
+  const availableEngines = availableDbTypes.filter(
+    (item) =>
+      !!item.available &&
+      item.dbEngines.some((engine) => canCreate.includes(engine.namespace))
+  );
   const navigate = useNavigate();
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (availableEngines.length > 1) {
       event.stopPropagation();
       setAnchorEl(event.currentTarget);
-      if (!availableDbTypesFetching) {
-        refetch();
-      }
     } else {
       navigate('/databases/new', {
         state: { selectedDbEngine: availableEngines[0].type },
@@ -53,23 +58,19 @@ export const CreateDbButton = () => {
 
   useEffect(() => {
     if (availableDbTypesFetching) {
+      setShowDropdownButton(false);
+    } else {
       setTimeout(() => {
         setShowDropdownButton(true);
-      }, 500);
-    } else {
-      setShowDropdownButton(false);
+      }, 300);
     }
   }, [availableDbTypesFetching]);
 
   const buttonStyle = { display: 'flex', minHeight: '34px', width: '165px' };
 
   return (
     <Box>
-      {!showDropdownButton ? (
-        <Button size="small" variant="contained" disabled sx={buttonStyle}>
-          {Messages.loading}
-        </Button>
-      ) : (
+      {showDropdownButton ? (
         <Button
           data-testid="add-db-cluster-button"
           size="small"
@@ -83,8 +84,12 @@ export const CreateDbButton = () => {
         >
           {Messages.createDatabase}
         </Button>
+      ) : (
+        <Button disabled size="small" variant="contained" sx={buttonStyle}>
+          {Messages.loading}
+        </Button>
       )}
-      {showDropdownButton && availableEngines.length > 1 && (
+      {availableEngines.length > 1 && (
         <Menu
           data-testid="add-db-cluster-button-menu"
           anchorEl={anchorEl}
@@ -96,13 +101,7 @@ export const CreateDbButton = () => {
             sx: { width: anchorEl && anchorEl.offsetWidth },
           }}
         >
-          {availableDbTypesFetching ? (
-            <Stack sx={{ gap: '3px' }}>
-              <Skeleton variant="rectangular" height={38} />
-              <Skeleton variant="rectangular" height={38} />
-              <Skeleton variant="rectangular" height={38} />
-            </Stack>
-          ) : (
+          {
             <Box>
               {availableDbTypes.map((item) => (
                 <MenuItem
@@ -124,7 +123,7 @@ export const CreateDbButton = () => {
                 </MenuItem>
               ))}
             </Box>
-          )}
+          }
         </Menu>
       )}
     </Box>