[ES|QL] Theme updates for text based languages editor

packages/kbn-monaco/src/esql/lib/esql_theme.ts

@@ -12,15 +12,6 @@ import { ESQL_TOKEN_POSTFIX } from './constants';
 import { monaco } from '../../monaco_imports';
 
 const buildRuleGroup = themeRuleGroupBuilderFactory(ESQL_TOKEN_POSTFIX);
-const COMMANDS_COLORS = {
-  dark: '#a68ac5',
-  light: '#765b96',
-};
-
-const FUNCTIONS_COLORS = {
-  dark: '#d97797',
-  light: '#a34a68',
-};
 
 export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
   base: darkMode ? 'vs-dark' : 'vs',
@@ -55,10 +46,16 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
       euiThemeVars.euiTextColor
     ),
 
+    // source commands
+    ...buildRuleGroup(
+      ['from', 'row', 'show', 'meta'],
+      euiThemeVars.euiColorPrimaryText,
+      true // isBold
+    ),
+
     // commands
     ...buildRuleGroup(
       [
-        'from',
         'metrics',
         'metadata',
         'mv_expand',
@@ -80,27 +77,44 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
         'in',
         'as',
         'expr_ws',
-        'row',
-        'show',
-        'meta',
         'limit',
         'nulls_ordering_direction',
         'nulls_ordering',
         'null',
         'enrich',
         'on',
         'with',
+        'asc',
+        'desc',
       ],
-      darkMode ? COMMANDS_COLORS.dark : COMMANDS_COLORS.light
+      euiThemeVars.euiColorAccentText,
+      true // isBold
     ),
 
     // functions
-    ...buildRuleGroup(['functions'], darkMode ? FUNCTIONS_COLORS.dark : FUNCTIONS_COLORS.light),
+    ...buildRuleGroup(['functions'], euiThemeVars.euiColorPrimaryText),
 
     // operators
     ...buildRuleGroup(
-      ['or', 'and', 'rp', 'lp', 'plus', 'minus', 'asterisk', 'slash'],
-      euiThemeVars.euiTextSubduedColor
+      [
+        'or',
+        'and',
+        'rp', // ')'
+        'lp', // '('
+        'eq', // '=='
+        'cieq', // '=~'
+        'neq', // '!='
+        'lt', //  '<'
+        'lte', // '<='
+        'gt', //  '>'
+        'gte', // '>='
+        'plus', // '+'
+        'minus', // '-'
+        'asterisk', // '*'
+        'slash', // '/'
+        'percent', // '%'
+      ],
+      euiThemeVars.euiColorPrimaryText
     ),
 
     // comments
@@ -113,8 +127,26 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
         'src_line_comment',
         'src_multiline_comment',
       ],
-      darkMode ? euiThemeVars.euiColorDarkestShade : euiThemeVars.euiColorMediumShade
+      euiThemeVars.euiColorDisabledText
+    ),
+
+    // values
+    ...buildRuleGroup(
+      ['quoted_string', 'integer_literal', 'decimal_literal'],
+      euiThemeVars.euiColorSuccessText
     ),
   ],
-  colors: {},
+  colors: {
+    'editor.foreground': euiThemeVars.euiTextColor,
+    'editor.background': euiThemeVars.euiColorEmptyShade,
+    'editor.lineHighlightBackground': euiThemeVars.euiColorLightestShade,
+    'editor.lineHighlightBorder': euiThemeVars.euiColorLightestShade,
+    'editor.selectionHighlightBackground': euiThemeVars.euiColorLightestShade,
+    'editor.selectionHighlightBorder': euiThemeVars.euiColorLightShade,
+    'editorSuggestWidget.background': euiThemeVars.euiColorEmptyShade,
+    'editorSuggestWidget.border': euiThemeVars.euiColorEmptyShade,
+    'editorSuggestWidget.foreground': euiThemeVars.euiTextSubduedColor,
+    'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorPrimary,
+    'editorSuggestWidget.selectedForeground': euiThemeVars.euiColorEmptyShade,
+  },
 });

