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 @@
  };
 };
 
-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 @@
  )?.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;