New page header for search relevance (#428)

* New page header for search relevance Signed-off-by: Ryan Liang <[email protected]> * Fix the render behavior when the nav header is enabled/disabled Signed-off-by: Ryan Liang <[email protected]> * Fix the breadscrumb title when nav header is enabled Signed-off-by: Ryan Liang <[email protected]> * Simplify the logic for conditional rendering Signed-off-by: Ryan Liang <[email protected]> * Fix the search bar Signed-off-by: Ryan Liang <[email protected]> * Remove comments Signed-off-by: Ryan Liang <[email protected]> * Fix snapshot Signed-off-by: Ryan Liang <[email protected]> * Remove unused import Signed-off-by: Ryan Liang <[email protected]> * Add ui fixes + snapshot update Signed-off-by: Ryan Liang <[email protected]> * Add ui fixes - adding more space Signed-off-by: Ryan Liang <[email protected]> * Remove comments Signed-off-by: Ryan Liang <[email protected]> --------- Signed-off-by: Ryan Liang <[email protected]>
opensearch-project · Sep 3, 2024 · e061e66 · e061e66
1 parent 1a3157b
commit e061e66
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 133 deletions.
diff --git a/common/index.ts b/common/index.ts
@@ -5,6 +5,7 @@
 
 export const PLUGIN_ID = 'searchRelevance';
 export const PLUGIN_NAME = 'Search Relevance';
+export const COMPARE_SEARCH_RESULTS_TITLE = 'Compare Search Results';
 
 export enum ServiceEndpoints {
   GetIndexes = '/api/relevancy/search/indexes',

diff --git a/public/application.tsx b/public/application.tsx
@@ -11,7 +11,7 @@ import { SearchRelevanceApp } from './components/app';
 import { AppPluginStartDependencies } from './types';
 
 export const renderApp = (
-  { notifications, http, chrome, savedObjects }: CoreStart,
+  { notifications, http, chrome, savedObjects, application }: CoreStart,
   { navigation, dataSource }: AppPluginStartDependencies,
   { element, setHeaderActionMenu }: AppMountParameters,
   dataSourceManagement: DataSourceManagementPluginSetup
@@ -26,6 +26,7 @@ export const renderApp = (
       dataSourceEnabled={!!dataSource}
       setActionMenu={setHeaderActionMenu}
       dataSourceManagement={dataSourceManagement}
+      application={application}
     />,
     element
   );

diff --git a/public/components/app.tsx b/public/components/app.tsx
@@ -10,7 +10,7 @@ import { HashRouter, Route, Switch } from 'react-router-dom';
 import { CoreStart, MountPoint, Toast } from '../../../../src/core/public';
 import { DataSourceManagementPluginSetup } from '../../../../src/plugins/data_source_management/public';
 import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
-import { PLUGIN_NAME } from '../../common';
+import { PLUGIN_NAME, COMPARE_SEARCH_RESULTS_TITLE } from '../../common';
 import { SearchRelevanceContextProvider } from '../contexts';
 import { Home as QueryCompareHome } from './query_compare/home';
 
@@ -23,6 +23,7 @@ interface SearchRelevanceAppDeps {
   dataSourceEnabled: boolean;
   dataSourceManagement: DataSourceManagementPluginSetup;
   setActionMenu: (menuMount: MountPoint | undefined) => void;
+  application: CoreStart['application'];
 }
 
 export const SearchRelevanceApp = ({
@@ -34,13 +35,20 @@ export const SearchRelevanceApp = ({
   dataSourceEnabled,
   setActionMenu,
   dataSourceManagement,
+  application,
 }: SearchRelevanceAppDeps) => {
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [toastRightSide, setToastRightSide] = useState<boolean>(true);
 
   // Render the application DOM.
   // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
-  const parentBreadCrumbs = [{ text: PLUGIN_NAME, href: '#' }];
+
+  const getNavGroupEnabled = chrome.navGroup.getNavGroupEnabled();
+
+  const parentBreadCrumbs = getNavGroupEnabled 
+    ? [{ text: COMPARE_SEARCH_RESULTS_TITLE, href: '#' }]
+    : [{ text: PLUGIN_NAME, href: '#' }];
+
   const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
     if (!text) text = '';
     setToastRightSide(!side ? true : false);
@@ -65,6 +73,7 @@ export const SearchRelevanceApp = ({
                 render={(props) => {
                   return (
                     <QueryCompareHome
+                      application={application}
                       parentBreadCrumbs={parentBreadCrumbs}
                       notifications={notifications}
                       http={http}

diff --git a/public/components/query_compare/home.tsx b/public/components/query_compare/home.tsx
@@ -33,6 +33,7 @@ interface QueryExplorerProps {
   dataSourceEnabled: boolean
   dataSourceManagement: DataSourceManagementPluginSetup;
   setActionMenu: (menuMount: MountPoint | undefined) => void;
+  application: CoreStart['application'];
 }
 export const Home = ({
   parentBreadCrumbs,
@@ -46,6 +47,7 @@ export const Home = ({
   dataSourceEnabled,
   dataSourceManagement,
   setActionMenu,
+  application,
 }: QueryExplorerProps) => {
   const {
     showFlyout,
@@ -163,26 +165,11 @@ export const Home = ({
 
   }, [http, setDocumentsIndexes1, setDocumentsIndexes2, setFetchedPipelines1, setFetchedPipelines2, datasource1, datasource2]);
 
-  const dataSourceMenuComponent = useMemo(() => {
-    return (
-      <DataSourceMenu
-        setMenuMountPoint={setActionMenu}
-        componentType={'DataSourceAggregatedView'}
-        componentConfig={{
-          savedObjects: savedObjects.client,
-          notifications: notifications,
-          fullWidth: true,
-          displayAllCompatibleDataSources: true,
-          dataSourceFilterFn: dataSourceFilterFn
-        }} 
-      />
-    );
-  }, [setActionMenu, savedObjects.client, notifications, datasource1, datasource2]);
   return (
     <>
-      {dataSourceEnabled && dataSourceMenuComponent}
+      {dataSourceEnabled}
       <div className="osdOverviewWrapper">
-        {documentsIndexes1.length || documentsIndexes2.length ? <SearchResult http={http} savedObjects={savedObjects} dataSourceEnabled={dataSourceEnabled} dataSourceManagement={dataSourceManagement} navigation={navigation} setActionMenu={setActionMenu} dataSourceOptions={dataSourceOptions} notifications={notifications}/> : <CreateIndex />}
+        {documentsIndexes1.length || documentsIndexes2.length ? <SearchResult application={application} chrome={chrome} http={http} savedObjects={savedObjects} dataSourceEnabled={dataSourceEnabled} dataSourceManagement={dataSourceManagement} navigation={navigation} setActionMenu={setActionMenu} dataSourceOptions={dataSourceOptions} notifications={notifications}/> : <CreateIndex />}
       </div>
       {showFlyout && <Flyout />}
     </>

diff --git a/public/components/query_compare/search_result/index.tsx b/public/components/query_compare/search_result/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiPageContentBody } from '@elastic/eui';
+import { EuiLink, EuiPageContentBody, EuiText, EuiSpacer, EuiPanel} from '@elastic/eui';
 import React, { useState } from 'react';
 
 import { CoreStart, MountPoint } from '../../../../../../src/core/public';
@@ -35,9 +35,11 @@ interface SearchResultProps {
   dataSourceManagement: DataSourceManagementPluginSetup;
   dataSourceOptions: DataSourceOption[]
   notifications: NotificationsStart
+  chrome: CoreStart['chrome'];
+  application: CoreStart['application'];
 }
 
-export const SearchResult = ({ http, savedObjects, dataSourceEnabled, dataSourceManagement, setActionMenu, navigation, dataSourceOptions, notifications}: SearchResultProps) => {
+export const SearchResult = ({ application, chrome, http, savedObjects, dataSourceEnabled, dataSourceManagement, setActionMenu, navigation, dataSourceOptions, notifications}: SearchResultProps) => {
   const [queryString1, setQueryString1] = useState(DEFAULT_QUERY);
   const [queryString2, setQueryString2] = useState(DEFAULT_QUERY);
   const [queryResult1, setQueryResult1] = useState<SearchResults>({} as any);
@@ -56,6 +58,24 @@ export const SearchResult = ({ http, savedObjects, dataSourceEnabled, dataSource
     datasource2
   } = useSearchRelevanceContext();
 
+  const HeaderControlledPopoverWrapper = ({ children }: { children: React.ReactElement }) => {
+    const HeaderControl = navigation.ui.HeaderControl;
+    const getNavGroupEnabled = chrome.navGroup.getNavGroupEnabled();
+
+    if (getNavGroupEnabled && HeaderControl) {
+      return (
+        <HeaderControl
+          setMountPoint={application.setAppDescriptionControls}
+          controls={[{ renderComponent: children }]}
+        />
+      );
+    }
+
+    return <>{children}</>;
+  };
+
+  const getNavGroupEnabled = chrome.navGroup.getNavGroupEnabled();
+
   const onClickSearch = () => {
     const queryErrors = [
       { ...initialQueryErrorState, errorResponse: { ...initialQueryErrorState.errorResponse } },
@@ -188,13 +208,47 @@ export const SearchResult = ({ http, savedObjects, dataSourceEnabled, dataSource
 
   return (
     <>
-      <Header>
-        <SearchInputBar
-          searchBarValue={searchBarValue}
-          setSearchBarValue={setSearchBarValue}
-          onClickSearch={onClickSearch}
-        />
-      </Header>
+      {getNavGroupEnabled ? (
+        <>
+          <HeaderControlledPopoverWrapper>
+            <EuiText size="s">
+              <p>
+                Compare results using the same search text with different queries.{' '}
+                <EuiLink
+                  href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
+                  target="_blank"
+                >
+                  Learn more
+                </EuiLink>
+                <EuiSpacer size="m" />
+              </p>
+            </EuiText>
+          </HeaderControlledPopoverWrapper>
+          <EuiPanel
+            hasBorder={false}
+            hasShadow={false}
+            color="transparent"
+            grow={false}
+            borderRadius="none"
+          >
+            <SearchInputBar
+              searchBarValue={searchBarValue}
+              setSearchBarValue={setSearchBarValue}
+              onClickSearch={onClickSearch}
+              getNavGroupEnabled={getNavGroupEnabled}
+            />
+          </EuiPanel>
+        </>
+      ) : (
+        <Header>
+          <SearchInputBar
+            searchBarValue={searchBarValue}
+            setSearchBarValue={setSearchBarValue}
+            onClickSearch={onClickSearch}
+            getNavGroupEnabled={getNavGroupEnabled}
+          />
+        </Header>
+      )}
       <EuiPageContentBody className="search-relevance-flex">
         <SearchConfigsPanel
           queryString1={queryString1}

diff --git a/..._compare/search_result/search_components/__tests__/__snapshots__/search_bar.test.tsx.snap b/..._compare/search_result/search_components/__tests__/__snapshots__/search_bar.test.tsx.snap
@@ -216,6 +216,7 @@ exports[`Search bar component Renders search bar component 1`] = `
                 >
                   <EuiButtonContent
                     className="euiButton__content"
+                    iconGap="m"
                     iconSide="left"
                     textProps={
                       Object {

diff --git a/...mpare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap b/...mpare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
@@ -259,8 +259,7 @@ exports[`Flyout component Renders flyout component 1`] = `
               fullWidth={true}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
-              helpText="Optional"
-              label="Pipeline"
+              label="Pipeline-optional"
               labelType="label"
             >
               <div
@@ -280,15 +279,14 @@ exports[`Flyout component Renders flyout component 1`] = `
                       className="euiFormLabel euiFormRow__label"
                       htmlFor="random_html_id"
                     >
-                      Pipeline
+                      Pipeline-optional
                     </label>
                   </EuiFormLabel>
                 </div>
                 <div
                   className="euiFormRow__fieldWrapper"
                 >
                   <EuiCompressedComboBox
-                    aria-describedby="random_html_id-help-0"
                     async={false}
                     compressed={true}
                     fullWidth={false}
@@ -314,7 +312,6 @@ exports[`Flyout component Renders flyout component 1`] = `
                     sortMatchesBy="none"
                   >
                     <div
-                      aria-describedby="random_html_id-help-0"
                       aria-expanded={false}
                       aria-haspopup="listbox"
                       className="euiComboBox euiComboBox--compressed"
@@ -510,18 +507,6 @@ exports[`Flyout component Renders flyout component 1`] = `
                       </EuiComboBoxInput>
                     </div>
                   </EuiCompressedComboBox>
-                  <EuiFormHelpText
-                    className="euiFormRow__text"
-                    id="random_html_id-help-0"
-                    key="Optional"
-                  >
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="random_html_id-help-0"
-                    >
-                      Optional
-                    </div>
-                  </EuiFormHelpText>
                 </div>
               </div>
             </EuiCompressedFormRow>
@@ -608,6 +593,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                 >
                   <EuiButtonContent
                     className="euiButtonEmpty__content"
+                    iconGap="m"
                     iconSide="left"
                     iconSize="s"
                     textProps={
@@ -1063,8 +1049,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
               fullWidth={true}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
-              helpText="Optional"
-              label="Pipeline"
+              label="Pipeline-optional"
               labelType="label"
             >
               <div
@@ -1084,15 +1069,14 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                       className="euiFormLabel euiFormRow__label"
                       htmlFor="random_html_id"
                     >
-                      Pipeline
+                      Pipeline-optional
                     </label>
                   </EuiFormLabel>
                 </div>
                 <div
                   className="euiFormRow__fieldWrapper"
                 >
                   <EuiCompressedComboBox
-                    aria-describedby="random_html_id-help-0"
                     async={false}
                     compressed={true}
                     fullWidth={false}
@@ -1118,7 +1102,6 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                     sortMatchesBy="none"
                   >
                     <div
-                      aria-describedby="random_html_id-help-0"
                       aria-expanded={false}
                       aria-haspopup="listbox"
                       className="euiComboBox euiComboBox--compressed"
@@ -1313,18 +1296,6 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                       </EuiComboBoxInput>
                     </div>
                   </EuiCompressedComboBox>
-                  <EuiFormHelpText
-                    className="euiFormRow__text"
-                    id="random_html_id-help-0"
-                    key="Optional"
-                  >
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="random_html_id-help-0"
-                    >
-                      Optional
-                    </div>
-                  </EuiFormHelpText>
                 </div>
               </div>
             </EuiCompressedFormRow>
@@ -1411,6 +1382,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                 >
                   <EuiButtonContent
                     className="euiButtonEmpty__content"
+                    iconGap="m"
                     iconSide="left"
                     iconSize="s"
                     textProps={