New Query Enhancement UI

changelogs/fragments/7309.yml

@@ -0,0 +1,2 @@
+feat:
+- Update query enhancement UI ([#7309](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7309))

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

@@ -3,6 +3,25 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 .languageSelector {
-  min-width: 140px;
-  border-bottom: $euiBorderThin !important;
+  height: 100%;
+
+  .languageSelector__button {
+    &:hover {
+      text-decoration: none; // Prevents text underline on hover
+    }
+  }
+
+  * {
+    font-size: small;
+  }
+}
+
+.languageSelector__menuItem {
+  padding-left: 2px;
+  padding-right: 2px;
+  align-items: center;
+
+  &:hover {
+    text-decoration: none; // Prevents text underline on hover
+  }
 }

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

@@ -15,14 +15,32 @@
   // overflow: auto;
 }
 
-.osdQueryEditor__languageWrapper {
-  :first-child {
-    box-shadow: none !important;
-    height: 100%;
-    border-radius: 0;
+.osdQueryEditorFooter-isHidden {
+  display: none;
+}
+
+.osdQueryEditorFooter {
+  color: $euiTextSubduedColor; // Apply the subdued color to all text in this class
+  height: 25px;
+
+  * {
+    color: inherit;
+    font-size: $euiFontSizeXS;
+    align-items: center;
   }
 }
 
+.osdQueryEditor__collapseWrapper {
+  box-shadow: $euiTextSubduedColor;
+}
+
+.osdQueryEditor__languageWrapper {
+  align-items: center;
+  justify-content: center;
+  max-height: 40px;
+  border: $euiBorderThin;
+}
+
 .osdQueryEditor__dataSourceWrapper {
   .dataSourceSelect {
     border-bottom: $euiBorderThin !important;
@@ -42,6 +60,7 @@
 .osdQueryEditor__dataSetWrapper {
   .dataExplorerDSSelect {
     border-bottom: $euiBorderThin !important;
+    max-width: 375px;
 
     div:is([class$="--group"]) {
       padding: 0 !important;
@@ -53,6 +72,20 @@
   }
 }
 
+.osdQueryEditor__prependWrapper {
+  box-shadow: $euiTextSubduedColor;
+}
+
+.osdQueryEditor__prependWrapper-isCollapsed {
+  box-shadow: none;
+}
+
+.osdQueryEditor--updateButtonWrapper {
+  :first-child {
+    min-width: 0 !important;
+  }
+}
+
 @include euiBreakpoint("xs", "s") {
   .osdQueryEditor--withDatePicker {
     > :first-child {

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();
   });
 });

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,15 +29,21 @@ 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',
   });
   const luceneLabel = i18n.translate('data.query.queryEditor.luceneLanguageName', {
     defaultMessage: 'Lucene',
   });
 
-  const languageOptions: EuiComboBoxOptionOption[] = [
+  const languageOptions = [
     {
       label: dqlLabel,
       value: 'kuery',
@@ -68,25 +77,58 @@ 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 (
+      <EuiContextMenuItem
+        key={language.label}
+        className="languageSelector__menuItem"
+        icon={language.label === selectedLanguage.label ? 'check' : 'empty'}
+        onClick={() => {
+          setPopover(false);
+          handleLanguageChange(language.value);
+        }}
+      >
+        {language.label}
+      </EuiContextMenuItem>
+    );
+  });
   return (
-    <EuiCompressedComboBox
-      fullWidth
+    <EuiPopover
       className="languageSelector"
-      data-test-subj="languageSelector"
-      options={languageOptions}
-      selectedOptions={[selectedLanguage]}
-      onChange={handleLanguageChange}
-      singleSelection={{ asPlainText: true }}
-      isClearable={false}
-      async
-    />
+      button={
+        <EuiButtonEmpty
+          iconSide="right"
+          iconSize="s"
+          onClick={onButtonClick}
+          className="languageSelector__button"
+          iconType={props.isFooter ? 'arrowDown' : undefined}
+        >
+          {selectedLanguage.label}
+        </EuiButtonEmpty>
+      }
+      isOpen={isPopoverOpen}
+      closePopover={() => setPopover(false)}
+      panelPaddingSize="none"
+      anchorPosition={props.anchorPosition ?? 'downLeft'}
+    >
+      <EuiContextMenuPanel
+        initialFocusedItemIndex={languageOptions.findIndex(
+          (option) => option.label === selectedLanguage.label
+        )}
+        size="s"
+        items={languageOptionsMenu}
+      />
+    </EuiPopover>
   );
 };
+
+// Needed for React.lazy
+// eslint-disable-next-line import/no-default-export
+export default QueryLanguageSelector;