[VAULT-35046] Show namespace count label

ui/app/components/namespace-picker.hbs

@@ -4,20 +4,32 @@ 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={{this.selectedNamespace}} data-test-namespace-toggle />
+
+    <D.Title @text={{component "namespace-picker/title" count=this.options.length}} />
+
+    {{#each this.options as |option|}}
+      <D.Checkmark
+        @selected={{this.isSelected option}}
+        {{on "click" (action "onChange" option)}}
+        data-test-namespace-link={{option.path}}
+        data-test-current-namespace={{this.isSelected option}}
+      >
+        {{option.label}}
+      </D.Checkmark>
+    {{/each}}
+
+    <D.Footer @hasDivider={{true}}>
+      <Hds::Button
+        @color="secondary"
+        @text="Refresh List"
+        {{on "click" (action "loadOptions")}}
+        data-test-refresh-namespaces
+      />
+      <Hds::Button @color="secondary" @text="Manage" @icon="settings" @route="vault.cluster.access.namespaces" />
+    </D.Footer>
+
+  </Hds::Dropdown>
 </div>

ui/app/components/namespace-picker.js

@@ -30,6 +30,9 @@ export default class NamespacePicker extends Component {
   @tracked selected = {};
   @tracked options = [];
 
+  @tracked isSelected = (option) => this.selected?.id === option?.id;
+  @tracked selectedNamespace = () => this.selected?.id || '-';
+
   constructor() {
     super(...arguments);
     this.loadOptions();

ui/app/components/namespace-picker/title.hbs

@@ -0,0 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+<div>
+  <span>{{this.scope}} Namespaces </span>
+  <Hds::Badge @text={{this.count}} @value={{this.count}} />
+</div>

ui/app/components/namespace-picker/title.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+interface TitleArgs {
+  all: boolean;
+  count: () => void;
+}
+
+/**
+ * @module Title
+ * @description Component used to display title in the namespace-picker.
+ * By default, display "All Namespaces" with the total count.
+ * When a search is entered, display "Matching Namespaces" with the count of matching results.
+ *
+ * @example
+ * {{component "namespace-picker/title" count=this.options.count}}
+ */
+
+export default class Title extends Component<TitleArgs> {
+  @tracked count = this.args?.count;
+  @tracked scope = this.args?.all ? 'All' : 'Matching';
+}

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

@@ -24,8 +24,8 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await logout.visit();
     await authPage.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');
+    assert.dom('[data-test-current-namespace]').hasText('root', 'root renders as current namespace');
+    assert.dom('[data-test-namespace-link]').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) {
@@ -43,10 +43,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-option-index="${i + 1}"]`);
+      await waitFor(`[data-test-namespace-link="${targetNamespace}"]`);
       // check that the full namespace path, like "beep/boop", shows in the toggle display
       assert
-        .dom(`[data-option-index="${i + 1}"]`)
+        .dom(`[data-test-namespace-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);
@@ -59,13 +59,13 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await authPage.tokenInput('root').submit();
     await settled();
     await click('[data-test-namespace-toggle]');
-    await waitFor('[aria-selected="true"]');
+    await waitFor('[data-test-current-namespace]');
     assert
-      .dom('[aria-selected="true"]')
+      .dom('[data-test-current-namespace]')
       .hasText('beep/boop', 'current namespace does not begin or end with /');
     assert
-      .dom('[data-option-index="3"]')
-      .hasText('beep/boop/bop', 'shows the full namespace path in the toggle');
+      .dom('[data-test-namespace-link="beep/boop/bop"]')
+      .exists('renders the link to the nested namespace');
   });
 
   test('it shows the regular namespace toolbar when not managed', async function (assert) {