From 065b1537bba205c83024c5dad3719f2bf9a27d1b Mon Sep 17 00:00:00 2001 From: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com> Date: Tue, 28 May 2024 10:09:40 +0100 Subject: [PATCH] [Console Migration] Add styling for status codes in multiple response output (#183858) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes https://github.com/elastic/kibana/issues/179522 ## Summary This PR adds styling for the status codes in the multiple-response output in Console Monaco. https://github.com/elastic/kibana/assets/59341489/1934cda7-d6c1-41a0-9147-3f71885929c6 Screenshot 2024-05-21 at 16 38 55 In Ace editor: Screenshot 2024-05-16 at 18 01 42 Note: In the Ace editor, we use the [`badge.badge` css classes for token names](https://github.com/elastic/kibana/blob/0f1139f302db4a2a673193346978fa9a3e62ccd9/src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.ts#L15), but unfortunately Monaco theme rules don't support class names. I tried setting the [background color property](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.ITokenThemeRule.html#background) in the rules for the status code tokens but this doesn't work because of a bug from Monaco's side, see https://github.com/microsoft/monaco-editor/issues/3868 and https://github.com/microsoft/monaco-editor/issues/586). Therefore, in this PR we only set the text colors. --------- Co-authored-by: Yulia Čech <6585477+yuliacech@users.noreply.github.com> --- .../src/console/lexer_rules/console_editor.ts | 6 +++++ .../src/console/lexer_rules/console_output.ts | 26 ++++++++++++++++++- .../src/console/lexer_rules/shared.ts | 2 -- packages/kbn-monaco/src/console/theme.ts | 20 ++++++++++++++ 4 files changed, 51 insertions(+), 3 deletions(-) diff --git a/packages/kbn-monaco/src/console/lexer_rules/console_editor.ts b/packages/kbn-monaco/src/console/lexer_rules/console_editor.ts index 22878e000fc6cd3..97984a83b2c9f36 100644 --- a/packages/kbn-monaco/src/console/lexer_rules/console_editor.ts +++ b/packages/kbn-monaco/src/console/lexer_rules/console_editor.ts @@ -11,6 +11,7 @@ import { consoleSharedLexerRules, matchTokensWithEOL, matchToken, + matchTokens, } from './shared'; import { monaco } from '../../monaco_imports'; @@ -31,6 +32,11 @@ export const lexerRules: monaco.languages.IMonarchLanguage = { // text matchToken('text', '.+?'), ], + comments: [ + // line comment indicated by # + matchTokens(['comment.punctuation', 'comment.line'], /(#)(.*$)/), + ...consoleSharedLexerRules.tokenizer.comments, + ], method_sep: [ // protocol host with slash matchTokensWithEOL( diff --git a/packages/kbn-monaco/src/console/lexer_rules/console_output.ts b/packages/kbn-monaco/src/console/lexer_rules/console_output.ts index 02e14e35aa3a102..8209820930910ba 100644 --- a/packages/kbn-monaco/src/console/lexer_rules/console_output.ts +++ b/packages/kbn-monaco/src/console/lexer_rules/console_output.ts @@ -6,7 +6,11 @@ * Side Public License, v 1. */ -import { consoleSharedLanguageConfiguration, consoleSharedLexerRules } from './shared'; +import { + consoleSharedLanguageConfiguration, + consoleSharedLexerRules, + matchTokensWithEOL, +} from './shared'; import { monaco } from '../../monaco_imports'; export const consoleOutputLanguageConfiguration: monaco.languages.LanguageConfiguration = { @@ -15,4 +19,24 @@ export const consoleOutputLanguageConfiguration: monaco.languages.LanguageConfig export const consoleOutputLexerRules: monaco.languages.IMonarchLanguage = { ...consoleSharedLexerRules, + tokenizer: { + ...consoleSharedLexerRules.tokenizer, + comments: [ + // Line comment indicated by # + // Everything after the # character is matched, stopping right before the status code and status text at the end if they are present + matchTokensWithEOL('comment', /# .+?(?=\s+\d{3}(?: \w+)*$)/, 'root', 'status'), + ...consoleSharedLexerRules.tokenizer.comments, + ], + status: [ + // Following HTTP response status codes conventions + // Informational responses (status codes 100 – 199) + matchTokensWithEOL('status.info', /\b1\d{2}(?: \w+)*$/, 'root'), + // Successful responses (status codes 200 – 299) + matchTokensWithEOL('status.success', /\b2\d{2}(?: \w+)*$/, 'root'), + // Redirection messages (status codes 300 – 399) + matchTokensWithEOL('status.redirect', /\b3\d{2}(?: \w+)*$/, 'root'), + // Client and server error responses (status codes 400 – 599) + matchTokensWithEOL('status.error', /\b[4-5]\d{2}(?: \w+)*$/, 'root'), + ], + }, }; diff --git a/packages/kbn-monaco/src/console/lexer_rules/shared.ts b/packages/kbn-monaco/src/console/lexer_rules/shared.ts index f9ceb0f9f85e9f6..c46ef69af100260 100644 --- a/packages/kbn-monaco/src/console/lexer_rules/shared.ts +++ b/packages/kbn-monaco/src/console/lexer_rules/shared.ts @@ -112,8 +112,6 @@ export const consoleSharedLexerRules: monaco.languages.IMonarchLanguage = { matchToken('paren.lparen', '{', 'json_root'), ], comments: [ - // line comment indicated by # - matchTokens(['comment.punctuation', 'comment.line'], /(#)(.*$)/), // start a block comment indicated by /* matchToken('comment.punctuation', /\/\*/, 'block_comment'), // line comment indicated by // diff --git a/packages/kbn-monaco/src/console/theme.ts b/packages/kbn-monaco/src/console/theme.ts index 66e2bfab812bd32..3a90771354a53c1 100644 --- a/packages/kbn-monaco/src/console/theme.ts +++ b/packages/kbn-monaco/src/console/theme.ts @@ -37,6 +37,26 @@ export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => { ['constant.numeric'], makeHighContrastColor(euiThemeVars.euiColorAccentText)(background) ), + ...buildRuleGroup( + ['status.info'], + makeHighContrastColor(euiThemeVars.euiColorWarningText)(background), + true + ), + ...buildRuleGroup( + ['status.success'], + makeHighContrastColor(euiThemeVars.euiColorSuccessText)(background), + true + ), + ...buildRuleGroup( + ['status.redirect'], + makeHighContrastColor(euiThemeVars.euiColorWarningText)(background), + true + ), + ...buildRuleGroup( + ['status.error'], + makeHighContrastColor(euiThemeVars.euiColorDangerText)(background), + true + ), ...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)), ...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)), ],