refactor: [M3-8064] - Clean up Database Feature Flagging Logic

packages/manager/src/GoTo.tsx

@@ -10,6 +10,7 @@ import { useIsACLBEnabled } from './features/LoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
 import { useAccountManagement } from './hooks/useAccountManagement';
 import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';
+import { useIsDatabasesEnabled } from './features/Databases/utilities';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   input: {
@@ -62,6 +63,7 @@ export const GoTo = React.memo(() => {
 
   const { isACLBEnabled } = useIsACLBEnabled();
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
+  const { isDatabasesEnabled } = useIsDatabasesEnabled();
   const { goToOpen, setGoToOpen } = useGlobalKeyboardListener();
 
   const onClose = () => {
@@ -120,6 +122,11 @@ export const GoTo = React.memo(() => {
         hide: !isPlacementGroupsEnabled,
         href: '/placement-groups',
       },
+      {
+        display: 'Databases',
+        hide: !isDatabasesEnabled,
+        href: '/databases',
+      },
       {
         display: 'Domains',
         href: '/domains',

packages/manager/src/MainContent.tsx

@@ -21,20 +21,20 @@ import {
   useNotificationContext,
 } from 'src/features/NotificationCenter/NotificationContext';
 import { TopMenu } from 'src/features/TopMenu/TopMenu';
-import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
-import { useDatabaseEnginesQuery } from 'src/queries/databases';
 import { useMutatePreferences, usePreferences } from 'src/queries/preferences';
 import { ManagerPreferences } from 'src/types/ManagerPreferences';
-import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
 import { ENABLE_MAINTENANCE_MODE } from './constants';
 import { complianceUpdateContext } from './context/complianceUpdateContext';
 import { switchAccountSessionContext } from './context/switchAccountSessionContext';
 import { FlagSet } from './featureFlags';
+import { useIsDatabasesEnabled } from './features/Databases/utilities';
 import { useIsACLBEnabled } from './features/LoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
 import { useGlobalErrors } from './hooks/useGlobalErrors';
+import { useAccountSettings } from './queries/account/settings';
+import { useProfile } from './queries/profile';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   activationWrapper: {
@@ -201,35 +201,19 @@ export const MainContent = () => {
   });
 
   const [menuIsOpen, toggleMenu] = React.useState<boolean>(false);
-  const {
-    _isManagedAccount,
-    account,
-    accountError,
-    profile,
-  } = useAccountManagement();
 
+  const { data: profile } = useProfile();
   const username = profile?.username || '';
 
   const [bannerDismissed, setBannerDismissed] = React.useState<boolean>(false);
 
-  const checkRestrictedUser = !Boolean(flags.databases) && !!accountError;
-  const {
-    error: enginesError,
-    isLoading: enginesLoading,
-  } = useDatabaseEnginesQuery(checkRestrictedUser);
-
-  const showDatabases =
-    isFeatureEnabled(
-      'Managed Databases',
-      Boolean(flags.databases),
-      account?.capabilities ?? []
-    ) ||
-    (checkRestrictedUser && !enginesLoading && !enginesError);
-
+  const { isDatabasesEnabled } = useIsDatabasesEnabled();
   const { isACLBEnabled } = useIsACLBEnabled();
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
 
-  const defaultRoot = _isManagedAccount ? '/managed' : '/linodes';
+  const { data: accountSettings } = useAccountSettings();
+
+  const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
 
   const shouldDisplayMainContentBanner =
     !bannerDismissed &&
@@ -376,7 +360,7 @@ export const MainContent = () => {
                           <Route component={SearchLanding} path="/search" />
                           <Route component={EventsLanding} path="/events" />
                           <Route component={Firewalls} path="/firewalls" />
-                          {showDatabases && (
+                          {isDatabasesEnabled && (
                             <Route component={Databases} path="/databases" />
                           )}
                           {flags.selfServeBetas && (

packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx

@@ -54,22 +54,22 @@ describe('PrimaryNav', () => {
     expect(getByTestId(queryString).getAttribute('aria-current')).toBe('false');
   });
 
-  it('should show Databases menu item when feature flag is off but user has Managed Databases', () => {
-    const { getByTestId } = renderWithTheme(<PrimaryNav {...props} />, {
-      flags: { databases: false },
-      queryClient,
+  it('should show Databases menu item if the user has the account capability', async () => {
+    const account = accountFactory.build({
+      capabilities: ["Managed Databases"],
     });
 
-    expect(getByTestId('menu-item-Databases')).toBeInTheDocument();
-  });
+    server.use(
+      http.get('*/account', () => {
+        return HttpResponse.json(account);
+      })
+    );
 
-  it('should show databases menu when feature is on', () => {
-    const { getByTestId } = renderWithTheme(<PrimaryNav {...props} />, {
-      flags: { databases: true },
-      queryClient,
-    });
+    const { findByText } = renderWithTheme(<PrimaryNav {...props} />);
+
+    const databaseNavItem = await findByText('Databases');
 
-    expect(getByTestId('menu-item-Databases')).toBeInTheDocument();
+    expect(databaseNavItem).toBeVisible();
   });
 
   it('should show ACLB if the feature flag is on, but there is not an account capability', async () => {

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -25,12 +25,12 @@ import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import { Box } from 'src/components/Box';
 import { Divider } from 'src/components/Divider';
+import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
 import { useIsACLBEnabled } from 'src/features/LoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from 'src/features/PlacementGroups/utils';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
 import { usePrefetch } from 'src/hooks/usePreFetch';
-import { useDatabaseEnginesQuery } from 'src/queries/databases';
 import {
   useObjectStorageBuckets,
   useObjectStorageClusters,
@@ -98,7 +98,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
     setEnableMarketplacePrefetch,
   ] = React.useState(false);
 
-  const { _isManagedAccount, account, accountError } = useAccountManagement();
+  const { _isManagedAccount, account } = useAccountManagement();
 
   const isObjMultiClusterEnabled = isFeatureEnabled(
     'Object Storage Access Key Regions',
@@ -156,22 +156,9 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
   const allowMarketplacePrefetch =
     !oneClickApps && !oneClickAppsLoading && !oneClickAppsError;
 
-  const checkRestrictedUser = !Boolean(flags.databases) && !!accountError;
-  const {
-    error: enginesError,
-    isLoading: enginesLoading,
-  } = useDatabaseEnginesQuery(checkRestrictedUser);
-
-  const showDatabases =
-    isFeatureEnabled(
-      'Managed Databases',
-      Boolean(flags.databases),
-      account?.capabilities ?? []
-    ) ||
-    (checkRestrictedUser && !enginesLoading && !enginesError);
-
   const { isACLBEnabled } = useIsACLBEnabled();
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
+  const { isDatabasesEnabled } = useIsDatabasesEnabled();
 
   const prefetchObjectStorage = () => {
     if (!enableObjectPrefetch) {
@@ -261,7 +248,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         },
         {
           display: 'Databases',
-          hide: !showDatabases,
+          hide: !isDatabasesEnabled,
           href: '/databases',
           icon: <Database />,
           isBeta: flags.databaseBeta,
@@ -318,7 +305,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      showDatabases,
+      isDatabasesEnabled,
       _isManagedAccount,
       allowObjPrefetch,
       allowMarketplacePrefetch,

packages/manager/src/features/Databases/utilities.test.ts

@@ -0,0 +1,80 @@
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { accountFactory } from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
+import { wrapWithTheme } from 'src/utilities/testHelpers';
+
+import { useIsDatabasesEnabled } from './utilities';
+
+describe('useIsDatabasesEnabled', () => {
+  it('should return true for an unrestricted user with the account capability', async () => {
+    const account = accountFactory.build({
+      capabilities: ['Managed Databases'],
+    });
+
+    server.use(
+      http.get('*/v4/account', () => {
+        return HttpResponse.json(account);
+      })
+    );
+
+    const { result } = renderHook(() => useIsDatabasesEnabled(), {
+      wrapper: wrapWithTheme,
+    });
+
+    await waitFor(() => expect(result.current.isDatabasesEnabled).toBe(true));
+  });
+
+  it('should return false for an unrestricted user without the account capability', async () => {
+    const account = accountFactory.build({
+      capabilities: [],
+    });
+
+    server.use(
+      http.get('*/v4/account', () => {
+        return HttpResponse.json(account);
+      })
+    );
+
+    const { result } = renderHook(() => useIsDatabasesEnabled(), {
+      wrapper: wrapWithTheme,
+    });
+
+    await waitFor(() => expect(result.current.isDatabasesEnabled).toBe(false));
+  });
+
+  it('should return true for a restricted user who can not load account but can load database engines', async () => {
+    server.use(
+      http.get('*/v4/account', () => {
+        return HttpResponse.json({}, { status: 403 });
+      }),
+      http.get('*/v4beta/databases/engines', () => {
+        return HttpResponse.json(makeResourcePage([]));
+      }),
+    );
+
+    const { result } = renderHook(() => useIsDatabasesEnabled(), {
+      wrapper: wrapWithTheme,
+    });
+
+    await waitFor(() => expect(result.current.isDatabasesEnabled).toBe(true));
+  });
+
+  it('should return false for a restricted user who can not load account and database engines', async () => {
+    server.use(
+      http.get('*/v4/account', () => {
+        return HttpResponse.json({}, { status: 403 });
+      }),
+      http.get('*/v4beta/databases/engines', () => {
+        return HttpResponse.json({}, { status: 404 });
+      })
+    );
+
+    const { result } = renderHook(() => useIsDatabasesEnabled(), {
+      wrapper: wrapWithTheme,
+    });
+
+    await waitFor(() => expect(result.current.isDatabasesEnabled).toBe(false));
+  });
+});

packages/manager/src/features/Databases/utilities.ts

@@ -0,0 +1,39 @@
+import { useAccount } from 'src/queries/account/account';
+import { useDatabaseEnginesQuery } from 'src/queries/databases';
+
+/**
+ * A hook to determine if Databases should be visible to the user.
+ *
+ * Because DBaaS is end of sale, we treat is differently than other products.
+ * It should only be visible to customers with the account capability.
+ *
+ * For unrestricted users, databases will show when
+ * The user has the `Managed Databases` account capability.
+ *
+ * For users who don't have permission to load /v4/account
+ * (which is restricted users without acount read access),
+ * we must check if they can load Database Engines as a workaround.
+ * If these users can successfully fetch database engines, we will
+ * show databases.
+ */
+export const useIsDatabasesEnabled = () => {
+  const { data: account } = useAccount();
+
+  // If the flag is off AND we don't have permission to GET /v4/account,
+  // we need to try fetching Database engines to know if the user has databases enabled.
+  const checkRestrictedUser = !account;
+
+  const { data: engines } = useDatabaseEnginesQuery(checkRestrictedUser);
+
+  if (account) {
+    return {
+      isDatabasesEnabled: account.capabilities.includes('Managed Databases'),
+    };
+  }
+
+  const userCouldLoadDatabaseEngines = engines !== undefined;
+
+  return {
+    isDatabasesEnabled: userCouldLoadDatabaseEngines,
+  };
+};

packages/manager/src/features/TopMenu/AddNewMenu/AddNewMenu.tsx

@@ -26,12 +26,9 @@ import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
 import VPCIcon from 'src/assets/icons/entityIcons/vpc.svg';
 import { Button } from 'src/components/Button/Button';
 import { Divider } from 'src/components/Divider';
+import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
 import { useIsACLBEnabled } from 'src/features/LoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from 'src/features/PlacementGroups/utils';
-import { useFlags } from 'src/hooks/useFlags';
-import { useAccount } from 'src/queries/account/account';
-import { useDatabaseEnginesQuery } from 'src/queries/databases';
-import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
 interface LinkProps {
   attr?: { [key: string]: boolean };
@@ -44,25 +41,10 @@ interface LinkProps {
 
 export const AddNewMenu = () => {
   const theme = useTheme();
-  const { data: account, error: accountError } = useAccount();
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-  const flags = useFlags();
   const open = Boolean(anchorEl);
 
-  const checkRestrictedUser = !Boolean(flags.databases) && !!accountError;
-  const {
-    error: enginesError,
-    isLoading: enginesLoading,
-  } = useDatabaseEnginesQuery(checkRestrictedUser);
-
-  const showDatabases =
-    isFeatureEnabled(
-      'Managed Databases',
-      Boolean(flags.databases),
-      account?.capabilities ?? []
-    ) ||
-    (checkRestrictedUser && !enginesLoading && !enginesError);
-
+  const { isDatabasesEnabled } = useIsDatabasesEnabled();
   const { isACLBEnabled } = useIsACLBEnabled();
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
 
@@ -129,7 +111,7 @@ export const AddNewMenu = () => {
     {
       description: 'High-performance managed database clusters',
       entity: 'Database',
-      hide: !showDatabases,
+      hide: !isDatabasesEnabled,
       icon: DatabaseIcon,
       link: '/databases/create',
     },