diff --git a/CHANGELOG.md b/CHANGELOG.md index 8184bd87d8..9a8e361491 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ All notable changes to the Wazuh app project will be documented in this file. - Fixed rendering problems of the `Agent Overview` section in low resolutions [#4516](https://github.com/wazuh/wazuh-kibana-app/pull/4516) - Fixed issue when logging out from Wazuh when SAML is enabled [#4595](https://github.com/wazuh/wazuh-kibana-app/issues/4595) - Fixed pagination to SCA table [#4653](https://github.com/wazuh/wazuh-kibana-app/issues/4653) +- Fixed a bug that caused the flyouts to close when clicking inside them [#4638](https://github.com/wazuh/wazuh-kibana-app/pull/4638) ## Wazuh v4.3.9 - OpenSearch Dashboards 1.2.0 - Revision 4310 diff --git a/public/components/common/flyouts/wz-flyout.tsx b/public/components/common/flyouts/wz-flyout.tsx index 9f9a81e72e..68a3e78ef4 100644 --- a/public/components/common/flyouts/wz-flyout.tsx +++ b/public/components/common/flyouts/wz-flyout.tsx @@ -10,21 +10,34 @@ * Find more information about this on the LICENSE file. */ -import React, { Component, Fragment } from 'react'; -import { EuiFlyout, EuiOverlayMask, EuiOutsideClickDetector } from '@elastic/eui'; +import React from 'react'; +import { EuiFlyout, EuiOutsideClickDetector } from '@elastic/eui'; -export const WzFlyout = ({children, flyoutProps = {}, overlayMaskProps = {}, outsideClickDetectorProps = {}, onClose}) => ( - - - +export const WzFlyout = ({ children, flyoutProps = {}, onClose }) => { + const closeFlyout = (ev) => { + // Clicking on the flyout or on the flyout selector should not close the flyout. + if ( + ev && + ev.path.some( + (element) => + element.classList?.contains('euiFlyout') || element.classList?.contains('euiPanel') + ) + ) { + return; + } + onClose(); + }; + + return ( + + {/* + As the version of Elastic EUI (v34.6.0) has a bug in the EuiOverlayMask component, + maskProps is added to avoid the closing of the overlay by the native function, as it contains the bug + This bug is fixed in the Elastic EUI version 36.0.0 + */} + {} }} {...flyoutProps}> {children} - -); + ); +}; diff --git a/public/components/security/policies/create-policy.tsx b/public/components/security/policies/create-policy.tsx index 9ffc15c692..29678061f7 100644 --- a/public/components/security/policies/create-policy.tsx +++ b/public/components/security/policies/create-policy.tsx @@ -162,18 +162,14 @@ export const CreatePolicyFlyout = ({ closeFlyout }) => { const createPolicy = async () => { try { - const result = await WzRequest.apiReq( - 'POST', - '/security/policies', - { - name: policyName, - policy: { - actions: addedActions.map((x) => x.action), - resources: addedResources.map((x) => x.resource), - effect: effectValue, - }, - } - ); + const result = await WzRequest.apiReq('POST', '/security/policies', { + name: policyName, + policy: { + actions: addedActions.map((x) => x.action), + resources: addedResources.map((x) => x.resource), + effect: effectValue, + }, + }); const resultData = (result.data || {}).data; if (resultData.failed_items && resultData.failed_items.length) { return;