[Fleet] replace EuiFilterSelectItem with EuiSelectable #175101

juliaElastic · 2024-01-18T11:05:28Z

Summary

Closes #162766

Replace deprecated EUI component.

Agent details: select log level

Agent details: select dataset

Agent status filter:

Agent list view:
Agent policy select:

Tags select:

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

juliaElastic · 2024-01-18T11:05:36Z

/ci

apmmachine · 2024-01-18T11:05:44Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
/oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

juliaElastic · 2024-01-18T11:09:54Z

...plications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx

 import { i18n } from '@kbn/i18n';
 import type { DataViewField, FieldSpec } from '@kbn/data-views-plugin/public';

 import { useStartServices } from '../../../../../hooks';

 import { AGENT_LOG_INDEX_PATTERN, DATASET_FIELD, AGENT_DATASET } from './constants';

+const StyledEuiSelectable = styled(EuiSelectable)`
+  width: 220px;


I'm having trouble making the selectable options be as wide as the longest option automatically, added a workaround for a fixed width, I'm not sure if there is a better solution. Tried the different combinations of the truncate options: https://eui.elastic.co/#/forms/selectable#truncation

@breehall Hey, any suggestions? Previously with EuiFilterSelectItem the select expanded automatically, without truncating the options.
The textWrap: wrap option doesn't seem to do anything either.

Before:

After (without fixed width):

I found a better approach by providing minWidth in listProps, it is still a hardcoded value, but fixes the styled-components issue.

@breehall Another UI issue I noticed is when scrolling down the page with a long list of agents with a EuiSelectable component open: the list of options is visible in front of the top banner.

Using the minWidth prop works - another alternative is if you know for certain that your selectable content is fairly short, you can use custom width: fit-content; CSS instead. Overall, I think minWidth is a safer bet in case your content changes to something super long in the future that should be truncated.

when scrolling down the page with a long list of agents with a EuiSelectable component open: the list of options is visible in front of the top banner

If you know for certain your popover should sit below the sticky header/nav, you can customize this on your end with something like:

const { euiTheme } = useEuiTheme(); <EuiPopover zIndex={euiTheme.levels.header - 1}>

EUI defaults to showing popovers above headers for maximum visibility and because we can't know how the specific intention of end-popover-usages ahead of time. A couple of related issues discussing the difficulty/complexity of this topic: elastic/eui#4756, elastic/eui#4872

thanks for the suggestions! I'll make the changes

Made the change to move the Clear all button outside, it works much better:

The z-index change works fine too:

I tried the width: fit-content; option, but doesn't seem to make a difference with minWidth. When I remove minWidth, the options are not rendered at all. I think probably because the options are loaded async, and initially not there. I think it's fine to use minWidth only, so the long options get truncated.

...plications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx

juliaElastic · 2024-01-18T13:16:05Z

/ci

juliaElastic · 2024-01-18T14:53:21Z

/ci

juliaElastic · 2024-01-18T15:20:03Z

/ci

juliaElastic · 2024-01-22T15:00:42Z

...lic/applications/fleet/sections/agents/agent_list_page/components/filter_bar/tags_filter.tsx

+
+  const renderTagOption = (option: EuiSelectableOption<string>): ReactNode => {
+    const tag = option.label;
+    if (tag === CLEAR_ALL) {


the Clear all functionality needs a lot of custom code, and still not perfect (icon disappears when clicking on it)
I'm wondering if we need at all, the list of tags are narrowed by the agents that match the selected tags, so it's not really possible to select that many tags at once

If a clear all button must be rendered, I would strongly suggest rendering it outside the EuiSelectable and not as an option. e.g. an <EuiButton size="s" /> or similar.

juliaElastic · 2024-01-22T15:02:46Z

/ci

elasticmachine · 2024-01-22T15:41:01Z

Pinging @elastic/fleet (Team:Fleet)

kibana-ci · 2024-01-23T11:45:04Z

💚 Build Succeeded

Buildkite Build
Commit: 8795f31

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`fleet`	959	961	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`fleet`	1.2MB	1.2MB	+1.3KB

History

💚 Build #188540 succeeded e8a6c02
💔 Build #188214 failed 7b9e507
💔 Build #188155 failed 269b231
💔 Build #188122 failed 89c72fa

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @juliaElastic

kpollich

New UI looks great - especially moving the clear button. 🚀

cee-chen · 2024-01-23T16:49:57Z

This looks terrific! Thanks for addressing EUI's comments/TODOs in Kibana - y'all are amazing!!! ❤️

## Summary Closes elastic#162766 Replace deprecated EUI component. Agent details: select log level <img width="1302" alt="image" src="https://github.com/elastic/kibana/assets/90178898/2ab0cd2c-38f3-4219-9ea2-62dfaa3a8e99"> Agent details: select dataset <img width="1387" alt="image" src="https://github.com/elastic/kibana/assets/90178898/4187c274-e035-4831-9d9d-87c87a3ff9c3"> Agent status filter: <img width="1251" alt="image" src="https://github.com/elastic/kibana/assets/90178898/15e226a2-cc10-4b43-881f-923fe03364f5"> Agent list view: Agent policy select: <img width="461" alt="image" src="https://github.com/elastic/kibana/assets/90178898/4f0f697c-af33-4934-92ef-e9a8e16bf1ed"> Tags select: <img width="280" alt="image" src="https://github.com/elastic/kibana/assets/90178898/0be8719e-cf4b-4a1d-a4c6-c04090f72600"> ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

replace EuiFilterSelectItem with EuiSelectable

89c72fa

juliaElastic self-assigned this Jan 18, 2024

juliaElastic commented Jan 18, 2024

View reviewed changes

...plications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx Outdated Show resolved Hide resolved

remove styled-components

269b231

use EuiSelectable in AgentStatusFilter

cdcbcdc

juliaElastic added 2 commits January 18, 2024 16:09

fix test

3398ad0

fix test

7b9e507

juliaElastic and others added 4 commits January 22, 2024 14:10

Merge branch 'main' into eui-replace-deprecated

2753bab

move agent policy and tags filter to own component

15a9891

use EuiSelectable in AgentPolicyFilter

be48376

use EuiSelectable in TagsFilter

d0ccce7

juliaElastic commented Jan 22, 2024

View reviewed changes

juliaElastic marked this pull request as ready for review January 22, 2024 15:02

juliaElastic requested a review from a team as a code owner January 22, 2024 15:02

juliaElastic added the release_note:skip Skip the PR/issue when compiling release notes label Jan 22, 2024

fix cypress tests

e8a6c02

botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label Jan 22, 2024

nchaulet requested review from nchaulet and removed request for nchaulet January 22, 2024 19:59

move clear all button out of selectable, zindex

8795f31

kpollich approved these changes Jan 23, 2024

View reviewed changes

juliaElastic merged commit f77542c into elastic:main Jan 23, 2024
21 checks passed

kibanamachine added v8.13.0 backport:skip This commit does not require backporting labels Jan 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fleet] replace EuiFilterSelectItem with EuiSelectable #175101

[Fleet] replace EuiFilterSelectItem with EuiSelectable #175101

juliaElastic commented Jan 18, 2024 •

edited

Loading

juliaElastic commented Jan 18, 2024

apmmachine commented Jan 18, 2024

juliaElastic Jan 18, 2024 •

edited

Loading

juliaElastic Jan 18, 2024

juliaElastic Jan 22, 2024

cee-chen Jan 22, 2024

juliaElastic Jan 23, 2024

juliaElastic Jan 23, 2024

juliaElastic commented Jan 18, 2024

juliaElastic commented Jan 18, 2024

juliaElastic commented Jan 18, 2024

juliaElastic Jan 22, 2024

cee-chen Jan 22, 2024

juliaElastic commented Jan 22, 2024

elasticmachine commented Jan 22, 2024

kibana-ci commented Jan 23, 2024

kpollich left a comment

cee-chen commented Jan 23, 2024

[Fleet] replace EuiFilterSelectItem with EuiSelectable #175101

[Fleet] replace EuiFilterSelectItem with EuiSelectable #175101

Conversation

juliaElastic commented Jan 18, 2024 • edited Loading

Summary

Checklist

juliaElastic commented Jan 18, 2024

apmmachine commented Jan 18, 2024

🤖 GitHub comments

juliaElastic Jan 18, 2024 • edited Loading

Choose a reason for hiding this comment

juliaElastic Jan 18, 2024

Choose a reason for hiding this comment

juliaElastic Jan 22, 2024

Choose a reason for hiding this comment

cee-chen Jan 22, 2024

Choose a reason for hiding this comment

juliaElastic Jan 23, 2024

Choose a reason for hiding this comment

juliaElastic Jan 23, 2024

Choose a reason for hiding this comment

juliaElastic commented Jan 18, 2024

juliaElastic commented Jan 18, 2024

juliaElastic commented Jan 18, 2024

juliaElastic Jan 22, 2024

Choose a reason for hiding this comment

cee-chen Jan 22, 2024

Choose a reason for hiding this comment

juliaElastic commented Jan 22, 2024

elasticmachine commented Jan 22, 2024

kibana-ci commented Jan 23, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

kpollich left a comment

Choose a reason for hiding this comment

cee-chen commented Jan 23, 2024

juliaElastic commented Jan 18, 2024 •

edited

Loading

juliaElastic Jan 18, 2024 •

edited

Loading