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

…behind (elastic#182296) (cherry picked from commit 2c6d13e) # Conflicts: # src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
PhilippeOberti · May 2, 2024 · 3312322 · 3312322
1 parent d6fa87e
commit 3312322
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/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"

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/esql/index.tsx b/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}

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx b/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)
+  }
+`;