From 98a13f222a052c465f592b708bada6de3afe0f6d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 18 Oct 2024 03:06:22 +0000 Subject: [PATCH] Move DatasetSelector from data plugin queryString comp to DataExplorer (#8598) * Move DatasetSelector to DataExplorer Signed-off-by: Anan Zhuang * Style Disover after moving DatasetSelector to DataExplorer Signed-off-by: Miki * fix the test by adding the getUpdates$ method to the mock queryString object Signed-off-by: Anan Zhuang --------- Signed-off-by: Anan Zhuang Signed-off-by: Miki Co-authored-by: Miki (cherry picked from commit 923cce847b09001dc5b3730c9bad54857d363532) Signed-off-by: github-actions[bot] --- src/plugins/data/public/index.ts | 2 +- .../ui/dataset_selector/dataset_selector.tsx | 10 +++++- .../public/ui/dataset_selector/index.test.tsx | 23 +++++++++++-- .../data/public/ui/dataset_selector/index.tsx | 12 ++++++- src/plugins/data/public/ui/index.ts | 1 + .../public/ui/query_editor/_query_editor.scss | 5 ++- .../public/ui/query_editor/query_editor.tsx | 2 -- .../public/components/app_container.tsx | 10 ++---- .../public/components/sidebar/index.tsx | 32 +++++++++++++------ .../lib/get_index_pattern_field_list.ts | 3 +- 10 files changed, 70 insertions(+), 30 deletions(-) diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts index cdf4d29697ca..b290aa510437 100644 --- 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 index 76c9fbe74546..c5c8077fddf5 100644 --- 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 ( + ({ })); describe('ConnectedDatasetSelector', () => { + const mockSubscribe = jest.fn(); + const mockUnsubscribe = jest.fn(); const mockQueryString = { getQuery: jest.fn().mockReturnValue({}), getDefaultQuery: jest.fn().mockReturnValue({}), @@ -27,12 +30,14 @@ 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, }, }, @@ -40,6 +45,7 @@ describe('ConnectedDatasetSelector', () => { 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(); + + 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 index d89f92bc3ad7..a9d7f2d87232 100644 --- 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 index a5ee305d0b53..7cf5406b46c0 100644 --- 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 index a970a970853b..5ca8b548c27a 100644 --- a/src/plugins/data/public/ui/query_editor/_query_editor.scss +++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss @@ -143,6 +143,8 @@ .osdQueryEditor__topBar { display: flex; align-items: center; + padding: $euiSizeS; + gap: $euiSizeXS; > * { flex: 0 1 auto; @@ -150,9 +152,6 @@ } .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 index 428aa7b70304..6cc31ae6e97f 100644 --- 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'; @@ -446,7 +445,6 @@ export default class QueryEditorUI extends Component { className={classNames('osdQueryEditor__banner', this.props.bannerClassName)} />
-
{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 index abd1328bafeb..c337361d37db 100644 --- 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 index 430d70fa9180..6bbd6af42663 100644 --- 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(); + const handleDatasetSubmit = useCallback( + (query: any) => { + // Update the index pattern + if (query.dataset) { + dispatch(setIndexPattern(query.dataset.id)); + } + }, + [dispatch] + ); + const [isEnhancementEnabled, setIsEnhancementEnabled] = useState(false); useEffect(() => { @@ -122,13 +132,15 @@ export const Sidebar: FC = ({ children }) => { borderRadius="none" color="transparent" > - {!isEnhancementEnabled && ( - + + {isEnhancementEnabled ? ( + + ) : ( { onRefresh={memorizedReload} fullWidth /> - - )} + )} + {children} diff --git a/src/plugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts b/src/plugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts index 93b80ae99653..5d9a030e2e13 100644 --- a/src/plugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts +++ b/src/plugins/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,