more styling and update snapshots

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

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

@@ -5,7 +5,23 @@
 .languageSelector {
   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,25 +15,29 @@
   // overflow: auto;
 }
 
-.osdQueryEditorFooterHide {
+.osdQueryEditorFooter-isHidden {
   display: none;
 }
 
 .osdQueryEditorFooter {
   color: $euiTextSubduedColor; // Apply the subdued color to all text in this class
-  height: 35px;
+  height: 25px;
 
   * {
     color: inherit;
-    font-size: medium;
+    font-size: $euiFontSizeXS;
     align-items: center;
   }
 }
 
+.osdQueryEditor__collapseWrapper {
+  box-shadow: $euiTextSubduedColor;
+}
+
 .osdQueryEditor__languageWrapper {
   align-items: center;
   justify-content: center;
-  height: 40px;
+  max-height: 40px;
   border: $euiBorderThin;
 }
 
@@ -68,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.tsx

@@ -33,7 +33,7 @@
   const [isPopoverOpen, setPopover] = useState(false);
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
   };
 
   const dqlLabel = i18n.translate('data.query.queryEditor.dqlLanguageName', {
@@ -78,8 +78,8 @@
   };
 
   const handleLanguageChange = (newLanguage: string) => {
     props.onSelectLanguage(newLanguage);
     uiService.Settings.setUserQueryLanguage(newLanguage);
   };
 
   uiService.Settings.setUserQueryLanguage(props.language);
@@ -88,10 +88,11 @@
     return (
       <EuiContextMenuItem
         key={language.label}
+        className="languageSelector__menuItem"
         icon={language.label === selectedLanguage.label ? 'check' : 'empty'}
         onClick={() => {
           setPopover(false);
           handleLanguageChange(language.value);
         }}
       >
         {language.label}
@@ -104,18 +105,26 @@
       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="downLeft"
+      anchorPosition={props.anchorPosition ?? 'downLeft'}
     >
-      <EuiContextMenuPanel size="s" items={languageOptionsMenu} />
+      <EuiContextMenuPanel
+        initialFocusedItemIndex={languageOptions.findIndex(
+          (option) => option.label === selectedLanguage.label
+        )}
+        size="s"
+        items={languageOptionsMenu}
+      />
     </EuiPopover>
   );
 };

src/plugins/data/public/ui/query_editor/query_editor.tsx

@@ -340,7 +340,7 @@ export default class QueryEditorUI extends Component<Props, State> {
       }
       .${containerId} .monaco-editor .cursor {
         height: ${customCursorHeight}px !important;
-        margin-top: ${(40 - customCursorHeight) / 2}px !important; 
+        margin-top: ${(38 - customCursorHeight) / 2}px !important; 
       }
     `;
 
@@ -379,12 +379,7 @@ export default class QueryEditorUI extends Component<Props, State> {
         <EuiFlexGroup gutterSize="xs" direction="column">
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="xs" alignItems="center" className={`${className}__wrapper`}>
-              <EuiFlexItem
-                grow={false}
-                style={{
-                  boxShadow: 'inset -1px 0 0 0 rgba(20, 67, 91, 0.1)',
-                }}
-              >
+              <EuiFlexItem grow={false} className={`${className}__collapseWrapper`}>
                 <QueryEditorBtnCollapse
                   onClick={() => this.setState({ isCollapsed: !this.state.isCollapsed })}
                   isCollapsed={!this.state.isCollapsed}
@@ -453,12 +448,9 @@ export default class QueryEditorUI extends Component<Props, State> {
               </EuiFlexItem>
               <EuiFlexItem
                 grow={false}
-                style={{
-                  boxShadow:
-                    !this.state.isCollapsed && useQueryEditor
-                      ? 'inset 1px 0 0 0 rgba(20, 67, 91, 0.1)'
-                      : 'none',
-                }}
+                className={`${className}__prependWrapper${
+                  !this.state.isCollapsed && useQueryEditor ? '' : '-isCollapsed'
+                }`}
               >
                 {this.props.prepend}
               </EuiFlexItem>
@@ -495,10 +487,10 @@ export default class QueryEditorUI extends Component<Props, State> {
               className={
                 !this.state.isCollapsed && useQueryEditor
                   ? footerClassName
-                  : 'osdQueryEditorFooterHide'
+                  : 'osdQueryEditorFooter-isHidden'
               }
             >
-              <EuiFlexGroup gutterSize="m" responsive={false}>
+              <EuiFlexGroup gutterSize="s" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <QueryLanguageSelector
                     language={this.props.query.language}

src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx

@@ -4,11 +4,11 @@
  */
 import dateMath from '@elastic/datemath';
 import {
+  EuiButton,
   EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSuperDatePicker,
-  EuiSuperUpdateButton,
   OnRefreshProps,
   prettyDuration,
 } from '@elastic/eui';
@@ -28,7 +28,7 @@ import {
   withOpenSearchDashboards,
 } from '../../../../opensearch_dashboards_react/public';
 import { UI_SETTINGS } from '../../../common';
-import { fromUser, getQueryLog, PersistedLog } from '../../query';
+import { getQueryLog, PersistedLog } from '../../query';
 import { Settings } from '../types';
 import { NoDataPopover } from './no_data_popover';
 import QueryEditorUI from './query_editor';
@@ -276,13 +276,16 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     const button = props.customSubmitButton ? (
       React.cloneElement(props.customSubmitButton, { onClick: onClickSubmitButton })
     ) : (
-      <EuiSuperUpdateButton
-        needsUpdate={props.isDirty}
+      <EuiButton
         isDisabled={isDateRangeInvalid}
         isLoading={props.isLoading}
         onClick={onClickSubmitButton}
         data-test-subj="querySubmitButton"
-      />
+        className="euiSuperUpdateButton"
+        iconType="play"
+      >
+        {props.isDirty ? 'Refresh' : 'Run'}
+      </EuiButton>
     );
 
     if (!shouldRenderDatePicker()) {
@@ -365,7 +368,9 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
       justifyContent="flexEnd"
     >
       <EuiFlexGroup justifyContent="flexEnd" gutterSize="none" responsive={false}>
-        <EuiFlexItem grow={false}>{renderUpdateButton()}</EuiFlexItem>
+        <EuiFlexItem grow={false} className="osdQueryEditor--updateButtonWrapper">
+          {renderUpdateButton()}
+        </EuiFlexItem>
       </EuiFlexGroup>
       {renderQueryEditor()}
       <EuiFlexItem>