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 @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/application.js

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

ui/app/routes/vault/cluster.js

@@ -55,10 +55,12 @@ export default Route.extend(ModelBoundaryRoute, ClusterRoute, {
   },
 
   async beforeModel() {
+    await this.flagsService.fetchActivatedFlags();
     const params = this.paramsFor(this.routeName);
     let namespace = params.namespaceQueryParam;
     const currentTokenName = this.auth.currentTokenName;
     const managedRoot = this.flagsService.hvdManagedNamespaceRoot;
+
     assert(
       'Cannot use VAULT_CLOUD_ADMIN_NAMESPACE flag with non-enterprise Vault version',
       !(managedRoot && this.version.isCommunity)

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,22 @@ 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;
+    // only remaining version is Enterprise with Secrets Sync on their license
+    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 now 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,11 @@ const API_PATHS = {
   settings: {
     customMessages: 'sys/config/ui/custom-messages',
   },
+  sync: {
+    destinations: 'sys/sync/destinations',
+    associations: 'sys/sync/associations',
+    config: 'sys/sync/config',
+  },
 };
 
 const API_PATHS_TO_ROUTE_PARAMS = {
@@ -187,7 +192,11 @@ export default class PermissionsService extends Service {
         return this.hasPermission(API_PATHS[navItem][param], capability);
       });
     }
-    return Object.values(API_PATHS[navItem]).some((path) => this.hasPermission(path));
+    return Object.values(API_PATHS[navItem]).some((path) => {
+      const test = this.hasPermission(path);
+
+      return test;
+    });
   }
 
   navPathParams(navItem) {
@@ -213,7 +222,6 @@ export default class PermissionsService extends Service {
       return true;
     }
     const path = this.pathNameWithNamespace(pathName);
-
     return capabilities.every(
       (capability) =>
         this.hasMatchingExactPath(path, capability) || this.hasMatchingGlobPath(path, capability)
@@ -237,6 +245,7 @@ export default class PermissionsService extends Service {
 
   hasMatchingGlobPath(pathName, capability) {
     const globPaths = this.globPaths;
+
     if (globPaths) {
       const matchingPath = Object.keys(globPaths).find((k) => {
         return pathName.includes(k) || pathName.includes(k.replace(/\/$/, ''));

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/tests/acceptance/clients/counts/sync-test.js

@@ -45,11 +45,11 @@ module('Acceptance | clients | sync', function (hooks) {
     });
 
     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 application route
         return {
           data: {
             activated: [],
@@ -59,7 +59,6 @@ module('Acceptance | clients | sync', function (hooks) {
       });
 
       assert.dom(GENERAL.emptyStateTitle).exists('Shows empty state when secrets-sync is not activated');
-
       await click(`${GENERAL.emptyStateActions} .hds-link-standalone`);
       assert.strictEqual(
         currentURL(),

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

@@ -19,16 +19,25 @@ module('Acceptance | sync | overview', function (hooks) {
   setupMirage(hooks);
 
   hooks.beforeEach(async function () {
-    syncHandlers(this.server);
     this.version = this.owner.lookup('service:version');
     this.version.features = ['Secrets Sync'];
 
-    await authPage.login();
+    // await authPage.login();
   });
 
   module('when feature is activated', function (hooks) {
     hooks.beforeEach(async function () {
-      syncScenario(this.server);
+      syncHandlers(this.server);
+      this.server.get('/sys/activation-flags', () => {
+        return {
+          data: {
+            activated: ['secrets-sync'],
+            unactivated: [''],
+          },
+        };
+      });
+
+      await authPage.login();
     });
 
     test('it fetches destinations and associations', async function (assert) {
@@ -47,6 +56,7 @@ module('Acceptance | sync | overview', function (hooks) {
     module('when there are pre-existing destinations', function (hooks) {
       hooks.beforeEach(async function () {
         syncScenario(this.server);
+        await authPage.login();
       });
 
       test('it should transition to correct routes when performing actions', async function (assert) {
@@ -71,7 +81,6 @@ module('Acceptance | sync | overview', function (hooks) {
   module('when feature is not activated', function (hooks) {
     hooks.beforeEach(async function () {
       let wasActivatePOSTCalled = false;
-
       // simulate the feature being activated once /secrets-sync/activate has been called
       this.server.get('/sys/activation-flags', () => {
         if (wasActivatePOSTCalled) {
@@ -95,6 +104,7 @@ module('Acceptance | sync | overview', function (hooks) {
         wasActivatePOSTCalled = true;
         return {};
       });
+      await authPage.login();
     });
 
     test('it does not fetch destinations and associations', async function (assert) {
@@ -145,6 +155,7 @@ module('Acceptance | sync | overview', function (hooks) {
   module('enterprise with namespaces', function (hooks) {
     hooks.beforeEach(async function () {
       this.version.features = ['Secrets Sync', 'Namespaces'];
+      await authPage.login();
       await runCmd(`write sys/namespaces/admin -f`, false);
       await authPage.loginNs('admin');
       await runCmd(`write sys/namespaces/foo -f`, false);
@@ -154,16 +165,27 @@ module('Acceptance | sync | overview', function (hooks) {
     test('it should make activation-flag requests to correct namespace', async function (assert) {
       assert.expect(4);
       // should call GET activation-flags twice because we need an updated response after activating the feature
+      let wasActivatePOSTCalled = false;
       this.server.get('/sys/activation-flags', (_, req) => {
         assert.deepEqual(req.requestHeaders, {}, 'Request is unauthenticated and in root namespace');
-        return {
-          data: {
-            activated: [''],
-            unactivated: ['secrets-sync'],
-          },
-        };
+        if (wasActivatePOSTCalled) {
+          return {
+            data: {
+              activated: ['secrets-sync'],
+              unactivated: [''],
+            },
+          };
+        } else {
+          return {
+            data: {
+              activated: [''],
+              unactivated: ['secrets-sync'],
+            },
+          };
+        }
       });
       this.server.post('/sys/activation-flags/secrets-sync/activate', (_, req) => {
+        wasActivatePOSTCalled = true;
         assert.strictEqual(
           req.requestHeaders['X-Vault-Namespace'],
           undefined,
@@ -174,7 +196,6 @@ module('Acceptance | sync | overview', function (hooks) {
 
       // confirm we're in admin/foo
       assert.dom('[data-test-badge-namespace]').hasText('foo');
-
       await click(ts.navLink('Secrets Sync'));
       await click(ts.overview.optInBanner.enable);
       await click(ts.overview.activationModal.checkbox);