packages/kbn-text-based-editor/src/editor_footer.tsx

@@ -145,7 +145,6 @@ export const EditorFooter = memo(function EditorFooter({
   queryHasChanged,
   measuredContainerWidth,
 }: EditorFooterProps) {
-  const { euiTheme } = useEuiTheme();
   const [isErrorPopoverOpen, setIsErrorPopoverOpen] = useState(false);
   const [isWarningPopoverOpen, setIsWarningPopoverOpen] = useState(false);
   const onUpdateAndSubmit = useCallback(
@@ -162,18 +161,13 @@ export const EditorFooter = memo(function EditorFooter({
     [runQuery, updateQuery]
   );
 
-  const shadowStyle = isInCompactMode
-    ? `inset 0 0px 0, inset 0 -1px 0 ${euiTheme.border.color}`
-    : 'none';
-
   return (
     <EuiFlexGroup
       gutterSize="none"
       responsive={false}
       direction="column"
       css={css`
         width: 100%;
-        box-shadow: ${shadowStyle};
       `}
     >
       <EuiFlexItem grow={false}>

packages/kbn-text-based-editor/src/overwrite.scss

@@ -1,45 +1,58 @@
-.TextBasedLangEditor .monaco-editor {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
+/* Editor styles for any layout mode */
+/* NOTE: Much of this is overriding Monaco styles so the specificity is intentional */
+
+// Radius for both the main container and the margin (container for line numbers)
+.TextBasedLangEditor .monaco-editor, .TextBasedLangEditor .monaco-editor .margin, .TextBasedLangEditor .monaco-editor .overflow-guard {
+  border-top-left-radius: $euiBorderRadius;
+  border-bottom-left-radius: $euiBorderRadius;
 }
 
 .TextBasedLangEditor .monaco-editor .monaco-hover {
   display: none !important;
 }
 
-.TextBasedLangEditor--expanded .monaco-editor .monaco-hover {
-  display: block !important;
+.TextBasedLangEditor .monaco-editor .margin-view-overlays .line-numbers {
+  color: $euiColorDisabledText;
 }
 
-.TextBasedLangEditor .monaco-editor .margin {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
+// Currently focused line(s)
+.TextBasedLangEditor .monaco-editor .current-line ~ .line-numbers {
+  color: $euiTextSubduedColor;
 }
 
-.TextBasedLangEditor--compact .monaco-editor {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+// Suggest (autocomplete) menu
+.TextBasedLangEditor .monaco-editor .suggest-widget {
+  @include euiBottomShadow;
+  border-radius: $euiBorderRadius;
 }
 
-.TextBasedLangEditor--compact .monaco-editor .margin {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  background-color: $euiColorLightestShade;
-  color: $euiColorDisabledText;
+.TextBasedLangEditor_errorMessage {
+  @include euiTextBreakWord;
 }
 
-.TextBasedLangEditor .monaco-editor .margin-view-overlays .line-numbers {
-  color: $euiColorDisabledText;
-}
+/* For compact mode */
 
-.TextBasedLangEditor .monaco-editor .current-line ~ .line-numbers {
-  color: $euiTextSubduedColor;
+// All scrollable containers (e.g. main container and suggest menu)
+.TextBasedLangEditor--compact .monaco-editor .monaco-scrollable-element {
+  margin-left: $euiSizeS;
 }
 
-.TextBasedLangEditor--compact .monaco-editor .monaco-scrollable-element {
-  margin-left: 4px;
+// Suggest menu in compact mode
+.TextBasedLangEditor--compact .monaco-editor .monaco-list .monaco-scrollable-element {
+  margin-left: 0;
+
+  .monaco-list-row.focused {
+    border-radius: $euiBorderRadius;
+  }
 }
 
-.TextBasedLangEditor_errorMessage {
-  @include euiTextBreakWord;
+/*  For expanded mode */
+
+.TextBasedLangEditor--expanded .monaco-editor .monaco-hover {
+  display: block !important;
 }
+
+.TextBasedLangEditor--expanded .monaco-editor, .TextBasedLangEditor--expanded .monaco-editor .margin, .TextBasedLangEditor--expanded .monaco-editor .overflow-guard {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

packages/kbn-text-based-editor/src/query_history.tsx

@@ -364,6 +364,8 @@ export function QueryHistory({
     .euiTable th[data-test-subj='tableHeaderCell_duration_3'] span {
       justify-content: flex-end;
     }
+    border-bottom-left-radius: ${euiTheme.border.radius.medium};
+    border-top-left-radius: ${euiTheme.border.radius.medium};
     max-height: ${isInCompactMode ? CONTAINER_MAX_HEIGHT_COMPACT : CONTAINER_MAX_HEIGHT_EXPANDED}px;
     overflow-y: auto;
     ${scrollBarStyles}

packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts

@@ -102,7 +102,7 @@ export const textBasedLanguageEditorStyles = (
     },
     historyContainer: {
       border: euiTheme.border.thin,
-      borderTop: `2px solid ${euiTheme.colors.lightShade}`,
+      borderTop: 'none',
       borderLeft: editorIsInline ? 'none' : euiTheme.border.thin,
       borderRight: editorIsInline ? 'none' : euiTheme.border.thin,
       backgroundColor: euiTheme.colors.lightestShade,
@@ -119,8 +119,8 @@ export const textBasedLanguageEditorStyles = (
       borderTopLeftRadius: editorIsInline ? 0 : euiTheme.border.radius.medium,
       borderTopRightRadius: editorIsInline ? 0 : euiTheme.border.radius.medium,
       backgroundColor: euiTheme.colors.lightestShade,
-      paddingLeft: euiTheme.size.xs,
-      paddingRight: euiTheme.size.xs,
+      paddingLeft: euiTheme.size.s,
+      paddingRight: euiTheme.size.s,
       paddingTop: showHeader ? euiTheme.size.s : euiTheme.size.xs,
       paddingBottom: showHeader ? euiTheme.size.s : euiTheme.size.xs,
       width: '100%',

packages/kbn-text-based-editor/src/text_based_languages_editor.tsx

@@ -667,41 +667,45 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   }, [language, documentationSections]);
 
   const codeEditorOptions: CodeEditorProps['options'] = {
-    automaticLayout: true,
     accessibilitySupport: 'off',
+    autoIndent: 'none',
+    automaticLayout: true,
+    fixedOverflowWidgets: true,
     folding: false,
     fontSize: 14,
-    padding: {
-      top: 8,
-      bottom: 8,
-    },
-    scrollBeyondLastLine: false,
-    quickSuggestions: true,
-    minimap: { enabled: false },
-    wordWrap: 'on',
-    lineNumbers: showLineNumbers ? 'on' : 'off',
-    theme: language === 'esql' ? ESQL_THEME_ID : isDark ? 'vs-dark' : 'vs',
-    lineDecorationsWidth: 12,
-    autoIndent: 'none',
-    wrappingIndent: 'none',
-    lineNumbersMinChars: 3,
-    overviewRulerLanes: 0,
+    fontFamily: 'Inter',
     hideCursorInOverviewRuler: true,
-    scrollbar: {
-      horizontal: 'hidden',
-      vertical: 'auto',
-    },
-    overviewRulerBorder: false,
     // this becomes confusing with multiple markers, so quick fixes
     // will be proposed only within the tooltip
     lightbulb: {
       enabled: false,
     },
-    fixedOverflowWidgets: true,
+    lineDecorationsWidth: 12,
+    lineHeight: !isCodeEditorExpanded ? 21 : 24,
+    lineNumbers: showLineNumbers ? 'on' : 'off',
+    lineNumbersMinChars: 3,
+    minimap: { enabled: false },
+    overviewRulerLanes: 0,
+    overviewRulerBorder: false,
+    padding: {
+      top: 8,
+      bottom: 8,
+    },
+    quickSuggestions: true,
     readOnly:
       isLoading ||
       isDisabled ||
       Boolean(!isCompactFocused && codeOneLiner && codeOneLiner.includes('...')),
+    renderLineHighlight: !isCodeEditorExpanded ? 'none' : 'line',
+    renderLineHighlightOnlyWhenFocus: true,
+    scrollbar: {
+      horizontal: 'hidden',
+      vertical: 'auto',
+    },
+    scrollBeyondLastLine: false,
+    theme: language === 'esql' ? ESQL_THEME_ID : isDark ? 'vs-dark' : 'vs',
+    wordWrap: 'on',
+    wrappingIndent: 'none',
   };
 
   if (isCompactFocused) {
@@ -743,7 +747,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                   <EuiButtonIcon
                     iconType={isWrappedInPipes ? 'pipeNoBreaks' : 'pipeBreaks'}
                     color="text"
-                    size="s"
+                    size="xs"
                     data-test-subj="TextBasedLangEditor-toggleWordWrap"
                     aria-label={
                       isWrappedInPipes
@@ -786,7 +790,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                       }
                       buttonProps={{
                         color: 'text',
-                        size: 's',
+                        size: 'xs',
                         'data-test-subj': 'TextBasedLangEditor-documentation',
                         'aria-label': i18n.translate(
                           'textBasedEditor.query.textBasedLanguagesEditor.documentationLabel',
@@ -800,7 +804,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                 )}
               </EuiFlexItem>
               {!Boolean(hideMinimizeButton) && (
-                <EuiFlexItem grow={false} style={{ marginRight: '8px' }}>
+                <EuiFlexItem grow={false}>
                   <EuiToolTip
                     position="top"
                     content={i18n.translate(
@@ -820,7 +824,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                         }
                       )}
                       data-test-subj="TextBasedLangEditor-minimize"
-                      size="s"
+                      size="xs"
                       onClick={() => {
                         expandCodeEditor(false);
                         updateLinesFromModel = false;
@@ -1015,6 +1019,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                           borderRadius: 0,
                           backgroundColor: isDark ? euiTheme.colors.lightestShade : '#e9edf3',
                           border: '1px solid rgb(17 43 134 / 10%) !important',
+                          transform: 'none !important',
                         },
                       }}
                     />
@@ -1044,6 +1049,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                       backgroundColor: isDark ? euiTheme.colors.lightestShade : '#e9edf3',
                       border: '1px solid rgb(17 43 134 / 10%) !important',
                       borderLeft: 'transparent !important',
+                      transform: 'none !important',
                     }}
                   />
                 </EuiToolTip>

src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx

@@ -566,7 +566,7 @@ export const QueryBarTopRow = React.memo(
         : strings.getRefreshQueryLabel();
       const buttonLabelRun = textBasedRunShortcut;
 
-      const iconDirty = Boolean(isQueryLangSelected) ? 'play' : 'kqlFunction';
+      const iconDirty = Boolean(isQueryLangSelected) ? 'playFilled' : 'kqlFunction';
       const tooltipDirty = Boolean(isQueryLangSelected) ? buttonLabelRun : buttonLabelUpdate;
 
       const isDirtyButtonLabel = Boolean(isQueryLangSelected)
@@ -588,7 +588,7 @@ export const QueryBarTopRow = React.memo(
               onClick={onClickSubmitButton}
               size={shouldShowDatePickerAsBadge() ? 's' : 'm'}
               color={props.isDirty ? 'success' : 'primary'}
-              fill={props.isDirty}
+              fill={false}
               needsUpdate={props.isDirty}
               data-test-subj="querySubmitButton"
               toolTipProps={{