diff --git a/frontend/web/__tests__/routePaths.test.ts b/frontend/web/__tests__/routePaths.test.ts index a1abf6151b82..6f7f31696974 100644 --- a/frontend/web/__tests__/routePaths.test.ts +++ b/frontend/web/__tests__/routePaths.test.ts @@ -1,4 +1,20 @@ -import { isAllowedWhileBlocked, isOrganisationUsage } from 'web/routePaths' +import AccountStore from 'common/stores/account-store' +import { + isAllowedWhileBlocked, + isOrganisationUsage, + shouldShowOrganisationLimit, +} from 'web/routePaths' + +jest.mock('common/stores/account-store', () => ({ + __esModule: true, + default: { isAdmin: jest.fn() }, +})) + +const mockIsAdmin = AccountStore.isAdmin as jest.Mock + +beforeEach(() => { + mockIsAdmin.mockReset() +}) // App renders wherever this is false, so a wrong answer either // locks a blocked organisation out, or lets it back in. @@ -27,6 +43,25 @@ describe('isAllowedWhileBlocked', () => { }) }) +describe('shouldShowOrganisationLimit', () => { + it.each` + isAdmin | pathname | usageDashboardEnabled | shouldShow + ${true} | ${'/organisation/7528/usage'} | ${false} | ${true} + ${true} | ${'/organisation/7528/usage'} | ${true} | ${false} + ${true} | ${'/organisation/7528/projects'} | ${true} | ${true} + ${false} | ${'/organisation/7528/usage'} | ${false} | ${false} + ${false} | ${'/organisation/7528/projects'} | ${true} | ${false} + `( + 'admin=$isAdmin, pathname=$pathname, usage dashboard=$usageDashboardEnabled: $shouldShow', + ({ isAdmin, pathname, shouldShow, usageDashboardEnabled }) => { + mockIsAdmin.mockReturnValue(isAdmin) + expect(shouldShowOrganisationLimit(pathname, usageDashboardEnabled)).toBe( + shouldShow, + ) + }, + ) +}) + // App hides its app-wide quota banner here, where the page has its own. describe('isOrganisationUsage', () => { it.each` diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js index bda5c996deca..a8424a9cdc5e 100644 --- a/frontend/web/components/App.js +++ b/frontend/web/components/App.js @@ -30,7 +30,10 @@ import Announcement from './Announcement' import { getBuildVersion } from 'common/services/useBuildVersion' import AccountProvider from 'common/providers/AccountProvider' import Nav from './navigation/Nav' -import { isAllowedWhileBlocked, isOrganisationUsage } from 'web/routePaths' +import { + isAllowedWhileBlocked, + shouldShowOrganisationLimit, +} from 'web/routePaths' import 'project/darkMode' const App = class extends Component { @@ -269,12 +272,6 @@ const App = class extends Component { pathname === '/getting-started' && getStoredOnboardingVariant() === 'single_page' - // The usage dashboard says the same thing in its own banner, with the - // detail this one cannot reach. - const hasOwnQuotaBanner = - isOrganisationUsage(pathname) && - Utils.getFlagsmithHasFeature('usage_dashboard') - const projectId = this.getProjectId(this.props) const environmentId = this.getEnvironmentId(this.props) @@ -366,7 +363,10 @@ const App = class extends Component { /> {user && ( <> - {!hasOwnQuotaBanner && ( + {shouldShowOrganisationLimit( + pathname, + Utils.getFlagsmithHasFeature('usage_dashboard'), + ) && ( export const isOrganisationUsage = (pathname: string): boolean => matches(pathname, ORGANISATION_USAGE) + +export const shouldShowOrganisationLimit = ( + pathname: string, + usageDashboardEnabled: boolean, +): boolean => + Boolean(AccountStore.isAdmin()) && + !(isOrganisationUsage(pathname) && usageDashboardEnabled)