From 00a5ed132f8d2c6c29c634c628a9bbc1abdcd520 Mon Sep 17 00:00:00 2001
From: Vault Automation <github-team-secure-vault-core@hashicorp.com>
Date: Tue, 5 May 2026 12:29:58 -0600
Subject: [PATCH] [UI] Update sidebar to also hide/show billing metrics
 dashboard based on permissions (#14490) (#14517)

* Update sidebar to also hide/show based on permissions

* Add tests

Co-authored-by: Kianna <30884335+kiannaquach@users.noreply.github.com>
---
 ui/app/services/permissions.js                  |  3 +++
 .../addon/components/sidebar/nav/cluster.hbs    |  2 +-
 .../addon/components/sidebar/nav/cluster.js     |  1 +
 ui/lib/core/addon/helpers/display-nav-item.ts   | 17 ++++++++++++++++-
 .../components/sidebar/nav/cluster-test.js      | 11 ++++++++++-
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/ui/app/services/permissions.js b/ui/app/services/permissions.js
index 07874b685b..40933c0080 100644
--- a/ui/app/services/permissions.js
+++ b/ui/app/services/permissions.js
@@ -115,6 +115,9 @@ const API_PATHS = {
   monitoring: {
     'utilization-report': 'sys/utilization-report',
   },
+  billing: {
+    overview: 'sys/billing/overview',
+  },
 };
 
 // API_PATHS_TO_ROUTE_PARAMS is used to resolve route params for that path when checking permissions for the nav item.
diff --git a/ui/lib/core/addon/components/sidebar/nav/cluster.hbs b/ui/lib/core/addon/components/sidebar/nav/cluster.hbs
index 58459deea1..810cfdf8ac 100644
--- a/ui/lib/core/addon/components/sidebar/nav/cluster.hbs
+++ b/ui/lib/core/addon/components/sidebar/nav/cluster.hbs
@@ -59,7 +59,7 @@
       data-test-sidebar-nav-link="Client count"
     />
   {{/if}}
-  {{#if (and this.version.hasConsumptionBilling (or this.isRootNamespace this.namespace.inHvdAdminNamespace))}}
+  {{#if (display-nav-item this.routeName.billingDashboard)}}
     <Nav.Link
       @route="vault.cluster.billing.overview"
       @text="Billing metrics"
diff --git a/ui/lib/core/addon/components/sidebar/nav/cluster.js b/ui/lib/core/addon/components/sidebar/nav/cluster.js
index d619cf8aac..e063e6c2ef 100644
--- a/ui/lib/core/addon/components/sidebar/nav/cluster.js
+++ b/ui/lib/core/addon/components/sidebar/nav/cluster.js
@@ -22,6 +22,7 @@ export default class SidebarNavClusterComponent extends Component {
 
   routeName = {
     vaultUsage: RouteName.VAULT_USAGE,
+    billingDashboard: RouteName.BILLING_DASHBOARD,
   };
 
   get cluster() {
diff --git a/ui/lib/core/addon/helpers/display-nav-item.ts b/ui/lib/core/addon/helpers/display-nav-item.ts
index 2becf0a2c9..25f3c33041 100644
--- a/ui/lib/core/addon/helpers/display-nav-item.ts
+++ b/ui/lib/core/addon/helpers/display-nav-item.ts
@@ -21,6 +21,7 @@ export enum RouteName {
   REPLICATION = 'replication',
   VAULT_USAGE = 'vault-usage',
   LICENSE = 'license',
+  BILLING_DASHBOARD = 'billing-dashboard',
 }
 
 export enum NavSection {
@@ -37,7 +38,8 @@ export default class NavBar extends Helper {
   @service declare readonly flags: FlagsService;
 
   compute([navItem]: string[]) {
-    const { SECRETS_RECOVERY, SEAL, REPLICATION, VAULT_USAGE, LICENSE, SECRETS_SYNC } = RouteName;
+    const { SECRETS_RECOVERY, SEAL, REPLICATION, VAULT_USAGE, LICENSE, SECRETS_SYNC, BILLING_DASHBOARD } =
+      RouteName;
     const { RESILIENCE_AND_RECOVERY, REPORTING, CLIENT_COUNT } = NavSection;
 
     switch (navItem) {
@@ -54,6 +56,9 @@ export default class NavBar extends Helper {
         return this.supportsLicense;
       case REPORTING:
         return this.canAccessVaultUsageDashboard || this.supportsLicense;
+      // monitoring
+      case BILLING_DASHBOARD:
+        return this.supportsBillingDashboard;
       // resilience and recovery nav items
       case SECRETS_RECOVERY:
         return this.supportsSnapshots;
@@ -152,6 +157,16 @@ export default class NavBar extends Helper {
     // otherwise we show the link depending on whether or not the feature exists
     return this.version.hasSecretsSync;
   }
+
+  get supportsBillingDashboard() {
+    const isCorrectNamespace = this.isRootNamespace || this.namespace.inHvdAdminNamespace;
+
+    return (
+      this.version.hasConsumptionBilling &&
+      isCorrectNamespace &&
+      this.permissions.hasNavPermission('billing', 'overview')
+    );
+  }
 }
 
 export function computeNavBar(context: object, navItem: string): boolean {
diff --git a/ui/tests/integration/components/sidebar/nav/cluster-test.js b/ui/tests/integration/components/sidebar/nav/cluster-test.js
index 8baaf095da..c661cf213c 100644
--- a/ui/tests/integration/components/sidebar/nav/cluster-test.js
+++ b/ui/tests/integration/components/sidebar/nav/cluster-test.js
@@ -165,8 +165,17 @@ module('Integration | Component | sidebar-nav-cluster', function (hooks) {
     assert.dom(GENERAL.navLink('Billing metrics')).exists('Billing metrics link is visible.');
   });
 
-  test('it should hide billing metrics link when in namespace other than root or admin when Consumption Billing feature is enabled', async function (assert) {
+  test('it should not show billing metrics link when in HVD admin namespace and Consumption Billing feature is enabled', async function (assert) {
     stubFeaturesAndPermissions(this.owner, true, false, ['Consumption Billing']);
+    this.flags.featureFlags = ['VAULT_CLOUD_ADMIN_NAMESPACE'];
+    const namespace = this.owner.lookup('service:namespace');
+    namespace.setNamespace('admin');
+    await renderComponent();
+    assert.dom(GENERAL.navLink('Billing metrics')).exists('Billing metrics link is visible.');
+  });
+
+  test('it should hide billing metrics link when in namespace other than root or admin when Consumption Billing feature and does not have permission', async function (assert) {
+    stubFeaturesAndPermissions(this.owner, true, false, ['Consumption Billing'], false);
     const namespace = this.owner.lookup('service:namespace');
     namespace.setNamespace('namespace-1');
     await renderComponent();