[Backport 2.x] [Discover-Next] conditionally render selector

changelogs/fragments/7059.yml

@@ -0,0 +1,2 @@
+feat:
+- Render the datasource selector component conditionally ([#7059](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7059))

package.json

@@ -63,6 +63,7 @@
  "start": "scripts/use_node scripts/opensearch_dashboards --dev",
  "start:docker": "scripts/use_node scripts/opensearch_dashboards --dev --opensearch.hosts=$OPENSEARCH_HOSTS --opensearch.ignoreVersionMismatch=true --server.host=$SERVER_HOST",
  "start:security": "scripts/use_node scripts/opensearch_dashboards --dev --security",
+ "start:enhancements": "scripts/use_node scripts/opensearch_dashboards --dev --data.enhancements.enabled=true --uiSettings.overrides['query:enhancements:enabled']=true --uiSettings.overrides['query:dataSource:readOnly']=false",
  "debug": "scripts/use_node --nolazy --inspect scripts/opensearch_dashboards --dev",
  "debug-break": "scripts/use_node --nolazy --inspect-brk scripts/opensearch_dashboards --dev",
  "lint": "yarn run lint:es && yarn run lint:style",

src/plugins/data/common/data_frames/types.ts

@@ -98,6 +98,6 @@ export interface IDataFrameResponse extends SearchResponse<any> {
  took: number;
 }
 
-export interface IDataFrameError {
+export interface IDataFrameError extends IDataFrameResponse {
  error: Error;
 }

src/plugins/data/common/search/search_source/search_source.ts

@@ -123,7 +123,7 @@ export const searchSourceRequiredUiSettings = [
  UI_SETTINGS.QUERY_STRING_OPTIONS,
  UI_SETTINGS.SEARCH_INCLUDE_FROZEN,
  UI_SETTINGS.SORT_OPTIONS,
- UI_SETTINGS.DATAFRAME_HYDRATION_STRATEGY,
+ UI_SETTINGS.QUERY_DATAFRAME_HYDRATION_STRATEGY,
 ];
 
 export interface SearchSourceDependencies extends FetchHandlers {

src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx

@@ -23,7 +23,7 @@ interface IDataSelectorRefresherProps {
 export const DataSelectorRefresher: React.FC<IDataSelectorRefresherProps> = React.memo(
  ({ tooltipText, onRefresh, buttonProps, toolTipProps }) => {
  return (
- <EuiText size="s">
+ <EuiText size="s" className="sourceRefreshText">
  <EuiToolTip
  position="right"
  content={i18n.translate('data.datasource.selector.refreshDataSources', {
@@ -34,10 +34,10 @@ export const DataSelectorRefresher: React.FC<IDataSelectorRefresherProps> = Reac
  {...toolTipProps}
  >
  <EuiButtonIcon
- size="s"
  onClick={onRefresh}
  iconType="refresh"
  aria-label="sourceRefresh"
+ className="sourceRefreshButton"
  data-test-subj="sourceRefreshButton"
  {...buttonProps}
  />

src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx

@@ -162,6 +162,7 @@ export const DataSourceSelectable = ({
  return (
  <EuiComboBox
  {...comboBoxProps}
+ className="dataExplorerDSSelect"
  data-test-subj="dataExplorerDSSelect"
  placeholder={i18n.translate('data.datasource.selectADatasource', {
  defaultMessage: DATA_SELECTOR_DEFAULT_PLACEHOLDER,

src/plugins/data/public/ui/query_editor/_language_selector.scss

@@ -3,12 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 .languageSelector {
- max-width: 140px;
- height: 100%;
-
- &:first-child {
- div:first-child {
- height: 100%;
- }
- }
+ min-width: 140px;
+ border-bottom: $euiBorderThin !important;
 }

src/plugins/data/public/ui/query_editor/_query_editor.scss

@@ -15,6 +15,28 @@
  // overflow: auto;
 }
 
+.osdQueryEditor__languageWrapper {
+ :first-child {
+ box-shadow: none !important;
+ height: 100%;
+ border-radius: 0;
+ }
+}
+
+.osdQueryEditor__dataSourceWrapper {
+ .dataExplorerDSSelect {
+ border-bottom: $euiBorderThin !important;
+
+ div:is([class$="--group"]) {
+ padding: 0 !important;
+ }
+
+ .sourceRefreshText {
+ max-height: 40px;
+ }
+ }
+}
+
 @include euiBreakpoint("xs", "s") {
  .osdQueryEditor--withDatePicker {
  > :first-child {

src/plugins/data/public/ui/query_editor/language_selector.tsx

@@ -74,6 +74,7 @@ export const QueryLanguageSelector = (props: Props) => {
 
  return (
  <EuiComboBox
+ fullWidth
  className="languageSelector"
  data-test-subj="languageSelector"
  options={languageOptions}

src/plugins/data/public/ui/query_editor/query_editor.tsx

@@ -16,7 +16,7 @@ import {
 import { QuerySuggestion } from '../../autocomplete';
 import { fromUser, getQueryLog, PersistedLog, toUser } from '../../query';
 import { SuggestionsListSize } from '../typeahead/suggestions_component';
-import { DataSettings, QueryEnhancement } from '../types';
+import { DataSettings } from '../types';
 import { fetchIndexPatterns } from './fetch_index_patterns';
 import { QueryLanguageSelector } from './language_selector';
 
@@ -52,7 +52,7 @@ interface Props extends QueryEditorProps {
 }
 
 interface State {
- queryEnhancements: Map<string, QueryEnhancement>;
+ isDataSourcesVisible: boolean;
  isSuggestionsVisible: boolean;
  index: number | null;
  suggestions: QuerySuggestion[];
@@ -77,15 +77,15 @@ const KEY_CODES = {
 // eslint-disable-next-line import/no-default-export
 export default class QueryEditorUI extends Component<Props, State> {
  public state: State = {
- queryEnhancements: new Map(),
+ isDataSourcesVisible: true,
  isSuggestionsVisible: false,
  index: null,
  suggestions: [],
  indexPatterns: [],
  queryEditorRect: undefined,
  };
 
- public inputRef: HTMLTextAreaElement | null = null;
+ public inputRef: HTMLElement | null = null;
 
  private persistedLog: PersistedLog | undefined;
  private abortController?: AbortController;
@@ -169,16 +169,16 @@ export default class QueryEditorUI extends Component<Props, State> {
  language,
  };
 
- const fields = this.props.settings.getQueryEnhancements(newQuery.language)?.fields;
+ const enhancement = this.props.settings.getQueryEnhancements(newQuery.language);
+ const fields = enhancement?.fields;
  const newSettings: DataSettings = {
  userQueryLanguage: newQuery.language,
  userQueryString: newQuery.query,
  ...(fields && { uiOverrides: { fields } }),
  };
  this.props.settings?.updateSettings(newSettings);
 
- const dateRangeEnhancement = this.props.settings.getQueryEnhancements(language)?.searchBar
- ?.dateRange;
+ const dateRangeEnhancement = enhancement?.searchBar?.dateRange;
  const dateRange = dateRangeEnhancement
  ? {
  from: dateRangeEnhancement.initialFrom!,
@@ -187,6 +187,7 @@ export default class QueryEditorUI extends Component<Props, State> {
  : undefined;
  this.onChange(newQuery, dateRange);
  this.onSubmit(newQuery, dateRange);
+ this.setState({ isDataSourcesVisible: enhancement?.searchBar?.showDataSourceSelector ?? true });
  };
 
  private initPersistedLog = () => {
@@ -196,6 +197,15 @@ export default class QueryEditorUI extends Component<Props, State> {
  : getQueryLog(uiSettings, storage, appName, this.props.query.language);
  };
 
+ private initDataSourcesVisibility = () => {
+ if (this.componentIsUnmounting) return;
+
+ const isDataSourcesVisible =
+ this.props.settings.getQueryEnhancements(this.props.query.language)?.searchBar
+ ?.showDataSourceSelector ?? true;
+ this.setState({ isDataSourcesVisible });
+ };
+
  public onMouseEnterSuggestion = (index: number) => {
  this.setState({ index });
  };
@@ -210,6 +220,7 @@ export default class QueryEditorUI extends Component<Props, State> {
 
  this.initPersistedLog();
  // this.fetchIndexPatterns().then(this.updateSuggestions);
+ this.initDataSourcesVisibility();
  this.handleListUpdate();
 
  window.addEventListener('scroll', this.handleListUpdate, {
@@ -265,23 +276,21 @@ export default class QueryEditorUI extends Component<Props, State> {
  <div ref={this.props.queryEditorBannerRef} className={queryEditorBannerClassName} />
  <EuiFlexGroup gutterSize="xs" direction="column">
  <EuiFlexItem grow={false}>
- <EuiFlexGroup gutterSize="xs">
+ <EuiFlexGroup gutterSize="xs" alignItems="center" className={`${className}__wrapper`}>
  <EuiFlexItem grow={false}>{this.props.prepend}</EuiFlexItem>
- <EuiFlexItem>
- <EuiFlexGroup gutterSize="xs">
- <EuiFlexItem grow={false}>
- <div ref={this.props.containerRef} />
- </EuiFlexItem>
- <EuiFlexItem grow={true}>
- <QueryLanguageSelector
- language={this.props.query.language}
- anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
- onSelectLanguage={this.onSelectLanguage}
- appName={this.services.appName}
- />
- </EuiFlexItem>
- </EuiFlexGroup>
+ <EuiFlexItem grow={false} className={`${className}__languageWrapper`}>
+ <QueryLanguageSelector
+ language={this.props.query.language}
+ anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
+ onSelectLanguage={this.onSelectLanguage}
+ appName={this.services.appName}
+ />
  </EuiFlexItem>
+ {this.state.isDataSourcesVisible && (
+ <EuiFlexItem grow={false} className={`${className}__dataSourceWrapper`}>
+ <div ref={this.props.containerRef} />
+ </EuiFlexItem>
+ )}
  </EuiFlexGroup>
  </EuiFlexItem>
  <EuiFlexItem onClick={this.onClickInput} grow={true}>

src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx

@@ -245,6 +245,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
  onSubmit={onInputSubmit}
  getQueryStringInitialValue={getQueryStringInitialValue}
  persistedLog={persistedLog}
+ className="osdQueryEditor"
  dataTestSubj={props.dataTestSubj}
  queryEditorHeaderRef={queryEditorHeaderRef}
  queryEditorBannerRef={queryEditorBannerRef}

src/plugins/data/public/ui/types.ts

@@ -21,6 +21,7 @@ export interface QueryEnhancement {
  // Leave blank to support all data sources
  // supportedDataSourceTypes?: Record<string, GenericDataSource>;
  searchBar?: {
+ showDataSourceSelector?: boolean;
  showQueryInput?: boolean;
  showFilterBar?: boolean;
  showDatePicker?: boolean;

src/plugins/data/server/search/opensearch_search/get_default_search_params.test.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getDefaultSearchParams, getAsyncOptions } from './get_default_search_params';
+import { UI_SETTINGS } from '../../../common/constants';
+import { IUiSettingsClient } from 'src/core/server';
+
+import { coreMock } from '../../../../../../src/core/server/mocks';
+
+describe('getDefaultSearchParams', () => {
+ let uiSettings: IUiSettingsClient;
+
+ beforeEach(async () => {
+ const coreContext = coreMock.createRequestHandlerContext();
+ uiSettings = coreContext.uiSettings.client;
+ });
+
+ describe('getDefaultSearchParams', () => {
+ describe('maxConcurrentShardRequests', () => {
+ it('returns as undefined if less than 0', async () => {
+ uiSettings.get = jest.fn().mockReturnValue(-1);
+ const result = await getDefaultSearchParams(uiSettings);
+ expect(result.maxConcurrentShardRequests).toBeUndefined();
+ });
+
+ it('returns as value if greater than 0', async () => {
+ uiSettings.get = jest.fn().mockReturnValue(5);
+ const result = await getDefaultSearchParams(uiSettings);
+ expect(result.maxConcurrentShardRequests).toBe(5);
+ });
+ });
+
+ describe('ignoreThrottled', () => {
+ it('returns as true if false', async () => {
+ uiSettings.get = jest.fn().mockReturnValue(false);
+ const result = await getDefaultSearchParams(uiSettings);
+ expect(result.ignoreThrottled).toBe(true);
+ });
+
+ it('returns as false if true', async () => {
+ uiSettings.get = jest.fn().mockReturnValue(true);
+ const result = await getDefaultSearchParams(uiSettings);
+ expect(result.ignoreThrottled).toBe(false);
+ });
+ });
+
+ describe('dataFrameHydrationStrategy', () => {
+ it('returns correct value', async () => {
+ uiSettings.get = jest.fn().mockReturnValue('strategy');
+ const result = await getDefaultSearchParams(uiSettings);
+ expect(result.dataFrameHydrationStrategy).toBe('strategy');
+ });
+ });
+
+ it('returns correct search params', async () => {
+ uiSettings.get = jest.fn().mockImplementation((setting: string) => {
+ switch (setting) {
+ case UI_SETTINGS.SEARCH_INCLUDE_FROZEN:
+ return false;
+ case UI_SETTINGS.COURIER_MAX_CONCURRENT_SHARD_REQUESTS:
+ return 5;
+ case UI_SETTINGS.QUERY_DATAFRAME_HYDRATION_STRATEGY:
+ return 'strategy';
+ default:
+ return undefined;
+ }
+ });
+
+ const result = await getDefaultSearchParams(uiSettings);
+ expect(result).toEqual({
+ maxConcurrentShardRequests: 5,
+ ignoreThrottled: true,
+ dataFrameHydrationStrategy: 'strategy',
+ ignoreUnavailable: true,
+ trackTotalHits: true,
+ });
+ });
+ });
+
+ describe('getAsyncOptions', () => {
+ it('returns correct async options', () => {
+ expect(getAsyncOptions()).toEqual({
+ waitForCompletionTimeout: '100ms',
+ keepAlive: '1m',
+ });
+ });
+ });
+});

src/plugins/data/server/search/opensearch_search/get_default_search_params.ts

@@ -46,7 +46,7 @@ export async function getDefaultSearchParams(uiSettingsClient: IUiSettingsClient
  UI_SETTINGS.COURIER_MAX_CONCURRENT_SHARD_REQUESTS
  );
  const dataFrameHydrationStrategy = await uiSettingsClient.get<string>(
- UI_SETTINGS.DATAFRAME_HYDRATION_STRATEGY
+ UI_SETTINGS.QUERY_DATAFRAME_HYDRATION_STRATEGY
  );
  return {
  maxConcurrentShardRequests: