Skip to content

Commit

Permalink
[Discover-Next] conditionally render selector (#7059) (#7089)
Browse files Browse the repository at this point in the history
When selecting a specific language, the data source selector disappears and relies completely on the
query editor when enhancements are enabled.

If toggled on and then off, everything is working properly.

#7046



---------



(cherry picked from commit 7f0e9d0)

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
  • Loading branch information
3 people committed Jul 1, 2024
1 parent 4f30080 commit 353f509
Show file tree
Hide file tree
Showing 14 changed files with 157 additions and 35 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/7059.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
feat:
- Render the datasource selector component conditionally ([#7059](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7059))
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/data/common/data_frames/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,6 @@ export interface IDataFrameResponse extends SearchResponse<any> {
took: number;
}

export interface IDataFrameError {
export interface IDataFrameError extends IDataFrameResponse {
error: Error;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand All @@ -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}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 2 additions & 8 deletions src/plugins/data/public/ui/query_editor/_language_selector.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
22 changes: 22 additions & 0 deletions src/plugins/data/public/ui/query_editor/_query_editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export const QueryLanguageSelector = (props: Props) => {

return (
<EuiComboBox
fullWidth
className="languageSelector"
data-test-subj="languageSelector"
options={languageOptions}
Expand Down
53 changes: 31 additions & 22 deletions src/plugins/data/public/ui/query_editor/query_editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -52,7 +52,7 @@ interface Props extends QueryEditorProps {
}

interface State {
queryEnhancements: Map<string, QueryEnhancement>;
isDataSourcesVisible: boolean;
isSuggestionsVisible: boolean;
index: number | null;
suggestions: QuerySuggestion[];
Expand All @@ -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;
Expand Down Expand Up @@ -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!,
Expand All @@ -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 = () => {
Expand All @@ -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 });
};
Expand All @@ -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, {
Expand Down Expand Up @@ -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}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/plugins/data/public/ui/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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',
});
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit 353f509

Please sign in to comment.