[Security Solution] Fixes the Customize Event Renderers modal by removing the EuiOverlayMask (#93150)
* ## [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:
parent
6ecffcc57c
commit
5a09a296d1
|
@ -10,7 +10,6 @@ import {
|
||||||
EuiButtonIcon,
|
EuiButtonIcon,
|
||||||
EuiText,
|
EuiText,
|
||||||
EuiToolTip,
|
EuiToolTip,
|
||||||
EuiOverlayMask,
|
|
||||||
EuiModal,
|
EuiModal,
|
||||||
EuiModalHeader,
|
EuiModalHeader,
|
||||||
EuiModalHeaderTitle,
|
EuiModalHeaderTitle,
|
||||||
|
@ -33,12 +32,12 @@ import { RowRenderersBrowser } from './row_renderers_browser';
|
||||||
import * as i18n from './translations';
|
import * as i18n from './translations';
|
||||||
|
|
||||||
const StyledEuiModal = styled(EuiModal)`
|
const StyledEuiModal = styled(EuiModal)`
|
||||||
margin: 0 auto;
|
${({ theme }) => `margin-top: ${theme.eui.euiSizeXXL};`}
|
||||||
max-width: 95vw;
|
max-width: 95vw;
|
||||||
min-height: 95vh;
|
min-height: 90vh;
|
||||||
|
|
||||||
> .euiModal__flex {
|
> .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 {
|
interface StatefulRowRenderersBrowserProps {
|
||||||
timelineId: string;
|
timelineId: string;
|
||||||
}
|
}
|
||||||
|
@ -125,54 +115,47 @@ const StatefulRowRenderersBrowserComponent: React.FC<StatefulRowRenderersBrowser
|
||||||
</EuiToolTip>
|
</EuiToolTip>
|
||||||
|
|
||||||
{show && (
|
{show && (
|
||||||
<StyledEuiOverlayMask>
|
<StyledEuiModal onClose={hideFieldBrowser}>
|
||||||
<StyledEuiModal onClose={hideFieldBrowser}>
|
<EuiModalHeader>
|
||||||
<EuiModalHeader>
|
<EuiFlexGroup
|
||||||
<EuiFlexGroup
|
alignItems="center"
|
||||||
alignItems="center"
|
justifyContent="spaceBetween"
|
||||||
justifyContent="spaceBetween"
|
direction="row"
|
||||||
direction="row"
|
gutterSize="none"
|
||||||
gutterSize="none"
|
>
|
||||||
>
|
<EuiFlexItem grow={false}>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiModalHeaderTitle>{i18n.CUSTOMIZE_EVENT_RENDERERS_TITLE}</EuiModalHeaderTitle>
|
||||||
<EuiModalHeaderTitle>{i18n.CUSTOMIZE_EVENT_RENDERERS_TITLE}</EuiModalHeaderTitle>
|
<EuiText size="s">{i18n.CUSTOMIZE_EVENT_RENDERERS_DESCRIPTION}</EuiText>
|
||||||
<EuiText size="s">{i18n.CUSTOMIZE_EVENT_RENDERERS_DESCRIPTION}</EuiText>
|
</EuiFlexItem>
|
||||||
</EuiFlexItem>
|
<EuiFlexItem grow={false}>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexGroup>
|
||||||
<EuiFlexGroup>
|
<EuiFlexItem grow={false}>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiButtonEmpty
|
||||||
<EuiButtonEmpty
|
size="s"
|
||||||
size="s"
|
data-test-subj="disable-all"
|
||||||
data-test-subj="disable-all"
|
onClick={handleDisableAll}
|
||||||
onClick={handleDisableAll}
|
>
|
||||||
>
|
{i18n.DISABLE_ALL}
|
||||||
{i18n.DISABLE_ALL}
|
</EuiButtonEmpty>
|
||||||
</EuiButtonEmpty>
|
</EuiFlexItem>
|
||||||
</EuiFlexItem>
|
|
||||||
|
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<EuiButton
|
<EuiButton fill size="s" data-test-subj="enable-all" onClick={handleEnableAll}>
|
||||||
fill
|
{i18n.ENABLE_ALL}
|
||||||
size="s"
|
</EuiButton>
|
||||||
data-test-subj="enable-all"
|
</EuiFlexItem>
|
||||||
onClick={handleEnableAll}
|
</EuiFlexGroup>
|
||||||
>
|
</EuiFlexItem>
|
||||||
{i18n.ENABLE_ALL}
|
</EuiFlexGroup>
|
||||||
</EuiButton>
|
</EuiModalHeader>
|
||||||
</EuiFlexItem>
|
|
||||||
</EuiFlexGroup>
|
|
||||||
</EuiFlexItem>
|
|
||||||
</EuiFlexGroup>
|
|
||||||
</EuiModalHeader>
|
|
||||||
|
|
||||||
<StyledEuiModalBody>
|
<StyledEuiModalBody>
|
||||||
<RowRenderersBrowser
|
<RowRenderersBrowser
|
||||||
excludedRowRendererIds={excludedRowRendererIds}
|
excludedRowRendererIds={excludedRowRendererIds}
|
||||||
setExcludedRowRendererIds={setExcludedRowRendererIds}
|
setExcludedRowRendererIds={setExcludedRowRendererIds}
|
||||||
/>
|
/>
|
||||||
</StyledEuiModalBody>
|
</StyledEuiModalBody>
|
||||||
</StyledEuiModal>
|
</StyledEuiModal>
|
||||||
</StyledEuiOverlayMask>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue