Skip to content

Commit 2f0bed4

Browse files
PhilippeObertiPhilippeOberti
committed
[Security Solution] bump Timeline, document and timeline flyout components' z-index by 1 to be on top of side nav
1 parent 21c4cb1 commit 2f0bed4

File tree

11 files changed

+72
-58
lines changed

11 files changed

+72
-58
lines changed

‎src/platform/plugins/shared/data_view_editor/public/open_editor.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99

1010
import React from 'react';
1111
import type { CoreStart, OverlayRef } from '@kbn/core/public';
12-
import type { DataViewsServicePublic } from '@kbn/data-views-plugin/public';
13-
import type { DataView } from '@kbn/data-views-plugin/public';
12+
import type { DataView, DataViewsServicePublic } from '@kbn/data-views-plugin/public';
1413

1514
import { toMountPoint } from '@kbn/react-kibana-mount';
1615
import type { DataPublicPluginStart } from './shared_imports';
@@ -93,9 +92,9 @@ export const getEditorOpener =
9392
{
9493
hideCloseButton: true,
9594
size: 'l',
95+
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
9696
maskProps: {
97-
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
98-
style: 'z-index: 1003', // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
97+
style: 'z-index: 1004', // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
9998
},
10099
'aria-labelledby': 'dataViewEditorFlyoutTitle',
101100
}

‎src/platform/plugins/shared/data_view_field_editor/public/open_editor.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,14 @@ import { euiFlyoutClassname } from './constants';
1616
import type { ApiService } from './lib/api';
1717
import type {
1818
DataPublicPluginStart,
19-
UsageCollectionStart,
20-
RuntimeType,
19+
DataView,
20+
DataViewField,
2121
DataViewsPublicPluginStart,
2222
FieldFormatsStart,
23-
DataViewField,
24-
DataView,
23+
RuntimeType,
24+
UsageCollectionStart,
2525
} from './shared_imports';
26-
import { DataViewLazy } from './shared_imports';
27-
import { createKibanaReactContext } from './shared_imports';
26+
import { createKibanaReactContext, DataViewLazy } from './shared_imports';
2827
import type { CloseEditor, Field, InternalFieldType, PluginStart } from './types';
2928

3029
/**
@@ -246,7 +245,7 @@ export const getFieldEditorOpener =
246245
maskProps: {
247246
className: 'indexPatternFieldEditorMaskOverlay',
248247
// // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
249-
style: 'z-index: 1003', // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
248+
style: 'z-index: 1004', // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
250249
},
251250
}
252251
);

‎x-pack/platform/plugins/shared/cases/public/components/create/flyout/create_case_flyout.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
* 2.0.
66
*/
77

8-
import React from 'react';
8+
import React, { useMemo } from 'react';
99
import { css } from '@emotion/react';
10-
import { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody, useEuiTheme } from '@elastic/eui';
10+
import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle, useEuiTheme } from '@elastic/eui';
1111

