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/counts/nav-bar.hbs

@@ -15,7 +15,7 @@
         Entity/Non-entity clients
       </LinkTo>
     </li>
-    {{#if @showSecretsSync}}
+    {{#if @showSecretsSyncClientCounts}}
       <li>
         <LinkTo @route="vault.cluster.clients.counts.sync" data-test-tab="sync">
           Secrets sync clients

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

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

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

@@ -167,20 +167,10 @@ export default class ClientsCountsPageComponent extends Component<Args> {
     return activity?.total;
   }
 
-  get showSecretsSync(): boolean {
+  get hasSecretsSyncClients(): boolean {
     const { activity } = this.args;
     // if there is any sync client data, show it
-    if (activity && activity?.total?.secret_syncs > 0) return true;
-
-    // otherwise, show the tab based on the cluster type and license
-    if (this.version.isCommunity) return false;
-
-    const isHvd = this.flags.isHvdManaged;
-    const onLicense = this.version.hasSecretsSync;
-
-    // we can't tell if HVD clusters have the feature or not, so we show it by default
-    // if the cluster is not HVD, show the tab if the feature is on the license
-    return isHvd || onLicense;
+    return activity && activity?.total?.secret_syncs > 0;
   }
 
   @action

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/vault/cluster.js

@@ -63,6 +63,10 @@ export default Route.extend(ModelBoundaryRoute, ClusterRoute, {
       'Cannot use VAULT_CLOUD_ADMIN_NAMESPACE flag with non-enterprise Vault version',
       !(managedRoot && this.version.isCommunity)
     );
+
+    // activatedFlags are called this high in routing to return a response used to show/hide Secrets sync on sidebar nav.
+    await this.flagsService.fetchActivatedFlags();
+
     if (!namespace && currentTokenName && !Ember.testing) {
       // if no namespace queryParam and user authenticated,
       // use user's root namespace to redirect to properly param'd url

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,9 +62,9 @@ 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.
+    if (this.version.isCommunity) return;
     try {
       const response = await this.store
         .adapterFor('application')
@@ -86,4 +88,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 (!isEnterprise) return false;
+    if (isHvdManaged) return true;
+    if (isEnterprise && !onLicense) return false;
+    if (isActivated) {
+      // if the feature is activated but the user does not have permissions on the `sys/sync` endpoint, hide navigation link.
+      return this.permissions.hasNavPermission('sync');
+    }
+    // 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,12 @@ const API_PATHS = {
   settings: {
     customMessages: 'sys/config/ui/custom-messages',
   },
+  sync: {
+    destinations: 'sys/sync/destinations',
+    associations: 'sys/sync/associations',
+    config: 'sys/sync/config',
+    github: 'sys/sync/github-apps',
+  },
 };
 
 const API_PATHS_TO_ROUTE_PARAMS = {

ui/lib/sync/addon/components/secrets/sync-activation-modal.ts

@@ -43,7 +43,7 @@ export default class SyncActivationModal extends Component<Args> {
         .adapterFor('application')
         .ajax('/v1/sys/activation-flags/secrets-sync/activate', 'POST', { namespace });
       // must refresh and not transition because transition does not refresh the model from within a namespace
-      yield this.router.refresh();
+      yield this.router.refresh('vault.cluster');
     } catch (error) {
       this.args.onError(errorMessage(error));
       this.flashMessages.danger(`Error enabling feature \n ${errorMessage(error)}`);

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 feature" @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/lib/sync/addon/routes/secrets/overview.ts

@@ -8,10 +8,12 @@ import { service } from '@ember/service';
 import { hash } from 'rsvp';
 
 import type FlagsService from 'vault/services/flags';
+import type RouterService from '@ember/routing/router-service';
 import type StoreService from 'vault/services/store';
 import type VersionService from 'vault/services/version';
 
 export default class SyncSecretsOverviewRoute extends Route {
+  @service declare readonly router: RouterService;
   @service declare readonly store: StoreService;
   @service declare readonly flags: FlagsService;
   @service declare readonly version: VersionService;
@@ -34,4 +36,10 @@ export default class SyncSecretsOverviewRoute extends Route {
         : [],
     });
   }
+
+  redirect() {
+    if (!this.flags.showSecretsSync) {
+      this.router.replaceWith('vault.cluster.dashboard');
+    }
+  }
 }

ui/mirage/handlers/sync.js

@@ -7,6 +7,7 @@ import { Response } from 'miragejs';
 import { camelize } from '@ember/string';
 import { findDestination } from 'core/helpers/sync-destinations';
 import clientsHandler from './clients';
+import modifyPassthroughResponse from '../helpers/modify-passthrough-response';
 
 export const associationsResponse = (schema, req) => {
   const { type, name } = req.params;
@@ -116,7 +117,9 @@ const createOrUpdateDestination = (schema, req) => {
 };
 
 export default function (server) {
-  // default to activated
+  // default to enterprise with Secrets Sync on the license and activated
+  server.get('sys/health', (schema, req) => modifyPassthroughResponse(req, { enterprise: true }));
+  server.get('/sys/license/features', () => ({ features: ['Secrets Sync'] }));
   server.get('/sys/activation-flags', () => {
     return {
       data: {

ui/mirage/helpers/modify-passthrough-response.js

@@ -5,6 +5,7 @@
 
 // passthrough request and modify response from server
 // pass object as second arg of properties in response to override
+// ex: server.get('sys/health', (schema, req) => modifyPassthroughResponse(req, { enterprise: true }));
 export default function (req, props = {}) {
   return new Promise((resolve) => {
     const xhr = req.passthrough();

ui/tests/acceptance/clients/counts/overview-test.js

@@ -236,7 +236,7 @@ module('Acceptance | clients | overview | sync in license, activated', function
   });
 
   test('it should render the correct tabs', async function (assert) {
-    assert.dom(GENERAL.tab('sync')).exists();
+    assert.dom(GENERAL.tab('sync')).exists('shows the sync tab');
   });
 
   test('it should show secrets sync stats', async function (assert) {

ui/tests/acceptance/clients/counts/sync-test.js

@@ -22,6 +22,8 @@ module('Acceptance | clients | sync', function (hooks) {
     hooks.beforeEach(async function () {
       sinon.replace(timestamp, 'now', sinon.fake.returns(STATIC_NOW));
       syncHandler(this.server);
+      const version = this.owner.lookup('service:version');
+      version.type = 'enterprise';
       await authPage.login();
       return visit('/vault/clients/counts/sync');
     });
@@ -34,22 +36,31 @@ module('Acceptance | clients | sync', function (hooks) {
     });
   });
 
-  module('sync not activated', function (hooks) {
+  module('sync not activated and on license', function (hooks) {
     hooks.beforeEach(async function () {
       this.server.get('/sys/internal/counters/config', function () {
         return CONFIG_RESPONSE;
       });
       sinon.replace(timestamp, 'now', sinon.fake.returns(STATIC_NOW));
+      syncHandler(this.server);
+      server.get('/sys/activation-flags', () => {
+        return {
+          data: {
+            activated: [''],
+            unactivated: ['secrets-sync'],
+          },
+        };
+      });
       await authPage.login();
       return visit('/vault/clients/counts/sync');
     });
 
     test('it should show an empty state when secrets sync is not activated', async function (assert) {
-      assert.expect(3);
+      assert.expect(2);
 
       this.server.get('/sys/activation-flags', () => {
         assert.true(true, '/sys/activation-flags/ is called to check if secrets-sync is activated');
-
+        // called once from the higher level cluster route
         return {
           data: {
             activated: [],

ui/tests/acceptance/sync/secrets/destination-test.js

@@ -14,7 +14,7 @@ import { settled, click, visit, currentURL, fillIn, currentRouteName } from '@em
 import { PAGE as ts } from 'vault/tests/helpers/sync/sync-selectors';
 
 // sync is an enterprise feature but since mirage is used the enterprise label has been intentionally omitted from the module name
-module('Acceptance | sync | destination', function (hooks) {
+module('Acceptance | sync | destination (singular)', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 

ui/tests/acceptance/sync/secrets/destinations-test.js

@@ -16,7 +16,7 @@ import { syncDestinations } from 'vault/helpers/sync-destinations';
 const SYNC_DESTINATIONS = syncDestinations();
 
 // sync is an enterprise feature but since mirage is used the enterprise label has been intentionally omitted from the module name
-module('Acceptance | sync | destinations', function (hooks) {
+module('Acceptance | sync | destinations (plural)', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);