Query > Live query > Improve finding and selecting teams/labels

[noahtalerman]

Goal

User story
As a Fleet user who has 100 teams and/or labels or 2 teams and 10 labels,
I want to quickly find a team or label when running a live query
so that I don't have to use CMD+F to find the team.

Objective

Customer promises + renewal requests

Original request

• #20135

Context

• Product designer: @randy-fleet

Changes

Adds the ability to search within Teams and Labels sections. Includes adding expand/collapse functionality when lists of Teams/Labels get long.

Product

• [x] UI changes: Figma
• [ ] CLI (fleetctl) usage changes: No Changes
• [ ] YAML changes: No changes
• [ ] REST API changes: No changes
• [ ] Fleet's agent (fleetd) changes: No Changes
• [ ] Activity changes: No Changes
• [ ] Permissions changes: No Changes
• [ ] Changes to paid features or tiers: No Changes
• [ ] Other reference documentation changes: No Changes
• [ ] Once shipped, requester has been notified

Engineering

• [ ] Feature guide changes: TODO
• [ ] Database schema migrations: TODO
• [ ] Load testing: TODO

ℹ️  Please read this issue carefully and understand it. Pay special attention to UI wireframes, especially "dev notes".

QA

Risk assessment

• Requires load testing: TODO
• Risk level: Low / High TODO
• Risk description: TODO

Manual testing steps

1. Step 1
2. Step 2
3. Step 3

Testing notes

Confirmation

1. [ ] Engineer (@____): Added comment to user story confirming successful completion of QA.
2. [ ] QA (@____): Added comment to user story confirming successful completion of QA.

[noahtalerman]

Hey @zayhanlon we spun this user story off of this request and brought the story into the design sprint.

@randy-fleet I passed this story to you since you have some extra capacity 🚀

[noahtalerman]

Hey @zayhanlon heads up, this user story didn't make it into the upcoming engineering because we didn't get it estimated in time.

It's still prioritized. We left it on the drafting board so that it can be pulled into the next engineering sprint.

[RachelElysia]

@rachaelshaw : we can always change from rows to number of teams or labels if it's too difficult to calculate where to truncate

[RachelElysia]

@iansltx : UX - If something is selected, maybe it should always show it, so it doesn't hide, similar to select target input

e.g. if you are selecting 6 labels, it's hard to see which ones are selected if the UI is hiding them

We want to bring this idea back to the next endpoint ops design meeting <3

[RachelElysia]

@iansltx : We also don't need a loading state for search because it's client side

[RachelElysia]

Moved back to ready to spec because we want more design review on this

@jacobshandling current ballpark 8-13

[noahtalerman]

Hey @RachelElysia thanks for the detailed notes! B/c @randy-fleet is the Product Designer for this story, I added you to Randy's design review today so we can decide on a path forward.

cc @rachaelshaw

[RachelElysia]

@noahtalerman perfect thanks!

[randy-fleet]

@RachelElysia I've made the updates in Figma that we discussed.

[RachelElysia]

@randy-fleet Thanks for taking the team's feedback and turning it around so fast! Feel free to move it to the correct column for our team's estimation call next Wednesday.

[noahtalerman]

Thanks @randy-fleet!

Can you please bring this one to design review today?

We can take a pass through changes/dev notes live.

cc @RachelElysia

[noahtalerman]

Hey @sharon-fdm heads up that this user story is ready for specs.

Just a reminder that during last week's estimation, we decided to bring this one back to design review (see comment [here](Moved back to ready to spec because we want more design review on this)). It's now ready for specs again.

cc @RachelElysia

[noahtalerman]

Hey @sharon-fdm it looks like we missed this one during estimation yesterday.

Can we please estimate it before we kick off the next sprint?

[sharon-fdm]

Hey team! Please add your planning poker estimate with Zenhub @jacobshandling @RachelElysia

[jmwatts]

Working on testing this out, and a few things to note: The fonts for "No matching..." seem big compared to the Figma, and the alignment is off in the "No matching hosts" section.

[jmwatts]

QA Notes

• [x] Teams more than 600 characters are truncated and expand with "Show more" dropdown

• [x] When expanded, should display entire list even if it's a large amount

• [x] Teams are searchable and entering information in the search field reduces what is displayed based on matching criteria

• [x] If there are no teams that match the search input, the "No matching teams." message should show.

• [x] Labels more than 600 characters are truncated and expand with "Show more" dropdown

• [x] When expanded, should display entire list even if it's a large amount

• [x] Labels are searchable and entering information in the search field reduces what is displayed based on matching criteria

• [x] If there are no labels that match the search input, the "No matching labels." message should show.

• [x] If teams or labels were previously selected for live query and the user navigates back to adjust them, they should remain selected, and if they were past the 600 character count cut off, they should show in the expanded form on page load

• [x] If there are no hosts that match the search input for "Target specific hosts", the "No matching hosts." message should show.

• [x] The "Run" button should be greyed out until there are specific targets selected.

@noahtalerman @randy-fleet @RachelElysia NOTE: I didn't see where it was defined how selecting Team + Label + Target specific hosts was supposed to behave. Right now it appears as though it behaves as follows: ONLY team(s) selected -> Applies to all hosts in any of those teams ONLY label(s) selected -> Applies to hosts with any of those labels ONLY specific hosts -> Applies only to hosts in the list Team + Label selected -> Applies only to hosts in any of those teams that ALSO have any of those labels Team + label + Target specific hosts -> Applies only to hosts in any of those teams that ALSO have any of those labels AND applies to any of the specific hosts in the list regardless of team or label.

Is this correct? If so, this one is good to go.

[RachelElysia]

@jmwatts +1 I think we could do a better job defining how selecting targets works in our docs.

I think it's the union of all labels and union of all teams, but the intersection of all teams selected and all labels selected. And then if any individual hosts are targeted, those are added as a union.

For my work, I didn't change any functionality of the pickers, just how they are shown.

[rachaelshaw]

@jmwatts good point re: it being unclear how it works. I feel like this could be solved with some simple help text under "Target specific hosts", e.g. "These hosts will be targeted regardless of their platforms, teams, and labels."

[fleet-release]

Find, select, expand, Teams and labels at your hand, query command so grand.

[Patagonia121]

@noahtalerman I shared this with the customer and the only feedback I got back (which is probably good to consider for future iterations) is that this feature should also allow users to be able to select/deselect all matching, with a select/deselect all when also not searching for anything