1212
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
1313
import { noop } from 'lodash';
@@ -34,7 +34,12 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
3434
({ afterCaseCreated, attachments, headerContent, initialValue, onClose, onSuccess }) => {
3535
const handleCancel = onClose || noop;
3636
const handleOnSuccess = onSuccess || noop;
37+
3738
const { euiTheme } = useEuiTheme();
39+
const maskProps = useMemo(
40+
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
41+
[euiTheme.levels.flyout]
42+
);
3843

3944
return (
4045
<>
@@ -44,7 +49,7 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
4449
tour-step="create-case-flyout"
4550
data-test-subj="create-case-flyout"
4651
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
47-
maskProps={{ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
52+
maskProps={maskProps}
4853
>
4954
<EuiFlyoutHeader data-test-subj="create-case-flyout-header" hasBorder>
5055
<EuiTitle size="m">

‎x-pack/platform/plugins/shared/osquery/public/live_queries/form/query_details_flyout.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
*/
77

88
import {
9+
EuiCodeBlock,
10+
EuiFlexItem,
911
EuiFlyout,
10-
EuiTitle,
1112
EuiFlyoutBody,
1213
EuiFlyoutHeader,
1314
EuiPortal,
14-
EuiFlexItem,
15-
EuiCodeBlock,
1615
EuiSpacer,
16+
EuiTitle,
1717
useEuiTheme,
1818
} from '@elastic/eui';
1919
import React, { useMemo } from 'react';
@@ -29,10 +29,8 @@ interface QueryDetailsFlyoutProps {
2929

3030
const QueryDetailsFlyoutComponent: React.FC<QueryDetailsFlyoutProps> = ({ action, onClose }) => {
3131
const { euiTheme } = useEuiTheme();
32-
33-
// we need this flyout to be above the timeline flyout (which has a z-index of 1002)
3432
const maskProps = useMemo(
35-
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }),
33+
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
3634
[euiTheme.levels.flyout]
3735
);
3836

‎x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,52 @@
55
* 2.0.
66
*/
77

8-
import React, { memo, useEffect, useCallback, useMemo, useReducer, useState } from 'react';
8+
import React, { memo, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
99
import styled, { css } from 'styled-components';
1010
import { isEmpty } from 'lodash/fp';
1111

1212
import {
13+
EuiButton,
14+
EuiCallOut,
1315
EuiFlyout,
14-
EuiTitle,
1516
EuiFlyoutBody,
16-
EuiButton,
1717
EuiHorizontalRule,
18-
EuiSpacer,
1918
EuiSkeletonText,
20-
EuiCallOut,
19+
EuiSpacer,
2120
EuiText,
21+
EuiTitle,
2222
useEuiTheme,
2323
useGeneratedHtmlId,
2424
} from '@elastic/eui';
2525

2626
import { ENDPOINT_LIST_ID } from '@kbn/securitysolution-list-constants';
27+
import type { ExceptionListSchema, OsTypeArray } from '@kbn/securitysolution-io-ts-list-types';
2728
import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
28-
import type { OsTypeArray, ExceptionListSchema } from '@kbn/securitysolution-io-ts-list-types';
29-
import {
30-
hasWrongOperatorWithWildcard,
31-
hasPartialCodeSignatureEntry,
32-
} from '@kbn/securitysolution-list-utils';
3329
import type {
3430
ExceptionsBuilderExceptionItem,
3531
ExceptionsBuilderReturnExceptionItem,
3632
} from '@kbn/securitysolution-list-utils';
33+
import {
34+
hasPartialCodeSignatureEntry,
35+
hasWrongOperatorWithWildcard,
36+
} from '@kbn/securitysolution-list-utils';
3737

3838
import {
39-
WildCardWithWrongOperatorCallout,
4039
PartialCodeSignatureCallout,
40+
WildCardWithWrongOperatorCallout,
4141
} from '@kbn/securitysolution-exception-list-components';
4242
import type { Moment } from 'moment';
4343
import type { Status } from '../../../../../common/api/detection_engine';
4444
import * as i18n from './translations';
4545
import { ExceptionItemComments } from '../item_comments';
4646
import {
4747
defaultEndpointExceptionItems,
48-
retrieveAlertOsTypes,
4948
getPrepopulatedRuleExceptionWithHighlightFields,
49+
retrieveAlertOsTypes,
5050
} from '../../utils/helpers';
51-
import { RULE_EXCEPTION, ENDPOINT_EXCEPTION } from '../../utils/translations';
51+
import { ENDPOINT_EXCEPTION, RULE_EXCEPTION } from '../../utils/translations';
5252
import type { AlertData } from '../../utils/types';
53-
import { initialState, createExceptionItemsReducer } from './reducer';
53+
import { createExceptionItemsReducer, initialState } from './reducer';
5454
import { ExceptionsFlyoutMeta } from '../flyout_components/item_meta_form';
5555
import { ExceptionsConditions } from '../flyout_components/item_conditions';
5656
import { useFetchIndexPatterns } from '../../logic/use_exception_flyout_data';
@@ -114,6 +114,11 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
114114
onConfirm,
115115
}: AddExceptionFlyoutProps) {
116116
const { euiTheme } = useEuiTheme();
117+
const maskProps = useMemo(
118+
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
119+
[euiTheme.levels.flyout]
120+
);
121+
117122
const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
118123
const { isLoading, indexPatterns, getExtendedFields } = useFetchIndexPatterns(rules);
119124
const [isSubmitting, submitNewExceptionItems] = useAddNewExceptionItems();
@@ -516,7 +521,7 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
516521
data-test-subj="addExceptionFlyout"
517522
aria-labelledby={exceptionFlyoutTitleId}
518523
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
519-
maskProps={{ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
524+
maskProps={maskProps}
520525
>
521526
<ExceptionFlyoutHeader
522527
listType={listType}
@@ -536,6 +541,7 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
536541
{errorSubmitting != null && (
537542
<>
538543
<EuiCallOut
544+
announceOnMount
539545
data-test-subj="addExceptionErrorCallOut"
540546
title={i18n.SUBMIT_ERROR_TITLE}
541547
color="danger"

‎x-pack/solutions/security/plugins/security_solution/public/detections/components/osquery/osquery_flyout.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import React, { useCallback, useMemo } from 'react';
99
import styled from 'styled-components';
1010
import {
1111
EuiFlyout,
12-
EuiFlyoutFooter,
1312
EuiFlyoutBody,
13+
EuiFlyoutFooter,
1414
EuiFlyoutHeader,
1515
EuiTitle,
1616
useEuiTheme,
@@ -48,10 +48,8 @@ const OsqueryFlyoutComponent: React.FC<OsqueryFlyoutProps> = ({
4848
ecsData,
4949
}) => {
5050
const { euiTheme } = useEuiTheme();
51-
52-
// we need this flyout to be above the timeline flyout (which has a z-index of 1002)
5351
const maskProps = useMemo(
54-
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }),
52+
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
5553
[euiTheme.levels.flyout]
5654
);
5755

‎x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/take_action_button.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import type { FC } from 'react';
99
import React, { useCallback, useMemo, useState } from 'react';
1010
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
11-
import { useEuiTheme, EuiFlyout } from '@elastic/eui';
11+
import { EuiFlyout, useEuiTheme } from '@elastic/eui';
1212
import { find } from 'lodash/fp';
1313
import { useBasicDataFromDetailsData } from '../hooks/use_basic_data_from_details_data';
1414
import type { Status } from '../../../../../common/api/detection_engine';
@@ -25,6 +25,7 @@ import { isActiveTimeline } from '../../../../helpers';
2525
import { useEventFilterModal } from '../../../../detections/components/alerts_table/timeline_actions/use_event_filter_modal';
2626
import { IsolateHostPanelHeader } from '../../isolate_host/header';
2727
import { IsolateHostPanelContent } from '../../isolate_host/content';
28+
2829
interface AlertSummaryData {
2930
/**
3031
* Status of the alert (open, closed...)
@@ -53,9 +54,8 @@ interface AlertSummaryData {
5354
*/
5455
export const TakeActionButton: FC = () => {
5556
const { euiTheme } = useEuiTheme();
56-
// we need this flyout to be above the timeline flyout (which has a z-index of 1002)
57-
const flyoutZIndex = useMemo(
58-
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }),
57+
const maskProps = useMemo(
58+
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
5959
[euiTheme]
6060
);
6161

@@ -190,7 +190,7 @@ export const TakeActionButton: FC = () => {
190190
data={dataAsNestedObject}
191191
onCancel={closeAddEventFilterModal}
192192
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
193-
maskProps={flyoutZIndex} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
193+
maskProps={maskProps}
194194
/>
195195
)}
196196

@@ -205,7 +205,7 @@ export const TakeActionButton: FC = () => {
205205

206206
{isHostIsolationPanelOpen && (
207207
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
208-
<EuiFlyout onClose={showAlertDetails} size="m" maskProps={flyoutZIndex}>
208+
<EuiFlyout onClose={showAlertDetails} size="m" maskProps={maskProps}>
209209
<IsolateHostPanelHeader
210210
isolateAction={isolateAction}
211211
data={dataFormattedForFieldBrowser}

‎x-pack/solutions/security/plugins/security_solution/public/flyout/index.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ import { HostDetailsPanel, HostDetailsPanelKey } from './entity_details/host_det
6363
import type { AnalyzerPanelExpandableFlyoutProps } from './document_details/analyzer_panels';
6464
import { AnalyzerPanel } from './document_details/analyzer_panels';
6565
import {
66+
GenericEntityPanelKey,
6667
HostPanelKey,
6768
ServicePanelKey,
68-
GenericEntityPanelKey,
6969
UserPanelKey,
7070
} from './entity_details/shared/constants';
7171
import type { ServicePanelExpandableFlyoutProps } from './entity_details/service_right';
@@ -265,11 +265,13 @@ export const TIMELINE_ON_CLOSE_EVENT = `expandable-flyout-on-close-${Flyouts.tim
265265

266266
/**
267267
* Flyout used for the Security Solution application
268-
* We keep the default EUI 1000 z-index to ensure it is always rendered behind Timeline (which has a z-index of 1001)
268+
* We keep the default EUI 1001 z-index to ensure it is always rendered behind Timeline (which has a z-index of 1002)
269269
* We propagate the onClose callback to the rest of Security Solution using a window event 'expandable-flyout-on-close-SecuritySolution'
270270
* This flyout support push/overlay mode. The value is saved in local storage.
271271
*/
272272
export const SecuritySolutionFlyout = memo(() => {
273+
const { euiTheme } = useEuiTheme();
274+
273275
const onClose = useCallback(
274276
() =>
275277
window.dispatchEvent(
@@ -284,6 +286,7 @@ export const SecuritySolutionFlyout = memo(() => {
284286
<ExpandableFlyout
285287
registeredPanels={expandableFlyoutDocumentsPanels}
286288
paddingSize="none"
289+
customStyles={{ 'z-index': (euiTheme.levels.flyout as number) + 1 }}
287290
onClose={onClose}
288291
/>
289292
);
@@ -293,7 +296,7 @@ SecuritySolutionFlyout.displayName = 'SecuritySolutionFlyout';
293296

294297
/**
295298
* Flyout used in Timeline
296-
* We set the z-index to 1002 to ensure it is always rendered above Timeline (which has a z-index of 1001)
299+
* We set the z-index to 1003 to ensure it is always rendered above Timeline (which has a z-index of 1002)
297300
* We propagate the onClose callback to the rest of Security Solution using a window event 'expandable-flyout-on-close-Timeline'
298301
* This flyout does not support push mode, because timeline being rendered in a modal (EUiPortal), it's very difficult to dynamically change its width.
299302
*/
@@ -314,7 +317,7 @@ export const TimelineFlyout = memo(() => {
314317
<ExpandableFlyout
315318
registeredPanels={expandableFlyoutDocumentsPanels}
316319
paddingSize="none"
317-
customStyles={{ 'z-index': (euiTheme.levels.flyout as number) + 2 }}
320+
customStyles={{ 'z-index': (euiTheme.levels.flyout as number) + 3 }}
318321
onClose={onClose}
319322
flyoutCustomProps={{
320323
pushVsOverlay: {

‎x-pack/solutions/security/plugins/security_solution/public/management/components/endpoint_responder/components/action_log_button.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* 2.0.
66
*/
77

8-
import React, { memo, useCallback, useState } from 'react';
8+
import React, { memo, useCallback, useMemo, useState } from 'react';
99
import {
1010
EuiButton,
1111
EuiFlyout,
@@ -22,6 +22,11 @@ import { UX_MESSAGES } from '../../endpoint_response_actions_list/translations';
2222

2323
export const ActionLogButton = memo<EndpointResponderExtensionComponentProps>((props) => {
2424
const { euiTheme } = useEuiTheme();
25+
const maskProps = useMemo(
26+
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
27+
[euiTheme]
28+
);
29+
2530
const [showActionLogFlyout, setShowActionLogFlyout] = useState<boolean>(false);
2631
const toggleActionLog = useCallback(() => {
2732
setShowActionLogFlyout((prevState) => {
@@ -54,7 +59,7 @@ export const ActionLogButton = memo<EndpointResponderExtensionComponentProps>((p
5459
aria-labelledby={responderActionLogFlyoutTitleId}
5560
data-test-subj="responderActionLogFlyout"
5661
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
57-
maskProps={{ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
62+
maskProps={maskProps}
5863
>
5964
<EuiFlyoutHeader hasBorder>
6065
<EuiTitle size="m">

‎x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import React from 'react';
88
import { css } from '@emotion/css';
99
import { Global } from '@emotion/react';
1010
import {
11-
useEuiTheme,
1211
euiAnimFadeIn,
13-
transparentize,
12+
euiAnimSlideInUp,
1413
euiBackgroundColor,
1514
euiCanAnimate,
16-
euiAnimSlideInUp,
15+
transparentize,
16+
useEuiTheme,
1717
} from '@elastic/eui';
1818

1919
export const usePaneStyles = () => {
@@ -30,7 +30,7 @@ export const usePaneStyles = () => {
3030
// TODO EUI: add color with transparency
3131
background: ${transparentize(euiTheme.colors.ink, 0.5)};
3232
z-index: ${(euiTheme.levels.flyout as number) +
33-
1}; // this z-index needs to be between the eventFlyout (set at 1000) and the timelineFlyout (set at 1002)
33+
2}; // this z-index needs to be between the documentFlyout (set at 1001) and the timelineFlyout (set at 1003)
3434
3535
${euiCanAnimate} {
3636
animation: ${euiAnimFadeIn} ${euiTheme.animation.fast} ease-in;

0 commit comments

Comments
 (0)