[Security Solution] Timeline bar on the rules table page causes broken focus

[maximpn]

Relates to: #151244

Description

EUI team worked on improving accessibility and with EUI v75.0.0 release focus is handling another way. After that upgrade we encountered a problem of failing tests in main and had to skip failing tests. Later investigation and consultation with EUI team revealed that we have an EuiFlyout shown at the rules table (see a screenshot).

One can see Add Integrations button becomes focused after a page reload and body element has a class euiBody--hasFlyout. Such behavior causes e2e tests failing since Cypress tries typing in a field but focus gets transferred to another element.

The timeline bar's implementation should be changed to avoid displaying an EuiFlyout which causes the problem.

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[maximpn]

@MadameSheema @michaelolo24 I've noticed this behavior, please triage.

[michaelolo24]

Hey @maximpn this has always been disabled on the rules table page, but something may have changed recently in this file or the path name for that page may have changed to cause this issue: https://github.com/elastic/kibana/blob/main/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline_for_path.ts

We'll get a fix in, thanks!

[michaelolo24]

@machadoum or @semd , quick question. Should the rules table page, SECURITY_DETECTIONS_RULES_MANAGEMENT_URL, from https://github.com/elastic/kibana/blob/main/x-pack/plugins/security_solution/cypress/urls/navigation.ts have an equivalent link in https://github.com/elastic/kibana/blob/main/x-pack/plugins/security_solution/public/management/links.ts ?

if so, @maximpn it might involve adding SECURITY_DETECTIONS_RULES_MANAGEMENT_URL as a sublink to

kibana/x-pack/plugins/security_solution/public/management/links.ts

Line 119 in dd75719

links: [

with the hideTimeline: true flag added

[machadoum]

I believe the timeline started appearing on the rules page when the tabs were introduced to the URL. So to make it work as expected, we have to configure the new links here. I would also update the RULES_PATH entry because it links to a redirect page. But be aware that updating links config might affect how they are displayed in the side nav and global search.

[christineweng]

@maximpn looks like this behavior no longer appears on main, and I saw that the tests are re-enabled. Could you confirm this is fixed?

[maximpn]

@christineweng I've checked this problem on main and it's not fixed. I had to add force: true to type() command to circumvent the problem and re-enable the tests. While the e2e tests has to work without forcing any action.

As far as I see rule search bar isn't focusable from the first click (as you can see on the video below). This is the main problem as cy.get(...).type(...) doesn't work and requires either force: true or click() before type(). While type() command clicks on the input.

Screen.Recording.2023-05-24.at.12.47.58.mov

But it works as expected when I removed the timeline bar by removing this code block (as you can see on the video below).

Screen.Recording.2023-05-24.at.12.48.48.mov

A similar search bar field on the Shared Exception Lists page works fine (gets focused by clicking once) as the page doesn't contain the timeline bar.

I also noticed that .euiBody--hasFlyout class doesn't appear on the body element so it might be changed in a new EUI version and it's rather was a side effect than the root cause.

[maximpn]

This bug was fixed by #158392, closing it.