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)