Move DatasetSelector from data plugin queryString comp to DataExplorer (

#8598) * Move DatasetSelector to DataExplorer Signed-off-by: Anan Zhuang <ananzh@amazon.com> * Style Disover after moving DatasetSelector to DataExplorer Signed-off-by: Miki <miki@amazon.com> * fix the test by adding the getUpdates$ method to the mock queryString object Signed-off-by: Anan Zhuang <ananzh@amazon.com> --------- Signed-off-by: Anan Zhuang <ananzh@amazon.com> Signed-off-by: Miki <miki@amazon.com> Co-authored-by: Miki <miki@amazon.com>
opensearch-project · Oct 18, 2024 · 923cce8 · 923cce8
1 parent db51ee1
commit 923cce8
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 30 deletions.
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
@@ -62,7 +62,7 @@ import {
 } from '../common';
 
 import { FilterLabel } from './ui';
-export { createEditor, DefaultInput, DQLBody, SingleLineInput } from './ui';
+export { createEditor, DefaultInput, DQLBody, SingleLineInput, DatasetSelector } from './ui';
 
 import {
   generateFilters,

diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
@@ -168,7 +168,15 @@ export const DatasetSelector = ({
   return (
     <EuiPopover
       button={
-        <EuiToolTip content={`${selectedDataset?.title ?? 'Select data'}`}>
+        <EuiToolTip
+          display="block"
+          content={`${
+            selectedDataset?.title ??
+            i18n.translate('data.dataSelector.defaultTitle', {
+              defaultMessage: 'Select data',
+            })
+          }`}
+        >
           <EuiSmallButtonEmpty
             className="datasetSelector__button"
             iconType="arrowDown"

diff --git a/src/plugins/data/public/ui/dataset_selector/index.test.tsx b/src/plugins/data/public/ui/dataset_selector/index.test.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { DatasetSelector as ConnectedDatasetSelector } from './index';
 import { DatasetSelector } from './dataset_selector';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
@@ -19,6 +20,8 @@ jest.mock('./dataset_selector', () => ({
 }));
 
 describe('ConnectedDatasetSelector', () => {
+  const mockSubscribe = jest.fn();
+  const mockUnsubscribe = jest.fn();
   const mockQueryString = {
     getQuery: jest.fn().mockReturnValue({}),
     getDefaultQuery: jest.fn().mockReturnValue({}),
@@ -27,19 +30,22 @@ describe('ConnectedDatasetSelector', () => {
     getDatasetService: jest.fn().mockReturnValue({
       addRecentDataset: jest.fn(),
     }),
+    getUpdates$: jest.fn().mockReturnValue({
+      subscribe: mockSubscribe.mockReturnValue({ unsubscribe: mockUnsubscribe }),
+    }),
   };
   const mockOnSubmit = jest.fn();
   const mockServices = {
     data: {
       query: {
-        // @ts-ignore
         queryString: mockQueryString,
       },
     },
   };
 
   beforeEach(() => {
     (useOpenSearchDashboards as jest.Mock).mockReturnValue({ services: mockServices });
+    jest.clearAllMocks();
   });
 
   it('should render DatasetSelector with correct props', () => {
@@ -66,10 +72,23 @@ describe('ConnectedDatasetSelector', () => {
     ) => void;
 
     const newDataset: Dataset = { id: 'test', title: 'Test Dataset', type: 'test' };
-    setSelectedDataset(newDataset);
+    act(() => {
+      setSelectedDataset(newDataset);
+    });
 
     expect(mockQueryString.getInitialQueryByDataset).toHaveBeenCalledTimes(1);
     expect(mockQueryString.setQuery).toHaveBeenCalledTimes(1);
     expect(mockOnSubmit).toHaveBeenCalledTimes(1);
   });
+
+  it('should subscribe to queryString.getUpdates$ and unsubscribe on unmount', () => {
+    const wrapper = mount(<ConnectedDatasetSelector onSubmit={mockOnSubmit} />);
+
+    expect(mockQueryString.getUpdates$).toHaveBeenCalledTimes(1);
+    expect(mockSubscribe).toHaveBeenCalledTimes(1);
+
+    wrapper.unmount();
+
+    expect(mockUnsubscribe).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/plugins/data/public/ui/dataset_selector/index.tsx b/src/plugins/data/public/ui/dataset_selector/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import React from 'react';
 import { Dataset, Query, TimeRange } from '../../../common';
 import { DatasetSelector } from './dataset_selector';
@@ -21,6 +21,16 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =
     () => queryString.getQuery().dataset || queryString.getDefaultQuery().dataset
   );
 
+  useEffect(() => {
+    const subscription = queryString.getUpdates$().subscribe((query) => {
+      setSelectedDataset(query.dataset);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [queryString]);
+
   const handleDatasetChange = useCallback(
     (dataset?: Dataset) => {
       setSelectedDataset(dataset);

diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts
@@ -51,3 +51,4 @@ export {
   useQueryStringManager,
 } from './search_bar';
 export { SuggestionsComponent } from './typeahead';
+export { DatasetSelector } from './dataset_selector';
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -143,16 +143,15 @@
 .osdQueryEditor__topBar {
   display: flex;
   align-items: center;
+  padding: $euiSizeS;
+  gap: $euiSizeXS;
 
   > * {
     flex: 0 1 auto;
     min-width: 0;
   }
 
   .osdQueryEditor__querycontrols {
-    float: right;
-    margin: $euiSizeS $euiSizeS;
-
     .osdQueryEditor__extensionQueryControls {
       display: flex;
       padding: 0 $euiSizeS 0 $euiSizeXS;

diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -36,7 +36,6 @@ import { SuggestionsListSize } from '../typeahead/suggestions_component';
 import { QueryLanguageSelector } from './language_selector';
 import { QueryEditorExtensions } from './query_editor_extensions';
 import { getQueryService, getIndexPatterns } from '../../services';
-import { DatasetSelector } from '../dataset_selector';
 import { DefaultInputProps } from './editors';
 import { MonacoCompatibleQuerySuggestion } from '../../autocomplete/providers/query_suggestion_provider';
 
@@ -454,7 +453,6 @@ export default class QueryEditorUI extends Component<Props, State> {
           className={classNames('osdQueryEditor__banner', this.props.bannerClassName)}
         />
         <div className="osdQueryEditor__topBar">
-          <DatasetSelector onSubmit={this.props.onSubmit} />
           <div className="osdQueryEditor__input">
             {this.state.isCollapsed
               ? languageEditor.TopBar.Collapsed()

diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -23,13 +23,7 @@ import './app_container.scss';
 import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
 import { IDataPluginServices } from '../../../data/public';
 import { QUERY_ENHANCEMENT_ENABLED_SETTING } from './constants';
-import {
-  DISCOVER_LOAD_EVENT,
-  NEW_DISCOVER_LOAD_EVENT,
-  NEW_DISCOVER_OPT_IN,
-  NEW_DISCOVER_OPT_OUT,
-  trackUiMetric,
-} from '../ui_metric';
+import { DISCOVER_LOAD_EVENT, NEW_DISCOVER_LOAD_EVENT, trackUiMetric } from '../ui_metric';
 
 export const AppContainer = React.memo(
   ({ view, params }: { view?: View; params: AppMountParameters }) => {

diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -12,7 +12,7 @@ import {
   DataSourceSelectable,
   UI_SETTINGS,
 } from '../../../../data/public';
-import { DataSourceOption } from '../../../../data/public/';
+import { DataSourceOption, DatasetSelector } from '../../../../data/public/';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { DataExplorerServices } from '../../types';
 import { setIndexPattern, useTypedDispatch, useTypedSelector } from '../../utils/state_management';
@@ -34,6 +34,16 @@ export const Sidebar: FC = ({ children }) => {
     },
   } = useOpenSearchDashboards<DataExplorerServices>();
 
+  const handleDatasetSubmit = useCallback(
+    (query: any) => {
+      // Update the index pattern
+      if (query.dataset) {
+        dispatch(setIndexPattern(query.dataset.id));
+      }
+    },
+    [dispatch]
+  );
+
   const [isEnhancementEnabled, setIsEnhancementEnabled] = useState<boolean>(false);
 
   useEffect(() => {
@@ -122,13 +132,15 @@ export const Sidebar: FC = ({ children }) => {
         borderRadius="none"
         color="transparent"
       >
-        {!isEnhancementEnabled && (
-          <EuiSplitPanel.Inner
-            paddingSize="s"
-            grow={false}
-            color="transparent"
-            className="deSidebar_dataSource"
-          >
+        <EuiSplitPanel.Inner
+          paddingSize="s"
+          grow={false}
+          color="transparent"
+          className="deSidebar_dataSource"
+        >
+          {isEnhancementEnabled ? (
+            <DatasetSelector onSubmit={handleDatasetSubmit} />
+          ) : (
             <DataSourceSelectable
               dataSources={activeDataSources}
               dataSourceOptionList={dataSourceOptionList}
@@ -139,8 +151,8 @@ export const Sidebar: FC = ({ children }) => {
               onRefresh={memorizedReload}
               fullWidth
             />
-          </EuiSplitPanel.Inner>
-        )}
+          )}
+        </EuiSplitPanel.Inner>
         <EuiSplitPanel.Inner paddingSize="none" color="transparent" className="eui-yScroll">
           {children}
         </EuiSplitPanel.Inner>

diff --git a/...lugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts b/...lugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts
@@ -28,8 +28,7 @@
  * under the License.
  */
 
-import { difference } from 'lodash';
-import { IndexPattern, IndexPatternField } from 'src/plugins/data/public';
+import { IndexPattern } from 'src/plugins/data/public';
 
 export function getIndexPatternFieldList(
   indexPattern?: IndexPattern,