UI bug fix: Kubernetes Role filter replace with explicit input filter #27178

Monkeychip · 2024-05-22T16:58:32Z

Ent test pass
Test coverage

The UI team has run into various issues with the use of NavigateInput for filtering over a list. Such an issue arose in the Kubernetes Secret Engine, and instead of trying to solve for that component, we moved forward with using the new explicit search pattern.

This PR fixes Issue #27153

Note:

I created a template only component that plays off the filterInput component, but as the naming suggests is an explicit filter.
Whoever consumes this component should handle the actions in the parent. This approach was encouraged because routing and directories, etc can be very individualized per list view (that's part of what makes NavigateInput a hard component to read — it's doing too much individualized tasks).
The other areas we use NavigateInput should also move towards this adoption. I'll write a JIRA ticket for this.

Before

Screen.Recording.2024-05-22.at.10.54.53.AM.mov

After

k8after.mov

github-actions · 2024-05-22T17:00:28Z

CI Results:
All Go tests succeeded! ✅

github-actions · 2024-05-22T20:56:49Z

Build Results:
All builds succeeded! ✅

andaley

this looks great! i had a couple changes requested for tests, let me know if you have any questions about them. aside from that everything else looks good to me. 👍

ui/lib/kubernetes/addon/components/page/roles.js

andaley · 2024-05-22T22:17:52Z

ui/lib/kubernetes/addon/components/page/roles.js

+      // On escape, transition to roles index route.
+      this.navigate();
+    }
+    // ignore all other key events


this is slick! nice job including keyboard navigation here. 😀

This originally comes from Chelsea's refactor of an old filter input for Kv (see KvListFilter). All the credit goes to her :)

ui/tests/integration/components/filter-input-explicit-test.js

andaley

looks like 2 tests are failing -- probably related to the things i just left comments on. hope that helps!

ui/tests/integration/components/filter-input-explicit-test.js

Co-authored-by: Noelle Daley <noelledaley@users.noreply.github.com>

hashishaw

Some open questions, but very pragmatic approach and helpful description! It might be worth noting that this component is best used in list views where the items do not have a folder/nested structure

hashishaw · 2024-05-28T14:12:36Z

ui/lib/core/addon/components/filter-input-explicit.hbs

+      @text="Search"
+      @icon="search"
+      type="submit"
+      {{on "click" @handleSearch}}


Is there a reason we aren't wrapping these in a <form> element so that clicking this button submits (and then we also get a free submit when the user presses the "Enter" button)? I think that would be a nice ergonomic update to this.

The tests 😵‍💫 I originally had it wrapped as a form, but couldn't call the action correctly from the tests. There was an error about it being in a form element. I wish I would have saved that specific error. Let me see if I can resurface it. The enter functionality would be very nice!

@hashishaw This was the error, any thoughts? Only on the test, not on the UI.

oh, we just need to do evt.preventDefault in the triggered action so that it doesn't "send" the form data to the URL

Got it! Found an example in how we do it for sinon spies in toggle-test (thank you—you did that block of code).

ui/lib/kubernetes/addon/components/page/roles.js

hashishaw · 2024-05-28T14:14:49Z

ui/tests/helpers/general-selectors.ts

