UI Hide Secrets Sync from nav if not on license and/or no policy permissions

changelog/27262.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui/secrets-sync: Hide Secrets Sync from the sidebar nav if user does not have access to the feature.
+```

ui/app/components/clients/page/counts.hbs

@@ -151,7 +151,7 @@
         </Hds::Alert>
       {{/if}}
 
-      <Clients::Counts::NavBar @showSecretsSync={{this.showSecretsSync}} />
+      <Clients::Counts::NavBar @showSecretsSyncClientCounts={{this.showSecretsSyncClientCounts}} />
 
       {{! CLIENT COUNT PAGE COMPONENTS RENDER HERE }}
       {{yield}}

ui/app/components/clients/page/counts.ts

@@ -167,7 +167,7 @@ export default class ClientsCountsPageComponent extends Component<Args> {
     return activity?.total;
   }
 
-  get showSecretsSync(): boolean {
+  get showSecretsSyncClientCounts(): boolean {
     const { activity } = this.args;
     // if there is any sync client data, show it
     if (activity && activity?.total?.secret_syncs > 0) return true;

ui/app/components/sidebar/nav/cluster.hbs

@@ -13,12 +13,14 @@
     @text="Secrets Engines"
     data-test-sidebar-nav-link="Secrets Engines"
   />
-  <Nav.Link
-    @route="vault.cluster.sync"
-    @text="Secrets Sync"
-    @badge={{this.badgeText}}
-    data-test-sidebar-nav-link="Secrets Sync"
-  />
+  {{#if this.flags.showSecretsSync}}
+    <Nav.Link
+      @route="vault.cluster.sync"
+      @text="Secrets Sync"
+      @badge={{if this.flags.isHvdManaged "Plus" ""}}
+      data-test-sidebar-nav-link="Secrets Sync"
+    />
+  {{/if}}
   {{#if (has-permission "access")}}
     <Nav.Link
       @route={{get (route-params-for "access") "route"}}

ui/app/components/sidebar/nav/cluster.js

@@ -21,16 +21,4 @@ export default class SidebarNavClusterComponent extends Component {
     // should only return true if we're in the true root namespace
     return this.namespace.inRootNamespace && !this.cluster?.hasChrootNamespace;
   }
-
-  get badgeText() {
-    const isHvdManaged = this.flags.isHvdManaged;
-    const onLicense = this.version.hasSecretsSync;
-    const isEnterprise = this.version.isEnterprise;
-
-    if (isHvdManaged) return 'Plus';
-    if (isEnterprise && !onLicense) return 'Premium';
-    if (!isEnterprise) return 'Enterprise';
-    // no badge for Enterprise clusters with Secrets Sync on their license--the only remaining option.
-    return '';
-  }
 }

ui/app/routes/application.js

@@ -65,7 +65,10 @@ export default Route.extend({
     },
   },
 
-  beforeModel() {
-    return this.flagsService.fetchFeatureFlags();
+  async beforeModel() {
+    // activatedFlags are called this high up in routing to return a response used to show/hide Secrets sync on sidebar nav.
+    // featureFlags are called this high in routing because to determine isHvdManaged things, etc.
+    await this.flagsService.fetchActivatedFlags();
+    await this.flagsService.fetchFeatureFlags();
   },
 });

ui/app/services/flags.ts

@@ -10,6 +10,7 @@ import { DEBUG } from '@glimmer/env';
 import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
 import type StoreService from 'vault/services/store';
 import type VersionService from 'vault/services/version';
+import type PermissionsService from 'vault/services/permissions';
 
 const FLAGS = {
   vaultCloudNamespace: 'VAULT_CLOUD_ADMIN_NAMESPACE',
@@ -24,6 +25,7 @@ const FLAGS = {
 export default class flagsService extends Service {
   @service declare readonly version: VersionService;
   @service declare readonly store: StoreService;
+  @service declare readonly permissions: PermissionsService;
 
   @tracked activatedFlags: string[] = [];
   @tracked featureFlags: string[] = [];
@@ -60,7 +62,6 @@ export default class flagsService extends Service {
   }
 
   getActivatedFlags = keepLatestTask(async () => {
-    if (this.version.isCommunity) return;
     // Response could change between user sessions.
     // Fire off endpoint without checking if activated features are already set.
     try {
@@ -86,4 +87,21 @@ export default class flagsService extends Service {
       this.secretsSyncActivatePath.get('canUpdate') !== false
     );
   }
+
+  get showSecretsSync() {
+    const isHvdManaged = this.isHvdManaged;
+    const onLicense = this.version.hasSecretsSync;
+    const isEnterprise = this.version.isEnterprise;
+    const isActivated = this.secretsSyncIsActivated;
+
+    if (isHvdManaged) return true;
+    if (isEnterprise && !onLicense) return false;
+    if (!isEnterprise) return false;
+    if (isActivated) {
+      // if activated but the user does not have permissions to do anything on the `sys/sync` endpoint, hide navigation link.
+      return this.permissions.hasNavPermission('sync');
+    }
+    // The only remaining option is Enterprise with Secrets Sync on the license but the feature is not activated. In this case, we want to show the upsell page and message about either activating or having an admin activate.
+    return true;
+  }
 }

ui/app/services/permissions.js

@@ -49,6 +49,9 @@ const API_PATHS = {
   settings: {
     customMessages: 'sys/config/ui/custom-messages',
   },
+  sync: {
+    sync: 'sys/sync',
+  },
 };
 
 const API_PATHS_TO_ROUTE_PARAMS = {

ui/lib/sync/addon/components/sync-header.hbs

@@ -16,8 +16,8 @@
         <Icon @name={{@icon}} @size="24" />
       {{/if}}
       {{@title}}
-      {{#if this.badgeText}}
-        <Hds::Badge @text={{this.badgeText}} @color="highlight" @size="large" />
+      {{#if this.flags.isHvdManaged}}
+        <Hds::Badge @text={{"Plus"}} @color="highlight" @size="large" />
       {{/if}}
     </h1>
   </p.levelLeft>

ui/lib/sync/addon/components/sync-header.ts

@@ -6,7 +6,6 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
 
-import type VersionService from 'vault/services/version';
 import type FlagsService from 'vault/services/flags';
 import type { Breadcrumb } from 'vault/vault/app-types';
 
@@ -17,18 +16,5 @@ interface Args {
 }
 
 export default class SyncHeaderComponent extends Component<Args> {
-  @service declare readonly version: VersionService;
   @service declare readonly flags: FlagsService;
-
-  get badgeText() {
-    const isHvdManaged = this.flags.isHvdManaged;
-    const onLicense = this.version.hasSecretsSync;
-    const isEnterprise = this.version.isEnterprise;
-
-    if (isHvdManaged) return 'Plus feature';
-    if (isEnterprise && !onLicense) return 'Premium feature';
-    if (!isEnterprise) return 'Enterprise feature';
-    // no badge for Enterprise clusters with Secrets Sync on their license--the only remaining option.
-    return '';
-  }
 }

ui/lib/sync/addon/routes/secrets.ts

@@ -13,13 +13,8 @@ export default class SyncSecretsRoute extends Route {
   @service declare readonly router: RouterService;
   @service declare readonly flags: FlagService;
 
-  beforeModel() {
-    return this.flags.fetchActivatedFlags();
-  }
-
   model() {
     return {
-      // TODO will modify when we use the persona service.
       activatedFeatures: this.flags.activatedFlags,
     };
   }

ui/tests/integration/components/clients/counts/nav-bar-test.js

@@ -13,10 +13,12 @@ module('Integration | Component | clients/counts/nav-bar', function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function () {
-    this.showSecretsSync = false;
+    this.showSecretsSyncClientCounts = false;
 
     this.renderComponent = async () => {
-      await render(hbs`<Clients::Counts::NavBar @showSecretsSync={{this.showSecretsSync}} />`);
+      await render(
+        hbs`<Clients::Counts::NavBar @showSecretsSyncClientCounts={{this.showSecretsSyncClientCounts}} />`
+      );
     };
   });
 
@@ -28,15 +30,15 @@ module('Integration | Component | clients/counts/nav-bar', function (hooks) {
     assert.dom(GENERAL.tab('acme')).hasText('ACME clients');
   });
 
-  test('it shows secrets sync tab if showSecretsSync is true', async function (assert) {
-    this.showSecretsSync = true;
+  test('it shows secrets sync tab if showSecretsSyncClientCounts is true', async function (assert) {
+    this.showSecretsSyncClientCounts = true;
     await this.renderComponent();
 
     assert.dom(GENERAL.tab('sync')).exists();
   });
 
-  test('it should not show secrets sync tab if showSecretsSync is false', async function (assert) {
-    this.showSecretsSync = false;
+  test('it should not show secrets sync tab if showSecretsSyncClientCounts is false', async function (assert) {
+    this.showSecretsSyncClientCounts = false;
     await this.renderComponent();
 
     assert.dom(GENERAL.tab('sync')).doesNotExist();

ui/types/vault/services/permissions.d.ts

@@ -16,4 +16,5 @@ export default class PermissionsService extends Service {
   canViewAll: boolean | null;
   permissionsBanner: string | null;
   chrootNamespace: string | null | undefined;
+  hasNavPermission: (string) => boolean;
 }