github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution] [Exceptions] Only use z-index 5000 when exceptions within timeline (#147024)

Browse source 
## Summary
This pr is a bit of a hack to get around an issue with eui portals and
the z-index of the timeline, as the tags super select that is displayed
when the exceptions flyout is opened when not specifically for a rule
instance, renders below the flyout due to z-index of 5000. This change
makes it so that the flyout has a z-index of 1000 in that case, and 5000
in the timeline view, so that all elements are visible as expected.


https://user-images.githubusercontent.com/56408403/205704409-9379e5af-2f01-45f0-b5d9-8479ac892b65.mov
This commit is contained in:
Kevin Qualters 2022-12-05 17:06:36 -05:00 • committed by GitHub
parent 81635fca73
commit 83a334974c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx
View file

@ -77,6 +77,7 @@ export interface AddExceptionFlyoutProps {
sharedListToAddTo?: ExceptionListSchema[];
onCancel: (didRuleChange: boolean) => void;
onConfirm: (didRuleChange: boolean, didCloseAlert: boolean, didBulkCloseAlert: boolean) => void;
isNonTimeline?: boolean;
}
const FlyoutBodySection = styled(EuiFlyoutBody)`
@ -110,6 +111,7 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
sharedListToAddTo,
onCancel,
onConfirm,
isNonTimeline = false,
}: AddExceptionFlyoutProps) {
const { isLoading, indexPatterns } = useFetchIndexPatterns(rules);
const [isSubmitting, submitNewExceptionItems] = useAddNewExceptionItems();
@ -425,7 +427,7 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
return (
<EuiFlyout
ownFocus
maskProps={{ style: 'z-index: 5000' }} // For an edge case to display above the timeline flyout
maskProps={{ style: isNonTimeline === false ? 'z-index: 5000' : 'z-index: 1000' }} // For an edge case to display above the timeline flyout
size="l"
onClose={handleCloseFlyout}
data-test-subj="addExceptionFlyout"

1
x-pack/plugins/security_solution/public/exceptions/pages/shared_lists/index.tsx
View file

@ -449,6 +449,7 @@ export const SharedLists = React.memo(() => {
showAlertCloseOptions
onCancel={(didRuleChange: boolean) => setDisplayAddExceptionItemFlyout(false)}
onConfirm={(didRuleChange: boolean) => setDisplayAddExceptionItemFlyout(false)}
isNonTimeline={true}
/>
)}