From f57e5852214a4b5ee76d4a0b17a7ac3f1c559e29 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Fri, 19 Jul 2024 23:07:24 +0000 Subject: [PATCH 1/6] UI changes Signed-off-by: abbyhu2000 --- changelogs/fragments/7309.yml | 2 + .../language_selector.test.tsx.snap | 1097 +++++++++++++++++ .../ui/query_editor/_language_selector.scss | 12 +- .../public/ui/query_editor/_query_editor.scss | 29 +- .../query_editor/language_selector.test.tsx | 18 +- .../ui/query_editor/language_selector.tsx | 78 +- .../public/ui/query_editor/query_editor.tsx | 257 +++- .../query_editor_btn_collapse.tsx | 37 + .../query_editor_extension.tsx | 1 - .../ui/query_editor/query_editor_top_row.tsx | 8 +- .../saved_query_management_component.tsx | 1 - .../public/search/ppl_search_interceptor.ts | 15 +- .../public/search/sql_search_interceptor.ts | 7 +- 13 files changed, 1474 insertions(+), 88 deletions(-) create mode 100644 changelogs/fragments/7309.yml create mode 100644 src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap create mode 100644 src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx diff --git a/changelogs/fragments/7309.yml b/changelogs/fragments/7309.yml new file mode 100644 index 000000000000..0925eb170794 --- /dev/null +++ b/changelogs/fragments/7309.yml @@ -0,0 +1,2 @@ +feat: +- Update query enhancement UI ([#7309](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7309)) \ No newline at end of file diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap new file mode 100644 index 000000000000..6d448383a9ce --- /dev/null +++ b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap @@ -0,0 +1,1097 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LanguageSelector should select DQL if language is kuery 1`] = ` + + + + DQL + + } + className="languageSelector" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+ + + +`; + +exports[`LanguageSelector should select lucene if language is lucene 1`] = ` + + + + Lucene + + } + className="languageSelector" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+ + + +`; diff --git a/src/plugins/data/public/ui/query_editor/_language_selector.scss b/src/plugins/data/public/ui/query_editor/_language_selector.scss index 2c44dc60ea23..cee787e29e28 100644 --- a/src/plugins/data/public/ui/query_editor/_language_selector.scss +++ b/src/plugins/data/public/ui/query_editor/_language_selector.scss @@ -2,7 +2,13 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ -.languageSelector { - min-width: 140px; - border-bottom: $euiBorderThin !important; +.osdQueryBar__languageSelector { + font-size: small; +} + +.osdQueryBar__languageSelectorFooter { + font-size: smaller; + padding-left: 0; + padding-top: 2px; + color: $ouiTextSubduedColor; } diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss index 80ddd42fede5..01777104e01f 100644 --- a/src/plugins/data/public/ui/query_editor/_query_editor.scss +++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss @@ -15,11 +15,33 @@ // overflow: auto; } +.osdQueryEditorFooterHide { + display: none; +} + +.osdQueryEditorFooter { + color: $ouiTextSubduedColor; // Apply the subdued color to all text in this class + height: 35px; + + * { + color: inherit; + font-size: medium; + align-items: center; + } + + #languageSelector { + height: 100%; + } +} + .osdQueryEditor__languageWrapper { - :first-child { - box-shadow: none !important; + align-items: center; + justify-content: center; + height: 40px; + border: $euiBorderThin; + + #languageSelector { height: 100%; - border-radius: 0; } } @@ -42,6 +64,7 @@ .osdQueryEditor__dataSetWrapper { .dataExplorerDSSelect { border-bottom: $euiBorderThin !important; + max-width: 375px; div:is([class$="--group"]) { padding: 0 !important; diff --git a/src/plugins/data/public/ui/query_editor/language_selector.test.tsx b/src/plugins/data/public/ui/query_editor/language_selector.test.tsx index 709678e29d66..f61134211a40 100644 --- a/src/plugins/data/public/ui/query_editor/language_selector.test.tsx +++ b/src/plugins/data/public/ui/query_editor/language_selector.test.tsx @@ -53,14 +53,7 @@ describe('LanguageSelector', () => { }, }) ); - const euiComboBox = component.find(EuiCompressedComboBox); - expect(euiComboBox.prop('selectedOptions')).toEqual( - expect.arrayContaining([ - { - label: 'Lucene', - }, - ]) - ); + expect(component).toMatchSnapshot(); }); it('should select DQL if language is kuery', () => { @@ -72,13 +65,6 @@ describe('LanguageSelector', () => { }, }) ); - const euiComboBox = component.find(EuiCompressedComboBox); - expect(euiComboBox.prop('selectedOptions')).toEqual( - expect.arrayContaining([ - { - label: 'DQL', - }, - ]) - ); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx index 0f35b84ff599..2ec71f6a37bf 100644 --- a/src/plugins/data/public/ui/query_editor/language_selector.tsx +++ b/src/plugins/data/public/ui/query_editor/language_selector.tsx @@ -4,19 +4,22 @@ */ import { - EuiCompressedComboBox, - EuiComboBoxOptionOption, PopoverAnchorPosition, + EuiContextMenuPanel, + EuiPopover, + EuiButtonEmpty, + EuiContextMenuItem, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; -import React from 'react'; +import React, { useState } from 'react'; import { getUiService } from '../../services'; -interface Props { +export interface QueryLanguageSelectorProps { language: string; onSelectLanguage: (newLanguage: string) => void; anchorPosition?: PopoverAnchorPosition; appName?: string; + isFooter?: boolean; } const mapExternalLanguageToOptions = (language: string) => { @@ -26,7 +29,13 @@ const mapExternalLanguageToOptions = (language: string) => { }; }; -export const QueryLanguageSelector = (props: Props) => { +export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => { + const [isPopoverOpen, setPopover] = useState(false); + + const onButtonClick = () => { + setPopover(!isPopoverOpen); + }; + const dqlLabel = i18n.translate('data.query.queryEditor.dqlLanguageName', { defaultMessage: 'DQL', }); @@ -34,7 +43,7 @@ export const QueryLanguageSelector = (props: Props) => { defaultMessage: 'Lucene', }); - const languageOptions: EuiComboBoxOptionOption[] = [ + const languageOptions = [ { label: dqlLabel, value: 'kuery', @@ -68,25 +77,52 @@ export const QueryLanguageSelector = (props: Props) => { )?.label as string) ?? languageOptions[0].label, }; - const handleLanguageChange = (newLanguage: EuiComboBoxOptionOption[]) => { - const queryLanguage = newLanguage[0].value as string; - props.onSelectLanguage(queryLanguage); - uiService.Settings.setUserQueryLanguage(queryLanguage); + const handleLanguageChange = (newLanguage: string) => { + props.onSelectLanguage(newLanguage); + uiService.Settings.setUserQueryLanguage(newLanguage); }; uiService.Settings.setUserQueryLanguage(props.language); + const languageOptionsMenu = languageOptions.map((language) => { + return ( + { + setPopover(false); + handleLanguageChange(language.value); + }} + > + {language.label} + + ); + }); return ( - + + {selectedLanguage.label} + + } + isOpen={isPopoverOpen} + closePopover={() => setPopover(false)} + panelPaddingSize="none" + anchorPosition="downLeft" + > + + ); }; + +// Needed for React.lazy +// eslint-disable-next-line import/no-default-export +export default QueryLanguageSelector; diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index 59d5645fcf6c..4907f66cd001 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -3,12 +3,27 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiFlexGroup, EuiFlexItem, htmlIdGenerator, PopoverAnchorPosition } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiForm, + EuiFormRow, + htmlIdGenerator, + PopoverAnchorPosition, +} from '@elastic/eui'; import classNames from 'classnames'; import { isEqual } from 'lodash'; import React, { Component, createRef, RefObject } from 'react'; +import { monaco } from '@osd/monaco'; import { Settings } from '..'; -import { DataSource, IDataPluginServices, IIndexPattern, Query, TimeRange } from '../..'; +import { + DataSource, + IDataPluginServices, + IFieldType, + IIndexPattern, + Query, + TimeRange, +} from '../..'; import { CodeEditor, OpenSearchDashboardsReactContextValue, @@ -20,13 +35,15 @@ import { DataSettings } from '../types'; import { fetchIndexPatterns } from './fetch_index_patterns'; import { QueryLanguageSelector } from './language_selector'; import { QueryEditorExtensions } from './query_editor_extensions'; - +import { QueryEditorBtnCollapse } from './query_editor_btn_collapse'; export interface QueryEditorProps { indexPatterns: Array; dataSource?: DataSource; query: Query; + container?: HTMLDivElement; dataSourceContainerRef?: React.RefCallback; containerRef?: React.RefCallback; + languageSelectorContainerRef?: React.RefCallback; settings: Settings; disableAutoFocus?: boolean; screenTitle?: string; @@ -47,6 +64,8 @@ export interface QueryEditorProps { queryLanguage?: string; headerClassName?: string; bannerClassName?: string; + footerClassName?: string; + filterBar?: any; } interface Props extends QueryEditorProps { @@ -60,6 +79,9 @@ interface State { index: number | null; suggestions: QuerySuggestion[]; indexPatterns: IIndexPattern[]; + isCollapsed: boolean; + timeStamp: IFieldType | null; + lineCount: number | undefined; } const KEY_CODES = { @@ -85,9 +107,12 @@ export default class QueryEditorUI extends Component { index: null, suggestions: [], indexPatterns: [], + isCollapsed: false, // default to expand mode + timeStamp: null, + lineCount: undefined, }; - public inputRef: HTMLElement | null = null; + public inputRef: monaco.editor.IStandaloneCodeEditor | null = null; private persistedLog: PersistedLog | undefined; private abortController?: AbortController; @@ -175,6 +200,12 @@ export default class QueryEditorUI extends Component { private onInputChange = (value: string) => { this.onQueryStringChange(value); + + if (!this.inputRef) return; + + const currentLineCount = this.inputRef.getModel()?.getLineCount(); + if (this.state.lineCount === currentLineCount) return; + this.setState({ lineCount: currentLineCount }); }; private onClickInput = (event: React.MouseEvent) => { @@ -282,10 +313,68 @@ export default class QueryEditorUI extends Component { } }; + editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => { + this.setState({ lineCount: editor.getModel()?.getLineCount() }); + this.inputRef = editor; + }; + + private onSingleLineInputChange = (value: string) => { + // Replace new lines with an empty string to prevent multi-line input + this.onQueryStringChange(value.replace(/[\r\n]+/gm, '')); + + this.setState({ lineCount: undefined }); + }; + + singleLineEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => { + // this.setState({ lineCount: editor.getModel()?.getLineCount() }); + this.inputRef = editor; + + const editorNode = editor.getDomNode(); + if (editorNode) { + const containerId = 'single-line-editor-wrapper'; + const style = document.createElement('style'); + const customCursorHeight = 20; + // eslint-disable-next-line no-unsanitized/property + style.innerHTML = ` + .${containerId} .monaco-editor .view-lines { + padding-left: 15px; + } + .${containerId} .monaco-editor .cursor { + height: ${customCursorHeight}px !important; + margin-top: ${(40 - customCursorHeight) / 2}px !important; + } + `; + + document.head.appendChild(style); + } + const handleEnterPress = () => { + this.onSubmit(this.props.query); + }; + + const disposable = editor.onKeyDown((e) => { + if (e.keyCode === monaco.KeyCode.Enter) { + // Prevent default Enter key behavior + e.preventDefault(); + handleEnterPress(); + } + }); + + // Optional: Cleanup on component unmount + return () => { + disposable.dispose(); + }; + }; + public render() { const className = classNames(this.props.className); const headerClassName = classNames('osdQueryEditorHeader', this.props.headerClassName); const bannerClassName = classNames('osdQueryEditorBanner', this.props.bannerClassName); + const footerClassName = classNames('osdQueryEditorFooter', this.props.footerClassName); + + const useQueryEditor = + this.props.query.language === 'SQLAsync' || + this.props.query.language === 'SQL' || + this.props.query.language === 'PPL'; return (
@@ -293,48 +382,150 @@ export default class QueryEditorUI extends Component { - {this.props.prepend} + + this.setState({ isCollapsed: !this.state.isCollapsed })} + isCollapsed={!this.state.isCollapsed} + /> + {this.state.isDataSourcesVisible && ( - +
)} - - - + {this.state.isDataSetsVisible && ( - +
)} + + + {(this.state.isCollapsed || !useQueryEditor) && ( + +
+ +
+ + )} + {!useQueryEditor && ( + +
+ +
+ + )} + + + + {this.props.prepend} + +
- + {!this.state.isCollapsed && useQueryEditor && ( + + )} + +
+ + + + + + + {this.state.lineCount} {this.state.lineCount === 1 ? 'line' : 'lines'} + + + {typeof this.props.indexPatterns[0] !== 'string' && + '@' + this.props.indexPatterns[0].timeFieldName} + + +
+ + {!this.state.isCollapsed && ( + {this.props.filterBar} + )} {this.renderQueryEditorExtensions()}
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx b/src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx new file mode 100644 index 000000000000..b61ed566b08a --- /dev/null +++ b/src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx @@ -0,0 +1,37 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Any modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +import React from 'react'; +import { i18n } from '@osd/i18n'; +import { EuiToolTip, EuiButtonIcon } from '@elastic/eui'; + +export interface Props { + onClick: () => void; + isCollapsed: boolean; +} + +export function QueryEditorBtnCollapse({ onClick, isCollapsed }: Props) { + const label = i18n.translate('queryEditor.collapse', { + defaultMessage: 'Toggle query editor', + }); + return ( + + + + ); +} diff --git a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx index f684aebea1d9..78b402df7c65 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx @@ -61,7 +61,6 @@ export interface QueryEditorExtensionConfig { */ getBanner?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; } - const QueryEditorExtensionPortal: React.FC<{ container: Element }> = (props) => { if (!props.children) return null; 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 e5b7529f414b..922ebf4bf8ae 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 @@ -235,6 +235,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { className="osdQueryEditor" dataTestSubj={props.dataTestSubj} queryLanguage={queryLanguage} + filterBar={props.filterBar} /> ); @@ -363,12 +364,13 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { direction="column" justifyContent="flexEnd" > + + {renderUpdateButton()} + {renderQueryEditor()} - - {props.filterBar} + {renderSharingMetaFields()} - {renderUpdateButton()} diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx index 77643ac6413d..4e4dd26cec47 100644 --- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx +++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx @@ -183,7 +183,6 @@ export function SavedQueryManagementComponent({ data-test-subj="saved-query-management-popover-button" > - ); diff --git a/src/plugins/query_enhancements/public/search/ppl_search_interceptor.ts b/src/plugins/query_enhancements/public/search/ppl_search_interceptor.ts index aac50de3bb98..bca9961fea3b 100644 --- a/src/plugins/query_enhancements/public/search/ppl_search_interceptor.ts +++ b/src/plugins/query_enhancements/public/search/ppl_search_interceptor.ts @@ -5,6 +5,7 @@ import { trimEnd } from 'lodash'; import { Observable, throwError } from 'rxjs'; +import { i18n } from '@osd/i18n'; import { concatMap } from 'rxjs/operators'; import { DataFrameAggConfig, @@ -147,7 +148,15 @@ export class PPLSearchInterceptor extends SearchInterceptor { const dataFrame = getRawDataFrame(searchRequest); if (!dataFrame) { - return throwError(this.handleSearchError('DataFrame is not defined', request, signal!)); + return throwError( + this.handleSearchError( + { + stack: 'DataFrame is not defined', + }, + request, + signal! + ) + ); } let queryString = dataFrame.meta?.queryConfig?.qs ?? getRawQueryString(searchRequest) ?? ''; @@ -171,6 +180,10 @@ export class PPLSearchInterceptor extends SearchInterceptor { return fetchDataFrame(dfContext, queryString, dataFrame).pipe( concatMap((response) => { const df = response.body; + if (df.error) { + const jsError = new Error(df.error.response); + return throwError(jsError); + } const timeField = getTimeField(df, aggConfig); if (timeField) { const timeFilter = getTimeFilter(timeField); diff --git a/src/plugins/query_enhancements/public/search/sql_search_interceptor.ts b/src/plugins/query_enhancements/public/search/sql_search_interceptor.ts index c4dd7409faf6..5a3b8278c65a 100644 --- a/src/plugins/query_enhancements/public/search/sql_search_interceptor.ts +++ b/src/plugins/query_enhancements/public/search/sql_search_interceptor.ts @@ -71,12 +71,7 @@ export class SQLSearchInterceptor extends SearchInterceptor { const df = response.body; if (df.error) { const jsError = new Error(df.error.response); - this.deps.toasts.addError(jsError, { - title: i18n.translate('queryEnhancements.sqlQueryError', { - defaultMessage: 'Could not complete the SQL query', - }), - toastMessage: df.error.msg, - }); + return throwError(jsError); } return fetchDataFrame(dfContext, queryString, df); }) From 0ce000990228c4eb16af7f388aaad8fb2f030905 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Fri, 19 Jul 2024 23:20:08 +0000 Subject: [PATCH 2/6] update snapshots Signed-off-by: abbyhu2000 --- .../__snapshots__/language_selector.test.tsx.snap | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap index 6d448383a9ce..aa6d70800b6b 100644 --- a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap +++ b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap @@ -494,16 +494,17 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = ` DQL } - className="languageSelector" closePopover={[Function]} display="inlineBlock" hasArrow={true} + id="languageSelector" isOpen={false} ownFocus={true} panelPaddingSize="none" >
} - className="languageSelector" closePopover={[Function]} display="inlineBlock" hasArrow={true} + id="languageSelector" isOpen={false} ownFocus={true} panelPaddingSize="none" >
Date: Fri, 19 Jul 2024 23:26:56 +0000 Subject: [PATCH 3/6] styling Signed-off-by: abbyhu2000 --- .../public/ui/query_editor/_language_selector.scss | 13 +++++-------- .../data/public/ui/query_editor/_query_editor.scss | 10 +--------- .../public/ui/query_editor/language_selector.tsx | 5 +---- 3 files changed, 7 insertions(+), 21 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/_language_selector.scss b/src/plugins/data/public/ui/query_editor/_language_selector.scss index cee787e29e28..ee1f8a3dc29c 100644 --- a/src/plugins/data/public/ui/query_editor/_language_selector.scss +++ b/src/plugins/data/public/ui/query_editor/_language_selector.scss @@ -2,13 +2,10 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ -.osdQueryBar__languageSelector { - font-size: small; -} +.languageSelector { + height: 100%; -.osdQueryBar__languageSelectorFooter { - font-size: smaller; - padding-left: 0; - padding-top: 2px; - color: $ouiTextSubduedColor; + * { + font-size: small; + } } diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss index 01777104e01f..c06dee6ae7dc 100644 --- a/src/plugins/data/public/ui/query_editor/_query_editor.scss +++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss @@ -20,7 +20,7 @@ } .osdQueryEditorFooter { - color: $ouiTextSubduedColor; // Apply the subdued color to all text in this class + color: $euiTextSubduedColor; // Apply the subdued color to all text in this class height: 35px; * { @@ -28,10 +28,6 @@ font-size: medium; align-items: center; } - - #languageSelector { - height: 100%; - } } .osdQueryEditor__languageWrapper { @@ -39,10 +35,6 @@ justify-content: center; height: 40px; border: $euiBorderThin; - - #languageSelector { - height: 100%; - } } .osdQueryEditor__dataSourceWrapper { diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx index 2ec71f6a37bf..56e50dc7d60d 100644 --- a/src/plugins/data/public/ui/query_editor/language_selector.tsx +++ b/src/plugins/data/public/ui/query_editor/language_selector.tsx @@ -100,14 +100,11 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => { }); return ( {selectedLanguage.label} From 8b7e6b00ac574d3e0b8bd34498c4c37de35674f8 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Fri, 19 Jul 2024 23:31:21 +0000 Subject: [PATCH 4/6] correct license Signed-off-by: abbyhu2000 --- .../public/ui/query_editor/query_editor_btn_collapse.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx b/src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx index b61ed566b08a..1bde59570fdd 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx @@ -1,12 +1,6 @@ /* + * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 - * - * The OpenSearch Contributors require contributions made to - * this file be licensed under the Apache-2.0 license or a - * compatible open source license. - * - * Any modifications Copyright OpenSearch Contributors. See - * GitHub history for details. */ import React from 'react'; From c35e8a9df63f204b0cc9643c08a4b03d4cadbe09 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Fri, 19 Jul 2024 23:43:04 +0000 Subject: [PATCH 5/6] more cleanup Signed-off-by: abbyhu2000 --- src/plugins/data/public/ui/query_editor/query_editor.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index 4907f66cd001..a94b4cd0defa 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -326,7 +326,6 @@ export default class QueryEditorUI extends Component { }; singleLineEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => { - // this.setState({ lineCount: editor.getModel()?.getLineCount() }); this.inputRef = editor; const editorNode = editor.getDomNode(); @@ -372,9 +371,7 @@ export default class QueryEditorUI extends Component { const footerClassName = classNames('osdQueryEditorFooter', this.props.footerClassName); const useQueryEditor = - this.props.query.language === 'SQLAsync' || - this.props.query.language === 'SQL' || - this.props.query.language === 'PPL'; + this.props.query.language !== 'kuery' && this.props.query.language !== 'lucene'; return (
@@ -516,8 +513,8 @@ export default class QueryEditorUI extends Component { {this.state.lineCount} {this.state.lineCount === 1 ? 'line' : 'lines'} - {typeof this.props.indexPatterns[0] !== 'string' && - '@' + this.props.indexPatterns[0].timeFieldName} + {typeof this.props.indexPatterns?.[0] !== 'string' && + '@' + this.props.indexPatterns?.[0].timeFieldName}
From 7981a2e9099dafa7c247c83655a3350fd3f0b9df Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Sat, 20 Jul 2024 02:07:00 +0000 Subject: [PATCH 6/6] more styling and update snapshots Signed-off-by: abbyhu2000 --- .../language_selector.test.tsx.snap | 28 +++++++++++-------- .../ui/query_editor/_language_selector.scss | 16 +++++++++++ .../public/ui/query_editor/_query_editor.scss | 26 ++++++++++++++--- .../ui/query_editor/language_selector.tsx | 13 +++++++-- .../public/ui/query_editor/query_editor.tsx | 22 +++++---------- .../ui/query_editor/query_editor_top_row.tsx | 17 +++++++---- 6 files changed, 83 insertions(+), 39 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap index aa6d70800b6b..031b12033176 100644 --- a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap +++ b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap @@ -487,36 +487,38 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = ` anchorPosition="downLeft" button={ DQL } + className="languageSelector" closePopover={[Function]} display="inlineBlock" hasArrow={true} - id="languageSelector" isOpen={false} ownFocus={true} panelPaddingSize="none" >