Move TopNavLinks to new Nav Bar Discover (#7326)

This PR aims to introduce a new Nav bar in Discover that would contain the Date Picker as well as the Navigation links that are currently part of headers. The Navigation Links have been replaced with the corresponding Icons to provide a modern UX. These setting are currently controlled by query:enhancements:enabled Advanced Setting Flag and would be visible when the above flag is turned on. Signed-off-by: Suchit Sahoo <suchsah@amazon.com>
opensearch-project · Jul 23, 2024 · e46e54a · e46e54a
1 parent 7ff8544
commit e46e54a
Show file tree

Hide file tree

Showing 16 changed files with 218 additions and 70 deletions.
diff --git a/src/core/public/application/types.ts b/src/core/public/application/types.ts
@@ -539,6 +539,8 @@ export interface AppMountParameters<HistoryLocationState = unknown> {
    * Optional datasource id to pass while mounting app
    */
   dataSourceId?: string;
+
+  optionalRef?: Record<string, React.RefObject<HTMLDivElement>>;
 }
 
 /**

diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
@@ -15,6 +15,7 @@ import {
 import classNames from 'classnames';
 import { compact, isEqual } from 'lodash';
 import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
   DataSource,
   IDataPluginServices,
@@ -64,6 +65,7 @@ export interface QueryEditorTopRowProps {
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
   indicateNoData?: boolean;
+  datePickerRef?: React.RefObject<HTMLDivElement>;
 }
 
 // Needed for React.lazy
@@ -294,7 +296,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
 
     return (
       <NoDataPopover storage={storage} showNoDataPopover={props.indicateNoData}>
-        <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexGroup responsive={false} gutterSize="s" alignItems="flexStart">
           {renderDatePicker()}
           <EuiFlexItem grow={false}>{button}</EuiFlexItem>
         </EuiFlexGroup>
@@ -359,6 +361,14 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     'osdQueryEditor--withDatePicker': props.showDatePicker,
   });
 
+  const datePicker = (
+    <EuiFlexGroup justifyContent="flexEnd" gutterSize="none" responsive={false}>
+      <EuiFlexItem grow={false} className="osdQueryEditor--updateButtonWrapper">
+        {renderUpdateButton()}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
   return (
     <EuiFlexGroup
       className={classes}
@@ -367,11 +377,9 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
       direction="column"
       justifyContent="flexEnd"
     >
-      <EuiFlexGroup justifyContent="flexEnd" gutterSize="none" responsive={false}>
-        <EuiFlexItem grow={false} className="osdQueryEditor--updateButtonWrapper">
-          {renderUpdateButton()}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      {props?.datePickerRef?.current && uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)
+        ? createPortal(datePicker, props.datePickerRef.current)
+        : datePicker}
       {renderQueryEditor()}
       <EuiFlexItem>
         <EuiFlexGroup responsive={false} gutterSize="none" direction="column">

diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
@@ -46,6 +46,7 @@ import {
 import { EuiSuperUpdateButton, OnRefreshProps, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { Toast } from 'src/core/public';
+import { createPortal } from 'react-dom';
 import { IDataPluginServices, IIndexPattern, TimeRange, TimeHistoryContract, Query } from '../..';
 import {
   useOpenSearchDashboards,
@@ -83,6 +84,7 @@ export interface QueryBarTopRowProps {
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
   indicateNoData?: boolean;
+  datePickerRef?: React.RefObject<HTMLDivElement>;
 }
 
 // Needed for React.lazy
@@ -262,7 +264,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
 
     return (
       <NoDataPopover storage={storage} showNoDataPopover={props.indicateNoData}>
-        <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexGroup responsive={false} gutterSize="s" alignItems="flexStart">
           {renderDatePicker()}
           <EuiFlexItem grow={false}>{button}</EuiFlexItem>
         </EuiFlexGroup>
@@ -393,7 +395,11 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
       >
         {renderQueryInput()}
         {renderSharingMetaFields()}
-        <EuiFlexItem grow={false}>{renderUpdateButton()}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {props?.datePickerRef?.current && uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)
+            ? createPortal(renderUpdateButton(), props.datePickerRef.current)
+            : renderUpdateButton()}
+        </EuiFlexItem>
       </EuiFlexGroup>
     </>
   );

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
@@ -237,6 +237,7 @@ export function createSearchBar({
           onClearSavedQuery={defaultOnClearSavedQuery(props, clearSavedQuery)}
           onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, setSavedQuery)}
           onSaved={defaultOnSavedQueryUpdated(props, setSavedQuery)}
+          datePickerRef={props.datePickerRef}
           {...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
@@ -77,6 +77,7 @@ export interface SearchBarOwnProps {
   refreshInterval?: number;
   dateRangeFrom?: string;
   dateRangeTo?: string;
+  datePickerRef?: React.RefObject<HTMLDivElement>;
   // Query bar - should be in SearchBarInjectedDeps
   query?: Query;
   settings?: Settings;
@@ -482,6 +483,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           }
           dataTestSubj={this.props.dataTestSubj}
           indicateNoData={this.props.indicateNoData}
+          datePickerRef={this.props.datePickerRef}
         />
       );
     }
@@ -518,6 +520,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           filterBar={filterBar}
           dataTestSubj={this.props.dataTestSubj}
           indicateNoData={this.props.indicateNoData}
+          datePickerRef={this.props.datePickerRef}
         />
       );
     }

diff --git a/src/plugins/data_explorer/public/components/__snapshots__/app_container.test.tsx.snap b/src/plugins/data_explorer/public/components/__snapshots__/app_container.test.tsx.snap
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
@@ -20,3 +20,13 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
 .headerIsExpanded .deLayout {
   height: calc(100vh - #{$osdHeaderOffset * 2});
 }
+
+.mainPage {
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .navBar {
+    padding: $euiSizeXS $euiSizeXS $euiSizeXS $euiSizeM;
+    border-bottom: $euiBorderThin;
+  }
+}
diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx
@@ -3,20 +3,35 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { memo } from 'react';
-import { EuiPage, EuiPageBody, EuiResizableContainer, useIsWithinBreakpoints } from '@elastic/eui';
+import React, { memo, useRef } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPage,
+  EuiPageBody,
+  EuiResizableContainer,
+  useIsWithinBreakpoints,
+} from '@elastic/eui';
 import { Suspense } from 'react';
 import { AppMountParameters } from '../../../../core/public';
 import { Sidebar } from './sidebar';
 import { NoView } from './no_view';
 import { View } from '../services/view_service/view';
 import { shallowEqual } from '../utils/use/shallow_equal';
 import './app_container.scss';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { IDataPluginServices } from '../../../data/public';
+import { QUERY_ENHANCEMENT_ENABLED_SETTING } from './constants';
 
 export const AppContainer = React.memo(
   ({ view, params }: { view?: View; params: AppMountParameters }) => {
     const isMobile = useIsWithinBreakpoints(['xs', 's', 'm']);
-    // TODO: Make this more robust.
+
+    const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
+    const { uiSettings } = opensearchDashboards.services;
+
+    const topLinkRef = useRef<HTMLDivElement>(null);
+    const datePickerRef = useRef<HTMLDivElement>(null);
     if (!view) {
       return <NoView />;
     }
@@ -26,38 +41,67 @@ export const AppContainer = React.memo(
     const MemoizedPanel = memo(Panel);
     const MemoizedCanvas = memo(Canvas);
 
+    params.optionalRef = {
+      topLinkRef,
+      datePickerRef,
+    };
+
     // Render the application DOM.
     return (
-      <EuiPage className="deLayout" paddingSize="none">
-        {/* TODO: improve fallback state */}
-        <Suspense fallback={<div>Loading...</div>}>
-          <Context {...params}>
-            <EuiResizableContainer direction={isMobile ? 'vertical' : 'horizontal'}>
-              {(EuiResizablePanel, EuiResizableButton) => (
-                <>
-                  <EuiResizablePanel
-                    initialSize={20}
-                    minSize="260px"
-                    mode={['collapsible', { position: 'top' }]}
-                    paddingSize="none"
-                  >
-                    <Sidebar>
-                      <MemoizedPanel {...params} />
-                    </Sidebar>
-                  </EuiResizablePanel>
-                  <EuiResizableButton />
+      <div className="mainPage">
+        {uiSettings?.get(QUERY_ENHANCEMENT_ENABLED_SETTING) && (
+          <EuiFlexGroup
+            direction="row"
+            className="mainPage navBar"
+            gutterSize="none"
+            alignItems="center"
+            justifyContent="spaceBetween"
+          >
+            <EuiFlexItem grow={false}>
+              <div ref={topLinkRef} />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <div ref={datePickerRef} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
+
+        <EuiPage className="deLayout" paddingSize="none" grow={false}>
+          {/* TODO: improve fallback state */}
+          <Suspense fallback={<div>Loading...</div>}>
+            <Context {...params}>
+              <EuiResizableContainer direction={isMobile ? 'vertical' : 'horizontal'}>
+                {(EuiResizablePanel, EuiResizableButton) => (
+                  <>
+                    <EuiResizablePanel
+                      initialSize={20}
+                      minSize="260px"
+                      mode={['collapsible', { position: 'top' }]}
+                      paddingSize="none"
+                    >
+                      <Sidebar>
+                        <MemoizedPanel {...params} />
+                      </Sidebar>
+                    </EuiResizablePanel>
+                    <EuiResizableButton />
 
-                  <EuiResizablePanel initialSize={80} minSize="65%" mode="main" paddingSize="none">
-                    <EuiPageBody className="deLayout__canvas">
-                      <MemoizedCanvas {...params} />
-                    </EuiPageBody>
-                  </EuiResizablePanel>
-                </>
-              )}
-            </EuiResizableContainer>
-          </Context>
-        </Suspense>
-      </EuiPage>
+                    <EuiResizablePanel
+                      initialSize={80}
+                      minSize="65%"
+                      mode="main"
+                      paddingSize="none"
+                    >
+                      <EuiPageBody className="deLayout__canvas">
+                        <MemoizedCanvas {...params} />
+                      </EuiPageBody>
+                    </EuiResizablePanel>
+                  </>
+                )}
+              </EuiResizableContainer>
+            </Context>
+          </Suspense>
+        </EuiPage>
+      </div>
     );
   },
   (prevProps, nextProps) => {

diff --git a/src/plugins/data_explorer/public/components/constants.ts b/src/plugins/data_explorer/public/components/constants.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const QUERY_ENHANCEMENT_ENABLED_SETTING = 'query:enhancements:enabled';
diff --git a/src/plugins/discover/common/index.ts b/src/plugins/discover/common/index.ts
@@ -15,3 +15,4 @@ export const CONTEXT_DEFAULT_SIZE_SETTING = 'context:defaultSize';
 export const CONTEXT_STEP_SETTING = 'context:step';
 export const CONTEXT_TIE_BREAKER_FIELDS_SETTING = 'context:tieBreakerFields';
 export const MODIFY_COLUMNS_ON_SWITCH = 'discover:modifyColumnsOnSwitch';
+export const QUERY_ENHANCEMENT_ENABLED_SETTING = 'query:enhancements:enabled';