combine language selector using single component

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
abbyhu2000 · Jul 19, 2024 · a18fb26 · a18fb26
1 parent a849448
commit a18fb26
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 185 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
@@ -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
@@ -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<HTMLDivElement>;
-  noArrow?: boolean;
+  isFooter?: boolean;
 }
 
 const mapExternalLanguageToOptions = (language: string) => {
@@ -38,19 +36,14 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
     setPopover(!isPopoverOpen);
   };
 
-  const closePopover = () => {
-    setPopover(false);
-  };
-
-  const ref = React.createRef<HTMLDivElement>();
   const dqlLabel = i18n.translate('data.query.queryEditor.dqlLanguageName', {
     defaultMessage: 'DQL',
   });
   const luceneLabel = i18n.translate('data.query.queryEditor.luceneLanguageName', {
     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 = (
-    <EuiButtonEmpty
-      iconSide="right"
-      onClick={onButtonClick}
-      style={{
-        fontSize: 'small',
-        height: '20px',
-      }}
-    >
-      {selectedLanguage.label}
-    </EuiButtonEmpty>
-  );
-  const getIconType = (language: string) => {
-    return language === selectedLanguage.label ? 'check' : 'empty';
-  };
-
   const languageOptionsMenu = languageOptions.map((language) => {
     return (
       <EuiContextMenuItem
         key={language.label}
-        icon={getIconType(language.label)}
+        icon={language.label === selectedLanguage.label ? 'check' : 'empty'}
         onClick={() => {
-          closePopover();
+          setPopover(false);
           handleLanguageChange(language.value);
         }}
       >
@@ -123,9 +99,20 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
   return (
     <EuiPopover
       id="languageSelector"
-      button={button}
+      button={
+        <EuiButtonEmpty
+          iconSide="right"
+          onClick={onButtonClick}
+          className={
+            props.isFooter ? 'osdQueryBar__languageSelectorFooter' : 'osdQueryBar__languageSelector'
+          }
+          iconType={props.isFooter ? 'arrowDown' : undefined}
+        >
+          {selectedLanguage.label}
+        </EuiButtonEmpty>
+      }
       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
diff --git 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<IIndexPattern | string>;
   dataSource?: DataSource;
@@ -540,11 +538,12 @@ export default class QueryEditorUI extends Component<Props, State> {
                         alignItems: 'center',
                       }}
                     >
-                      <QueryLanguageSelectorFooter
+                      <QueryLanguageSelector
                         language={this.props.query.language}
                         anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
                         onSelectLanguage={this.onSelectLanguage}
                         appName={this.services.appName}
+                        isFooter={true}
                       />
                     </EuiFlexItem>