@@ -20,6 +20,8 @@ export const GENERAL = {

  filter: (name: string) => `[data-test-filter="${name}"]`,
  filterInput: '[data-test-filter-input]',
+  filterInputExplicit: '[data-test-filter-input-explicit]',


Monkeychip · 2024-05-28T16:11:33Z

@hashishaw

it might be worth noting that this component is best used in list views where the items do not have a folder/nested structure

Because this is a template only component, I think the parent who uses it could handle the directory structure search in the actions passed in. My thought was it could be used for any kind of odd routing situation, because it's the parents responsibility to handle the actions. Thoughts?

andaley

looks good on my end! 🙌

hashishaw

Thank you! 🚀

initial changes for new component template only handle actions in parent

b8c63c0

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label May 22, 2024

Monkeychip added the ui label May 22, 2024

add changelog

c0a9b80

Monkeychip added the backport/1.16.x label May 22, 2024

Monkeychip added this to the 1.17.0 milestone May 22, 2024

Monkeychip and others added 3 commits May 22, 2024 11:01

Merge branch 'main' into ui/VAULT-27414/k8-role-filter

d32e5b4

fix current kubernetes test

0858afc

component test

75f05ae

Monkeychip marked this pull request as ready for review May 22, 2024 20:50

Monkeychip requested a review from a team as a code owner May 22, 2024 20:50

Merge branch 'main' into ui/VAULT-27414/k8-role-filter

6a17f8c

Monkeychip added 2 commits May 22, 2024 15:03

remove concurrency task

f373604

make div and not form due to testing things

8356a81

andaley suggested changes May 22, 2024

View reviewed changes

address pr feedback

128de02

Monkeychip requested a review from andaley May 23, 2024 14:52

andaley reviewed May 24, 2024

View reviewed changes

ui/tests/integration/components/filter-input-explicit-test.js Outdated Show resolved Hide resolved

ui/tests/integration/components/filter-input-explicit-test.js Outdated Show resolved Hide resolved

Monkeychip modified the milestones: 1.17.0, 1.18.0-rc May 24, 2024

Monkeychip added the backport/1.17.x label May 24, 2024

Monkeychip requested a review from andaley May 24, 2024 17:31

Monkeychip and others added 3 commits May 24, 2024 15:26

Update ui/tests/integration/components/filter-input-explicit-test.js

47ded67

Co-authored-by: Noelle Daley <noelledaley@users.noreply.github.com>

Update filter-input-explicit-test.js

fb8c86a

Merge branch 'main' into ui/VAULT-27414/k8-role-filter

24f3420

vercel bot deployed to Preview May 24, 2024 21:40 View deployment

hashishaw reviewed May 28, 2024

View reviewed changes

fix tests

1823fc9

Monkeychip requested a review from hashishaw May 28, 2024 16:06

Merge branch 'main' into ui/VAULT-27414/k8-role-filter

48477e5

vercel bot deployed to Preview May 28, 2024 16:59 View deployment

make it a form and fix test:

dd63dfd

andaley approved these changes May 28, 2024

View reviewed changes

hashishaw approved these changes May 30, 2024

View reviewed changes

Monkeychip modified the milestones: 1.18.0-rc, 1.17.1 Jun 3, 2024

Monkeychip merged commit 20382fa into main Jun 3, 2024
32 of 33 checks passed

Monkeychip deleted the ui/VAULT-27414/k8-role-filter branch June 3, 2024 15:39

This was referenced Jun 3, 2024

Backport of UI bug fix: Kubernetes Role filter replace with explicit input filter into release/1.16.x #27326

Closed

Backport of UI bug fix: Kubernetes Role filter replace with explicit input filter into release/1.17.x #27327

Merged

Monkeychip mentioned this pull request Jun 3, 2024

Backport 1.16.x: UI fix k8 role filter #27328

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI bug fix: Kubernetes Role filter replace with explicit input filter #27178

UI bug fix: Kubernetes Role filter replace with explicit input filter #27178

Monkeychip commented May 22, 2024 •

edited

Loading

github-actions bot commented May 22, 2024 •

edited

Loading

github-actions bot commented May 22, 2024 •

edited

Loading

andaley left a comment

andaley May 22, 2024

Monkeychip May 23, 2024

andaley left a comment

hashishaw left a comment

hashishaw May 28, 2024

Monkeychip May 28, 2024

Monkeychip May 28, 2024

hashishaw May 28, 2024

Monkeychip May 28, 2024

hashishaw May 28, 2024

Monkeychip commented May 28, 2024 •

edited

Loading

andaley left a comment

hashishaw left a comment

UI bug fix: Kubernetes Role filter replace with explicit input filter #27178

UI bug fix: Kubernetes Role filter replace with explicit input filter #27178

Conversation

Monkeychip commented May 22, 2024 • edited Loading

github-actions bot commented May 22, 2024 • edited Loading

github-actions bot commented May 22, 2024 • edited Loading

andaley left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andaley left a comment

Choose a reason for hiding this comment

hashishaw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Monkeychip commented May 28, 2024 • edited Loading

andaley left a comment

Choose a reason for hiding this comment

hashishaw left a comment

Choose a reason for hiding this comment

Monkeychip commented May 22, 2024 •

edited

Loading

github-actions bot commented May 22, 2024 •

edited

Loading

github-actions bot commented May 22, 2024 •

edited

Loading

Monkeychip commented May 28, 2024 •

edited

Loading