From d2aa963ae548f71d3c3f0864908ab92e73d3478d Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 19 Oct 2024 02:43:55 +0000 Subject: [PATCH 1/6] [bug] address some issues with dataset selector Moved the dataset selector back to the search bar and access it by ref in the sidebar. Avoid out of sync issue. Signed-off-by: Kawika Avilla --- .../ui/dataset_selector/advanced_selector.tsx | 38 +--- .../ui/dataset_selector/configurator.tsx | 5 +- .../create_dataset_selector.tsx | 14 ++ .../ui/dataset_selector/dataset_selector.tsx | 18 +- .../data/public/ui/dataset_selector/index.tsx | 33 ++-- .../ui/query_editor/query_editor_top_row.tsx | 27 ++- .../ui/search_bar/create_search_bar.tsx | 1 + .../data/public/ui/search_bar/search_bar.tsx | 2 + src/plugins/data/public/ui/ui_service.ts | 3 - .../public/components/app_container.tsx | 4 +- .../public/components/sidebar/index.tsx | 88 +++------ src/plugins/data_explorer/public/index.ts | 2 - .../utils/state_management/metadata_slice.ts | 22 +-- .../public/utils/state_management/store.ts | 7 +- .../components/no_results/no_results.tsx | 179 +++++++++--------- .../view_components/canvas/index.tsx | 129 +++---------- .../view_components/canvas/top_nav.tsx | 3 + 17 files changed, 212 insertions(+), 363 deletions(-) create mode 100644 src/plugins/data/public/ui/dataset_selector/create_dataset_selector.tsx diff --git a/src/plugins/data/public/ui/dataset_selector/advanced_selector.tsx b/src/plugins/data/public/ui/dataset_selector/advanced_selector.tsx index 25434062de8e..734153452eea 100644 --- a/src/plugins/data/public/ui/dataset_selector/advanced_selector.tsx +++ b/src/plugins/data/public/ui/dataset_selector/advanced_selector.tsx @@ -13,27 +13,19 @@ import { } from '../../../common'; import { DatasetExplorer } from './dataset_explorer'; import { Configurator } from './configurator'; +import { getQueryService } from '../../services'; import { IDataPluginServices } from '../../types'; export const AdvancedSelector = ({ services, onSelect, onCancel, - selectedDataset, - setSelectedDataset, - setIndexPattern, - direct = false, }: { services: IDataPluginServices; onSelect: (dataset: Dataset) => void; onCancel: () => void; - selectedDataset?: Dataset; - setSelectedDataset: (data: Dataset | undefined) => void; - setIndexPattern: (id: string | undefined) => void; - direct?: boolean; }) => { - const queryService = services.data.query; - const queryString = queryService.queryString; + const queryString = getQueryService().queryString; const [path, setPath] = useState([ { @@ -56,21 +48,14 @@ export const AdvancedSelector = ({ }), }, ]); + const [selectedDataset, setSelectedDataset] = useState(); - const [currentSelectedDataset, setCurrentSelectedDataset] = useState( - selectedDataset - ); - - return currentSelectedDataset ? ( + return selectedDataset ? ( { - setSelectedDataset(undefined); - setCurrentSelectedDataset(undefined); - }} - queryService={queryService} + onPrevious={() => setSelectedDataset(undefined)} /> ) : ( { - setSelectedDataset(dataset); - setIndexPattern(dataset.id); - setCurrentSelectedDataset(dataset); - if (direct) { - const query = queryString.getInitialQueryByDataset(dataset); - queryString.setQuery(query); - queryString.getDatasetService().addRecentDataset(dataset); - } - }} + onNext={(dataset) => setSelectedDataset(dataset)} onCancel={onCancel} /> ); diff --git a/src/plugins/data/public/ui/dataset_selector/configurator.tsx b/src/plugins/data/public/ui/dataset_selector/configurator.tsx index b8a74a9353e0..db1cb80dd6e3 100644 --- a/src/plugins/data/public/ui/dataset_selector/configurator.tsx +++ b/src/plugins/data/public/ui/dataset_selector/configurator.tsx @@ -20,21 +20,20 @@ import { i18n } from '@osd/i18n'; import { FormattedMessage } from '@osd/i18n/react'; import React, { useEffect, useMemo, useState } from 'react'; import { BaseDataset, DEFAULT_DATA, Dataset, DatasetField } from '../../../common'; -import { getIndexPatterns } from '../../services'; +import { getIndexPatterns, getQueryService } from '../../services'; export const Configurator = ({ baseDataset, onConfirm, onCancel, onPrevious, - queryService, }: { baseDataset: BaseDataset; onConfirm: (dataset: Dataset) => void; onCancel: () => void; onPrevious: () => void; - queryService: any; }) => { + const queryService = getQueryService(); const queryString = queryService.queryString; const languageService = queryService.queryString.getLanguageService(); const indexPatternsService = getIndexPatterns(); diff --git a/src/plugins/data/public/ui/dataset_selector/create_dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/create_dataset_selector.tsx new file mode 100644 index 000000000000..92eef0e5679e --- /dev/null +++ b/src/plugins/data/public/ui/dataset_selector/create_dataset_selector.tsx @@ -0,0 +1,14 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import _ from 'lodash'; +import React from 'react'; + +import { DatasetSelector, DatasetSelectorProps } from '.'; + +// Takes in stateful runtime dependencies and pre-wires them to the component +export function createDatasetSelector() { + return (props: DatasetSelectorProps) => ; +} 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 6755645020d1..691f477a5818 100644 --- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx +++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx @@ -33,9 +33,7 @@ type EuiSmallButtonEmptyProps = React.ComponentProps interface DatasetSelectorProps { selectedDataset?: Dataset; - setSelectedDataset: (data: Dataset | undefined) => void; - setIndexPattern: (id: string | undefined) => void; - handleDatasetChange: (dataset: Dataset) => void; + setSelectedDataset: (dataset: Dataset) => void; services: IDataPluginServices; } @@ -73,8 +71,6 @@ const RootComponent: React.FC< export const DatasetSelector = ({ selectedDataset, setSelectedDataset, - setIndexPattern, - handleDatasetChange, services, appearance, buttonProps, @@ -106,7 +102,7 @@ export const DatasetSelector = ({ // If no dataset is selected, select the first one if (!selectedDataset && fetchedDatasets.length > 0) { - handleDatasetChange(fetchedDatasets[0]); + setSelectedDataset(fetchedDatasets[0]); } }; @@ -183,11 +179,11 @@ export const DatasetSelector = ({ indexPatterns.find((dataset) => dataset.id === selectedOption.key); if (foundDataset) { closePopover(); - handleDatasetChange(foundDataset); + setSelectedDataset(foundDataset); } } }, - [recentDatasets, indexPatterns, handleDatasetChange, closePopover] + [recentDatasets, indexPatterns, setSelectedDataset, closePopover] ); const datasetTitle = useMemo(() => { @@ -270,14 +266,10 @@ export const DatasetSelector = ({ onSelect={(dataset?: Dataset) => { overlay?.close(); if (dataset) { - handleDatasetChange(dataset); + setSelectedDataset(dataset); } }} onCancel={() => overlay?.close()} - selectedDataset={undefined} - setSelectedDataset={setSelectedDataset} - setIndexPattern={setIndexPattern} - direct={true} /> ), { diff --git a/src/plugins/data/public/ui/dataset_selector/index.tsx b/src/plugins/data/public/ui/dataset_selector/index.tsx index 48cd2926de22..53966ed6375f 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, useEffect } from 'react'; +import { useCallback, useState, useEffect } from 'react'; import React from 'react'; import { Dataset, Query, TimeRange } from '../../../common'; import { @@ -12,42 +12,37 @@ import { DatasetSelectorUsingButtonProps, DatasetSelectorAppearance, } from './dataset_selector'; -import { AdvancedSelector } from './advanced_selector'; +import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public'; +import { IDataPluginServices } from '../../types'; interface ConnectedDatasetSelectorProps { onSubmit: ((query: Query, dateRange?: TimeRange | undefined) => void) | undefined; - selectedDataset?: Dataset; - setSelectedDataset: (data: Dataset | undefined) => void; - setIndexPattern: (id: string | undefined) => void; - services?: any; } const ConnectedDatasetSelector = ({ onSubmit, - selectedDataset, - setSelectedDataset, - setIndexPattern, - services, ...datasetSelectorProps }: ConnectedDatasetSelectorProps & (DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => { + const { services } = useOpenSearchDashboards(); const queryString = services.data.query.queryString; + const [selectedDataset, setSelectedDataset] = useState( + () => queryString.getQuery().dataset || queryString.getDefaultQuery().dataset + ); useEffect(() => { const subscription = queryString.getUpdates$().subscribe((query) => { setSelectedDataset(query.dataset); - setIndexPattern(query.dataset?.id); }); return () => { subscription.unsubscribe(); }; - }, [queryString, setSelectedDataset, setIndexPattern]); + }, [queryString]); const handleDatasetChange = useCallback( (dataset?: Dataset) => { setSelectedDataset(dataset); - setIndexPattern(dataset?.id); if (dataset) { const query = queryString.getInitialQueryByDataset(dataset); queryString.setQuery(query); @@ -55,19 +50,21 @@ const ConnectedDatasetSelector = ({ queryString.getDatasetService().addRecentDataset(dataset); } }, - [onSubmit, queryString, setSelectedDataset, setIndexPattern] + [onSubmit, queryString] ); return ( ); }; -export { ConnectedDatasetSelector as DatasetSelector, AdvancedSelector, DatasetSelectorAppearance }; +export { + ConnectedDatasetSelector as DatasetSelector, + ConnectedDatasetSelectorProps as DatasetSelectorProps, + DatasetSelectorAppearance, +}; 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 index 62ba24527cd5..0f96986afd66 100644 --- 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,7 +15,14 @@ import { import classNames from 'classnames'; import React, { useState } from 'react'; import { createPortal } from 'react-dom'; -import { IDataPluginServices, IIndexPattern, Query, TimeHistoryContract, TimeRange } from '../..'; +import { + DatasetSelector, + IDataPluginServices, + IIndexPattern, + Query, + TimeHistoryContract, + TimeRange, +} from '../..'; import { useOpenSearchDashboards, withOpenSearchDashboards, @@ -52,6 +59,7 @@ export interface QueryEditorTopRowProps { isDirty: boolean; timeHistory?: TimeHistoryContract; indicateNoData?: boolean; + datasetSelectorRef?: React.RefObject; datePickerRef?: React.RefObject; savedQueryManagement?: any; queryStatus?: QueryStatus; @@ -63,14 +71,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { const [isDateRangeInvalid, setIsDateRangeInvalid] = useState(false); const [isQueryEditorFocused, setIsQueryEditorFocused] = useState(false); const opensearchDashboards = useOpenSearchDashboards(); - const { - uiSettings, - storage, - appName, - data: { - query: { queryString }, - }, - } = opensearchDashboards.services; + const { uiSettings, storage, appName } = opensearchDashboards.services; const queryLanguage = props.query && props.query.language; const persistedLog: PersistedLog | undefined = React.useMemo( @@ -170,6 +171,10 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { return valueAsMoment.toISOString(); } + function renderDatasetSelector() { + return ; + } + function renderQueryEditor() { if (!shouldRenderQueryEditor()) return; return ( @@ -315,6 +320,8 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { ); + const datasetSelector = <>{renderDatasetSelector()}; + return ( + {props?.datasetSelectorRef?.current && + createPortal(datasetSelector, props.datasetSelectorRef.current)} {props?.datePickerRef?.current && uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED) ? createPortal(datePicker, props.datePickerRef.current) : datePicker} 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 index 03bb2abfa508..f8b9694caabc 100644 --- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx +++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx @@ -209,6 +209,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps) onClearSavedQuery={defaultOnClearSavedQuery(props, clearSavedQuery)} onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, setSavedQuery)} onSaved={defaultOnSavedQueryUpdated(props, setSavedQuery)} + datasetSelectorRef={props.datasetSelectorRef} datePickerRef={props.datePickerRef} isFilterBarPortable={props.isFilterBarPortable} {...overrideDefaultBehaviors(props)} diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx index 975b0535c9d8..28f39bf7a23f 100644 --- a/src/plugins/data/public/ui/search_bar/search_bar.tsx +++ b/src/plugins/data/public/ui/search_bar/search_bar.tsx @@ -75,6 +75,7 @@ export interface SearchBarOwnProps { refreshInterval?: number; dateRangeFrom?: string; dateRangeTo?: string; + datasetSelectorRef?: React.RefObject; datePickerRef?: React.RefObject; // Query bar - should be in SearchBarInjectedDeps query?: Query; @@ -549,6 +550,7 @@ class SearchBarUI extends Component { filterBar={filterBar} dataTestSubj={this.props.dataTestSubj} indicateNoData={this.props.indicateNoData} + datasetSelectorRef={this.props.datasetSelectorRef} datePickerRef={this.props.datePickerRef} savedQueryManagement={searchBarMenu(false, true)} queryStatus={this.props.queryStatus} diff --git a/src/plugins/data/public/ui/ui_service.ts b/src/plugins/data/public/ui/ui_service.ts index 4eb45b1a67f2..87cfcf630965 100644 --- a/src/plugins/data/public/ui/ui_service.ts +++ b/src/plugins/data/public/ui/ui_service.ts @@ -4,7 +4,6 @@ */ import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public'; -import { BehaviorSubject } from 'rxjs'; import { ConfigSchema } from '../../config'; import { DataPublicPluginStart } from '../types'; import { createIndexPatternSelect } from './index_pattern_select'; @@ -12,8 +11,6 @@ import { createSearchBar } from './search_bar/create_search_bar'; import { SuggestionsComponent } from './typeahead'; import { IUiSetup, IUiStart } from './types'; import { DataStorage } from '../../common'; -import { QueryStatus } from '../query'; -import { ResultStatus } from '../query/query_string/language_service/lib'; /** @internal */ // eslint-disable-next-line @typescript-eslint/no-empty-interface diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx index c337361d37db..63f759f65408 100644 --- a/src/plugins/data_explorer/public/components/app_container.tsx +++ b/src/plugins/data_explorer/public/components/app_container.tsx @@ -35,6 +35,7 @@ export const AppContainer = React.memo( const showActionsInGroup = uiSettings?.get('home:useNewHomePage'); const topLinkRef = useRef(null); + const datasetSelectorRef = useRef(null); const datePickerRef = useRef(null); if (!view) { @@ -53,6 +54,7 @@ export const AppContainer = React.memo( params.optionalRef = { topLinkRef, + datasetSelectorRef, datePickerRef, }; // Render the application DOM. @@ -97,7 +99,7 @@ export const AppContainer = React.memo( mode={['collapsible', { position: 'top' }]} paddingSize="none" > - + diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx index 3c5975d9452e..b44b0704c91b 100644 --- a/src/plugins/data_explorer/public/components/sidebar/index.tsx +++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx @@ -12,50 +12,32 @@ import { DataSourceSelectable, UI_SETTINGS, } from '../../../../data/public'; -import { - DataSourceOption, - DatasetSelector, - DatasetSelectorAppearance, -} from '../../../../data/public/'; -import { Dataset } from '../../../../data/common'; +import { DataSourceOption } from '../../../../data/public/'; import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public'; import { DataExplorerServices } from '../../types'; -import { - setIndexPattern, - useTypedDispatch, - useTypedSelector, - setSelectedDataset, -} from '../../utils/state_management'; +import { setIndexPattern, useTypedDispatch, useTypedSelector } from '../../utils/state_management'; import './index.scss'; -type HandleSetIndexPattern = (id: string | undefined) => void; -type HandleSelectedDataset = (data: Dataset | undefined) => void; +interface SidebarProps { + children: React.ReactNode; + datasetSelectorRef: React.RefObject; +} -export const Sidebar: FC = ({ children }) => { - const { indexPattern: indexPatternId, selectedDataset } = useTypedSelector( - (state) => state.metadata - ); +export const Sidebar: FC = ({ children, datasetSelectorRef }) => { + const { indexPattern: indexPatternId } = useTypedSelector((state) => state.metadata); const dispatch = useTypedDispatch(); const [selectedSources, setSelectedSources] = useState([]); const [dataSourceOptionList, setDataSourceOptionList] = useState([]); const [activeDataSources, setActiveDataSources] = useState([]); - const { services } = useOpenSearchDashboards(); - const { - data: { indexPatterns, dataSources }, - notifications: { toasts }, - application, - uiSettings, - } = services; - const handleDatasetSubmit = useCallback( - (query: any) => { - // Update the index pattern - if (query.dataset) { - dispatch(setIndexPattern(query.dataset.id)); - } + const { + services: { + data: { indexPatterns, dataSources }, + notifications: { toasts }, + application, + uiSettings, }, - [dispatch] - ); + } = useOpenSearchDashboards(); const [isEnhancementEnabled, setIsEnhancementEnabled] = useState(false); @@ -137,14 +119,6 @@ export const Sidebar: FC = ({ children }) => { dataSources.dataSourceService.reload(); }, [dataSources.dataSourceService]); - const handleSetIndexPattern: HandleSetIndexPattern = (id: string | undefined) => { - dispatch(setIndexPattern(id)); - }; - - const handleSelectedDataset: HandleSelectedDataset = (data: Dataset | undefined) => { - dispatch(setSelectedDataset(data)); - }; - return ( { hasBorder={true} borderRadius="l" > - - {isEnhancementEnabled ? ( - - ) : ( + {isEnhancementEnabled &&
} + {!isEnhancementEnabled && ( + { onRefresh={memorizedReload} fullWidth /> - )} - + + )} {children} diff --git a/src/plugins/data_explorer/public/index.ts b/src/plugins/data_explorer/public/index.ts index 9d9ae2f46d2b..f8adda434ced 100644 --- a/src/plugins/data_explorer/public/index.ts +++ b/src/plugins/data_explorer/public/index.ts @@ -18,6 +18,4 @@ export { useTypedSelector, useTypedDispatch, setIndexPattern, - setSelectedDataset, - setDataSet, } from './utils/state_management'; diff --git a/src/plugins/data_explorer/public/utils/state_management/metadata_slice.ts b/src/plugins/data_explorer/public/utils/state_management/metadata_slice.ts index c62e550b0073..1fca4a659244 100644 --- a/src/plugins/data_explorer/public/utils/state_management/metadata_slice.ts +++ b/src/plugins/data_explorer/public/utils/state_management/metadata_slice.ts @@ -6,13 +6,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { DataExplorerServices } from '../../types'; import { QUERY_ENHANCEMENT_ENABLED_SETTING } from '../../components/constants'; -import { Dataset } from '../../../../data/common'; export interface MetadataState { indexPattern?: string; originatingApp?: string; view?: string; - selectedDataset?: Dataset; } const initialState: MetadataState = {}; @@ -28,16 +26,13 @@ export const getPreloadedState = async ({ .getStateTransfer(scopedHistory) .getIncomingEditorState({ keysToRemoveAfterFetch: ['id', 'input'] }) || {}; const isQueryEnhancementEnabled = uiSettings.get(QUERY_ENHANCEMENT_ENABLED_SETTING); - const defaultIndexPattern = await data.indexPatterns.getDefault(); - const selectedDataset = - data.query.queryString.getQuery().dataset || - data.query.queryString.getDefaultQuery().dataset || - undefined; + const defaultIndexPattern = isQueryEnhancementEnabled + ? undefined + : await data.indexPatterns.getDefault(); const preloadedState: MetadataState = { ...initialState, originatingApp, indexPattern: defaultIndexPattern?.id, - selectedDataset, }; return preloadedState; @@ -56,9 +51,6 @@ export const slice = createSlice({ setView: (state, action: PayloadAction) => { state.view = action.payload; }, - setSelectedDataset: (state, action: PayloadAction) => { - state.selectedDataset = action.payload; - }, setState: (_state, action: PayloadAction) => { return action.payload; }, @@ -66,10 +58,4 @@ export const slice = createSlice({ }); export const { reducer } = slice; -export const { - setIndexPattern, - setOriginatingApp, - setView, - setState, - setSelectedDataset, -} = slice.actions; +export const { setIndexPattern, setOriginatingApp, setView, setState } = slice.actions; diff --git a/src/plugins/data_explorer/public/utils/state_management/store.ts b/src/plugins/data_explorer/public/utils/state_management/store.ts index 1ac3564e34ce..daf0b3d7e369 100644 --- a/src/plugins/data_explorer/public/utils/state_management/store.ts +++ b/src/plugins/data_explorer/public/utils/state_management/store.ts @@ -116,9 +116,4 @@ export type RenderState = Omit; // Remaining state after export type Store = ReturnType; export type AppDispatch = Store['dispatch']; -export { - MetadataState, - setIndexPattern, - setOriginatingApp, - setSelectedDataset, -} from './metadata_slice'; +export { MetadataState, setIndexPattern, setOriginatingApp } from './metadata_slice'; diff --git a/src/plugins/discover/public/application/components/no_results/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx index 6c8421535fde..4ef601be6825 100644 --- a/src/plugins/discover/public/application/components/no_results/no_results.tsx +++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx @@ -50,19 +50,19 @@ import { } from '../../../../../data/public/'; interface Props { - datasetService: DatasetServiceContract; - savedQuery: SavedQueryService; - languageService: LanguageServiceContract; - query: Query | undefined; + // datasetService: DatasetServiceContract; + // savedQuery: SavedQueryService; + // languageService: LanguageServiceContract; + // query: Query | undefined; timeFieldName?: string; queryLanguage?: string; } export const DiscoverNoResults = ({ - datasetService, - savedQuery, - languageService, - query, + // datasetService, + // savedQuery, + // languageService, + // query, timeFieldName, queryLanguage, }: Props) => { @@ -182,90 +182,81 @@ export const DiscoverNoResults = ({ // // ); // } - - const [savedQueries, setSavedQueries] = useState([]); - - useEffect(() => { - const fetchSavedQueries = async () => { - const { queries: savedQueryItems } = await savedQuery.findSavedQueries('', 1000); - setSavedQueries( - savedQueryItems.filter((sq) => query?.language === sq.attributes.query.language) - ); - }; - - fetchSavedQueries(); - }, [setSavedQueries, query, savedQuery]); - - const tabs = useMemo(() => { - const buildSampleQueryBlock = (sampleTitle: string, sampleQuery: string) => { - return ( - <> - {sampleTitle} - - {sampleQuery} - - - ); - }; - - const sampleQueries = []; - - // Samples for the dataset type - if (query?.dataset?.type) { - const datasetSampleQueries = datasetService - .getType(query.dataset.type) - ?.getSampleQueries?.(query.dataset, query.language); - if (Array.isArray(datasetSampleQueries)) sampleQueries.push(...datasetSampleQueries); - } - - // Samples for the language - if (query?.language) { - const languageSampleQueries = languageService.getLanguage(query.language)?.sampleQueries; - if (Array.isArray(languageSampleQueries)) sampleQueries.push(...languageSampleQueries); - } - - return [ - ...(sampleQueries.length > 0 - ? [ - { - id: 'sample_queries', - name: i18n.translate('discover.emptyPrompt.sampleQueries.title', { - defaultMessage: 'Sample Queries', - }), - content: ( - - - {sampleQueries - .slice(0, 5) - .map((sampleQuery) => - buildSampleQueryBlock(sampleQuery.title, sampleQuery.query) - )} - - ), - }, - ] - : []), - ...(savedQueries.length > 0 - ? [ - { - id: 'saved_queries', - name: i18n.translate('discover.emptyPrompt.savedQueries.title', { - defaultMessage: 'Saved Queries', - }), - content: ( - - - {savedQueries.map((sq) => - buildSampleQueryBlock(sq.id, sq.attributes.query.query as string) - )} - - ), - }, - ] - : []), - ]; - }, [datasetService, languageService, query, savedQueries]); - + // const [savedQueries, setSavedQueries] = useState([]); + // useEffect(() => { + // const fetchSavedQueries = async () => { + // const { queries: savedQueryItems } = await savedQuery.findSavedQueries('', 1000); + // setSavedQueries( + // savedQueryItems.filter((sq) => query?.language === sq.attributes.query.language) + // ); + // }; + // fetchSavedQueries(); + // }, [setSavedQueries, query, savedQuery]); + // const tabs = useMemo(() => { + // const buildSampleQueryBlock = (sampleTitle: string, sampleQuery: string) => { + // return ( + // <> + // {sampleTitle} + // + // {sampleQuery} + // + // + // ); + // }; + // const sampleQueries = []; + // // Samples for the dataset type + // if (query?.dataset?.type) { + // const datasetSampleQueries = datasetService + // .getType(query.dataset.type) + // ?.getSampleQueries?.(query.dataset, query.language); + // if (Array.isArray(datasetSampleQueries)) sampleQueries.push(...datasetSampleQueries); + // } + // // Samples for the language + // if (query?.language) { + // const languageSampleQueries = languageService.getLanguage(query.language)?.sampleQueries; + // if (Array.isArray(languageSampleQueries)) sampleQueries.push(...languageSampleQueries); + // } + // return [ + // ...(sampleQueries.length > 0 + // ? [ + // { + // id: 'sample_queries', + // name: i18n.translate('discover.emptyPrompt.sampleQueries.title', { + // defaultMessage: 'Sample Queries', + // }), + // content: ( + // + // + // {sampleQueries + // .slice(0, 5) + // .map((sampleQuery) => + // buildSampleQueryBlock(sampleQuery.title, sampleQuery.query) + // )} + // + // ), + // }, + // ] + // : []), + // ...(savedQueries.length > 0 + // ? [ + // { + // id: 'saved_queries', + // name: i18n.translate('discover.emptyPrompt.savedQueries.title', { + // defaultMessage: 'Saved Queries', + // }), + // content: ( + // + // + // {savedQueries.map((sq) => + // buildSampleQueryBlock(sq.id, sq.attributes.query.query as string) + // )} + // + // ), + // }, + // ] + // : []), + // ]; + // }, [datasetService, languageService, query, savedQueries]); return ( } /> -
+ {/*
-
+
*/} ); }; diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx index af94e0e6f542..fcad13342e07 100644 --- a/src/plugins/discover/public/application/view_components/canvas/index.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx @@ -27,31 +27,18 @@ import { OpenSearchSearchHit } from '../../../application/doc_views/doc_views_ty import { buildColumns } from '../../utils/columns'; import './discover_canvas.scss'; import { HeaderVariant } from '../../../../../../core/public'; -import { Query } from '../../../../../../../src/plugins/data/common/types'; -import { setIndexPattern, setSelectedDataset } from '../../../../../data_explorer/public'; -import { NoIndexPatternsPanel, AdvancedSelector } from '../../../../../data/public'; -import { Dataset } from '../../../../../data/common'; -import { toMountPoint } from '../../../../../opensearch_dashboards_react/public'; // eslint-disable-next-line import/no-default-export export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalRef }: ViewProps) { - const { indexPattern: currentIndexPattern, selectedDataset } = useSelector( - (state) => state.metadata - ); - const [loadedIndexPattern, setLoadedIndexPattern] = useState(selectedDataset?.id); const panelRef = useRef(null); const { data$, refetch$, indexPattern } = useDiscoverContext(); - const { services } = useOpenSearchDashboards(); const { - uiSettings, - capabilities, - chrome: { setHeaderVariant }, - data, - overlays, - } = services; - const datasetService = data.query.queryString.getDatasetService(); - const savedQuery = data.query.savedQueries; - const languageService = data.query.queryString.getLanguageService(); + services: { + uiSettings, + capabilities, + chrome: { setHeaderVariant }, + }, + } = useOpenSearchDashboards(); const { columns } = useSelector((state) => { const stateColumns = state.discover.columns; @@ -69,7 +56,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR ); const dispatch = useDispatch(); const prevIndexPattern = useRef(indexPattern); - const [query, setQuery] = useState(); const [fetchState, setFetchState] = useState({ status: data$.getValue().status, @@ -79,9 +65,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR const onQuerySubmit = useCallback( (payload, isUpdate) => { - if (payload?.query) { - setQuery(payload?.query); - } if (isUpdate === false) { refetch$.next(); } @@ -139,48 +122,10 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR }; const showSaveQuery = !!capabilities.discover?.saveQuery; - const handleDatasetChange = (dataset: Dataset) => { - dispatch(setSelectedDataset(dataset)); - - // Update query and other necessary state - const queryString = data.query.queryString; - const initialQuery = queryString.getInitialQueryByDataset(dataset); - queryString.setQuery(initialQuery); - queryString.getDatasetService().addRecentDataset(dataset); - }; - - const handleOpenDataSelector = () => { - const overlay = overlays?.openModal( - toMountPoint( - { - overlay?.close(); - if (dataset) { - handleDatasetChange(dataset); - } - }} - onCancel={() => overlay?.close()} - selectedDataset={undefined} - setSelectedDataset={setSelectedDataset} - setIndexPattern={setIndexPattern} - dispatch={dispatch} - /> - ), - { - maxWidth: false, - className: 'datasetSelector__advancedModal', - } - ); - }; - - const hasNoDataset = !currentIndexPattern && !loadedIndexPattern && isEnhancementsEnabled; - return ( - {hasNoDataset ? ( - - ) : ( + + {fetchState.status === ResultStatus.NO_RESULTS && ( + + )} + {fetchState.status === ResultStatus.ERROR && ( + + )} + {fetchState.status === ResultStatus.UNINITIALIZED && ( + refetch$.next()} /> + )} + {fetchState.status === ResultStatus.LOADING && } + {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && ( <> - {fetchState.status === ResultStatus.NO_RESULTS && ( - - )} - {fetchState.status === ResultStatus.ERROR && ( - - )} - {fetchState.status === ResultStatus.UNINITIALIZED && ( - refetch$.next()} /> - )} - {fetchState.status === ResultStatus.LOADING && } - {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && ( - <> - - - - )} - {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && ( - - - - - )} + + )} + {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && ( + + + + + )} ); } diff --git a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx index 0b3f1275d7ff..552d65286d9f 100644 --- a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx @@ -191,6 +191,9 @@ export const TopNav = ({ onQuerySubmit={useNoIndexPatternsTopNav ? () => {} : opts.onQuerySubmit} savedQueryId={useNoIndexPatternsTopNav ? undefined : state.savedQuery} onSavedQueryIdChange={useNoIndexPatternsTopNav ? () => {} : updateSavedQueryId} + datasetSelectorRef={ + useNoIndexPatternsTopNav ? undefined : opts?.optionalRef?.datasetSelectorRef + } datePickerRef={useNoIndexPatternsTopNav ? undefined : opts?.optionalRef?.datePickerRef} groupActions={showActionsInGroup} screenTitle={ From 29c0fd08e96c8a8268d9d5b3dcc84a2d0440a1c0 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 19 Oct 2024 07:15:28 +0000 Subject: [PATCH 2/6] update the logic for ensuring index pattern Signed-off-by: Kawika Avilla --- .../ensure_default_index_pattern.ts | 14 +- .../index_patterns/index_patterns.ts | 5 +- .../data/public/index_patterns/index.ts | 1 + .../index_patterns/index_patterns/index.ts | 1 + .../index_patterns/on_no_index_pattern.tsx | 139 +++++++++++++ .../ui/dataset_selector/dataset_selector.tsx | 1 + .../components/no_results/no_results.tsx | 187 +++++++++--------- .../view_components/canvas/index.tsx | 15 +- .../view_components/canvas/top_nav.tsx | 59 ++---- 9 files changed, 272 insertions(+), 150 deletions(-) create mode 100644 src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx diff --git a/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts b/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts index 9fed0e1d0519..a667ea2291a4 100644 --- a/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts +++ b/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts @@ -32,22 +32,18 @@ import { includes } from 'lodash'; import { IndexPatternsContract } from './index_patterns'; import { UiSettingsCommon } from '../types'; -export type EnsureDefaultIndexPattern = ( - shouldRedirect?: boolean -) => Promise | undefined; +export type EnsureDefaultIndexPattern = () => Promise | undefined; export const createEnsureDefaultIndexPattern = ( uiSettings: UiSettingsCommon, - onRedirectNoIndexPattern: () => Promise | void + onRedirectNoIndexPattern: () => Promise | void, + onNoIndexPattern: () => Promise | void ) => { /** * Checks whether a default index pattern is set and exists and defines * one otherwise. */ - return async function ensureDefaultIndexPattern( - this: IndexPatternsContract, - shouldRedirect: boolean = true - ) { + return async function ensureDefaultIndexPattern(this: IndexPatternsContract) { const patterns = await this.getIds(); let defaultId = await uiSettings.get('defaultIndex'); let defined = !!defaultId; @@ -67,6 +63,8 @@ export const createEnsureDefaultIndexPattern = ( defaultId = patterns[0]; await uiSettings.set('defaultIndex', defaultId); } else { + const isEnhancementsEnabled = await uiSettings.get('query:enhancements:enabled'); + const shouldRedirect = !isEnhancementsEnabled; if (shouldRedirect) return onRedirectNoIndexPattern(); else return; } diff --git a/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts b/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts index ccda27870313..ea5c41ea06a4 100644 --- a/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts +++ b/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts @@ -73,6 +73,7 @@ interface IndexPatternsServiceDeps { onNotification: OnNotification; onError: OnError; onRedirectNoIndexPattern?: () => void; + onNoIndexPattern?: () => void; onUnsupportedTimePattern: OnUnsupportedTimePattern; } @@ -96,6 +97,7 @@ export class IndexPatternsService { onError, onUnsupportedTimePattern, onRedirectNoIndexPattern = () => {}, + onNoIndexPattern = () => {}, }: IndexPatternsServiceDeps) { this.apiClient = apiClient; this.config = uiSettings; @@ -106,7 +108,8 @@ export class IndexPatternsService { this.onUnsupportedTimePattern = onUnsupportedTimePattern; this.ensureDefaultIndexPattern = createEnsureDefaultIndexPattern( uiSettings, - onRedirectNoIndexPattern + onRedirectNoIndexPattern, + onNoIndexPattern ); } diff --git a/src/plugins/data/public/index_patterns/index.ts b/src/plugins/data/public/index_patterns/index.ts index e33d1511ab32..8960baf09017 100644 --- a/src/plugins/data/public/index_patterns/index.ts +++ b/src/plugins/data/public/index_patterns/index.ts @@ -41,6 +41,7 @@ export { flattenHitWrapper, formatHitProvider, onRedirectNoIndexPattern, + onNoIndexPattern, onUnsupportedTimePattern, } from './index_patterns'; diff --git a/src/plugins/data/public/index_patterns/index_patterns/index.ts b/src/plugins/data/public/index_patterns/index_patterns/index.ts index 67421334d352..9fa2aafc318d 100644 --- a/src/plugins/data/public/index_patterns/index_patterns/index.ts +++ b/src/plugins/data/public/index_patterns/index_patterns/index.ts @@ -30,5 +30,6 @@ export * from '../../../common/index_patterns/index_patterns'; export * from './redirect_no_index_pattern'; +export * from './on_no_index_pattern'; export * from './on_unsupported_time_pattern'; export * from './index_patterns_api_client'; diff --git a/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx b/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx new file mode 100644 index 000000000000..53eabc5e874c --- /dev/null +++ b/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx @@ -0,0 +1,139 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { i18n } from '@osd/i18n'; +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiText, + EuiSmallButton, + EuiSpacer, + EuiTitle, + EuiButtonEmpty, +} from '@elastic/eui'; + +export const onNoIndexPattern = (toggleDatasetExplorer: () => void) => ( + + + + + + + + + +

+ {i18n.translate('data.noIndexPatterns.selectDataTitle', { + defaultMessage: 'Select datastream', + })} +

+ + + + + {i18n.translate('data.noIndexPatterns.selectDataDescription', { + defaultMessage: + 'Select an available data source and choose a query language to use for running queries. You can use the data dropdown or use the enhanced data selector to select data.', + })} + + + + + {i18n.translate('data.noIndexPatterns.openDataSelectorButton', { + defaultMessage: 'Open data selector', + })} + + + + + +

+ {i18n.translate('data.noIndexPatterns.learnMoreAboutQueryLanguages', { + defaultMessage: 'Learn more about query languages', + })} +

+ + + + + + + + {i18n.translate('data.noIndexPatterns.pplDocumentation', { + defaultMessage: 'PPL documentation', + })} + + + + + + + {i18n.translate('data.noIndexPatterns.sqlDocumentation', { + defaultMessage: 'SQL documentation', + })} + + + + + + + {i18n.translate('data.noIndexPatterns.luceneDocumentation', { + defaultMessage: 'Lucene documentation', + })} + + + + + + + {i18n.translate('data.noIndexPatterns.dqlDocumentation', { + defaultMessage: 'DQL documentation', + })} + + + + + + + + + +); 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 691f477a5818..e3fe361ed5a4 100644 --- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx +++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx @@ -32,6 +32,7 @@ type EuiSmallButtonProps = React.ComponentProps; type EuiSmallButtonEmptyProps = React.ComponentProps; interface DatasetSelectorProps { + setIsOpen: (isOpen: boolean) => void; selectedDataset?: Dataset; setSelectedDataset: (dataset: Dataset) => void; services: IDataPluginServices; diff --git a/src/plugins/discover/public/application/components/no_results/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx index 4ef601be6825..57d34b64ef64 100644 --- a/src/plugins/discover/public/application/components/no_results/no_results.tsx +++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx @@ -41,31 +41,21 @@ import { EuiPanel, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; -import { Query } from '../../../../../data/common'; import { - DatasetServiceContract, - LanguageServiceContract, + Query, + QueryStringContract, SavedQuery, SavedQueryService, } from '../../../../../data/public/'; interface Props { - // datasetService: DatasetServiceContract; - // savedQuery: SavedQueryService; - // languageService: LanguageServiceContract; - // query: Query | undefined; + queryString: QueryStringContract; + savedQuery: SavedQueryService; + query: Query | undefined; timeFieldName?: string; - queryLanguage?: string; } -export const DiscoverNoResults = ({ - // datasetService, - // savedQuery, - // languageService, - // query, - timeFieldName, - queryLanguage, -}: Props) => { +export const DiscoverNoResults = ({ queryString, query, savedQuery, timeFieldName }: Props) => { // Commented out due to no usage in code // See: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/8149 // @@ -182,81 +172,92 @@ export const DiscoverNoResults = ({ // // ); // } - // const [savedQueries, setSavedQueries] = useState([]); - // useEffect(() => { - // const fetchSavedQueries = async () => { - // const { queries: savedQueryItems } = await savedQuery.findSavedQueries('', 1000); - // setSavedQueries( - // savedQueryItems.filter((sq) => query?.language === sq.attributes.query.language) - // ); - // }; - // fetchSavedQueries(); - // }, [setSavedQueries, query, savedQuery]); - // const tabs = useMemo(() => { - // const buildSampleQueryBlock = (sampleTitle: string, sampleQuery: string) => { - // return ( - // <> - // {sampleTitle} - // - // {sampleQuery} - // - // - // ); - // }; - // const sampleQueries = []; - // // Samples for the dataset type - // if (query?.dataset?.type) { - // const datasetSampleQueries = datasetService - // .getType(query.dataset.type) - // ?.getSampleQueries?.(query.dataset, query.language); - // if (Array.isArray(datasetSampleQueries)) sampleQueries.push(...datasetSampleQueries); - // } - // // Samples for the language - // if (query?.language) { - // const languageSampleQueries = languageService.getLanguage(query.language)?.sampleQueries; - // if (Array.isArray(languageSampleQueries)) sampleQueries.push(...languageSampleQueries); - // } - // return [ - // ...(sampleQueries.length > 0 - // ? [ - // { - // id: 'sample_queries', - // name: i18n.translate('discover.emptyPrompt.sampleQueries.title', { - // defaultMessage: 'Sample Queries', - // }), - // content: ( - // - // - // {sampleQueries - // .slice(0, 5) - // .map((sampleQuery) => - // buildSampleQueryBlock(sampleQuery.title, sampleQuery.query) - // )} - // - // ), - // }, - // ] - // : []), - // ...(savedQueries.length > 0 - // ? [ - // { - // id: 'saved_queries', - // name: i18n.translate('discover.emptyPrompt.savedQueries.title', { - // defaultMessage: 'Saved Queries', - // }), - // content: ( - // - // - // {savedQueries.map((sq) => - // buildSampleQueryBlock(sq.id, sq.attributes.query.query as string) - // )} - // - // ), - // }, - // ] - // : []), - // ]; - // }, [datasetService, languageService, query, savedQueries]); + + const [savedQueries, setSavedQueries] = useState([]); + + useEffect(() => { + const fetchSavedQueries = async () => { + const { queries: savedQueryItems } = await savedQuery.findSavedQueries('', 1000); + setSavedQueries( + savedQueryItems.filter((sq) => query?.language === sq.attributes.query.language) + ); + }; + + fetchSavedQueries(); + }, [setSavedQueries, query, savedQuery]); + + const tabs = useMemo(() => { + const buildSampleQueryBlock = (sampleTitle: string, sampleQuery: string) => { + return ( + <> + {sampleTitle} + + {sampleQuery} + + + ); + }; + + const sampleQueries = []; + + // Samples for the dataset type + if (query?.dataset?.type) { + const datasetSampleQueries = queryString + .getDatasetService() + ?.getType(query.dataset.type) + ?.getSampleQueries?.(query.dataset, query.language); + if (Array.isArray(datasetSampleQueries)) sampleQueries.push(...datasetSampleQueries); + } + + // Samples for the language + if (query?.language) { + const languageSampleQueries = queryString.getLanguageService()?.getLanguage(query.language) + ?.sampleQueries; + if (Array.isArray(languageSampleQueries)) sampleQueries.push(...languageSampleQueries); + } + + return [ + ...(sampleQueries.length > 0 + ? [ + { + id: 'sample_queries', + name: i18n.translate('discover.emptyPrompt.sampleQueries.title', { + defaultMessage: 'Sample Queries', + }), + content: ( + + + {sampleQueries + .slice(0, 5) + .map((sampleQuery) => + buildSampleQueryBlock(sampleQuery.title, sampleQuery.query) + )} + + ), + }, + ] + : []), + ...(savedQueries.length > 0 + ? [ + { + id: 'saved_queries', + name: i18n.translate('discover.emptyPrompt.savedQueries.title', { + defaultMessage: 'Saved Queries', + }), + content: ( + + + {savedQueries.map((sq) => + buildSampleQueryBlock(sq.id, sq.attributes.query.query as string) + )} + + ), + }, + ] + : []), + ]; + }, [queryString, query, savedQueries]); + return ( } /> - {/*
+
-
*/} +
); }; diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx index fcad13342e07..bb522d419aad 100644 --- a/src/plugins/discover/public/application/view_components/canvas/index.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx @@ -37,6 +37,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR uiSettings, capabilities, chrome: { setHeaderVariant }, + data, }, } = useOpenSearchDashboards(); const { columns } = useSelector((state) => { @@ -142,10 +143,20 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR /> {fetchState.status === ResultStatus.NO_RESULTS && ( - + )} {fetchState.status === ResultStatus.ERROR && ( - + )} {fetchState.status === ResultStatus.UNINITIALIZED && ( refetch$.next()} /> diff --git a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx index 552d65286d9f..a4054535ddf5 100644 --- a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx @@ -35,15 +35,9 @@ export interface TopNavProps { }; showSaveQuery: boolean; isEnhancementsEnabled?: boolean; - useNoIndexPatternsTopNav?: boolean; } -export const TopNav = ({ - opts, - showSaveQuery, - isEnhancementsEnabled, - useNoIndexPatternsTopNav = false, -}: TopNavProps) => { +export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavProps) => { const { services } = useOpenSearchDashboards(); const { data$, inspectorAdapters, savedSearch, indexPattern } = useDiscoverContext(); const [indexPatterns, setIndexPatterns] = useState(undefined); @@ -68,13 +62,7 @@ export const TopNav = ({ const showActionsInGroup = uiSettings.get('home:useNewHomePage'); const topNavLinks = savedSearch - ? getTopNavLinks( - services, - inspectorAdapters, - savedSearch, - isEnhancementsEnabled, - useNoIndexPatternsTopNav - ) + ? getTopNavLinks(services, inspectorAdapters, savedSearch, isEnhancementsEnabled) : []; connectStorageToQueryState( @@ -100,18 +88,11 @@ export const TopNav = ({ useEffect(() => { let isMounted = true; const initializeDataset = async () => { - await data.indexPatterns.ensureDefaultIndexPattern(isEnhancementsEnabled ? false : true); + await data.indexPatterns.ensureDefaultIndexPattern(); const defaultIndexPattern = await data.indexPatterns.getDefault(); - // TODO: ROCKY do we need this? - // const queryString = data.query.queryString; - // const defaultDataset = queryString.getDatasetService().getDefault(); - if (!isMounted) return; setIndexPatterns(defaultIndexPattern ? [defaultIndexPattern] : undefined); - // if (defaultDataset) { - // datasetManager.setDataset(defaultDataset); - // } }; initializeDataset(); @@ -119,7 +100,7 @@ export const TopNav = ({ return () => { isMounted = false; }; - }, [data.indexPatterns, data.query, isEnhancementsEnabled]); + }, [data.indexPatterns, data.query]); useEffect(() => { const pageTitleSuffix = savedSearch?.id && savedSearch.title ? `: ${savedSearch.title}` : ''; @@ -176,33 +157,19 @@ export const TopNav = ({ {} : opts.onQuerySubmit} - savedQueryId={useNoIndexPatternsTopNav ? undefined : state.savedQuery} - onSavedQueryIdChange={useNoIndexPatternsTopNav ? () => {} : updateSavedQueryId} - datasetSelectorRef={ - useNoIndexPatternsTopNav ? undefined : opts?.optionalRef?.datasetSelectorRef - } - datePickerRef={useNoIndexPatternsTopNav ? undefined : opts?.optionalRef?.datePickerRef} + indexPatterns={indexPattern ? [indexPattern] : indexPatterns} + onQuerySubmit={opts.onQuerySubmit} + savedQueryId={state.savedQuery} + onSavedQueryIdChange={updateSavedQueryId} + datasetSelectorRef={opts?.optionalRef?.datasetSelectorRef} + datePickerRef={opts?.optionalRef?.datePickerRef} groupActions={showActionsInGroup} - screenTitle={ - useNoIndexPatternsTopNav - ? i18n.translate('discover.noIndexPatterns.screenTitle', { - defaultMessage: 'Select data', - }) - : screenTitle - } + screenTitle={screenTitle} queryStatus={queryStatus} /> From bd785d4bfe9bb915455decc450d488ee6103f5c4 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 19 Oct 2024 08:06:32 +0000 Subject: [PATCH 3/6] dont add ability to open button Signed-off-by: Kawika Avilla --- .../index_patterns/on_no_index_pattern.tsx | 12 +++++------- .../public/ui/dataset_selector/dataset_selector.tsx | 1 - 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx b/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx index 53eabc5e874c..63e3fb9fce19 100644 --- a/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx +++ b/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx @@ -11,13 +11,11 @@ import { EuiFlexItem, EuiIcon, EuiText, - EuiSmallButton, - EuiSpacer, EuiTitle, EuiButtonEmpty, } from '@elastic/eui'; -export const onNoIndexPattern = (toggleDatasetExplorer: () => void) => ( +export const onNoIndexPattern = () => ( void) => (

{i18n.translate('data.noIndexPatterns.selectDataTitle', { - defaultMessage: 'Select datastream', + defaultMessage: 'Select data', })}

@@ -47,14 +45,14 @@ export const onNoIndexPattern = (toggleDatasetExplorer: () => void) => ( })} - - + {/* + setIsDatasetSelectorOpen(true)}> {i18n.translate('data.noIndexPatterns.openDataSelectorButton', { defaultMessage: 'Open data selector', })} - + */}

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 e3fe361ed5a4..691f477a5818 100644 --- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx +++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx @@ -32,7 +32,6 @@ type EuiSmallButtonProps = React.ComponentProps; type EuiSmallButtonEmptyProps = React.ComponentProps; interface DatasetSelectorProps { - setIsOpen: (isOpen: boolean) => void; selectedDataset?: Dataset; setSelectedDataset: (dataset: Dataset) => void; services: IDataPluginServices; From 9ca559a747c5e6883d436bffdfe02136994f2d22 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 19 Oct 2024 13:15:11 +0000 Subject: [PATCH 4/6] empty state but missing data set selector button Signed-off-by: Kawika Avilla --- .../ensure_default_index_pattern.ts | 3 +- .../index_patterns/index_patterns.ts | 5 +- .../data/public/index_patterns/index.ts | 1 - .../index_patterns/index_patterns/index.ts | 1 - .../index_patterns/on_no_index_pattern.tsx | 137 ----------------- .../language_service/lib/dql_language.ts | 6 + .../language_service/lib/lucene_language.ts | 6 + .../query_string/language_service/types.ts | 4 + src/plugins/data/public/ui/_index.scss | 1 - src/plugins/data/public/ui/index.ts | 5 +- .../data/public/ui/no_index_patterns/index.ts | 6 - .../no_index_patterns_panel.tsx | 145 ------------------ .../public/components/sidebar/index.tsx | 21 +-- .../no_index_patterns/no_index_patterns.scss} | 2 +- .../no_index_patterns/no_index_patterns.tsx | 89 +++++++++++ .../view_components/canvas/index.tsx | 68 ++++---- .../query_enhancements/public/plugin.tsx | 12 ++ 17 files changed, 169 insertions(+), 343 deletions(-) delete mode 100644 src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx delete mode 100644 src/plugins/data/public/ui/no_index_patterns/index.ts delete mode 100644 src/plugins/data/public/ui/no_index_patterns/no_index_patterns_panel.tsx rename src/plugins/{data/public/ui/_common.scss => discover/public/application/components/no_index_patterns/no_index_patterns.scss} (86%) create mode 100644 src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.tsx diff --git a/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts b/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts index a667ea2291a4..94df6995186a 100644 --- a/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts +++ b/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts @@ -36,8 +36,7 @@ export type EnsureDefaultIndexPattern = () => Promise | undefine export const createEnsureDefaultIndexPattern = ( uiSettings: UiSettingsCommon, - onRedirectNoIndexPattern: () => Promise | void, - onNoIndexPattern: () => Promise | void + onRedirectNoIndexPattern: () => Promise | void ) => { /** * Checks whether a default index pattern is set and exists and defines diff --git a/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts b/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts index ea5c41ea06a4..ccda27870313 100644 --- a/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts +++ b/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts @@ -73,7 +73,6 @@ interface IndexPatternsServiceDeps { onNotification: OnNotification; onError: OnError; onRedirectNoIndexPattern?: () => void; - onNoIndexPattern?: () => void; onUnsupportedTimePattern: OnUnsupportedTimePattern; } @@ -97,7 +96,6 @@ export class IndexPatternsService { onError, onUnsupportedTimePattern, onRedirectNoIndexPattern = () => {}, - onNoIndexPattern = () => {}, }: IndexPatternsServiceDeps) { this.apiClient = apiClient; this.config = uiSettings; @@ -108,8 +106,7 @@ export class IndexPatternsService { this.onUnsupportedTimePattern = onUnsupportedTimePattern; this.ensureDefaultIndexPattern = createEnsureDefaultIndexPattern( uiSettings, - onRedirectNoIndexPattern, - onNoIndexPattern + onRedirectNoIndexPattern ); } diff --git a/src/plugins/data/public/index_patterns/index.ts b/src/plugins/data/public/index_patterns/index.ts index 8960baf09017..e33d1511ab32 100644 --- a/src/plugins/data/public/index_patterns/index.ts +++ b/src/plugins/data/public/index_patterns/index.ts @@ -41,7 +41,6 @@ export { flattenHitWrapper, formatHitProvider, onRedirectNoIndexPattern, - onNoIndexPattern, onUnsupportedTimePattern, } from './index_patterns'; diff --git a/src/plugins/data/public/index_patterns/index_patterns/index.ts b/src/plugins/data/public/index_patterns/index_patterns/index.ts index 9fa2aafc318d..67421334d352 100644 --- a/src/plugins/data/public/index_patterns/index_patterns/index.ts +++ b/src/plugins/data/public/index_patterns/index_patterns/index.ts @@ -30,6 +30,5 @@ export * from '../../../common/index_patterns/index_patterns'; export * from './redirect_no_index_pattern'; -export * from './on_no_index_pattern'; export * from './on_unsupported_time_pattern'; export * from './index_patterns_api_client'; diff --git a/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx b/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx deleted file mode 100644 index 63e3fb9fce19..000000000000 --- a/src/plugins/data/public/index_patterns/index_patterns/on_no_index_pattern.tsx +++ /dev/null @@ -1,137 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import { i18n } from '@osd/i18n'; -import { - EuiPanel, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiText, - EuiTitle, - EuiButtonEmpty, -} from '@elastic/eui'; - -export const onNoIndexPattern = () => ( - - - - - - - - - -

- {i18n.translate('data.noIndexPatterns.selectDataTitle', { - defaultMessage: 'Select data', - })} -

- - - - - {i18n.translate('data.noIndexPatterns.selectDataDescription', { - defaultMessage: - 'Select an available data source and choose a query language to use for running queries. You can use the data dropdown or use the enhanced data selector to select data.', - })} - - - {/* - setIsDatasetSelectorOpen(true)}> - {i18n.translate('data.noIndexPatterns.openDataSelectorButton', { - defaultMessage: 'Open data selector', - })} - - - */} - - -

- {i18n.translate('data.noIndexPatterns.learnMoreAboutQueryLanguages', { - defaultMessage: 'Learn more about query languages', - })} -

- - - - - - - - {i18n.translate('data.noIndexPatterns.pplDocumentation', { - defaultMessage: 'PPL documentation', - })} - - - - - - - {i18n.translate('data.noIndexPatterns.sqlDocumentation', { - defaultMessage: 'SQL documentation', - })} - - - - - - - {i18n.translate('data.noIndexPatterns.luceneDocumentation', { - defaultMessage: 'Lucene documentation', - })} - - - - - - - {i18n.translate('data.noIndexPatterns.dqlDocumentation', { - defaultMessage: 'DQL documentation', - })} - - - - - - - - - -); diff --git a/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts b/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts index 6816bf0d7121..402af7482d08 100644 --- a/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts +++ b/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts @@ -24,6 +24,12 @@ export const getDQLLanguageConfig = ( visualizable: true, }, showDocLinks: true, + docLink: { + title: i18n.translate('data.dqlLanguage.docLink', { + defaultMessage: 'DQL documentation', + }), + url: 'https://opensearch.org/docs/latest/query-dsl/full-text/query-string/', + }, editorSupportedAppNames: ['discover'], supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer', 'vis-builder', '*'], sampleQueries: [ diff --git a/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts b/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts index c42b14543633..4da92f868654 100644 --- a/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts +++ b/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts @@ -24,6 +24,12 @@ export const getLuceneLanguageConfig = ( visualizable: true, }, showDocLinks: true, + docLink: { + title: i18n.translate('data.luceneLanguage.docLink', { + defaultMessage: 'Lucene documentation', + }), + url: 'https://opensearch.org/docs/latest/query-dsl/full-text/query-string/', + }, editorSupportedAppNames: ['discover'], supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer', 'vis-builder', '*'], sampleQueries: [ diff --git a/src/plugins/data/public/query/query_string/language_service/types.ts b/src/plugins/data/public/query/query_string/language_service/types.ts index 0889f7e63950..c80858d67102 100644 --- a/src/plugins/data/public/query/query_string/language_service/types.ts +++ b/src/plugins/data/public/query/query_string/language_service/types.ts @@ -55,6 +55,10 @@ export interface LanguageConfig { visualizable?: boolean; }; showDocLinks?: boolean; + docLink?: { + title: string; + url: string; + }; editorSupportedAppNames?: string[]; supportedAppNames?: string[]; hideDatePicker?: boolean; diff --git a/src/plugins/data/public/ui/_index.scss b/src/plugins/data/public/ui/_index.scss index cdbe539a2e19..9ab4ca672b38 100644 --- a/src/plugins/data/public/ui/_index.scss +++ b/src/plugins/data/public/ui/_index.scss @@ -1,4 +1,3 @@ -@import "./common"; @import "./filter_bar/index"; @import "./typeahead/index"; @import "./saved_query_management/index"; diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts index 00ac361bb26e..bdde4cc42a39 100644 --- a/src/plugins/data/public/ui/index.ts +++ b/src/plugins/data/public/ui/index.ts @@ -28,7 +28,7 @@ * under the License. */ -export { UiEnhancements, IUiStart, IUiSetup } from './types'; +export { IUiStart, IUiSetup } from './types'; export { IndexPatternSelectProps } from './index_pattern_select'; export { FilterLabel } from './filter_bar'; export { QueryStringInput, QueryStringInputProps } from './query_string_input'; @@ -51,5 +51,4 @@ export { useQueryStringManager, } from './search_bar'; export { SuggestionsComponent } from './typeahead'; -export { DatasetSelector, AdvancedSelector, DatasetSelectorAppearance } from './dataset_selector'; -export { NoIndexPatternsPanel } from './no_index_patterns'; +export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector'; diff --git a/src/plugins/data/public/ui/no_index_patterns/index.ts b/src/plugins/data/public/ui/no_index_patterns/index.ts deleted file mode 100644 index 4f7a76b5baa2..000000000000 --- a/src/plugins/data/public/ui/no_index_patterns/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -export * from './no_index_patterns_panel'; diff --git a/src/plugins/data/public/ui/no_index_patterns/no_index_patterns_panel.tsx b/src/plugins/data/public/ui/no_index_patterns/no_index_patterns_panel.tsx deleted file mode 100644 index 6dd7d2a8614c..000000000000 --- a/src/plugins/data/public/ui/no_index_patterns/no_index_patterns_panel.tsx +++ /dev/null @@ -1,145 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import { i18n } from '@osd/i18n'; -import { - EuiPanel, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiText, - EuiSmallButton, - EuiSpacer, - EuiTitle, - EuiButtonEmpty, -} from '@elastic/eui'; - -interface NoIndexPatternsPanelProps { - onOpenDataSelector: () => void; -} - -export const NoIndexPatternsPanel: React.FC = ({ - onOpenDataSelector, -}) => ( - - - - - - - - - -

- {i18n.translate('data.noIndexPatterns.selectDataTitle', { - defaultMessage: 'Select data', - })} -

- - - - - {i18n.translate('data.noIndexPatterns.selectDataDescription', { - defaultMessage: - 'Select an available data source and choose a query language to use for running queries. You can use the data dropdown or use the enhanced data selector to select data.', - })} - - - - - {i18n.translate('data.noIndexPatterns.openDataSelectorButton', { - defaultMessage: 'Open data selector', - })} - - - - - -

- {i18n.translate('data.noIndexPatterns.learnMoreAboutQueryLanguages', { - defaultMessage: 'Learn more about query languages', - })} -

- - - - - - - - {i18n.translate('data.noIndexPatterns.pplDocumentation', { - defaultMessage: 'PPL documentation', - })} - - - - - - - {i18n.translate('data.noIndexPatterns.sqlDocumentation', { - defaultMessage: 'SQL documentation', - })} - - - - - - - {i18n.translate('data.noIndexPatterns.luceneDocumentation', { - defaultMessage: 'Lucene documentation', - })} - - - - - - - {i18n.translate('data.noIndexPatterns.dqlDocumentation', { - defaultMessage: 'DQL documentation', - })} - - - - - - - - - -); diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx index b44b0704c91b..896d3df9b912 100644 --- a/src/plugins/data_explorer/public/components/sidebar/index.tsx +++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx @@ -126,14 +126,14 @@ export const Sidebar: FC = ({ children, datasetSelectorRef }) => { hasBorder={true} borderRadius="l" > - {isEnhancementEnabled &&
} - {!isEnhancementEnabled && ( - + + {isEnhancementEnabled &&
} + {!isEnhancementEnabled && ( = ({ children, datasetSelectorRef }) => { onRefresh={memorizedReload} fullWidth /> - - )} + )} + + {children} diff --git a/src/plugins/data/public/ui/_common.scss b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.scss similarity index 86% rename from src/plugins/data/public/ui/_common.scss rename to src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.scss index fcd98b9c7b31..fb2d8ef915aa 100644 --- a/src/plugins/data/public/ui/_common.scss +++ b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.scss @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -.dataUI-centerPanel { +.discoverNoIndexPatterns-centerPanel { height: 100%; width: 100%; diff --git a/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.tsx b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.tsx new file mode 100644 index 000000000000..7906a2f06041 --- /dev/null +++ b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.tsx @@ -0,0 +1,89 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import './no_index_patterns.scss'; +import React from 'react'; +import { i18n } from '@osd/i18n'; +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiText, + EuiTitle, + EuiButtonEmpty, +} from '@elastic/eui'; +import { getServices } from '../../../opensearch_dashboards_services'; + +export const DiscoverNoIndexPatterns: React.FC = () => { + const languageService = getServices().data.query.queryString.getLanguageService(); + const registeredLanguages = languageService.getLanguages(); + + return ( + + + + + + + + + +

+ {i18n.translate('discover.noIndexPatterns.selectDataTitle', { + defaultMessage: 'Select data', + })} +

+ + + + + {i18n.translate('discover.noIndexPatterns.selectDataDescription', { + defaultMessage: + 'Select an available data source and choose a query language to use for running queries. You can use the data dropdown or use the enhanced data selector to select data.', + })} + + + + +

+ {i18n.translate('discover.noIndexPatterns.learnMoreAboutQueryLanguages', { + defaultMessage: 'Learn more about query languages', + })} +

+ + + + + {registeredLanguages.map( + (language) => + language.docLink && ( + + + {language.docLink.title} + + + ) + )} + + + + + + + ); +}; diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx index bb522d419aad..b118df817ab0 100644 --- a/src/plugins/discover/public/application/view_components/canvas/index.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx @@ -12,6 +12,7 @@ import { DiscoverChartContainer } from './discover_chart_container'; import { useDiscoverContext } from '../context'; import { ResultStatus, SearchData } from '../utils/use_search'; import { DiscoverNoResults } from '../../components/no_results/no_results'; +import { DiscoverNoIndexPatterns } from '../../components/no_index_patterns/no_index_patterns'; import { DiscoverUninitialized } from '../../components/uninitialized/uninitialized'; import { LoadingSpinner } from '../../components/loading_spinner/loading_spinner'; import { setColumns, useDispatch, useSelector } from '../../utils/state_management'; @@ -142,38 +143,41 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR showSaveQuery={showSaveQuery} /> - {fetchState.status === ResultStatus.NO_RESULTS && ( - - )} - {fetchState.status === ResultStatus.ERROR && ( - - )} - {fetchState.status === ResultStatus.UNINITIALIZED && ( - refetch$.next()} /> - )} - {fetchState.status === ResultStatus.LOADING && } - {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && ( - <> - - - - )} - {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && ( - - - - - )} + {!indexPattern && } + <> + {fetchState.status === ResultStatus.NO_RESULTS && ( + + )} + {fetchState.status === ResultStatus.ERROR && ( + + )} + {fetchState.status === ResultStatus.UNINITIALIZED && ( + refetch$.next()} /> + )} + {fetchState.status === ResultStatus.LOADING && } + {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && ( + <> + + + + )} + {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && ( + + + + + )} + ); } diff --git a/src/plugins/query_enhancements/public/plugin.tsx b/src/plugins/query_enhancements/public/plugin.tsx index ff3df7e9ce1c..cbd40cb60b60 100644 --- a/src/plugins/query_enhancements/public/plugin.tsx +++ b/src/plugins/query_enhancements/public/plugin.tsx @@ -77,6 +77,12 @@ export class QueryEnhancementsPlugin filterable: false, visualizable: false, }, + docLink: { + title: i18n.translate('queryEnhancements.pplLanguage.docLink', { + defaultMessage: 'PPL documentation', + }), + url: 'https://opensearch.org/docs/latest/search-plugins/sql/ppl/syntax/', + }, showDocLinks: false, editor: enhancedPPLQueryEditor, editorSupportedAppNames: ['discover'], @@ -96,6 +102,12 @@ export class QueryEnhancementsPlugin filterable: false, visualizable: false, }, + docLink: { + title: i18n.translate('queryEnhancements.sqlLanguage.docLink', { + defaultMessage: 'SQL documentation', + }), + url: 'https://opensearch.org/docs/latest/search-plugins/sql/sql/basic/', + }, showDocLinks: false, editor: enhancedSQLQueryEditor, editorSupportedAppNames: ['discover'], From 4515d42d40c2b049e2e176b885e6e8171d8f493c Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 19 Oct 2024 14:14:32 +0000 Subject: [PATCH 5/6] fix tests Signed-off-by: Kawika Avilla --- .../create_dataset_selector.tsx | 14 ---- .../public/ui/dataset_selector/index.test.tsx | 64 ++----------------- .../redux_persistence.test.tsx | 1 - 3 files changed, 7 insertions(+), 72 deletions(-) delete mode 100644 src/plugins/data/public/ui/dataset_selector/create_dataset_selector.tsx diff --git a/src/plugins/data/public/ui/dataset_selector/create_dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/create_dataset_selector.tsx deleted file mode 100644 index 92eef0e5679e..000000000000 --- a/src/plugins/data/public/ui/dataset_selector/create_dataset_selector.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import _ from 'lodash'; -import React from 'react'; - -import { DatasetSelector, DatasetSelectorProps } from '.'; - -// Takes in stateful runtime dependencies and pre-wires them to the component -export function createDatasetSelector() { - return (props: DatasetSelectorProps) => ; -} diff --git a/src/plugins/data/public/ui/dataset_selector/index.test.tsx b/src/plugins/data/public/ui/dataset_selector/index.test.tsx index 9e486beb5310..f09788353192 100644 --- a/src/plugins/data/public/ui/dataset_selector/index.test.tsx +++ b/src/plugins/data/public/ui/dataset_selector/index.test.tsx @@ -38,6 +38,7 @@ describe('ConnectedDatasetSelector', () => { const mockServices = { data: { query: { + // @ts-ignore queryString: mockQueryString, }, }, @@ -45,87 +46,36 @@ describe('ConnectedDatasetSelector', () => { beforeEach(() => { (useOpenSearchDashboards as jest.Mock).mockReturnValue({ services: mockServices }); - jest.clearAllMocks(); }); it('should render DatasetSelector with correct props', () => { - const wrapper = mount( - - ); + const wrapper = mount(); expect(wrapper.find(DatasetSelector).props()).toEqual({ selectedDataset: undefined, setSelectedDataset: expect.any(Function), - setIndexPattern: expect.any(Function), - handleDatasetChange: expect.any(Function), services: mockServices, }); }); it('should initialize selectedDataset correctly', () => { const mockDataset: Dataset = { id: 'initial', title: 'Initial Dataset', type: 'test' }; + mockQueryString.getQuery.mockReturnValueOnce({ dataset: mockDataset }); - const wrapper = mount( - - ); + const wrapper = mount(); expect(wrapper.find(DatasetSelector).prop('selectedDataset')).toEqual(mockDataset); }); it('should call handleDatasetChange only once when dataset changes', () => { - const setSelectedDataset = jest.fn(); - const setIndexPattern = jest.fn(); - const wrapper = mount( - - ); - const handleDatasetChange = wrapper.find(DatasetSelector).prop('handleDatasetChange') as ( + const wrapper = mount(); + const setSelectedDataset = wrapper.find(DatasetSelector).prop('setSelectedDataset') as ( dataset?: Dataset ) => void; const newDataset: Dataset = { id: 'test', title: 'Test Dataset', type: 'test' }; - act(() => { - handleDatasetChange(newDataset); - }); + setSelectedDataset(newDataset); expect(mockQueryString.getInitialQueryByDataset).toHaveBeenCalledTimes(1); expect(mockQueryString.setQuery).toHaveBeenCalledTimes(1); expect(mockOnSubmit).toHaveBeenCalledTimes(1); - expect(setSelectedDataset).toHaveBeenCalledWith(newDataset); - expect(setIndexPattern).toHaveBeenCalledWith(newDataset.id); - }); - - 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_explorer/public/utils/state_management/redux_persistence.test.tsx b/src/plugins/data_explorer/public/utils/state_management/redux_persistence.test.tsx index 9af3bcf3d491..62159558a0c4 100644 --- a/src/plugins/data_explorer/public/utils/state_management/redux_persistence.test.tsx +++ b/src/plugins/data_explorer/public/utils/state_management/redux_persistence.test.tsx @@ -26,7 +26,6 @@ describe('test redux state persistence', () => { "metadata": Object { "indexPattern": "id", "originatingApp": undefined, - "selectedDataset": undefined, }, } `); From 83156d7d667bebe8d29132298da4c1bbc9240d55 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 19 Oct 2024 14:54:12 +0000 Subject: [PATCH 6/6] add back styling Signed-off-by: Kawika Avilla --- .../data/public/ui/dataset_selector/index.test.tsx | 1 - .../public/ui/query_editor/query_editor_top_row.tsx | 12 +++++++++++- .../public/components/sidebar/index.tsx | 7 +------ 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/plugins/data/public/ui/dataset_selector/index.test.tsx b/src/plugins/data/public/ui/dataset_selector/index.test.tsx index f09788353192..77528eaea532 100644 --- a/src/plugins/data/public/ui/dataset_selector/index.test.tsx +++ b/src/plugins/data/public/ui/dataset_selector/index.test.tsx @@ -5,7 +5,6 @@ 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'; 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 index 0f96986afd66..ab9b8c50e038 100644 --- 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 @@ -17,6 +17,7 @@ import React, { useState } from 'react'; import { createPortal } from 'react-dom'; import { DatasetSelector, + DatasetSelectorAppearance, IDataPluginServices, IIndexPattern, Query, @@ -172,7 +173,16 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { } function renderDatasetSelector() { - return ; + return ( + + ); } function renderQueryEditor() { diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx index 896d3df9b912..6a4ef0585e33 100644 --- a/src/plugins/data_explorer/public/components/sidebar/index.tsx +++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx @@ -126,12 +126,7 @@ export const Sidebar: FC = ({ children, datasetSelectorRef }) => { hasBorder={true} borderRadius="l" > - + {isEnhancementEnabled &&
} {!isEnhancementEnabled && (