Spruce up the editor

elastic · Jun 17, 2024 · fec5158 · fec5158
1 parent ad71568
commit fec5158
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 53 deletions.
diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.ts b/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'],
+      euiThemeVars.euiColorPrimaryText,
+      true // isBold
+    ),
+
     // commands
     ...buildRuleGroup(
       [
-        'from',
         'metrics',
         'metadata',
         'mv_expand',
@@ -80,8 +77,6 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
         'in',
         'as',
         'expr_ws',
-        'row',
-        'show',
         'meta',
         'limit',
         'nulls_ordering_direction',
@@ -90,17 +85,37 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({
         '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 +128,22 @@ 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.selectedBackground': euiThemeVars.euiColorAccent,
+  },
 });
diff --git a/packages/kbn-text-based-editor/src/overwrite.scss b/packages/kbn-text-based-editor/src/overwrite.scss
@@ -1,6 +1,6 @@
 .TextBasedLangEditor .monaco-editor {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
+  border-top-left-radius: $euiBorderRadius;
+  border-bottom-left-radius: $euiBorderRadius;
 }
 
 .TextBasedLangEditor .monaco-editor .monaco-hover {
@@ -12,8 +12,8 @@
 }
 
 .TextBasedLangEditor .monaco-editor .margin {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
+  border-top-left-radius: $euiBorderRadius;
+  border-bottom-left-radius: $euiBorderRadius;
 }
 
 .TextBasedLangEditor--compact .monaco-editor {
@@ -24,7 +24,6 @@
 .TextBasedLangEditor--compact .monaco-editor .margin {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  background-color: $euiColorLightestShade;
   color: $euiColorDisabledText;
 }
 
@@ -37,7 +36,7 @@
 }
 
 .TextBasedLangEditor--compact .monaco-editor .monaco-scrollable-element {
-  margin-left: 4px;
+  margin-left: $euiSizeS;
 }
 
 .TextBasedLangEditor_errorMessage {

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts b/packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts
@@ -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%',

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -666,40 +666,44 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   }, [language, documentationSections]);
 
   const codeEditorOptions: CodeEditorProps['options'] = {
-    automaticLayout: true,
     accessibilitySupport: 'off',
+    autoIndent: 'none',
+    automaticLayout: 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,
     },
+    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) {
@@ -741,7 +745,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
@@ -784,7 +788,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',
@@ -798,7 +802,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(
@@ -818,7 +822,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                         }
                       )}
                       data-test-subj="TextBasedLangEditor-minimize"
-                      size="s"
+                      size="xs"
                       onClick={() => {
                         expandCodeEditor(false);
                         updateLinesFromModel = false;

diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/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={{