maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Security Solution] Fixes the Customize Event Renderers modal by removing the EuiOverlayMask (#93150)

Browse source 
* ## [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](8126488021 (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`

* - force precommit git hooks to run

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Andrew Goldstein 2021-03-02 06:45:47 -07:00 committed by GitHub
parent 6ecffcc57c
commit 5a09a296d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx
View file

@ -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,15 +64,6 @@ const StyledEuiModalBody = styled(EuiModalBody)`
}
`;
const StyledEuiOverlayMask = styled(EuiOverlayMask)`
z-index: 8001;
padding-bottom: 0;
> div {
width: 100%;
}
`;
interface StatefulRowRenderersBrowserProps {
timelineId: string;
}
@ -125,54 +115,47 @@ const StatefulRowRenderersBrowserComponent: React.FC<StatefulRowRenderersBrowser
</EuiToolTip>
{show && (
<StyledEuiOverlayMask>
<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>
<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>
<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>
</StyledEuiOverlayMask>
<StyledEuiModalBody>
<RowRenderersBrowser
excludedRowRendererIds={excludedRowRendererIds}
setExcludedRowRendererIds={setExcludedRowRendererIds}
/>
</StyledEuiModalBody>
</StyledEuiModal>
)}
</>
);