Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fleet] Add visual indication of selected subcategory and enable new UI #149306

Closed
1 of 2 tasks
criamico opened this issue Jan 23, 2023 · 3 comments · Fixed by #149954
Closed
1 of 2 tasks

[Fleet] Add visual indication of selected subcategory and enable new UI #149306

criamico opened this issue Jan 23, 2023 · 3 comments · Fixed by #149954
Assignees
@criamico
Labels
enhancement New value added to drive a business result Team:Fleet Team label for Observability Data Collection Fleet team v8.7.0

Comments

@criamico
Copy link
Contributor

criamico commented Jan 23, 2023 •
edited
Loading

Follow up of #147125

The new subcategories UI was merged with #148894, some follow up is needed before enabling it for the users:

  • Add a visual indication of the selected category (design below)
  • Enable feature flag showIntegrationsSubcategories. At the moment EPR doesn't return subcategories for every category and this feature flag should be enabled when that part is also done. This is blocked until the release of subcategories.
@criamico criamico added enhancement New value added to drive a business result Team:Fleet Team label for Observability Data Collection Fleet team v8.7.0 labels Jan 23, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/fleet (Team:Fleet)

@dborodyansky
Copy link
Contributor

@criamico I think both of your suggestions from #147125 are nice to add (append to search box, and color indicator). Appending to search box would imply that additional search inputs would limit results within a subcategory. If this is not able to be implemented, then appending the label wouldn't be recommended.

Here is a mockup:

image

@criamico criamico self-assigned this Jan 31, 2023
@criamico
Copy link
Contributor Author

criamico commented Jan 31, 2023 •
edited
Loading

@dborodyansky here's a screenshot of how it looks like when implemented:

Screenshot 2023-01-31 at 16 12 35

The results of the search are limited within the selected subcategory, so no problem from that side.
This is how it looks like when selecting a subcategory in the context menu (showing mock data here):

Screenshot 2023-01-31 at 16 36 51

Screenshot 2023-01-31 at 16 36 38

--
Also, something I realised while working on this UI is that we currently have no way to clear the subcategories and go back search on the entire category. The only way is by clearing the whole category:

Subcategories.mov

Should we provide a way to clear the subcategory? What do you think?

@criamico criamico mentioned this issue Jan 31, 2023
Merged
criamico added a commit that referenced this issue Feb 1, 2023
@criamico @kibanamachine
[Fleet] Add a visual indication of selected subcategory in Integratio…
c8c27d7 
…ns page (#149954)

Closes #149306

## Summary
Display a clear indication of selected subcategory in Integrations page


https://user-images.githubusercontent.com/16084106/215807007-63dbea8d-4496-497f-b4f4-673825a21049.mov

To test it locally, enable feature flag `showIntegrationsSubcategories`.

Some screenshots:

<img width="2040" alt="Screenshot 2023-01-31 at 16 12 35"
src="https://user-images.githubusercontent.com/16084106/215807361-382eb4fa-736c-4073-bf44-79d1d9a3109c.png">

<img width="1563" alt="Screenshot 2023-01-31 at 16 36 38"
src="https://user-images.githubusercontent.com/16084106/215807406-f7d52c44-d1d1-4f4a-b32a-26122ab8cfbe.png">

<img width="1507" alt="Screenshot 2023-01-31 at 16 36 51"
src="https://user-images.githubusercontent.com/16084106/215807430-00189482-2dd3-418c-99b9-0651b82305b7.png">

I also split some of the components in `packageList` since that file is
becoming too big and extracted another hook from `useAvailablePackages`,
this hook only deals with the URL and the history.

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
kqualters-elastic pushed a commit to kqualters-elastic/kibana that referenced this issue Feb 6, 2023
@criamico @kibanamachine @kqualters-elastic
[Fleet] Add a visual indication of selected subcategory in Integratio…
b99d6f4 
…ns page (elastic#149954)

Closes elastic#149306

## Summary
Display a clear indication of selected subcategory in Integrations page


https://user-images.githubusercontent.com/16084106/215807007-63dbea8d-4496-497f-b4f4-673825a21049.mov

To test it locally, enable feature flag `showIntegrationsSubcategories`.

Some screenshots:

<img width="2040" alt="Screenshot 2023-01-31 at 16 12 35"
src="https://user-images.githubusercontent.com/16084106/215807361-382eb4fa-736c-4073-bf44-79d1d9a3109c.png">

<img width="1563" alt="Screenshot 2023-01-31 at 16 36 38"
src="https://user-images.githubusercontent.com/16084106/215807406-f7d52c44-d1d1-4f4a-b32a-26122ab8cfbe.png">

<img width="1507" alt="Screenshot 2023-01-31 at 16 36 51"
src="https://user-images.githubusercontent.com/16084106/215807430-00189482-2dd3-418c-99b9-0651b82305b7.png">

I also split some of the components in `packageList` since that file is
becoming too big and extracted another hook from `useAvailablePackages`,
this hook only deals with the URL and the history.

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@criamico criamico

Labels
enhancement New value added to drive a business result Team:Fleet Team label for Observability Data Collection Fleet team v8.7.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Fleet] Add a visual indication of selected subcategory in Integrations page criamico/kibana
3 participants
@dborodyansky @elasticmachine @criamico