From 72b3d7628a3d60b3356e051cb6691decb01dae87 Mon Sep 17 00:00:00 2001
From: Andrew Goldstein <andrew.goldstein@elastic.co>
Date: Mon, 1 Mar 2021 14:44:05 -0700
Subject: [PATCH 1/2] ## [Security Solution] Fixes the Customize Event
 Renderers modal by removing the EuiOverlayMask

Fixes [this issue](https://github.com/elastic/kibana/issues/92798), introduced when [the EUI modal implementation changed](https://github.com/elastic/eui/pull/4480), such that it's no longer necessary to wrap modals in an `EuiOverlayMask`. The mask is now built-in to `EuiModal`.

The change above became effective throughout Kibana when it was upgraded to use a newer version of EUI via [this commit on Feb 16](https://github.com/elastic/kibana/commit/8126488021b2efd674ea1ddec3c99c24029879f5#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519).

This PR resolves the issue by removing the `EuiOverlayMask` around the `Customize Event Renderers modal`, shown in the `After` screenshot below:

### Before

![before](https://user-images.githubusercontent.com/59917825/109154007-b2e23880-7793-11eb-83bb-4774df77c5d6.png)

### After

![after](https://user-images.githubusercontent.com/4459398/109561954-0c4fad80-7a9b-11eb-9283-51d50ec8ea26.png)

### Desk testing

Desk-tested on a 16" 2019 MBP, and on the desktop with the following browser versions:

- Chrome `88.0.4324.192`
- Firefox `86.0`
- Safari `14.0.3`
---
 .../components/row_renderers_browser/index.tsx  | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx
index e96bccd32618d..87c7c86514fff 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx
@@ -10,7 +10,6 @@ import {
   EuiButtonIcon,
   EuiText,
   EuiToolTip,
-  EuiOverlayMask,
   EuiModal,
   EuiModalHeader,
   EuiModalHeaderTitle,
@@ -33,12 +32,12 @@ import { RowRenderersBrowser } from './row_renderers_browser';
 import * as i18n from './translations';
 
 const StyledEuiModal = styled(EuiModal)`
-  margin: 0 auto;
+${({ theme }) => `margin-top: ${theme.eui.euiSizeXXL};`}
   max-width: 95vw;
-  min-height: 95vh;
+  min-height: 90vh;
 
   > .euiModal__flex {
-    max-height: 95vh;
+    max-height: 90vh;
   }
 `;
 
@@ -65,14 +64,6 @@ const StyledEuiModalBody = styled(EuiModalBody)`
   }
 `;
 
-const StyledEuiOverlayMask = styled(EuiOverlayMask)`
-  z-index: 8001;
-  padding-bottom: 0;
-
-  > div {
-    width: 100%;
-  }
-`;
 
 interface StatefulRowRenderersBrowserProps {
   timelineId: string;
@@ -125,7 +116,6 @@ const StatefulRowRenderersBrowserComponent: React.FC<StatefulRowRenderersBrowser
       </EuiToolTip>
 
       {show && (
-        <StyledEuiOverlayMask>
           <StyledEuiModal onClose={hideFieldBrowser}>
             <EuiModalHeader>
               <EuiFlexGroup
@@ -172,7 +162,6 @@ const StatefulRowRenderersBrowserComponent: React.FC<StatefulRowRenderersBrowser
               />
             </StyledEuiModalBody>
           </StyledEuiModal>
-        </StyledEuiOverlayMask>
       )}
     </>
   );

From 4943a23588b1ef03deef7223bfcec6593ca5a290 Mon Sep 17 00:00:00 2001
From: Andrew Goldstein <andrew.goldstein@elastic.co>
Date: Mon, 1 Mar 2021 17:13:00 -0700
Subject: [PATCH 2/2] - force precommit git hooks to run

---
 .../row_renderers_browser/index.tsx           | 90 +++++++++----------
 1 file changed, 42 insertions(+), 48 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx
index 87c7c86514fff..4dcc799d79111 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx
@@ -32,7 +32,7 @@ import { RowRenderersBrowser } from './row_renderers_browser';
 import * as i18n from './translations';
 
 const StyledEuiModal = styled(EuiModal)`
-${({ theme }) => `margin-top: ${theme.eui.euiSizeXXL};`}
+  ${({ theme }) => `margin-top: ${theme.eui.euiSizeXXL};`}
   max-width: 95vw;
   min-height: 90vh;
 
@@ -64,7 +64,6 @@ const StyledEuiModalBody = styled(EuiModalBody)`
   }
 `;
 
-
 interface StatefulRowRenderersBrowserProps {
   timelineId: string;
 }
@@ -116,52 +115,47 @@ const StatefulRowRenderersBrowserComponent: React.FC<StatefulRowRenderersBrowser
       </EuiToolTip>
 
       {show && (
-          <StyledEuiModal onClose={hideFieldBrowser}>
-            <EuiModalHeader>
-              <EuiFlexGroup
-                alignItems="center"
-                justifyContent="spaceBetween"
-                direction="row"
-                gutterSize="none"
-              >
-                <EuiFlexItem grow={false}>
-                  <EuiModalHeaderTitle>{i18n.CUSTOMIZE_EVENT_RENDERERS_TITLE}</EuiModalHeaderTitle>
-                  <EuiText size="s">{i18n.CUSTOMIZE_EVENT_RENDERERS_DESCRIPTION}</EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiFlexGroup>
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonEmpty
-                        size="s"
-                        data-test-subj="disable-all"
-                        onClick={handleDisableAll}
-                      >
-                        {i18n.DISABLE_ALL}
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-
-                    <EuiFlexItem grow={false}>
-                      <EuiButton
-                        fill
-                        size="s"
-                        data-test-subj="enable-all"
-                        onClick={handleEnableAll}
-                      >
-                        {i18n.ENABLE_ALL}
-                      </EuiButton>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiModalHeader>
-
-            <StyledEuiModalBody>
-              <RowRenderersBrowser
-                excludedRowRendererIds={excludedRowRendererIds}
-                setExcludedRowRendererIds={setExcludedRowRendererIds}
-              />
-            </StyledEuiModalBody>
-          </StyledEuiModal>
+        <StyledEuiModal onClose={hideFieldBrowser}>
+          <EuiModalHeader>
+            <EuiFlexGroup
+              alignItems="center"
+              justifyContent="spaceBetween"
+              direction="row"
+              gutterSize="none"
+            >
+              <EuiFlexItem grow={false}>
+                <EuiModalHeaderTitle>{i18n.CUSTOMIZE_EVENT_RENDERERS_TITLE}</EuiModalHeaderTitle>
+                <EuiText size="s">{i18n.CUSTOMIZE_EVENT_RENDERERS_DESCRIPTION}</EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFlexGroup>
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonEmpty
+                      size="s"
+                      data-test-subj="disable-all"
+                      onClick={handleDisableAll}
+                    >
+                      {i18n.DISABLE_ALL}
+                    </EuiButtonEmpty>
+                  </EuiFlexItem>
+
+                  <EuiFlexItem grow={false}>
+                    <EuiButton fill size="s" data-test-subj="enable-all" onClick={handleEnableAll}>
+                      {i18n.ENABLE_ALL}
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiModalHeader>
+
+          <StyledEuiModalBody>
+            <RowRenderersBrowser
+              excludedRowRendererIds={excludedRowRendererIds}
+              setExcludedRowRendererIds={setExcludedRowRendererIds}
+            />
+          </StyledEuiModalBody>
+        </StyledEuiModal>
       )}
     </>
   );