Merge pull request #3412 from wazuh/fix/ruletest-and-decodertest-flyo…

…uts-click-outside-3298 Rule-test and Decoder-test flyouts click outside detector
wazuh · Jul 19, 2021 · f247d2a · f247d2a
2 parents d161e45 + 3f77b7e
commit f247d2a
Show file tree

Hide file tree

Showing 30 changed files with 1,006 additions and 1,047 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -41,6 +41,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Fixed
 
 - Fixed creation of log files [#3384](https://github.com/wazuh/wazuh-kibana-app/pull/3384) 
+- Fixed rules and decoders test flyout clickout event [#3412](https://github.com/wazuh/wazuh-kibana-app/pull/3412)
 - Fix size api selector when name is too long [#3445](https://github.com/wazuh/wazuh-kibana-app/pull/3445)
 
 ## Wazuh v4.2.1 - Kibana 7.10.2 , 7.11.2 - Revision 4202

diff --git a/public/components/agents/fim/inventory/registry-table.tsx b/public/components/agents/fim/inventory/registry-table.tsx
@@ -17,6 +17,7 @@ import {
   EuiFlexItem,
   EuiBasicTable,
   EuiOverlayMask,
+  EuiOutsideClickDetector,
   Direction
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -261,18 +262,19 @@ export class RegistryTable extends Component {
       <div>
         {registryTable}
         {this.state.isFlyoutVisible && (
-          <EuiOverlayMask
-            headerZindexLocation="below"
-            onClick={() => this.closeFlyout()}
-          >
-            <FlyoutDetail
-              fileName={this.state.currentFile.file}
-              agentId={this.props.agent.id}
-              item={this.state.syscheckItem}
-              closeFlyout={() => this.closeFlyout()}
-              type= {this.state.currentFile.type}
-              view='inventory'
-              {...this.props} />
+          <EuiOverlayMask headerZindexLocation="below">
+            <EuiOutsideClickDetector onOutsideClick={() => this.closeFlyout()}>
+              <div>{/* EuiOutsideClickDetector needs a static first child */}
+                <FlyoutDetail
+                  fileName={this.state.currentFile.file}
+                  agentId={this.props.agent.id}
+                  item={this.state.syscheckItem}
+                  closeFlyout={() => this.closeFlyout()}
+                  type={this.state.currentFile.type}
+                  view='inventory'
+                  {...this.props} />
+              </div>
+            </EuiOutsideClickDetector>
           </EuiOverlayMask>
         )}
       </div>

diff --git a/public/components/agents/fim/inventory/table.tsx b/public/components/agents/fim/inventory/table.tsx
@@ -17,6 +17,7 @@ import {
   EuiBasicTable,
   Direction,
   EuiOverlayMask,
+  EuiOutsideClickDetector,
 } from '@elastic/eui';
 import { WzRequest } from '../../../../react-services/wz-request';
 import { FlyoutDetail } from './flyout';
@@ -298,18 +299,20 @@ export class InventoryTable extends Component {
       <div className='wz-inventory'>
         {filesTable}
         {this.state.isFlyoutVisible &&
-          <EuiOverlayMask
-            headerZindexLocation="below"
-            onClick={() => this.closeFlyout() } >
-            <FlyoutDetail
-              fileName={this.state.currentFile}
-              agentId={this.props.agent.id}
-              item={this.state.syscheckItem}
-              closeFlyout={() => this.closeFlyout()}
-              type='file'
-              view='inventory'
-              showViewInEvents={true}
-              {...this.props} />
+          <EuiOverlayMask headerZindexLocation="below">
+            <EuiOutsideClickDetector onOutsideClick={() => this.closeFlyout()}>
+              <div>{/* EuiOutsideClickDetector needs a static first child */}
+                <FlyoutDetail
+                  fileName={this.state.currentFile}
+                  agentId={this.props.agent.id}
+                  item={this.state.syscheckItem}
+                  closeFlyout={() => this.closeFlyout()}
+                  type='file'
+                  view='inventory'
+                  showViewInEvents={true}
+                  {...this.props} />
+              </div>
+            </EuiOutsideClickDetector>
           </EuiOverlayMask>
         }
       </div>

diff --git a/public/components/agents/vuls/inventory/table.tsx b/public/components/agents/vuls/inventory/table.tsx
@@ -14,6 +14,7 @@ import React, { Component } from 'react';
 import {
   Direction,
   EuiOverlayMask,
+  EuiOutsideClickDetector,
 } from '@elastic/eui';
 import { FlyoutDetail } from './flyout';
 import { filtersToObject, IFilter, IWzSuggestItem } from '../../../wz-search-bar';
@@ -163,18 +164,20 @@ export class InventoryTable extends Component {
       <div className='wz-inventory'>
         {table}
         {this.state.isFlyoutVisible &&
-          <EuiOverlayMask
-            headerZindexLocation="below"
-            onClick={() => this.closeFlyout() } >
-            <FlyoutDetail
-              vulName={this.state.currentItem.cve}
-              agentId={this.props.agent.id}
-              item={this.state.currentItem}
-              closeFlyout={() => this.closeFlyout()}
-              type='vulnerability'
-              view='inventory'
-              showViewInEvents={true}
-              {...this.props} />
+          <EuiOverlayMask headerZindexLocation="below">
+            <EuiOutsideClickDetector onOutsideClick={() => this.closeFlyout()}>
+              <div>{/* EuiOutsideClickDetector needs a static first child */}
+                <FlyoutDetail
+                  vulName={this.state.currentItem.cve}
+                  agentId={this.props.agent.id}
+                  item={this.state.currentItem}
+                  closeFlyout={() => this.closeFlyout()}
+                  type='vulnerability'
+                  view='inventory'
+                  showViewInEvents={true}
+                  {...this.props} />
+              </div>
+            </EuiOutsideClickDetector>
           </EuiOverlayMask>
         }
       </div>

diff --git a/public/components/common/buttons/modal-confirm.tsx b/public/components/common/buttons/modal-confirm.tsx
@@ -13,6 +13,7 @@ import React from 'react';
 
 import {
   EuiOverlayMask,
+  EuiOutsideClickDetector,
   EuiConfirmModal
 } from '@elastic/eui';
 
@@ -43,17 +44,19 @@ const renderModal = ({onConfirm, onCancel, modalTitle, modalConfirmText, modalCa
     onCancel && onCancel();
   };
   return (
-    <EuiOverlayMask onClick={close}>
-      <EuiConfirmModal
-        title={modalTitle}
-        onCancel={onModalCancel}
-        onConfirm={onModalConfirm}
-        cancelButtonText={modalCancelText}
-        confirmButtonText={modalConfirmText}
-        defaultFocusedButton={modalProps.defaultFocusedButton || "confirm"}
-        {...modalProps}
+    <EuiOverlayMask>
+      <EuiOutsideClickDetector onOutsideClick={close}>
+        <EuiConfirmModal
+          title={modalTitle}
+          onCancel={onModalCancel}
+          onConfirm={onModalConfirm}
+          cancelButtonText={modalCancelText}
+          confirmButtonText={modalConfirmText}
+          defaultFocusedButton={modalProps.defaultFocusedButton || "confirm"}
+          {...modalProps}
         >
-      </EuiConfirmModal>
+        </EuiConfirmModal>
+      </EuiOutsideClickDetector>
     </EuiOverlayMask>
   )
 };
@@ -72,17 +75,19 @@ export const WzButtonModalConfirm: React.FunctionComponent<WzButtonModalConfirmP
           onCancel && onCancel();
         };
         return (
-          <EuiOverlayMask onClick={close}>
-            <EuiConfirmModal
-              title={modalTitle}
-              onCancel={onModalCancel}
-              onConfirm={onModalConfirm}
-              cancelButtonText={modalCancelText}
-              confirmButtonText={modalConfirmText}
-              defaultFocusedButton={modalProps.defaultFocusedButton || "confirm"}
-              {...modalProps}
+          <EuiOverlayMask>
+            <EuiOutsideClickDetector onOutsideClick={close}>
+              <EuiConfirmModal
+                title={modalTitle}
+                onCancel={onModalCancel}
+                onConfirm={onModalConfirm}
+                cancelButtonText={modalCancelText}
+                confirmButtonText={modalConfirmText}
+                defaultFocusedButton={modalProps.defaultFocusedButton || "confirm"}
+                {...modalProps}
               >
-            </EuiConfirmModal>
+              </EuiConfirmModal>
+            </EuiOutsideClickDetector>
           </EuiOverlayMask>
         )
       }}

diff --git a/public/components/common/modules/discover/discover.tsx b/public/components/common/modules/discover/discover.tsx
@@ -34,6 +34,7 @@ import {
  EuiFlexGroup,
  Direction,
  EuiOverlayMask,
+ EuiOutsideClickDetector,
  EuiSpacer,
  EuiCallOut,
  EuiIcon,
@@ -598,15 +599,16 @@ export const Discover = compose(
       pageSizeOptions: [10, 25, 50],
     };
     const noResultsText = `No results match for this search criteria`;
-    let flyout = this.state.showMitreFlyout ? <EuiOverlayMask
-      headerZindexLocation="below"
-      onClick={this.closeMitreFlyout} >
-      <FlyoutTechnique
-        openDashboard={(e, itemId) => this.openDashboard(e, itemId)}
-        openDiscover={(e, itemId) => this.openDiscover(e, itemId)}
-        onChangeFlyout={this.onMitreChangeFlyout}
-        currentTechnique={this.state.selectedTechnique} />
-
+    let flyout = this.state.showMitreFlyout ? <EuiOverlayMask headerZindexLocation="below">
+      <EuiOutsideClickDetector onOutsideClick={this.closeMitreFlyout}>
+        <div>{/* EuiOutsideClickDetector needs a static first child */}
+          <FlyoutTechnique
+            openDashboard={(e, itemId) => this.openDashboard(e, itemId)}
+            openDiscover={(e, itemId) => this.openDiscover(e, itemId)}
+            onChangeFlyout={this.onMitreChangeFlyout}
+            currentTechnique={this.state.selectedTechnique} />
+        </div>
+      </EuiOutsideClickDetector>
     </EuiOverlayMask> : <></>;
     return (
       <div

diff --git a/public/components/common/modules/events.tsx b/public/components/common/modules/events.tsx
@@ -15,7 +15,7 @@ import { getAngularModule, getToasts } from '../../../kibana-services';
 import { EventsSelectedFiles } from './events-selected-fields';
 import { ModulesHelper } from './modules-helper';
 import store from '../../../redux/store';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiOverlayMask } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiOverlayMask, EuiOutsideClickDetector } from '@elastic/eui';
 import { PatternHandler } from '../../../react-services/pattern-handler';
 
 import { enhanceDiscoverEventsCell } from './events-enhance-discover-fields';
@@ -263,14 +263,16 @@ export class Events extends Component {
       <Fragment>
         {flyout && (
           <EuiOverlayMask
-            headerZindexLocation="below"
-            // @ts-ignore
-            onClick={() => { this.closeFlyout() }} >
-            <FlyoutComponent
-              closeFlyout={this.closeFlyout}
-              {...this.state.flyout.props}
-              {...this.props}
-            />
+            headerZindexLocation="below">
+            <EuiOutsideClickDetector onOutsideClick={() => { this.closeFlyout() }}>
+              <div>{/* EuiOutsideClickDetector needs a static first child */}
+                <FlyoutComponent
+                  closeFlyout={this.closeFlyout}
+                  {...this.state.flyout.props}
+                  {...this.props}
+                />
+              </div>
+            </EuiOutsideClickDetector>
           </EuiOverlayMask>
         )}
       </Fragment>

diff --git a/public/components/common/welcome/components/fim_events_table/fim_events_table.tsx b/public/components/common/welcome/components/fim_events_table/fim_events_table.tsx
@@ -22,7 +22,8 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiToolTip,
-  EuiOverlayMask
+  EuiOverlayMask,
+  EuiOutsideClickDetector,
 } from '@elastic/eui'
 // @ts-ignore
 import store from '../../../../../redux/store';
@@ -87,16 +88,17 @@ function FimTable({ agent }) {
         itemId="fim-alerts"
         noItemsMessage="No recent events" />
         {isOpen && (
-          <EuiOverlayMask
-            headerZindexLocation="below"
-            onClick={() => setIsOpen(false)}
-          >
-            <FlyoutDetail
-            agentId={agent.id}
-            closeFlyout={() => setIsOpen(false)}
-            fileName={file}
-            view='extern'
-            {...{agent}} />
+          <EuiOverlayMask headerZindexLocation="below">
+            <EuiOutsideClickDetector onOutsideClick={() => setIsOpen(false)}>
+              <div>{/* EuiOutsideClickDetector needs a static first child */}
+                <FlyoutDetail
+                  agentId={agent.id}
+                  closeFlyout={() => setIsOpen(false)}
+                  fileName={file}
+                  view='extern'
+                  {...{ agent }} />
+              </div>
+            </EuiOutsideClickDetector>
           </EuiOverlayMask>
         )}
     </Fragment>

diff --git a/public/components/common/welcome/components/mitre_top/mitre_top.tsx b/public/components/common/welcome/components/mitre_top/mitre_top.tsx
@@ -20,6 +20,7 @@ import {
   EuiButtonIcon,
   EuiLoadingChart,
   EuiOverlayMask,
+  EuiOutsideClickDetector,
   EuiEmptyPrompt,
 } from '@elastic/eui';
 import { FlyoutTechnique } from '../../../../../components/overview/mitre/components/techniques/components/flyout-technique';
@@ -241,21 +242,23 @@ export class MitreTopTactics extends Component {
     const emptyPrompt = this.renderEmptyPrompt();
     return (
       <Fragment>
-        {loading}        
+        {loading}
         {!selectedTactic || alertsCount.length === 0 ? tacticsTop : tecniquesTop}
         {alertsCount.length === 0 && emptyPrompt}
         {flyoutOn &&
-        <EuiOverlayMask 
-          headerZindexLocation="below"
-          onClick={() => this.closeFlyout() } >
-          <FlyoutTechnique 
-            openDashboard={(e,itemId) => this.openDashboard(e,itemId)}
-            openDiscover={(e,itemId) => this.openDiscover(e,itemId)}
-            implicitFilters={[ {"agent.id": this.props.agentId} ] }
-            agentId={this.props.agentId}
-            onChangeFlyout={this.onChangeFlyout}
-            currentTechnique={selectedTechnique} />
-        </EuiOverlayMask>}
+          <EuiOverlayMask headerZindexLocation="below">
+            <EuiOutsideClickDetector onOutsideClick={() => this.closeFlyout()}>
+              <div>{/* EuiOutsideClickDetector needs a static first child */}
+                <FlyoutTechnique
+                  openDashboard={(e, itemId) => this.openDashboard(e, itemId)}
+                  openDiscover={(e, itemId) => this.openDiscover(e, itemId)}
+                  implicitFilters={[{ "agent.id": this.props.agentId }]}
+                  agentId={this.props.agentId}
+                  onChangeFlyout={this.onChangeFlyout}
+                  currentTechnique={selectedTechnique} />
+              </div>
+            </EuiOutsideClickDetector>
+          </EuiOverlayMask>}
       </Fragment>
     )
   }