[VAULT-34482] UI: Update Namespace Picker to use HDS Super Select component #30068

beagins · 2025-03-27T23:49:47Z

Description

ℹ️ NOTE: This branch is merging into a feature sidebranch (not `main`)

Changelog update
Replace Picker w/ HDS Super Select

Outstanding items that will be addressed in separate PRs before the feature side branch is merged to main:

Implement Refresh Namespaces Button
Implement Manage Namespaces Button works
Redirect to Namespace on click
All/Matching Namespaces Label w/ Count Badge
"You are logged in with a root token and will have to re-authenticate when switching namespaces."
Expanded namespace picker width to support long namespace paths
Tab to auto-complete namespace path
Styling to match Figma designs
Add test coverage
Manual testing

Screenshots

⚠️ NOTE: The current implementation looks ugly, styling will be addressed in a separate PR

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-03-28T00:14:02Z

CI Results:
All Go tests succeeded! ✅

beagins · 2025-03-28T00:29:51Z

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

@@ -47,7 +47,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
      // check that the single namespace "beep" or "boop" not "beep/boop" shows in the toggle display
      assert
        .dom(`[data-test-namespace-link="${targetNamespace}"]`)
-        .hasText(ns, `shows the namespace ${ns} in the toggle component`);
+        .hasText(targetNamespace, `shows the namespace ${targetNamespace} in the toggle component`);


Note: we are now displaying the full namespace path instead of just the node name inside of the namespace picker dropdown.

After / Before:

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

beagins · 2025-03-28T00:36:07Z

ui/app/components/namespace-picker.js

+    // 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;


Note: added TODO to revisit this in a separate PR. I don't like this solution and want to dig deeper to understand if the referenced test is still relevant.

This is a good question - I wonder if this is to account for when users input /mynamespace in the login form (which I think peopled do sometimes...) but I agree it's worth looking into. This isn't the PR the test was added, but it does show a forward slash in the namespace input #10588

There have been a lot of change since then and i think we sanitize consistently and namespaces shouldn't be prepended with / but again would be good to investigate!

beagins · 2025-03-28T00:38:05Z

ui/app/components/namespace-picker.js

