diff --git a/x-pack/plugins/security_solution/public/app/home/index.tsx b/x-pack/plugins/security_solution/public/app/home/index.tsx index 079c34114dfd6..6573457c5f39a 100644 --- a/x-pack/plugins/security_solution/public/app/home/index.tsx +++ b/x-pack/plugins/security_solution/public/app/home/index.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; import { TimelineId } from '../../../common/types/timeline'; @@ -44,9 +44,18 @@ interface HomePageProps { } const HomePageComponent: React.FC = ({ children }) => { - const { application } = useKibana().services; + const { application, overlays } = useKibana().services; const subPluginId = useRef(''); const { ref, height = 0 } = useThrottledResizeObserver(300); + const banners$ = overlays.banners.get$(); + const [headerFixed, setHeaderFixed] = useState(true); + const mainPaddingTop = headerFixed ? height : 0; + + useEffect(() => { + const subscription = banners$.subscribe((banners) => setHeaderFixed(!banners.length)); + return () => subscription.unsubscribe(); + }, [banners$]); // Only un/re-subscribe if the Observable changes + application.currentAppId$.subscribe((appId) => { subPluginId.current = appId ?? ''; }); @@ -72,9 +81,9 @@ const HomePageComponent: React.FC = ({ children }) => { return ( - + -
+
{indicesExist && showTimeline && ( diff --git a/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx b/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx index 0c6a54d4434d2..11623e1367574 100644 --- a/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx @@ -24,13 +24,13 @@ import { APP_ID, ADD_DATA_PATH, APP_DETECTIONS_PATH } from '../../../../common/c import { useGlobalHeaderPortal } from '../../hooks/use_global_header_portal'; import { LinkAnchor } from '../links'; -const Wrapper = styled.header` - ${({ theme }) => ` +const Wrapper = styled.header<{ $isFixed: boolean }>` + ${({ theme, $isFixed }) => ` background: ${theme.eui.euiColorEmptyShade}; border-bottom: ${theme.eui.euiBorderThin}; width: 100%; z-index: ${theme.eui.euiZNavigation}; - position: fixed; + position: ${$isFixed ? 'fixed' : 'relative'}; `} `; Wrapper.displayName = 'Wrapper'; @@ -62,75 +62,78 @@ FlexGroup.displayName = 'FlexGroup'; interface HeaderGlobalProps { hideDetectionEngine?: boolean; + isFixed?: boolean; } export const HeaderGlobal = React.memo( - forwardRef(({ hideDetectionEngine = false }, ref) => { - const { globalHeaderPortalNode } = useGlobalHeaderPortal(); - const { globalFullScreen } = useFullScreen(); - const search = useGetUrlSearch(navTabs.overview); - const { application, http } = useKibana().services; - const { navigateToApp } = application; - const basePath = http.basePath.get(); - const goToOverview = useCallback( - (ev) => { - ev.preventDefault(); - navigateToApp(`${APP_ID}:${SecurityPageName.overview}`, { path: search }); - }, - [navigateToApp, search] - ); - return ( - - - - - - - - - - - - - key !== SecurityPageName.detections, navTabs) - : navTabs - } - /> - - - - - - {window.location.pathname.includes(APP_DETECTIONS_PATH) && ( + forwardRef( + ({ hideDetectionEngine = false, isFixed = true }, ref) => { + const { globalHeaderPortalNode } = useGlobalHeaderPortal(); + const { globalFullScreen } = useFullScreen(); + const search = useGetUrlSearch(navTabs.overview); + const { application, http } = useKibana().services; + const { navigateToApp } = application; + const basePath = http.basePath.get(); + const goToOverview = useCallback( + (ev) => { + ev.preventDefault(); + navigateToApp(`${APP_ID}:${SecurityPageName.overview}`, { path: search }); + }, + [navigateToApp, search] + ); + return ( + + + + + - + + + + + + + key !== SecurityPageName.detections, navTabs) + : navTabs + } + /> - )} + + + + + {window.location.pathname.includes(APP_DETECTIONS_PATH) && ( + + + + )} - - - {i18n.BUTTON_ADD_DATA} - - - - - - - - - ); - }) + + + {i18n.BUTTON_ADD_DATA} + + + + + + + + + ); + } + ) ); HeaderGlobal.displayName = 'HeaderGlobal';