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

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Security Solution] [Exceptions] Only use z-index 5000 when
exceptions within timeline
(#147024)](https://github.com/elastic/kibana/pull/147024)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Kevin
Qualters","email":"56408403+kqualters-elastic@users.noreply.github.com"},"sourceCommit":{"committedDate":"2022-12-05T22:06:36Z","message":"[Security
Solution] [Exceptions] Only use z-index 5000 when exceptions within
timeline (#147024)\n\n## Summary\r\nThis pr is a bit of a hack to get
around an issue with eui portals and\r\nthe z-index of the timeline, as
the tags super select that is displayed\r\nwhen the exceptions flyout is
opened when not specifically for a rule\r\ninstance, renders below the
flyout due to z-index of 5000. This change\r\nmakes it so that the
flyout has a z-index of 1000 in that case, and 5000\r\nin the timeline
view, so that all elements are visible as
expected.\r\n\r\n\r\nhttps://user-images.githubusercontent.com/56408403/205704409-9379e5af-2f01-45f0-b5d9-8479ac892b65.mov","sha":"83a334974c9d15ab3b45a5130979dcf5f6212382","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Feature:Rule
Exceptions","v8.6.0","v8.7.0"],"number":147024,"url":"https://github.com/elastic/kibana/pull/147024","mergeCommit":{"message":"[Security
Solution] [Exceptions] Only use z-index 5000 when exceptions within
timeline (#147024)\n\n## Summary\r\nThis pr is a bit of a hack to get
around an issue with eui portals and\r\nthe z-index of the timeline, as
the tags super select that is displayed\r\nwhen the exceptions flyout is
opened when not specifically for a rule\r\ninstance, renders below the
flyout due to z-index of 5000. This change\r\nmakes it so that the
flyout has a z-index of 1000 in that case, and 5000\r\nin the timeline
view, so that all elements are visible as
expected.\r\n\r\n\r\nhttps://user-images.githubusercontent.com/56408403/205704409-9379e5af-2f01-45f0-b5d9-8479ac892b65.mov","sha":"83a334974c9d15ab3b45a5130979dcf5f6212382"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/147024","number":147024,"mergeCommit":{"message":"[Security
Solution] [Exceptions] Only use z-index 5000 when exceptions within
timeline (#147024)\n\n## Summary\r\nThis pr is a bit of a hack to get
around an issue with eui portals and\r\nthe z-index of the timeline, as
the tags super select that is displayed\r\nwhen the exceptions flyout is
opened when not specifically for a rule\r\ninstance, renders below the
flyout due to z-index of 5000. This change\r\nmakes it so that the
flyout has a z-index of 1000 in that case, and 5000\r\nin the timeline
view, so that all elements are visible as
expected.\r\n\r\n\r\nhttps://user-images.githubusercontent.com/56408403/205704409-9379e5af-2f01-45f0-b5d9-8479ac892b65.mov","sha":"83a334974c9d15ab3b45a5130979dcf5f6212382"}}]}]
BACKPORT-->

Co-authored-by: Kevin Qualters <56408403+kqualters-elastic@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2022-12-05 18:36:38 -05:00 committed by GitHub
parent 5fdada7819
commit 9ed9db0fac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 1 deletions

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"

View file

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