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
In Ace editor:
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)),
],