From a18fb265303c9cd80ea5d53c3ff3b5d62660bcd4 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Fri, 19 Jul 2024 09:28:44 +0000 Subject: [PATCH] combine language selector using single component Signed-off-by: abbyhu2000 --- .../ui/query_editor/_language_selector.scss | 15 +- .../ui/query_editor/language_selector.tsx | 49 +++--- .../language_selector_footer_popover.tsx | 144 ------------------ .../public/ui/query_editor/query_editor.tsx | 9 +- 4 files changed, 32 insertions(+), 185 deletions(-) delete mode 100644 src/plugins/data/public/ui/query_editor/language_selector_footer_popover.tsx 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 0f7721188e72..f7787be697df 100644 --- a/src/plugins/data/public/ui/query_editor/_language_selector.scss +++ b/src/plugins/data/public/ui/query_editor/_language_selector.scss @@ -2,10 +2,15 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ -.languageSelector { - min-width: 50px; - border-bottom: $euiBorderThin !important; - height: 25px; - display: flex; +.osdQueryBar__languageSelector { + font-size: small; + height: 20px; +} + +.osdQueryBar__languageSelectorFooter { + font-size: smaller; color: grey; + height: 9px; + padding-left: 0; + padding-top: 2px; } 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 237dcf604402..fc78b24ed041 100644 --- a/src/plugins/data/public/ui/query_editor/language_selector.tsx +++ b/src/plugins/data/public/ui/query_editor/language_selector.tsx @@ -4,7 +4,6 @@ */ import { - EuiComboBoxOptionOption, PopoverAnchorPosition, EuiContextMenuPanel, EuiPopover, @@ -20,8 +19,7 @@ export interface QueryLanguageSelectorProps { onSelectLanguage: (newLanguage: string) => void; anchorPosition?: PopoverAnchorPosition; appName?: string; - languageSelectorContainerRef?: React.RefCallback; - noArrow?: boolean; + isFooter?: boolean; } const mapExternalLanguageToOptions = (language: string) => { @@ -38,11 +36,6 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => { setPopover(!isPopoverOpen); }; - const closePopover = () => { - setPopover(false); - }; - - const ref = React.createRef(); const dqlLabel = i18n.translate('data.query.queryEditor.dqlLanguageName', { defaultMessage: 'DQL', }); @@ -50,7 +43,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => { defaultMessage: 'Lucene', }); - const languageOptions: EuiComboBoxOptionOption[] = [ + const languageOptions = [ { label: dqlLabel, value: 'kuery', @@ -84,35 +77,18 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => { )?.label as string) ?? languageOptions[0].label, }; - const handleLanguageChange = (newLanguage: any) => { + const handleLanguageChange = (newLanguage: string) => { props.onSelectLanguage(newLanguage); uiService.Settings.setUserQueryLanguage(newLanguage); }; - // language selector at the footer of the query bar - const button = ( - - {selectedLanguage.label} - - ); - const getIconType = (language: string) => { - return language === selectedLanguage.label ? 'check' : 'empty'; - }; - const languageOptionsMenu = languageOptions.map((language) => { return ( { - closePopover(); + setPopover(false); handleLanguageChange(language.value); }} > @@ -123,9 +99,20 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => { return ( + {selectedLanguage.label} + + } isOpen={isPopoverOpen} - closePopover={closePopover} + closePopover={() => setPopover(false)} panelPaddingSize="none" anchorPosition="downLeft" > diff --git a/src/plugins/data/public/ui/query_editor/language_selector_footer_popover.tsx b/src/plugins/data/public/ui/query_editor/language_selector_footer_popover.tsx deleted file mode 100644 index c7820158071b..000000000000 --- a/src/plugins/data/public/ui/query_editor/language_selector_footer_popover.tsx +++ /dev/null @@ -1,144 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { - EuiComboBoxOptionOption, - PopoverAnchorPosition, - EuiContextMenuPanel, - EuiPopover, - EuiButtonEmpty, - EuiContextMenuItem, -} from '@elastic/eui'; -import { i18n } from '@osd/i18n'; -import React, { useState } from 'react'; -import { getUiService } from '../../services'; - -export interface QueryLanguageSelectorFooterProps { - language: string; - onSelectLanguage: (newLanguage: string) => void; - anchorPosition?: PopoverAnchorPosition; - appName?: string; - languageSelectorContainerRef?: React.RefCallback; - noArrow?: boolean; -} - -const mapExternalLanguageToOptions = (language: string) => { - return { - label: language, - value: language, - }; -}; - -export const QueryLanguageSelectorFooter = (props: QueryLanguageSelectorFooterProps) => { - const [isPopoverOpen, setPopover] = useState(false); - - const onButtonClick = () => { - setPopover(!isPopoverOpen); - }; - - const closePopover = () => { - setPopover(false); - }; - - const ref = React.createRef(); - const dqlLabel = i18n.translate('data.query.queryEditor.dqlLanguageName', { - defaultMessage: 'DQL', - }); - const luceneLabel = i18n.translate('data.query.queryEditor.luceneLanguageName', { - defaultMessage: 'Lucene', - }); - - const languageOptions: EuiComboBoxOptionOption[] = [ - { - label: dqlLabel, - value: 'kuery', - }, - { - label: luceneLabel, - value: 'lucene', - }, - ]; - - const uiService = getUiService(); - - const queryEnhancements = uiService.Settings.getAllQueryEnhancements(); - queryEnhancements.forEach((enhancement) => { - if ( - (enhancement.supportedAppNames && - props.appName && - !enhancement.supportedAppNames.includes(props.appName)) || - uiService.Settings.getUserQueryLanguageBlocklist().includes( - enhancement.language.toLowerCase() - ) - ) - return; - languageOptions.unshift(mapExternalLanguageToOptions(enhancement.language)); - }); - - const selectedLanguage = { - label: - (languageOptions.find( - (option) => (option.value as string).toLowerCase() === props.language.toLowerCase() - )?.label as string) ?? languageOptions[0].label, - }; - - const handleLanguageChange = (newLanguage: any) => { - props.onSelectLanguage(newLanguage); - uiService.Settings.setUserQueryLanguage(newLanguage); - }; - - // language selector at the footer of the query bar - const button = ( - - {props.language} - - ); - const getIconType = (language: string) => { - return language === props.language ? 'check' : 'empty'; - }; - - const languageOptionsMenu = languageOptions.map((language) => { - return ( - { - closePopover(); - handleLanguageChange(language.value); - }} - > - {language.label} - - ); - }); - return ( - - - - ); -}; - -// Needed for React.lazy -// eslint-disable-next-line import/no-default-export -export default QueryLanguageSelectorFooter; 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 b3d9fc66ae14..a561665ab61b 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -8,13 +8,12 @@ import { EuiFlexItem, EuiForm, EuiFormRow, - EuiSpacer, htmlIdGenerator, PopoverAnchorPosition, } from '@elastic/eui'; import classNames from 'classnames'; -import { debounce, isEqual } from 'lodash'; -import React, { Component, createRef, RefObject, useRef } from 'react'; +import { isEqual } from 'lodash'; +import React, { Component, createRef, RefObject } from 'react'; import { monaco } from '@osd/monaco'; import { Settings } from '..'; import { @@ -37,7 +36,6 @@ import { fetchIndexPatterns } from './fetch_index_patterns'; import { QueryLanguageSelector } from './language_selector'; import { QueryEditorExtensions } from './query_editor_extensions'; import { QueryEditorBtnCollapse } from './query_editor_btn_collapse'; -import QueryLanguageSelectorFooter from './language_selector_footer_popover'; export interface QueryEditorProps { indexPatterns: Array; dataSource?: DataSource; @@ -540,11 +538,12 @@ export default class QueryEditorUI extends Component { alignItems: 'center', }} > -