UI: Separate flag and version service concerns (#30001)

* move sync activation and capabilities from flag service to version service and components

* cleanup unnecessary args

* remove permissions service

* un-nest (some) modules

* simplify overview test so logic is easier to follow

* modal test

* update service tests

* change back to 403 because maybe it is permissions related?

* fix tests running on CE

* small cleanup

* fix logic based on feedback

* add logic for hvd specifically, update cluster tests

Author: hellobontempo

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

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

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

@@ -13,7 +13,7 @@
     @text="Secrets Engines"
     data-test-sidebar-nav-link="Secrets Engines"
   />
-  {{#if this.flags.showSecretsSync}}
+  {{#if this.showSecretsSync}}
     <Nav.Link
       @route="vault.cluster.sync"
       @text="Secrets Sync"

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

@@ -12,6 +12,7 @@ export default class SidebarNavClusterComponent extends Component {
   @service version;
   @service auth;
   @service namespace;
+  @service permissions;
 
   get cluster() {
     return this.currentCluster.cluster;
@@ -25,4 +26,19 @@ export default class SidebarNavClusterComponent extends Component {
     // should only return true if we're in the true root namespace
     return this.namespace.inRootNamespace && !this.hasChrootNamespace;
   }
+
+  get showSecretsSync() {
+    // always show for HVD managed clusters
+    if (this.flags.isHvdManaged) return true;
+
+    if (this.flags.secretsSyncIsActivated) {
+      // activating the feature requires different permissions than using the feature.
+      // we want to show the link to allow activation regardless of permissions to sys/sync
+      // and only check permissions if the feature has been activated
+      return this.permissions.hasNavPermission('sync');
+    }
+
+    // otherwise we show the link depending on whether or not the feature exists
+    return this.version.hasSecretsSync;
+  }
 }

ui/app/services/flags.ts

@@ -7,12 +7,9 @@ import Service, { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { keepLatestTask } from 'ember-concurrency';
 import { DEBUG } from '@glimmer/env';
-import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
 
 import type Store from '@ember-data/store';
 import type VersionService from 'vault/services/version';
-import type PermissionsService from 'vault/services/permissions';
-import type CapabilitiesModel from 'vault/models/capabilities';
 
 const FLAGS = {
   vaultCloudNamespace: 'VAULT_CLOUD_ADMIN_NAMESPACE',
@@ -24,10 +21,9 @@ const FLAGS = {
  * The activation-flags endpoint returns which features are enabled.
  */
 
-export default class flagsService extends Service {
+export default class FlagsService extends Service {
   @service declare readonly version: VersionService;
   @service declare readonly store: Store;
-  @service declare readonly permissions: PermissionsService;
 
   @tracked activatedFlags: string[] = [];
   @tracked featureFlags: string[] = [];
@@ -36,6 +32,7 @@ export default class flagsService extends Service {
     return this.featureFlags?.includes(FLAGS.vaultCloudNamespace);
   }
 
+  // for non-managed clusters the root namespace path is technically an empty string so we return null
   get hvdManagedNamespaceRoot(): string | null {
     return this.isHvdManaged ? 'admin' : null;
   }
@@ -81,31 +78,4 @@ export default class flagsService extends Service {
   fetchActivatedFlags() {
     return this.getActivatedFlags.perform();
   }
-
-  @lazyCapabilities(apiPath`sys/activation-flags/secrets-sync/activate`)
-  declare secretsSyncActivatePath: CapabilitiesModel;
-
-  get canActivateSecretsSync() {
-    return (
-      this.secretsSyncActivatePath.get('canCreate') !== false ||
-      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/version.js

@@ -48,7 +48,14 @@ export default class VersionService extends Service {
   }
 
   get hasSecretsSync() {
-    return this.features.includes('Secrets Sync');
+    const isEnterprise = this.isEnterprise;
+    const isHvdManaged = this.flags.isHvdManaged;
+    const onLicense = this.features.includes('Secrets Sync');
+
+    if (!isEnterprise) return false;
+    if (isHvdManaged) return true;
+    if (isEnterprise && onLicense) return true;
+    return false;
   }
 
   get versionDisplay() {

ui/lib/sync/addon/components/secrets/page/overview.hbs

@@ -2,26 +2,26 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 }}
-{{#unless @isActivated}}
-  {{#if (or @licenseHasSecretsSync @isHvdManaged)}}
+{{#unless this.flags.secretsSyncIsActivated}}
+  {{#if this.version.hasSecretsSync}}
     {{#unless this.hideOptIn}}
       {{! Allows users to dismiss activation banner if they have permissions to activate. }}
       <Hds::Alert
         @type="inline"
         @color="warning"
-        @onDismiss={{if this.flags.canActivateSecretsSync (fn (mut this.hideOptIn) true) undefined}}
+        @onDismiss={{if @canActivateSecretsSync (fn (mut this.hideOptIn) true) undefined}}
         data-test-secrets-sync-opt-in-banner
         as |A|
       >
         <A.Title>Enable Secrets Sync feature</A.Title>
         <A.Description data-test-secrets-sync-opt-in-banner-description>To use this feature, specific activation is required.
           {{if
-            this.flags.canActivateSecretsSync
+            @canActivateSecretsSync
             "Please review the feature documentation and
           enable it. If you're upgrading from beta, your previous data will be accessible after activation."
             "Please contact your administrator to activate."
           }}</A.Description>
-        {{#if this.flags.canActivateSecretsSync}}
+        {{#if @canActivateSecretsSync}}
           <A.Button
             @text="Enable"
             @color="secondary"
@@ -211,14 +211,13 @@
     </OverviewCard>
   </div>
 {{else}}
-  <Secrets::LandingCta @isActivated={{@isActivated}} />
+  <Secrets::LandingCta @isActivated={{this.flags.secretsSyncIsActivated}} />
 {{/if}}
 
 {{#if this.showActivateSecretsSyncModal}}
   <Secrets::SyncActivationModal
     @onClose={{fn (mut this.showActivateSecretsSyncModal) false}}
     @onError={{this.onModalError}}
     @onConfirm={{this.clearActivationErrors}}
-    @isHvdManaged={{@isHvdManaged}}
   />
 {{/if}}

ui/lib/sync/addon/components/secrets/page/overview.ts

@@ -21,9 +21,6 @@ import type SyncDestinationModel from 'vault/vault/models/sync/destination';
 interface Args {
   destinations: Array<SyncDestinationModel>;
   totalVaultSecrets: number;
-  isActivated: boolean;
-  licenseHasSecretsSync: boolean;
-  isHvdManaged: boolean;
 }
 
 export default class SyncSecretsDestinationsPageComponent extends Component<Args> {
@@ -73,7 +70,7 @@ export default class SyncSecretsDestinationsPageComponent extends Component<Args
 
     const errors = [errorMsg];
 
-    if (this.args.isHvdManaged) {
+    if (this.flags.isHvdManaged) {
       errors.push(
         'Secrets Sync is available for Plus tier clusters only. Please check the tier of your cluster to enable Secrets Sync.'
       );

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

@@ -10,21 +10,22 @@ import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
 import errorMessage from 'vault/utils/error-message';
 
+import type FlagsService from 'vault/services/flags';
 import type FlashMessageService from 'vault/services/flash-messages';
-import type Store from '@ember-data/store';
 import type RouterService from '@ember/routing/router-service';
+import type Store from '@ember-data/store';
 
 interface Args {
   onClose: () => void;
   onError: (errorMessage: string) => void;
   onConfirm: () => void;
-  isHvdManaged: boolean;
 }
 
 export default class SyncActivationModal extends Component<Args> {
+  @service declare readonly flags: FlagsService;
   @service declare readonly flashMessages: FlashMessageService;
-  @service declare readonly store: Store;
   @service('app-router') declare readonly router: RouterService;
+  @service declare readonly store: Store;
 
   @tracked hasConfirmedDocs = false;
 
@@ -34,9 +35,10 @@ export default class SyncActivationModal extends Component<Args> {
     // clear any previous errors in the parent component
     this.args.onConfirm();
 
-    // must return null instead of root for non managed cluster.
-    // child namespaces are not sent.
-    const namespace = this.args.isHvdManaged ? 'admin' : null;
+    // sync activation is managed by the root/administrative namespace so child namespaces are not sent.
+    // for non-managed clusters the root namespace path is technically an empty string so we pass null
+    // otherwise we pass 'admin' if HVD managed.
+    const namespace = this.flags.hvdManagedNamespaceRoot;
 
     try {
       yield this.store

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

@@ -6,27 +6,29 @@
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
 import { hash } from 'rsvp';
+import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
 
 import type FlagsService from 'vault/services/flags';
 import type RouterService from '@ember/routing/router-service';
 import type Store from '@ember-data/store';
 import type VersionService from 'vault/services/version';
+import type CapabilitiesModel from 'vault/models/capabilities';
 
 export default class SyncSecretsOverviewRoute extends Route {
   @service('app-router') declare readonly router: RouterService;
   @service declare readonly store: Store;
   @service declare readonly flags: FlagsService;
   @service declare readonly version: VersionService;
 
+  @lazyCapabilities(apiPath`sys/activation-flags/secrets-sync/activate`)
+  declare syncPath: CapabilitiesModel;
+
   async model() {
     const isActivated = this.flags.secretsSyncIsActivated;
-    const licenseHasSecretsSync = this.version.hasSecretsSync;
-    const isHvdManaged = this.flags.isHvdManaged;
 
     return hash({
-      licenseHasSecretsSync,
-      isActivated,
-      isHvdManaged,
+      canActivateSecretsSync:
+        this.syncPath.get('canCreate') !== false || this.syncPath.get('canUpdate') !== false,
       destinations: isActivated ? this.store.query('sync/destination', {}).catch(() => []) : [],
       associations: isActivated
         ? this.store
@@ -38,7 +40,7 @@ export default class SyncSecretsOverviewRoute extends Route {
   }
 
   redirect() {
-    if (!this.flags.showSecretsSync) {
+    if (!this.version.hasSecretsSync) {
       this.router.replaceWith('vault.cluster.dashboard');
     }
   }

ui/lib/sync/addon/templates/secrets/overview.hbs

@@ -6,7 +6,5 @@
 <Secrets::Page::Overview
   @destinations={{this.model.destinations}}
   @totalVaultSecrets={{this.model.associations.total_secrets}}
-  @isActivated={{this.model.isActivated}}
-  @licenseHasSecretsSync={{this.model.licenseHasSecretsSync}}
-  @isHvdManaged={{this.model.isHvdManaged}}
+  @canActivateSecretsSync={{this.model.canActivateSecretsSync}}
 />