From 78259f0a68d706f4d1e6dbc746bac81984f32c0d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 Aug 2024 02:04:12 +0000
Subject: [PATCH] [Page Header]Render filter bar in full width with application
 header (#7886)

(cherry picked from commit 6e0a6327ed63dc3f2a0d429933966715acd9ab52)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../ui/header/__snapshots__/header.test.tsx.snap  |  3 +++
 src/core/public/chrome/ui/header/header.scss      |  5 ++++-
 src/core/public/chrome/ui/header/header.tsx       |  1 +
 .../ui/filter_bar/_global_filter_group.scss       |  9 +++++++--
 .../data/public/ui/filter_bar/filter_bar.tsx      | 15 +++++++++++----
 .../public/ui/search_bar/create_search_bar.tsx    |  1 +
 .../data/public/ui/search_bar/search_bar.tsx      |  2 ++
 .../public/top_nav_menu/top_nav_menu.tsx          |  2 +-
 8 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 88f06ee9edcb..e2a9ea8cfb55 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -9171,6 +9171,9 @@ exports[`Header renders application header without title and breadcrumbs 1`] = `
             </EuiHeaderSection>
           </div>
         </EuiHeader>
+        <div
+          id="applicationHeaderFilterBar"
+        />
       </div>
     </div>
     <CollapsibleNav
diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss
index 9b0bffe633fe..079085d19466 100644
--- a/src/core/public/chrome/ui/header/header.scss
+++ b/src/core/public/chrome/ui/header/header.scss
@@ -18,7 +18,6 @@
 
   &.primaryApplicationHeader {
     padding-top: $euiSizeM - $euiSizeXS;
-    border-bottom: 1px solid $euiColorLightShade;
 
     &:last-child {
       margin-bottom: 0;
@@ -105,3 +104,7 @@
 .stretchedActionMenu {
   width: 100%;
 }
+
+#globalHeaderBars {
+  border-bottom: 1px solid $euiColorLightShade;
+}
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 6fa8d9a43a75..e153281d3e16 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -447,6 +447,7 @@ export function Header({
         </EuiHeaderSection>
         <EuiHeaderSection side="right">{renderRightControls()}</EuiHeaderSection>
       </EuiHeader>
+      <div id="applicationHeaderFilterBar" />
     </div>
   );
 
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
index 598d2f57b3a4..a7f91f980d79 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -62,6 +62,11 @@
 }
 
 .globalFilterGroup__filterPrefix {
-  padding-top: $euiSizeS;
-  padding-right: $euiSizeS;
+  padding: $euiSizeM $euiSizeS 0 $euiSizeS;
+}
+
+.globalFilterGroup {
+  &--compressed {
+    margin-top: -$euiSizeS;
+  }
 }
diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
index 431fd72c065f..822f962698e2 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -40,6 +40,7 @@ import {
 import { FormattedMessage, InjectedIntl, injectI18n } from '@osd/i18n/react';
 import classNames from 'classnames';
 import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
 import { stringify } from '@osd/std';
 
 import { FilterEditor } from './filter_editor';
@@ -55,6 +56,7 @@ interface Props {
   className: string;
   indexPatterns: IIndexPattern[];
   intl: InjectedIntl;
+  isFilterBarPortable?: boolean;
 }
 
 const maxFilterWidth = 600;
@@ -171,12 +173,15 @@ function FilterBarUI(props: Props) {
 
   const classes = classNames('globalFilterBar', props.className);
   const filterBarPrefixText = i18n.translate('data.search.filterBar.filterBarPrefixText', {
-    defaultMessage: 'Filters: ',
+    defaultMessage: 'Filters',
+  });
+  const filterGroupClassName = classNames('globalFilterGroup', {
+    'globalFilterGroup--compressed': useNewHeader && props.isFilterBarPortable,
   });
 
-  return (
+  const filterBar = (
     <EuiFlexGroup
-      className="globalFilterGroup"
+      className={filterGroupClassName}
       gutterSize="none"
       alignItems="flexStart"
       responsive={false}
@@ -195,7 +200,6 @@ function FilterBarUI(props: Props) {
           />
         )}
       </EuiFlexItem>
-
       <EuiFlexItem className="globalFilterGroup__filterFlexItem">
         <EuiFlexGroup
           className={classes}
@@ -210,6 +214,9 @@ function FilterBarUI(props: Props) {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
+  return useNewHeader && props.isFilterBarPortable
+    ? createPortal(filterBar, document.getElementById('applicationHeaderFilterBar')!)
+    : filterBar;
 }
 
 export const FilterBar = injectI18n(FilterBarUI);
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index b8671ea10559..b3b240dfa2f1 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -209,6 +209,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, setSavedQuery)}
           onSaved={defaultOnSavedQueryUpdated(props, setSavedQuery)}
           datePickerRef={props.datePickerRef}
+          isFilterBarPortable={props.isFilterBarPortable}
           {...overrideDefaultBehaviors(props)}
         />
       </OpenSearchDashboardsContextProvider>
diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
index b986a1e11ddd..bb9a2c7eb28c 100644
--- a/src/plugins/data/public/ui/search_bar/search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -66,6 +66,7 @@ export interface SearchBarOwnProps {
   showQueryBar?: boolean;
   showQueryInput?: boolean;
   showFilterBar?: boolean;
+  isFilterBarPortable?: boolean;
   showDatePicker?: boolean;
   showAutoRefreshOnly?: boolean;
   filters?: Filter[];
@@ -479,6 +480,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
               filters={this.props.filters!}
               onFiltersUpdated={this.props.onFiltersUpdated}
               indexPatterns={this.props.indexPatterns!}
+              isFilterBarPortable={this.props.isFilterBarPortable}
             />
           </div>
         </div>
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
index 49db1401c7ea..ffc6656144f8 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -177,7 +177,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                       <EuiText size="s">{screenTitle}</EuiText>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>{renderMenu(menuClassName)}</EuiFlexItem>
-                    <EuiFlexItem>{renderSearchBar()}</EuiFlexItem>
+                    <EuiFlexItem>{renderSearchBar({ isFilterBarPortable: true })}</EuiFlexItem>
                   </EuiFlexGroup>
                 </MountPointPortal>
               </>