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

* Fixed flyout compatibility with opensearch 2.x * Updated CHANGELOG * Removed unused wzFlyout * Fixed create-policy * Revert "Removed unused wzFlyout" This reverts commit 9888c36. * Revert "Fixed flyout compatibility with opensearch 2.x" This reverts commit c4306bd. * fix flyout closing when editing conf * fix flyout closing by selector * remove unnecessary function * change changelog Co-authored-by: yenienserrano <[email protected]> Co-authored-by: Ian Yenien Serrano <[email protected]> Co-authored-by: Álex <[email protected]>
wazuh · Oct 20, 2022 · b694c49 · b694c49
1 parent f700b2b
commit b694c49
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 deletions.
diff --git 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
@@ -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}) => (
-  <EuiOverlayMask headerZindexLocation="below" {...overlayMaskProps}>
-    <EuiOutsideClickDetector
-      onOutsideClick={onClose}
-      {...outsideClickDetectorProps}
-    >
-      <EuiFlyout
-        onClose={onClose}
-        {...flyoutProps}
-      >
+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 (
+    <EuiOutsideClickDetector onOutsideClick={closeFlyout}>
+      {/*
+        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
+      */}
+      <EuiFlyout onClose={onClose} maskProps={{ onClick: () => {} }} {...flyoutProps}>
         {children}
       </EuiFlyout>
     </EuiOutsideClickDetector>
-  </EuiOverlayMask>
-);
+  );
+};
diff --git 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;