[Page Header]Render filter bar in full width with application header (#…

…7886) (#7903)

(cherry picked from commit 6e0a632)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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;
+}

src/core/public/chrome/ui/header/header.tsx

@@ -450,6 +450,7 @@ export function Header({
         </EuiHeaderSection>
         <EuiHeaderSection side="right">{renderRightControls()}</EuiHeaderSection>
       </EuiHeader>
+      <div id="applicationHeaderFilterBar" />
     </div>
   );
 

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;
+  }
 }

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);

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>

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>

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>
               </>