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

beagins · 2025-04-24T17:18:04Z

Description

What does this PR do?

Navigate directly to namespace on search for valid namespace name and click the Enter/Return key
Enterprise tests passing:

248 tests completed in 182277 milliseconds, with 0 failed, 10 skipped, and 0 todo.
1468 assertions of 1468 passed, 0 failed.

Demo

Screen.Recording.2025-04-24.at.5.11.08.PM.mov

TODO only if you're a HashiCorp employee

Backport Labels: If this fix needs to be backported, use the appropriate backport/ label that matches the desired release branch. Note that in the CE repo, the latest release branch will look like backport/x.x.x, but older release branches will be backport/ent/x.x.x+ent.
- LTS: If this fixes a critical security vulnerability or severity 1 bug, it will also need to be backported to the current LTS versions of Vault. To ensure this, use all available enterprise labels.
ENT Breakage: If this PR either 1) removes a public function OR 2) changes the signature
of a public function, even if that change is in a CE file, double check that
applying the patch for this PR to the ENT repo and running tests doesn't
break any tests. Sometimes ENT only tests rely on public functions in CE
files.
Jira: If this change has an associated Jira, it's referenced either
in the PR description, commit message, or branch name.
RFC: If this change has an associated RFC, please link it in the description.
ENT PR: If this change has an associated ENT PR, please link it in the
description. Also, make sure the changelog is in this PR, not in your ENT PR.

github-actions · 2025-04-24T17:41:13Z

CI Results:
All Go tests succeeded! ✅

Copilot

Pull Request Overview

This PR enhances the namespace picker by enabling direct navigation via the Enter/Return key when a valid namespace is entered. Key changes include:

Adding tests for input focus and navigation behavior in both integration and acceptance suites.
Refactoring the component actions to better handle search input, key events, and list refresh operations.
Updating selector usage to consistently reference the defined searchInput selector.

Reviewed Changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.

File	Description
ui/tests/integration/components/namespace-picker-test.js	Updates tests to use the searchInput selector and adds a focus test
ui/tests/helpers/namespace-picker.js	Adds a new selector for the search input
ui/tests/acceptance/enterprise-namespaces-test.js	Adds tests for input focus and navigation on Enter key press
ui/app/components/namespace-picker.js	Refactors actions to support Enter key navigation and input refresh

Files not reviewed (1)

ui/app/components/namespace-picker.hbs: Language not supported

Comments suppressed due to low confidence (1)

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

Consider using the currenturl("") helper from '@ember/test-helpers' for asserting navigation outcomes instead of accessing the router service directly for consistency with other tests.

assert.strictEqual( this.owner.lookup('service:router').currentURL, '/vault/dashboard?namespace=beep%2Fboop', 'Navigates to the correct namespace when Enter is pressed' );

ui/app/components/namespace-picker.js

github-actions · 2025-04-25T00:17:05Z

Build Results:
All builds succeeded! ✅

Monkeychip · 2025-04-25T15:57:12Z

ui/app/components/namespace-picker.js

@@ -30,6 +31,7 @@ export default class NamespacePicker extends Component {

  @tracked allNamespaces = [];
  @tracked searchInput = '';
+  @tracked searchInputHelpText = 'Enter a full path in the search bar and hit ↵ key to navigate faster.';


This is an a11y question that I'm honestly not sure of the answer. But I know for screen readers it might try to say the back key and can't because it's a symbol. Maybe check with design on the use of this here?

Good catch!! I'll ask design, thank you!!

Monkeychip · 2025-04-25T15:58:49Z

ui/app/components/namespace-picker.js

      options.unshift({ id: 'root', path: '', label: 'root' });
    }

    return options;
  }

+  get hasSearchInput() {
+    return this.searchInput?.trim().length > 0;


I'm curious why we need to trim the input here? Do we expect people will enter a space only?

This is more just due diligence/habit. I can't tell you how many times I've thought, "a user would never..." only to be immediately proved wrong lol

Solid call out. And a note for posterity, I checked with the API — we do not allow spaces in namespaces, so there is no chance someone could intentionally want to search a word with a space at the end.

Monkeychip · 2025-04-25T16:37:26Z

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).


Good catch, if we don't already can you make a ticket for this and throw it in our backlog or add to sustaining?

our copilot prompt caught this one!! 🎉 I'll create a ticket and add it to sustaining

Monkeychip · 2025-04-25T16:39:51Z

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

@@ -28,51 +38,83 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
    fetchSpy.restore();
  });

