[VAULT-35469] UI: navigate to namespace on enter/return (#30372)

* [VAULT-35469] UI: navigate to namespace on enter/return

* address github copilot suggestions

* address PR comments

Author: beagins

ui/app/components/namespace-picker.hbs

@@ -12,11 +12,20 @@
       <Hds::Form::TextInput::Field
         @value={{this.searchInput}}
         @type="search"
+        aria-label="Search namespaces"
         placeholder="Search"
+        {{on "keydown" this.onKeyDown}}
         {{on "input" this.onSearchInput}}
+        {{did-insert this.focusSearchInput}}
       />
     </D.Generic>
 
+    {{#if this.hasSearchInput}}
+      <D.Generic>
+        {{this.searchInputHelpText}}
+      </D.Generic>
+    {{/if}}
+
     <D.Separator />
 
     <D.Generic>

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 { KEYS } from 'core/utils/keyboard-keys';
 
 /**
  * @module NamespacePicker
@@ -30,6 +31,8 @@ export default class NamespacePicker extends Component {
 
   @tracked allNamespaces = [];
   @tracked searchInput = '';
+  @tracked searchInputHelpText =
+    "Enter a full path in the search bar and hit the 'Enter' ↵ key to navigate faster.";
   @tracked selected = {};
 
   constructor() {
@@ -72,13 +75,17 @@ export default class NamespacePicker extends Component {
     ];
 
     // Conditionally add the root namespace
-    if (this.auth.authData.userRootNamespace === '') {
+    if (this.auth?.authData?.userRootNamespace === '') {
       options.unshift({ id: 'root', path: '', label: 'root' });
     }
 
     return options;
   }
 
+  get hasSearchInput() {
+    return this.searchInput?.trim().length > 0;
+  }
+
   get namespaceLabel() {
     return this.searchInput === '' ? 'All namespaces' : 'Matching namespaces';
   }
@@ -95,11 +102,6 @@ export default class NamespacePicker extends Component {
     }
   }
 
-  @action
-  onSearchInput(event) {
-    this.searchInput = event.target.value;
-  }
-
   @action
   async fetchListCapability() {
     // TODO: Revist. This logic was carried over from previous component implmenetation.
@@ -115,6 +117,12 @@ export default class NamespacePicker extends Component {
     }
   }
 
+  @action
+  focusSearchInput(element) {
+    // On mount, cursor should default to the search input field
+    element.focus();
+  }
+
   @action
   async loadOptions() {
     // TODO: namespace service's findNamespacesForUser will never throw an error.
@@ -127,15 +135,35 @@ export default class NamespacePicker extends Component {
     await this.fetchListCapability();
   }
 
-  @action
-  async refreshList() {
-    this.searchInput = '';
-    await this.loadOptions();
-  }
-
   @action
   async onChange(selected) {
     this.selected = selected;
     this.router.transitionTo('vault.cluster.dashboard', { queryParams: { namespace: selected.path } });
   }
+
+  @action
+  async onKeyDown(event) {
+    if (event.key === KEYS.ENTER && this.searchInput?.trim()) {
+      const matchingNamespace = this.allNamespaces.find((ns) => ns.label === this.searchInput.trim());
+
+      if (matchingNamespace) {
+        this.selected = matchingNamespace;
+        this.searchInput = '';
+        this.router.transitionTo('vault.cluster.dashboard', {
+          queryParams: { namespace: matchingNamespace.path },
+        });
+      }
+    }
+  }
+
+  @action
+  onSearchInput(event) {
+    this.searchInput = event.target.value;
+  }
+
+  @action
+  async refreshList() {
+    this.searchInput = '';
+    await this.loadOptions();
+  }
 }

ui/lib/core/addon/utils/key-codes.js

@@ -3,6 +3,13 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+/*
+ * DEPRCATED (see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode).
+ *
+ * TODO: Replace all instances with `event.key` (use lib/core/addon/utils/keyboard-keys.ts).
+ * `event.keyCode` is deprecated and will be removed in future versions of browsers.
+ */
+
 // a map of keyCode for use in keyboard event handlers
 export default {
   ENTER: 13,

ui/lib/core/addon/utils/keyboard-keys.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+/**
+ * @module keyboard-keys
+ * @description Utility for mapping key names to their corresponding `event.key` values for use in keyboard event handlers.
+ */
+export enum KEYS {
+  ENTER = 'Enter',
+  ESC = 'Escape',
+  TAB = 'Tab',
+  LEFT = 'ArrowLeft',
+  UP = 'ArrowUp',
+  RIGHT = 'ArrowRight',
+  DOWN = 'ArrowDown',
+  T = 'F5',
+  BACKSPACE = 'Backspace',
+}

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

@@ -3,7 +3,17 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import { click, settled, visit, fillIn, currentURL, waitFor, findAll } from '@ember/test-helpers';
+import {
+  click,
+  settled,
+  visit,
+  fillIn,
+  currentURL,
+  waitFor,
+  findAll,
+  triggerKeyEvent,
+  find,
+} from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { runCmd, createNS } from 'vault/tests/helpers/commands';
@@ -28,58 +38,82 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     fetchSpy.restore();
   });
 
-  test('it filters namespaces based on search input', async function (assert) {
-    assert.expect(7);
+  test('it focuses the search input field when the component is loaded', async function (assert) {
+    await click(NAMESPACE_PICKER_SELECTORS.toggle);
+
+    // Verify that the search input field is focused
+    const searchInput = find(NAMESPACE_PICKER_SELECTORS.searchInput);
+    assert.strictEqual(
+      document.activeElement,
+      searchInput,
+      'The search input field is focused on component load'
+    );
+  });
 
+  test('it navigates to the matching namespace when Enter is pressed', async function (assert) {
     await click(NAMESPACE_PICKER_SELECTORS.toggle);
 
-    // Verify all namespaces are displayed initially
-    assert.dom(NAMESPACE_PICKER_SELECTORS.link()).exists('Namespace link(s) exist');
+    // Simulate typing into the search input
+    await fillIn(NAMESPACE_PICKER_SELECTORS.searchInput, 'beep/boop');
+    assert
+      .dom(NAMESPACE_PICKER_SELECTORS.searchInput)
+      .hasValue('beep/boop', 'The search input field has the correct value');
+
+    // Simulate pressing Enter
+    await triggerKeyEvent(NAMESPACE_PICKER_SELECTORS.searchInput, 'keydown', 'Enter');
+
+    // Verify navigation to the matching namespace
     assert.strictEqual(
-      findAll(NAMESPACE_PICKER_SELECTORS.link()).length,
-      5,
-      'All namespaces are displayed initially'
+      this.owner.lookup('service:router').currentURL,
+      '/vault/dashboard?namespace=beep%2Fboop',
+      'Navigates to the correct namespace when Enter is pressed'
     );
+  });
+
+  test('it filters namespaces based on search input', async function (assert) {
+    await click(NAMESPACE_PICKER_SELECTORS.toggle);
+
+    // Verify all namespaces are displayed initially
+    assert.dom(NAMESPACE_PICKER_SELECTORS.link()).exists('Namespace link(s) exist');
+    const allNamespaces = findAll(NAMESPACE_PICKER_SELECTORS.link());
 
     // Verify the search input field exists
-    assert.dom('[type="search"]').exists('The namespace search field exists');
+    assert.dom(NAMESPACE_PICKER_SELECTORS.searchInput).exists('The namespace search field exists');
 
     // Verify 3 namespaces are displayed after searching for "beep"
-    await fillIn('[type="search"]', 'beep');
+    await fillIn(NAMESPACE_PICKER_SELECTORS.searchInput, 'beep');
     assert.strictEqual(
       findAll(NAMESPACE_PICKER_SELECTORS.link()).length,
       3,
       'Display 3 namespaces matching "beep" after searching'
     );
 
     // Verify 1 namespace is displayed after searching for "bop"
-    await fillIn('[type="search"]', 'bop');
+    await fillIn(NAMESPACE_PICKER_SELECTORS.searchInput, 'bop');
     assert.strictEqual(
       findAll(NAMESPACE_PICKER_SELECTORS.link()).length,
       1,
       'Display 1 namespace matching "bop" after searching'
     );
 
     // Verify no namespaces are displayed after searching for "other"
-    await fillIn('[type="search"]', 'other');
+    await fillIn(NAMESPACE_PICKER_SELECTORS.searchInput, 'other');
     assert.strictEqual(
       findAll(NAMESPACE_PICKER_SELECTORS.link()).length,
       0,
       'No namespaces are displayed after searching for "other"'
     );
 
     // Clear the search input & verify all namespaces are displayed again
-    await fillIn('[type="search"]', '');
+    await fillIn(NAMESPACE_PICKER_SELECTORS.searchInput, '');
     assert.strictEqual(
       findAll(NAMESPACE_PICKER_SELECTORS.link()).length,
-      5,
+      allNamespaces.length,
       'All namespaces are displayed after clearing search input'
     );
   });
 
   test('it updates the namespace list after clicking "Refresh list"', async function (assert) {
-    assert.expect(3);
-
     await click(NAMESPACE_PICKER_SELECTORS.toggle);
 
     // Verify that the namespace list was fetched on load
@@ -108,8 +142,6 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
   });
 
   test('it displays the "Manage" button with the correct URL', async function (assert) {
-    assert.expect(1);
-
     await click(NAMESPACE_PICKER_SELECTORS.toggle);
 
     // Verify the "Manage" button is rendered and has the correct URL
@@ -154,6 +186,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
 
       // check that the full namespace path, like "beep/boop", shows in the toggle display
       await waitFor(NAMESPACE_PICKER_SELECTORS.link(targetNamespace));
+
       assert
         .dom(NAMESPACE_PICKER_SELECTORS.link(targetNamespace))
         .hasText(targetNamespace, `shows the namespace ${targetNamespace} in the toggle component`);
@@ -170,14 +203,12 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     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');
+    const checkIcon = find(`${NAMESPACE_PICKER_SELECTORS.link()} ${GENERAL.icon('check')}`);
+    assert.dom(checkIcon).exists('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');
+    const selectedNamespace = checkIcon?.closest(NAMESPACE_PICKER_SELECTORS.link());
+    assert.dom(selectedNamespace).exists('The selected namespace link exists');
 
     // Verify that the selected namespace has the correct data-test-namespace-link attribute and path value
     assert.strictEqual(

ui/tests/helpers/namespace-picker.js

@@ -7,4 +7,5 @@ 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]',
+  searchInput: 'input[type="search"]',
 };