diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.ts b/packages/kbn-monaco/src/esql/lib/esql_theme.ts index f9ed8c6849acc..c88a8fc02b26d 100644 --- 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', 'meta'], + euiThemeVars.euiColorPrimaryText, + true // isBold + ), + // commands ...buildRuleGroup( [ - 'from', 'metrics', 'metadata', 'mv_expand', @@ -80,9 +77,6 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ 'in', 'as', 'expr_ws', - 'row', - 'show', - 'meta', 'limit', 'nulls_ordering_direction', 'nulls_ordering', @@ -90,17 +84,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 +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.euiTextColor, + 'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorPrimary, + 'editorSuggestWidget.selectedForeground': euiThemeVars.euiColorEmptyShade, + }, }); diff --git a/packages/kbn-text-based-editor/src/editor_footer.tsx b/packages/kbn-text-based-editor/src/editor_footer.tsx index 697563ebc404c..27a6ffbeabbdb 100644 --- a/packages/kbn-text-based-editor/src/editor_footer.tsx +++ b/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,10 +161,6 @@ export const EditorFooter = memo(function EditorFooter({ [runQuery, updateQuery] ); - const shadowStyle = isInCompactMode - ? `inset 0 0px 0, inset 0 -1px 0 ${euiTheme.border.color}` - : 'none'; - return ( diff --git a/packages/kbn-text-based-editor/src/overwrite.scss b/packages/kbn-text-based-editor/src/overwrite.scss index e24fd604d7268..7c66fe96e36cb 100644 --- a/packages/kbn-text-based-editor/src/overwrite.scss +++ b/packages/kbn-text-based-editor/src/overwrite.scss @@ -1,45 +1,63 @@ -.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, .TextBasedLangEditor .monaco-editor .suggest-details-container { + @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 .monaco-editor .suggest-details-container { + background-color: $euiColorEmptyShade; + line-height: 1.5rem; } -.TextBasedLangEditor .monaco-editor .margin-view-overlays .line-numbers { - color: $euiColorDisabledText; +.TextBasedLangEditor_errorMessage { + @include euiTextBreakWord; } -.TextBasedLangEditor .monaco-editor .current-line ~ .line-numbers { - color: $euiTextSubduedColor; -} +/* For compact mode */ +// All scrollable containers (e.g. main container and suggest menu) .TextBasedLangEditor--compact .monaco-editor .monaco-scrollable-element { - margin-left: 4px; + margin-left: $euiSizeS; } -.TextBasedLangEditor_errorMessage { - @include euiTextBreakWord; +// Suggest menu in compact mode +.TextBasedLangEditor--compact .monaco-editor .monaco-list .monaco-scrollable-element { + margin-left: 0; + + .monaco-list-row.focused { + border-radius: $euiBorderRadius; + } } + +/* 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; +} \ No newline at end of file diff --git a/packages/kbn-text-based-editor/src/query_history.tsx b/packages/kbn-text-based-editor/src/query_history.tsx index d7272e8d59e12..9f0f82deb3db7 100644 --- a/packages/kbn-text-based-editor/src/query_history.tsx +++ b/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} 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 index 39a02a35516ab..130d0ca69fc4a 100644 --- 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 @@ -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%', 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 index b3729118f6e99..b33d8125bfd25 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx @@ -667,41 +667,43 @@ 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, 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, + 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 +745,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ {!Boolean(hideMinimizeButton) && ( - + { expandCodeEditor(false); updateLinesFromModel = false; @@ -1015,6 +1017,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 +1047,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', }} /> 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 index 892144d07fb06..941040dfd30f8 100644 --- 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={{