fix(usage): drop the app-wide quota banner on the usage dashboard

frontend/web/__tests__/routePaths.test.ts

@@ -1,4 +1,4 @@
-import { isAllowedWhileBlocked } from 'web/routePaths'
+import { isAllowedWhileBlocked, isOrganisationUsage } from 'web/routePaths'
 
 // App renders <Blocked /> wherever this is false, so a wrong answer either
 // locks a blocked organisation out, or lets it back in.
@@ -26,3 +26,16 @@ describe('isAllowedWhileBlocked', () => {
     )
   })
 })
+
+// App hides its app-wide quota banner here, where the page has its own.
+describe('isOrganisationUsage', () => {
+  it.each`
+    pathname                             | isUsage
+    ${'/organisation/7528/usage'}        | ${true}
+    ${'/organisation/7528/projects'}     | ${false}
+    ${'/organisation/7528/usage/charts'} | ${false}
+    ${'/organisations'}                  | ${false}
+  `('$pathname is the usage page: $isUsage', ({ isUsage, pathname }) => {
+    expect(isOrganisationUsage(pathname)).toBe(isUsage)
+  })
+})

frontend/web/components/App.js

@@ -30,7 +30,7 @@ import Announcement from './Announcement'
 import { getBuildVersion } from 'common/services/useBuildVersion'
 import AccountProvider from 'common/providers/AccountProvider'
 import Nav from './navigation/Nav'
-import { isAllowedWhileBlocked } from 'web/routePaths'
+import { isAllowedWhileBlocked, isOrganisationUsage } from 'web/routePaths'
 import 'project/darkMode'
 
 const App = class extends Component {
@@ -269,6 +269,12 @@ 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)
 
@@ -360,12 +366,14 @@ const App = class extends Component {
                     />
                     {user && (
                       <>
-                        <OrganisationLimit
-                          id={AccountStore.getOrganisation()?.id}
-                          organisationPlan={
-                            AccountStore.getOrganisation()?.subscription.plan
-                          }
-                        />
+                        {!hasOwnQuotaBanner && (
+                          <OrganisationLimit
+                            id={AccountStore.getOrganisation()?.id}
+                            organisationPlan={
+                              AccountStore.getOrganisation()?.subscription.plan
+                            }
+                          />
+                        )}
                         <div className='container announcement-container'>
                           <div>
                             <Announcement />

frontend/web/routePaths.ts

@@ -9,7 +9,11 @@ export const ORGANISATION_USAGE = '/organisation/:organisationId/usage'
 // usage page, which explains the block.
 const ALLOWED_WHILE_BLOCKED = [ORGANISATIONS, ORGANISATION_USAGE]
 
+const matches = (pathname: string, path: string): boolean =>
+  !!matchPath(pathname, { exact: true, path, strict: false })
+
 export const isAllowedWhileBlocked = (pathname: string): boolean =>
-  ALLOWED_WHILE_BLOCKED.some((path) =>
-    matchPath(pathname, { exact: true, path, strict: false }),
-  )
+  ALLOWED_WHILE_BLOCKED.some((path) => matches(pathname, path))
+
+export const isOrganisationUsage = (pathname: string): boolean =>
+  matches(pathname, ORGANISATION_USAGE)