Wrong behavior from the Flyout component in Wazuh Dashboard 2.x

[AlexRuiz7]

Description

A new problem has been found in every version of OpenSearch 2.x, more concretely related to the OpenSearch Dashboards.

We use the flyout component from EUI, which closes automatically when the user clicks outside it. However, in 2.x, these components will also close automatically when clicking inside them. This is not the correct behavior, and it's probably related to OSD updating the EUI library to a newer version, breaking our customized components behavior.

Video

flyoutclose.mp4

We'll need to hunt and fix this bug.

Affected views

Modules

• Management - Rules
• Mitre Attack - Intelligence
• Mitre Attack - Techniques
• Agents - FIM - Inventory
• All Compliance - Controls Tab - Requirements Table

Security

• Policies - Create and Edit
• Roles Mapping - Create and Edit
• Roles - Create and Edit
• User - Create and Edit

Management

• Decoders - Detail Flyout
• Ruleset - Detail Flyout and Rule Info

Related release notes

OpenSearch Dashboards uses OUI and its alias onto EUI (opensearch-project/OpenSearch-Dashboards#2080)
https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/release-notes/opensearch-dashboards.release-notes-2.2.0.md

Bumps @elastic/eui to v34.6.0 and @elastic/charts to v31.1.0
https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/release-notes/opensearch-dashboards.release-notes-2.0.0.md

Originally posted by @yenienserrano in #4160 (comment)

[Machi3mfl]

Issue research

Files involved

• Ruleset Table /public/controllers/management/components/management/ruleset/components/ruleset-table.tsx

• Rule Info /public/controllers/management/components/management/ruleset/views/rule-info.tsx

• Flyout Detail /public/controllers/management/components/management/ruleset/components/flyout-detail.tsx

We use a customized flyout component called WzFlyout.

• WzFlyout /public/components/common/flyouts/wz-flyout.tsx

[AlexRuiz7]

The WzFlyout component wraps the EuiFlyout component with an EuiOutsideClickDetector component (to detect clicks outside the flyout) and an EuiOverlayMask component, to dim the area outside the flyout.

These 2 functionalities are now provided out-of-the-box by the EuiFlyout component, so we'll test whether using this component alone solves the issue, in such case we'll replace the WzFlyout component, and remove it from the code.

https://github.com/wazuh/wazuh-kibana-app/blob/370b09a2bb3c33b2f0a6d4a5080c673d2980f163/public/components/common/flyouts/wz-flyout.tsx#L17-L33

[Machi3mfl]

Sections involved

Modules

• Management - Rules
• Mitre Attack - Intelligence
• Mitre Attack - Techniques
• Agents - FIM - Inventory
• All Compliance - Controls Tab - Requirements Table

Security

• Policies - Create and Edit
• Roles Mapping - Create and Edit
• Roles - Create and Edit
• User - Create and Edit

Management

• Decoders - Detail Flyout
• Ruleset - Detail Flyout and Rule Info

[yenienserrano]

• Fix Flyout component in Wazuh Dashboard 2.x #4638 (comment)

Investigating why it is having this behavior when modifying some field in the flyout and clicking outside the flyout to close it without asking,

I noticed that the EuiFlyout component, in the version of elastic EUI that was forked by the OpenSearch Dashboard guys (elastic EUI v34.6.0), It has some bugs that are fixed in a higher version of Elastic EUI (v36.x).

• [EuiFlyout] Refactor polymorphic types elastic/eui#4940
• [EuiFlyout] Fix outsideClickCloses logic elastic/eui#5027
• [EuiFlyout] Fix usage of outsideClickCloses prop elastic/eui#4986

I am analyzing different alternatives to solve this problem we are having, and if we put the properties of outsideClickCloses={true} ownFocus={false} it has the expected behavior when closing, but as the ownFocus is false it lets you interact with the information outside the flyout.

[yenienserrano]

The problem does not come from the EuiFlyout component, the problem comes from the EuiOverlayMask component with the click event, it is solved in this PR of Elastic EUI that goes to version 36.0.0.0.0 and OpenSearch dashboard made the fork of a previous version (34.6.0) and they did not solve it yet.