[8.14] [Security Solution][Alert details] - fix timeline ES|QL flyout…

… shown behind (#182296) (#182529)

# Backport

This will backport the following commits from `main` to `8.14`:
- [[Security Solution][Alert details] - fix timeline ES|QL flyout shown
behind (#182296)](#182296)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2024-05-02T21:51:52Z","message":"[Security
Solution][Alert details] - fix timeline ES|QL flyout shown behind
(#182296)","sha":"2c6d13e661db96988e51a355dbcbde5e6d04e1e1","branchLabelMapping":{"^v8.15.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Threat
Hunting:Investigations","v8.14.0","v8.15.0"],"number":182296,"url":"https://github.com/elastic/kibana/pull/182296","mergeCommit":{"message":"[Security
Solution][Alert details] - fix timeline ES|QL flyout shown behind
(#182296)","sha":"2c6d13e661db96988e51a355dbcbde5e6d04e1e1"}},"sourceBranch":"main","suggestedTargetBranches":["8.14"],"targetPullRequestStates":[{"branch":"8.14","label":"v8.14.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.15.0","labelRegex":"^v8.15.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/182296","number":182296,"mergeCommit":{"message":"[Security
Solution][Alert details] - fix timeline ES|QL flyout shown behind
(#182296)","sha":"2c6d13e661db96988e51a355dbcbde5e6d04e1e1"}}]}]
BACKPORT-->

src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx

@@ -209,6 +209,7 @@ export function DiscoverGridFlyout({
   return (
     <EuiPortal>
       <EuiFlyout
+        className="DiscoverFlyout" // used to override the z-index of the flyout from SecuritySolution
         onClose={onClose}
         size={flyoutSize}
         data-test-subj="docTableDetailsFlyout"

x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/esql/index.tsx

@@ -24,7 +24,7 @@ import { useKibana } from '../../../../../common/lib/kibana';
 import { useDiscoverState } from './use_discover_state';
 import { SourcererScopeName } from '../../../../../common/store/sourcerer/model';
 import { useSetDiscoverCustomizationCallbacks } from './customizations/use_set_discover_customizations';
-import { EmbeddedDiscoverContainer } from './styles';
+import { EmbeddedDiscoverContainer, TimelineESQLGlobalStyles } from './styles';
 import { timelineSelectors } from '../../../../store';
 import { useShallowEqualSelector } from '../../../../../common/hooks/use_selector';
 import { timelineDefaults } from '../../../../store/defaults';
@@ -258,6 +258,7 @@ export const DiscoverTabContent: FC<DiscoverTabContentProps> = ({ timelineId })
   return (
     <EmbeddedDiscoverContainer data-test-subj="timeline-embedded-discover">
       <HideSearchSessionIndicatorBreadcrumbIcon />
+      <TimelineESQLGlobalStyles />
       <DiscoverContainer
         overrideServices={services}
         scopedHistory={history as ScopedHistory}

x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx

@@ -6,6 +6,7 @@
  */
 
 import styled from '@emotion/styled';
+import { createGlobalStyle } from 'styled-components';
 
 export const EmbeddedDiscoverContainer = styled.div`
   width: 100%;
@@ -14,3 +15,10 @@ export const EmbeddedDiscoverContainer = styled.div`
   display: grid,
   place-items: center
 `;
+
+// TODO remember to remove the className added to discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx when removing this
+export const TimelineESQLGlobalStyles = createGlobalStyle`
+  body:has(.timeline-portal-overlay-mask) .DiscoverFlyout {
+    z-index: 1002; // For its usage in the Security Solution timeline, we need Discover flyout to be above the timeline flyout (which has a z-index of 1001)
+  }
+`;