Fix Application Header Layout for Discover

Signed-off-by: Suchit Sahoo <[email protected]>
opensearch-project · Aug 16, 2024 · 87c2fcb · 87c2fcb
1 parent 8f8d5c1
commit 87c2fcb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx
@@ -31,6 +31,7 @@ export const AppContainer = React.memo(
     const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
     const { uiSettings } = opensearchDashboards.services;
     const isEnhancementsEnabled = uiSettings?.get(QUERY_ENHANCEMENT_ENABLED_SETTING);
+    const showActionsInGroup = uiSettings?.get('home:useNewHomePage');
 
     const topLinkRef = useRef<HTMLDivElement>(null);
     const datePickerRef = useRef<HTMLDivElement>(null);
@@ -47,21 +48,22 @@ export const AppContainer = React.memo(
       topLinkRef,
       datePickerRef,
     };
-
     // Render the application DOM.
     return (
       <div className="mainPage">
         {isEnhancementsEnabled && (
           <EuiFlexGroup
             direction="row"
-            className="mainPage navBar"
+            className={`mainPage ${showActionsInGroup ? '' : 'navBar'}"`}
             gutterSize="none"
             alignItems="center"
             justifyContent="spaceBetween"
           >
-            <EuiFlexItem grow={false}>
-              <div ref={topLinkRef} />
-            </EuiFlexItem>
+            {!showActionsInGroup && (
+              <EuiFlexItem grow={false}>
+                <div ref={topLinkRef} />
+              </EuiFlexItem>
+            )}
             <EuiFlexItem grow={false}>
               <div ref={datePickerRef} />
             </EuiFlexItem>

diff --git a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
@@ -126,6 +126,7 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
     <>
       {isEnhancementsEnabled &&
         !!opts?.optionalRef?.topLinkRef?.current &&
+        !showActionsInGroup &&
         createPortal(
           <EuiFlexGroup gutterSize="m">
             {topNavLinks.map((topNavLink) => (
@@ -145,7 +146,6 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
           opts.optionalRef.topLinkRef.current
         )}
       <TopNavMenu
-        className={isEnhancementsEnabled ? 'topNav hidden' : ''}
         appName={PLUGIN_ID}
         config={topNavLinks}
         showSearchBar={TopNavMenuItemRenderType.IN_PLACE}