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

Signed-off-by: Zhongnan Su <[email protected]>

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;

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

@@ -34,6 +34,7 @@ import {
   EuiHeaderSectionItem,
   EuiHeaderSectionItemButton,
   EuiHideFor,
+  EuiHorizontalRule,
   EuiIcon,
   EuiShowFor,
   EuiTitle,
@@ -447,6 +448,8 @@ export function Header({
         </EuiHeaderSection>
         <EuiHeaderSection side="right">{renderRightControls()}</EuiHeaderSection>
       </EuiHeader>
+      <div id="applicationHeaderFilterBar" />
+      <EuiHorizontalRule margin="none" />
     </div>
   );
 

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;
+  fixFilterBar?: boolean;
 }
 
 const maxFilterWidth = 600;
@@ -171,10 +173,10 @@ function FilterBarUI(props: Props) {
 
   const classes = classNames('globalFilterBar', props.className);
   const filterBarPrefixText = i18n.translate('data.search.filterBar.filterBarPrefixText', {
-    defaultMessage: 'Filters: ',
+    defaultMessage: 'Filters',
   });
 
-  return (
+  const filterBar = (
     <EuiFlexGroup
       className="globalFilterGroup"
       gutterSize="none"
@@ -195,7 +197,6 @@ function FilterBarUI(props: Props) {
           />
         )}
       </EuiFlexItem>
-
       <EuiFlexItem className="globalFilterGroup__filterFlexItem">
         <EuiFlexGroup
           className={classes}
@@ -210,6 +211,9 @@ function FilterBarUI(props: Props) {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
+  return useNewHeader && !props.fixFilterBar
+    ? 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}
+          fixFilterBar={props.fixFilterBar}
           {...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;
+  fixFilterBar?: 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!}
+              fixFilterBar={this.props.fixFilterBar}
             />
           </div>
         </div>

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx

@@ -216,7 +216,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                       </EuiFlexItem>
                     </EuiFlexGroup>
                   </MountPointPortal>
-                  {renderSearchBar({ datePickerRef })}
+                  {renderSearchBar({ datePickerRef, fixFilterBar: true })}
                 </>
               );
             }
@@ -226,7 +226,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                 <MountPointPortal setMountPoint={setMenuMountPoint}>
                   {renderMenu(menuClassName)}
                 </MountPointPortal>
-                {renderSearchBar()}
+                {renderSearchBar({ fixFilterBar: true })}
               </>
             );
         }