[Console Migration] Add styling for status codes in multiple response…

… output (elastic#183858) Closes elastic#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 <img width="1574" alt="Screenshot 2024-05-21 at 16 38 55" src="https://github.com/elastic/kibana/assets/59341489/59b28258-5b41-4e66-8d1b-97b7d146d6e5"> In Ace editor: <img width="1918" alt="Screenshot 2024-05-16 at 18 01 42" src="https://github.com/elastic/kibana/assets/59341489/da9d85e0-0791-4631-84e7-139749ce4956"> 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 microsoft/monaco-editor#3868 and microsoft/monaco-editor#586). Therefore, in this PR we only set the text colors.  --------- Co-authored-by: Yulia Čech <6585477+yuliacech@users.noreply.github.com>
kaanyalti · May 28, 2024 · 065b153 · 065b153
1 parent e5d9959
commit 065b153
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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)),
     ],