+     */
+    return [
+      // TODO: Some users (including HDS Admin User) should never see the root namespace. Address this in a followup PR.
+      { id: 'root', path: '', label: 'root' },


Note: added TODO to revisit this,root should not be hardcoded. Will address this in a separate PR.

beagins · 2025-03-28T00:38:57Z

ui/app/components/namespace-picker.js

+  async loadOptions() {
+    // TODO: namespace service's findNamespacesForUser will never throw an error.
+    //  Check with design to determine if we should continue to ignore or handle an error situation here.
+    await this.namespace?.findNamespacesForUser.perform();


Note: added TODO to revisit in a separate PR.

github-actions · 2025-03-28T00:44:33Z

Build Results:
All builds succeeded! ✅

changelog/29995.txt

hellobontempo

Great work so far! Just leaving some comments after a quick initial pass, but overall this looks solid to me. I'm wondering about fetching namespaces in the route and passing to the component instead of fetching them in the component itself 🤔 did you have a reason for making the request in the component?

Came back to edit for posterity and clarity - Since the sidebar navigation exists app-wide this data isn't tied to a specific route/resource I think the component making the request makes sense. Disregard my question 😄

ui/app/components/namespace-picker.js

hellobontempo · 2025-03-28T16:54:36Z

ui/app/components/namespace-picker.js

+    // 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;


This is a good question - I wonder if this is to account for when users input /mynamespace in the login form (which I think peopled do sometimes...) but I agree it's worth looking into. This isn't the PR the test was added, but it does show a forward slash in the namespace input #10588

There have been a lot of change since then and i think we sanitize consistently and namespaces shouldn't be prepended with / but again would be good to investigate!

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

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

hellobontempo · 2025-03-28T17:03:17Z

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

@@ -59,8 +59,10 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
    await authPage.tokenInput('root').submit();
    await settled();
    await click('[data-test-namespace-toggle]');
-    await waitFor('[data-test-current-namespace]');
-    assert.dom('[data-test-current-namespace]').hasText('/beep/boop/', 'current namespace begins with a /');


seeing this i wonder if the old namespace would send users to /namespace and that's one reason why we had to account for that initial forward slash? 🤔

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

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

emoncuso

A couple of super nits, but otherwise looks great!

ui/app/components/namespace-picker.js

ui/app/components/namespace-picker.hbs

ui/app/components/namespace-picker/selected-option.hbs

…ponent

…ponent (#30068) * [VAULT-34482] UI: Update Namespace Picker to use HDS Super Select component * changelog updates * update jsdoc * update classname * update test comment * remove unnecessary label attribute * move hbs file to components directory alongside js file * fix replication test * undo changes to replication test * test update

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

beagins force-pushed the VAULT-34216/hds-super-select-v2 branch from 23d5ca7 to bc118c9 Compare March 28, 2025 00:17

beagins added the ui label Mar 28, 2025

beagins force-pushed the VAULT-34216/hds-super-select-v2 branch 2 times, most recently from 5483048 to c7c5f8a Compare March 28, 2025 00:34

beagins commented Mar 28, 2025

View reviewed changes

beagins marked this pull request as ready for review March 28, 2025 00:39

beagins requested review from a team as code owners March 28, 2025 00:39

beagins requested review from keeefer and removed request for a team March 28, 2025 00:39

hellobontempo reviewed Mar 28, 2025

View reviewed changes

changelog/29995.txt Outdated Show resolved Hide resolved

hellobontempo reviewed Mar 28, 2025

View reviewed changes

ui/tests/acceptance/enterprise-replication-test.js Outdated Show resolved Hide resolved

beagins force-pushed the VAULT-34216/hds-super-select-v2 branch 2 times, most recently from ea58231 to c2f3448 Compare March 28, 2025 23:00

emoncuso approved these changes Mar 31, 2025

View reviewed changes

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

ui/app/components/namespace-picker.hbs Show resolved Hide resolved

ui/app/components/namespace-picker/selected-option.hbs Show resolved Hide resolved

beagins added 10 commits March 31, 2025 17:23

[VAULT-34482] UI: Update Namespace Picker to use HDS Super Select com…

f23822a

…ponent

changelog updates

145ce0a

update jsdoc

d8f82f0

update classname

8ab0f5e

update test comment

4765d6b

remove unnecessary label attribute

7dcf8df

move hbs file to components directory alongside js file

542c09a

fix replication test

04e953c

undo changes to replication test

24320b8

test update

699225d

beagins force-pushed the VAULT-34216/hds-super-select-v2 branch from 97e64f2 to 699225d Compare April 1, 2025 00:25

beagins merged commit 37495e4 into VAULT-34216/namespace-picker-feature-branch Apr 1, 2025
25 checks passed

beagins deleted the VAULT-34216/hds-super-select-v2 branch April 1, 2025 00:59

[VAULT-34482] UI: Update Namespace Picker to use HDS Super Select component #30068

[VAULT-34482] UI: Update Namespace Picker to use HDS Super Select component #30068

Uh oh!

Conversation

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

Uh oh!

Description

Outstanding items that will be addressed in separate PRs before the feature side branch is merged to main:

Screenshots

TODO only if you're a HashiCorp employee

Uh oh!

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

Uh oh!

Uh oh!

beagins Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

beagins Mar 28, 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!

hellobontempo Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

beagins Mar 28, 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!

beagins Mar 28, 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!

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

Uh oh!

Uh oh!

Uh oh!

hellobontempo left a comment • 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!

Uh oh!

Uh oh!

hellobontempo Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

hellobontempo Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

emoncuso left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

beagins commented Mar 27, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited

Loading

beagins Mar 28, 2025 •

edited

Loading

beagins Mar 28, 2025 •

edited

Loading

beagins Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited

Loading

hellobontempo left a comment •

edited

Loading