[Security Solution] Fix positioning of Kibana banners list inside Sec… (

#80124) (#80221)
elastic · Oct 13, 2020 · 8e37d9f · 8e37d9f
1 parent 1ff65d0
commit 8e37d9f
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 72 deletions.
diff --git 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<HomePageProps> = ({ children }) => {
-  const { application } = useKibana().services;
+  const { application, overlays } = useKibana().services;
   const subPluginId = useRef<string>('');
   const { ref, height = 0 } = useThrottledResizeObserver(300);
+  const banners$ = overlays.banners.get$();
+  const [headerFixed, setHeaderFixed] = useState<boolean>(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<HomePageProps> = ({ children }) => {
 
   return (
     <SecuritySolutionAppWrapper>
-      <HeaderGlobal ref={ref} />
+      <HeaderGlobal ref={ref} isFixed={headerFixed} />
 
-      <Main paddingTop={height} data-test-subj="pageContainer">
+      <Main paddingTop={mainPaddingTop} data-test-subj="pageContainer">
         <DragDropContextWrapper browserFields={browserFields}>
           <UseUrlState indexPattern={indexPattern} navTabs={navTabs} />
           {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
@@ -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<HTMLDivElement, HeaderGlobalProps>(({ 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 (
-      <Wrapper ref={ref} className="siemHeaderGlobal">
-        <WrapperContent $globalFullScreen={globalFullScreen}>
-          <FlexGroup
-            alignItems="center"
-            $hasSibling={globalHeaderPortalNode.hasChildNodes()}
-            justifyContent="spaceBetween"
-            wrap
-          >
-            <FlexItem>
-              <EuiFlexGroup alignItems="center" responsive={false}>
-                <FlexItem grow={false}>
-                  <LinkAnchor onClick={goToOverview} href={getAppOverviewUrl(search)}>
-                    <EuiIcon aria-label={i18n.SECURITY_SOLUTION} type="logoSecurity" size="l" />
-                  </LinkAnchor>
-                </FlexItem>
-
-                <FlexItem component="nav">
-                  <SiemNavigation
-                    display="condensed"
-                    navTabs={
-                      hideDetectionEngine
-                        ? pickBy((_, key) => key !== SecurityPageName.detections, navTabs)
-                        : navTabs
-                    }
-                  />
-                </FlexItem>
-              </EuiFlexGroup>
-            </FlexItem>
-            <FlexItem grow={false}>
-              <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
-                {window.location.pathname.includes(APP_DETECTIONS_PATH) && (
+  forwardRef<HTMLDivElement, HeaderGlobalProps>(
+    ({ 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 (
+        <Wrapper ref={ref} $isFixed={isFixed}>
+          <WrapperContent $globalFullScreen={globalFullScreen}>
+            <FlexGroup
+              alignItems="center"
+              $hasSibling={globalHeaderPortalNode.hasChildNodes()}
+              justifyContent="spaceBetween"
+              wrap
+            >
+              <FlexItem>
+                <EuiFlexGroup alignItems="center" responsive={false}>
                   <FlexItem grow={false}>
-                    <MlPopover />
+                    <LinkAnchor onClick={goToOverview} href={getAppOverviewUrl(search)}>
+                      <EuiIcon aria-label={i18n.SECURITY_SOLUTION} type="logoSecurity" size="l" />
+                    </LinkAnchor>
+                  </FlexItem>
+
+                  <FlexItem component="nav">
+                    <SiemNavigation
+                      display="condensed"
+                      navTabs={
+                        hideDetectionEngine
+                          ? pickBy((_, key) => key !== SecurityPageName.detections, navTabs)
+                          : navTabs
+                      }
+                    />
                   </FlexItem>
-                )}
+                </EuiFlexGroup>
+              </FlexItem>
+              <FlexItem grow={false}>
+                <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
+                  {window.location.pathname.includes(APP_DETECTIONS_PATH) && (
+                    <FlexItem grow={false}>
+                      <MlPopover />
+                    </FlexItem>
+                  )}
 
-                <FlexItem grow={false}>
-                  <EuiButtonEmpty
-                    data-test-subj="add-data"
-                    href={`${basePath}${ADD_DATA_PATH}`}
-                    iconType="plusInCircle"
-                  >
-                    {i18n.BUTTON_ADD_DATA}
-                  </EuiButtonEmpty>
-                </FlexItem>
-              </EuiFlexGroup>
-            </FlexItem>
-          </FlexGroup>
-          <OutPortal node={globalHeaderPortalNode} />
-        </WrapperContent>
-      </Wrapper>
-    );
-  })
+                  <FlexItem grow={false}>
+                    <EuiButtonEmpty
+                      data-test-subj="add-data"
+                      href={`${basePath}${ADD_DATA_PATH}`}
+                      iconType="plusInCircle"
+                    >
+                      {i18n.BUTTON_ADD_DATA}
+                    </EuiButtonEmpty>
+                  </FlexItem>
+                </EuiFlexGroup>
+              </FlexItem>
+            </FlexGroup>
+            <OutPortal node={globalHeaderPortalNode} />
+          </WrapperContent>
+        </Wrapper>
+      );
+    }
+  )
 );
 HeaderGlobal.displayName = 'HeaderGlobal';