[VAULT-35044] UI: implement action buttons in updated namespace picker (#30140)

Author: beagins

ui/app/components/namespace-picker.hbs

@@ -5,21 +5,19 @@ SPDX-License-Identifier: BUSL-1.1
 
 <div class="namespace-picker" ...attributes>
   <Hds::Form::SuperSelect::Single::Field
+    @afterOptionsComponent={{component "namespace-picker/after-options" loadOptions=this.loadOptions}}
     @ariaLabel="Namespace"
     @onChange={{this.onChange}}
     @options={{this.options}}
     @placeholder="Search"
     @searchEnabled={{true}}
     @selected={{this.selected}}
     @selectedItemComponent={{component "namespace-picker/selected-option"}}
+    @showAfterOptions={{this.showAfterOptions}}
     @verticalPosition="above"
     data-test-namespace-toggle
     as |F|
   >
-    <F.Options>
-      {{#let F.options as |option|}}
-        <span data-test-namespace-link="{{option.label}}">{{option.label}}</span>
-      {{/let}}
-    </F.Options>
+    <F.Options>{{F.options.label}}</F.Options>
   </Hds::Form::SuperSelect::Single::Field>
 </div>

ui/app/components/namespace-picker.js

@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
+import { isEmpty } from '@ember/utils';
 
 /**
  * @module NamespacePicker
@@ -21,6 +22,11 @@ import { service } from '@ember/service';
 
 export default class NamespacePicker extends Component {
   @service namespace;
+  @service router;
+  @service store;
+
+  // Show/hide refresh & manage namespaces buttons
+  @tracked showAfterOptions = false;
 
   @tracked selected = {};
   @tracked options = [];
@@ -30,17 +36,20 @@ export default class NamespacePicker extends Component {
     this.loadOptions();
   }
 
+  // TODO make private when converting from js to ts
   #matchesPath(option, currentNamespace) {
     // TODO: Revisit. A hardcoded check for "path" & "/path" seems hacky, but it fixes a breaking test:
     //  "Acceptance | Enterprise | namespaces: it shows nested namespaces if you log in with a namespace starting with a /"
     //  My assumption is that namespace shouldn't start with a "/", but is this a HVD thing? or is the test outdated?
     return option?.path === currentNamespace?.path || `/${option?.path}` === currentNamespace?.path;
   }
 
+  // TODO make private when converting from js to ts
   #getSelected(options, currentNamespace) {
     return options.find((option) => this.#matchesPath(option, currentNamespace));
   }
 
+  // TODO make private when converting from js to ts
   #getOptions(namespace) {
     /* Each namespace option has 3 properties: { id, path, and label }
      *   - id: node / namespace name (displayed when the namespace picker is closed)
@@ -64,6 +73,40 @@ export default class NamespacePicker extends Component {
     ];
   }
 
+  // TODO make private when converting from js to ts
+  #getNamespaceLink(location, namespace) {
+    const origin = this.#getOrigin(location);
+
+    let queryParams = '';
+    if (!isEmpty(namespace.path)) {
+      const encodedNamespace = encodeURIComponent(namespace.path);
+      queryParams = `?namespace=${encodedNamespace}`;
+    }
+
+    // The full URL/origin is required so that the page is reloaded.
+    return `${origin}/ui/vault/dashboard${queryParams}`;
+  }
+
+  // TODO make private when converting from js to ts
+  #getOrigin(location) {
+    return location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
+  }
+
+  @action
+  async fetchListCapability() {
+    // TODO: Revist. This logic was carried over from previous component implmenetation.
+    //  When the user doesn't have this capability, shouldn't we just hide the "Manage" button,
+    //  instead of hiding both the "Manage" and "Refresh List" buttons?
+    try {
+      await this.store.findRecord('capabilities', 'sys/namespaces/');
+      this.showAfterOptions = true;
+    } catch (e) {
+      // If error out on findRecord call it's because you don't have permissions
+      // and therefore don't have permission to manage namespaces
+      this.showAfterOptions = false;
+    }
+  }
+
   @action
   async loadOptions() {
     // TODO: namespace service's findNamespacesForUser will never throw an error.
@@ -72,11 +115,13 @@ export default class NamespacePicker extends Component {
 
     this.options = this.#getOptions(this.namespace);
     this.selected = this.#getSelected(this.options, this.namespace);
+
+    await this.fetchListCapability();
   }
 
   @action
-  async onChange(selectedOption) {
-    // TODO: redirect to selected namespace
-    this.selected = selectedOption;
+  async onChange(selected) {
+    this.selected = selected;
+    this.router.transitionTo('vault.cluster.dashboard', { queryParams: { namespace: selected.path } });
   }
 }

ui/app/components/namespace-picker/after-options.hbs

@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+<div>
+  <Hds::Button
+    @color="secondary"
+    @text="Refresh List"
+    {{on "click" (action "refreshNamespaceList")}}
+    data-test-refresh-namespaces
+  />
+  <Hds::Button @color="secondary" @text="Manage" @icon="settings" @route="vault.cluster.access.namespaces" />
+</div>

ui/app/components/namespace-picker/after-options.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+interface AfterOptionsArgs {
+  loadOptions: () => void;
+}
+
+/**
+ * @module AfterOptions
+ * @description component is used to display action items inside the namespace picker dropdown.
+ *  The "Manage" button directs the user to the namespace management page.
+ *  The "Refresh List" button refrehes the list of namespaces in the dropdown.
+ *
+ * @example
+ * @afterOptionsComponent={{component "namespace-picker/after-options" loadOptions=this.loadOptions}}
+ */
+
+export default class AfterOptions extends Component<AfterOptionsArgs> {
+  @action
+  refreshNamespaceList() {
+    this.args?.loadOptions();
+  }
+}

ui/tests/acceptance/enterprise-namespaces-test.js

@@ -24,7 +24,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await login(token);
     await click('[data-test-namespace-toggle]');
     assert.dom('[aria-selected="true"]').hasText('root', 'root renders as current namespace');
-    assert.dom('[data-test-namespace-link]').exists({ count: 1 }, 'Only the root namespace exists');
+    assert.dom('[data-option-index]').exists({ count: 1 }, 'Only the root namespace exists');
   });
 
   test('it shows nested namespaces if you log in with a namespace starting with a /', async function (assert) {
@@ -42,10 +42,10 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
       // this is usually triggered when creating a ns in the form -- trigger a reload of the namespaces manually
       await click('[data-test-namespace-toggle]');
       await click('[data-test-refresh-namespaces]');
-      await waitFor(`[data-test-namespace-link="${targetNamespace}"]`);
+      await waitFor(`[data-option-index="${i + 1}"]`);
       // check that the full namespace path, like "beep/boop", shows in the toggle display
       assert
-        .dom(`[data-test-namespace-link="${targetNamespace}"]`)
+        .dom(`[data-option-index="${i + 1}"]`)
         .hasText(targetNamespace, `shows the namespace ${targetNamespace} in the toggle component`);
       // because quint does not like page reloads, visiting url directly instead of clicking on namespace in toggle
       await visit(url);
@@ -57,8 +57,8 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await waitFor('[data-test-current-namespace]');
     assert.dom('[data-test-current-namespace]').hasText('beep/boop/');
     assert
-      .dom('[data-test-namespace-link="beep/boop/bop"]')
-      .exists('renders the link to the nested namespace');
+      .dom('[data-option-index="3"]')
+      .hasText('beep/boop/bop', 'shows the full namespace path in the toggle');
   });
 
   test('it shows the regular namespace toolbar when not managed', async function (assert) {