+  test('it focuses the search input field when the component is loaded', async function (assert) {
+    assert.expect(1);


This is probably a good thing to add to our rules document, but you really only need assert.expect if there's a chance the test could run without all the assertions being hit. This is common when using mirage when you have an assertion inside a this.server.x because if that network request doesn't get hit neither will the assertion and the test could still pass.

In the cases here it appears that all the assertions will be hit, and so we don't need to have the .expect catch.

let me know if that does/doesn't make sense.

ah okay that's good to know - I thought it as a fail-safe pattern because I've seen it a lot, but that makes sense!

Monkeychip · 2025-04-28T17:30:41Z

ui/app/components/namespace-picker.hbs

        {{on "input" this.onSearchInput}}
+        {{did-insert this.focusSearchInput}}


I'm guessing that the focus on opening this was previous behavior? If so, I can't say we always did focus things according to best a11y practices. Looking at the hds pattens on focus, it might be good to review that we can indeed follow them.

If this was old behavior, maybe we should revisit this with Design's input (not blocking here, but come back with a ticket after discussion)? What are your thoughts?

Thanks for linking this! previously there was no focus behavior set because there was no search input field in the namespace picker. but it feels natural that, when the user opens the namespace picker, focus should default to the search input. it potentially reduces clicks, allowing the user to immediately type in the search or tab to the namespaces in the list. I don't see anything re: this specific use case outlined in the a11y: focus management section, but it also doesn't seem to contradict the patterns outlined.

Monkeychip

Nothing blocking, one question about focus on insert, but if that needs to be addressed we can do it in another ticket.

* [VAULT-35469] UI: navigate to namespace on enter/return * address github copilot suggestions * address PR comments

beagins added this to the 1.20.0-rc milestone Apr 24, 2025

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label Apr 24, 2025

beagins added the ui label Apr 24, 2025

beagins requested a review from Copilot April 24, 2025 19:58

Copilot AI reviewed Apr 24, 2025

View reviewed changes

ui/app/components/namespace-picker.js Outdated Show resolved Hide resolved

beagins force-pushed the VAULT-34216/namespace-picker-feature-branch branch from 7f2606c to 678c2ef Compare April 24, 2025 21:16

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

3f0a323

beagins force-pushed the VAULT-34216/nav-on-enter branch from c7e51a5 to 3f0a323 Compare April 24, 2025 21:18

address github copilot suggestions

e0d9884

beagins marked this pull request as ready for review April 25, 2025 00:13

beagins requested a review from a team as a code owner April 25, 2025 00:13

Monkeychip reviewed Apr 25, 2025

View reviewed changes

address PR comments

94ffbbf

Monkeychip reviewed Apr 28, 2025

View reviewed changes

Monkeychip approved these changes Apr 28, 2025

View reviewed changes

beagins merged commit f53662c into VAULT-34216/namespace-picker-feature-branch Apr 28, 2025
25 checks passed

beagins deleted the VAULT-34216/nav-on-enter branch April 28, 2025 18:52

beagins added a commit that referenced this pull request Apr 29, 2025

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

da316fa

* [VAULT-35469] UI: navigate to namespace on enter/return * address github copilot suggestions * address PR comments

beagins added a commit that referenced this pull request Apr 29, 2025

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

1ac19c9

* [VAULT-35469] UI: navigate to namespace on enter/return * address github copilot suggestions * address PR comments

beagins added a commit that referenced this pull request Apr 29, 2025

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

90442d1

* [VAULT-35469] UI: navigate to namespace on enter/return * address github copilot suggestions * address PR comments

beagins added a commit that referenced this pull request Apr 30, 2025

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

07dc016

* [VAULT-35469] UI: navigate to namespace on enter/return * address github copilot suggestions * address PR comments

beagins added a commit that referenced this pull request May 1, 2025

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

a0f7f17

* [VAULT-35469] UI: navigate to namespace on enter/return * address github copilot suggestions * address PR comments

beagins added a commit that referenced this pull request May 1, 2025

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

b261f58

* [VAULT-35469] UI: navigate to namespace on enter/return * address github copilot suggestions * address PR comments

beagins added a commit that referenced this pull request May 5, 2025

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

40d07a1

		{{on "input" this.onSearchInput}}
		{{did-insert this.focusSearchInput}}

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

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

Uh oh!

Conversation

beagins commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Demo

TODO only if you're a HashiCorp employee

Uh oh!

github-actions bot commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

github-actions bot commented Apr 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

beagins Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Monkeychip left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

beagins commented Apr 24, 2025 •

edited

Loading

github-actions bot commented Apr 24, 2025 •

edited

Loading

beagins Apr 25, 2025 •

edited

Loading