[VAULT-35046] replace Hds::SuperSelect with Hds::Dropdown, show namespace count label (#30183)

* [VAULT-35046] Show namespace count label; use Hds::Dropdown instead of Hds::Superselect

* address misc pr comments

* update tests

* address PR comment

* Update ui/app/components/namespace-picker.hbs

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

* Update ui/app/components/namespace-picker.hbs

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

* address PR comments: update tests

* use getter for namespace label

---------

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

Author: beagins

ui/app/components/namespace-picker.hbs

@@ -1,23 +1,35 @@
 {{!
-Copyright (c) HashiCorp, Inc.
-SPDX-License-Identifier: BUSL-1.1
+  Copyright (c) HashiCorp, Inc.
+  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>{{F.options.label}}</F.Options>
-  </Hds::Form::SuperSelect::Single::Field>
+  <Hds::Dropdown @enableCollisionDetection={{true}} as |D|>
+
+    <D.ToggleButton @icon="org" @text={{or this.selected.id "-"}} data-test-namespace-toggle />
+
+    <D.Generic>
+      {{this.namespaceLabel}}
+      <Hds::BadgeCount @text={{or this.options.length 0}} />
+    </D.Generic>
+
+    {{#each this.options as |option|}}
+      <D.Checkmark
+        @selected={{eq option.id this.selected.id}}
+        {{on "click" (fn this.onChange option)}}
+        data-test-namespace-link={{option.path}}
+      >
+        {{option.label}}
+      </D.Checkmark>
+    {{/each}}
+
+    {{! Check if the user has permissions to list namespaces. If true, display additional footer options like "Refresh list" and "Manage". }}
+    {{#if this.hasListPermissions}}
+      <D.Footer @hasDivider={{true}}>
+        <Hds::Button @color="secondary" @text="Refresh list" {{on "click" this.loadOptions}} data-test-refresh-namespaces />
+        <Hds::Button @color="secondary" @text="Manage" @icon="settings" @route="vault.cluster.access.namespaces" />
+      </D.Footer>
+    {{/if}}
+
+  </Hds::Dropdown>
 </div>

ui/app/components/namespace-picker.js

@@ -25,10 +25,11 @@ export default class NamespacePicker extends Component {
   @service store;
 
   // Show/hide refresh & manage namespaces buttons
-  @tracked showAfterOptions = false;
+  @tracked hasListPermissions = false;
 
   @tracked selected = {};
   @tracked options = [];
+  @tracked searchInput = '';
 
   constructor() {
     super(...arguments);
@@ -72,18 +73,22 @@ export default class NamespacePicker extends Component {
     ];
   }
 
+  get namespaceLabel() {
+    return this.searchInput === '' ? 'All namespaces' : 'Matching namespaces';
+  }
+
   @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;
+      this.hasListPermissions = 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;
+      this.hasListPermissions = false;
     }
   }
 

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

@@ -9,6 +9,8 @@ import { setupApplicationTest } from 'ember-qunit';
 import { runCmd, createNS } from 'vault/tests/helpers/commands';
 import { login, loginNs, logout } from 'vault/tests/helpers/auth/auth-helpers';
 import { AUTH_FORM } from 'vault/tests/helpers/auth/auth-form-selectors';
+import { GENERAL } from '../helpers/general-selectors';
+import { NAMESPACE_PICKER_SELECTORS } from '../helpers/namespace-picker';
 
 module('Acceptance | Enterprise | namespaces', function (hooks) {
   setupApplicationTest(hooks);
@@ -22,15 +24,18 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await runCmd(createNS(ns), false);
     const token = await runCmd(`write -field=client_token auth/token/create policies=default`);
     await login(token);
-    await click('[data-test-namespace-toggle]');
-    assert.dom('[aria-selected="true"]').hasText('root', 'root renders as current namespace');
-    assert.dom('[data-option-index]').exists({ count: 1 }, 'Only the root namespace exists');
+    await click(NAMESPACE_PICKER_SELECTORS.toggle);
+    assert.dom(NAMESPACE_PICKER_SELECTORS.link()).hasText('root', 'root renders as current namespace');
+    assert
+      .dom(`${NAMESPACE_PICKER_SELECTORS.link()} svg${GENERAL.icon('check')}`)
+      .exists('The root namespace is selected');
   });
 
+  // TODO: Is this test description still accurate?
   test('it shows nested namespaces if you log in with a namespace starting with a /', async function (assert) {
-    assert.expect(5);
+    assert.expect(6);
 
-    await click('[data-test-namespace-toggle]');
+    await click(NAMESPACE_PICKER_SELECTORS.toggle);
 
     const nses = ['beep', 'boop', 'bop'];
     for (const [i, ns] of nses.entries()) {
@@ -40,25 +45,40 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
       const targetNamespace = nses.slice(0, i + 1).join('/');
       const url = `/vault/secrets?namespace=${targetNamespace}`;
       // 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-option-index="${i + 1}"]`);
+      await click(NAMESPACE_PICKER_SELECTORS.toggle);
+      await click(NAMESPACE_PICKER_SELECTORS.refreshList);
+      await waitFor(NAMESPACE_PICKER_SELECTORS.link(targetNamespace));
       // check that the full namespace path, like "beep/boop", shows in the toggle display
       assert
-        .dom(`[data-option-index="${i + 1}"]`)
+        .dom(NAMESPACE_PICKER_SELECTORS.link(targetNamespace))
         .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);
     }
 
     await loginNs('/beep/boop');
     await settled();
-    await click('[data-test-namespace-toggle]');
-    await waitFor('[data-test-current-namespace]');
-    assert.dom('[data-test-current-namespace]').hasText('beep/boop/');
-    assert
-      .dom('[data-option-index="3"]')
-      .hasText('beep/boop/bop', 'shows the full namespace path in the toggle');
+
+    // Open the namespace picker & wait for it to render
+    await click(NAMESPACE_PICKER_SELECTORS.toggle);
+    await waitFor(`svg${GENERAL.icon('check')}`);
+
+    // Find the selected element with the check icon & ensure it exists
+    const checkIcon = document.querySelector(
+      `${NAMESPACE_PICKER_SELECTORS.link()} svg${GENERAL.icon('check')}`
+    );
+    assert.ok(checkIcon, 'A selected namespace link with the check icon exists');
+
+    // Get the selected namespace with the data-test-namespace-link attribute & ensure it exists
+    const selectedNamespace = checkIcon.closest(NAMESPACE_PICKER_SELECTORS.link());
+    assert.ok(selectedNamespace, 'The selected namespace link exists');
+
+    // Verify that the selected namespace has the correct data-test-namespace-link attribute and path value
+    assert.strictEqual(
+      selectedNamespace.getAttribute('data-test-namespace-link'),
+      'beep/boop',
+      'The current namespace does not begin or end with /'
+    );
   });
 
   test('it shows the regular namespace toolbar when not managed', async function (assert) {

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+export const NAMESPACE_PICKER_SELECTORS = {
+  link: (link) => (link ? `[data-test-namespace-link="${link}"]` : '[data-test-namespace-link]'),
+  refreshList: '[data-test-refresh-namespaces]',
+  toggle: '[data-test-namespace-toggle]',
+};