From 99a74b6bae061933644ca43fe3c362aa0e301c19 Mon Sep 17 00:00:00 2001
From: Roman Dmytrenko <rdmytrenko@gmail.com>
Date: Thu, 11 Jan 2024 18:44:10 +0200
Subject: [PATCH 1/2] refactor(ui): drop highlightjs

reuse monaco for json formatting.
---
 ui/package-lock.json                        | 14 -------------
 ui/package.json                             |  1 -
 ui/src/app/console/Console.tsx              | 23 +++++++--------------
 ui/src/components/tokens/ShowTokenPanel.tsx | 12 ++---------
 4 files changed, 10 insertions(+), 40 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 6b15d861f4..dcecf5a1e2 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -24,7 +24,6 @@
         "date-fns": "^3.2.0",
         "dotenv": "^16.3.1",
         "formik": "^2.4.5",
-        "highlight.js": "^11.9.0",
         "monaco-editor": "^0.45.0",
         "monaco-themes": "^0.4.4",
         "nightwind": "^1.1.13",
@@ -7564,14 +7563,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/highlight.js": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
-      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -17930,11 +17921,6 @@
         "function-bind": "^1.1.2"
       }
     },
-    "highlight.js": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
-      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw=="
-    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
diff --git a/ui/package.json b/ui/package.json
index eaddaf72d5..476dca7e0e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -28,7 +28,6 @@
     "date-fns": "^3.2.0",
     "dotenv": "^16.3.1",
     "formik": "^2.4.5",
-    "highlight.js": "^11.9.0",
     "monaco-editor": "^0.45.0",
     "monaco-themes": "^0.4.4",
     "nightwind": "^1.1.13",
diff --git a/ui/src/app/console/Console.tsx b/ui/src/app/console/Console.tsx
index 3d5b0a9559..e9a2c04cd2 100644
--- a/ui/src/app/console/Console.tsx
+++ b/ui/src/app/console/Console.tsx
@@ -1,8 +1,6 @@
 import { ArrowPathIcon } from '@heroicons/react/20/solid';
 import { Form, Formik, useFormikContext } from 'formik';
-import hljs from 'highlight.js';
-import javascript from 'highlight.js/lib/languages/json';
-import 'highlight.js/styles/tomorrow-night-bright.css';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
@@ -33,8 +31,6 @@ import {
   getErrorMessage
 } from '~/utils/helpers';
 
-hljs.registerLanguage('json', javascript);
-
 function ResetOnNamespaceChange({ namespace }: { namespace: INamespace }) {
   const { resetForm } = useFormikContext();
 
@@ -170,11 +166,11 @@ export default function Console() {
 
   useEffect(() => {
     if (codeRef.current) {
-      // must unset property 'highlighted' so that it can be highlighted again
-      // otherwise it gets highlighted the first time only
-      delete codeRef.current.dataset.highlighted;
+      monaco.editor.colorizeElement(codeRef.current, {
+        mimeType: 'json',
+        theme: 'tmrw'
+      });
     }
-    hljs.highlightAll();
   }, [response, codeRef]);
 
   const initialvalues: ConsoleFormValues = {
@@ -301,14 +297,11 @@ export default function Console() {
             </div>
             <div className="mt-8 w-full overflow-hidden md:w-1/2 md:pl-4">
               {response && (
-                <pre className="p-2 text-sm md:h-full">
+                <pre className="monaco-editor bg-[#] p-2 text-sm md:h-full">
                   {hasEvaluationError ? (
-                    <p className="border-red-400 border-4">{response}</p>
+                    <p className="text-red-400">{response}</p>
                   ) : (
-                    <code
-                      className="hljs json rounded-sm md:h-full"
-                      ref={codeRef}
-                    >
+                    <code className="json rounded-sm md:h-full" ref={codeRef}>
                       {response as React.ReactNode}
                     </code>
                   )}
diff --git a/ui/src/components/tokens/ShowTokenPanel.tsx b/ui/src/components/tokens/ShowTokenPanel.tsx
index 3971f79d4a..fe8df63334 100644
--- a/ui/src/components/tokens/ShowTokenPanel.tsx
+++ b/ui/src/components/tokens/ShowTokenPanel.tsx
@@ -4,14 +4,10 @@ import {
   ClipboardDocumentIcon,
   LockClosedIcon
 } from '@heroicons/react/24/outline';
-import hljs from 'highlight.js';
-import text from 'highlight.js/lib/languages/plaintext';
-import 'highlight.js/styles/tokyo-night-dark.css';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import Button from '~/components/forms/buttons/Button';
 import { IAuthTokenSecret } from '~/types/auth/Token';
 import { cls, copyTextToClipboard } from '~/utils/helpers';
-hljs.registerLanguage('text', text);
 
 type ShowTokenPanelProps = {
   setOpen: (open: boolean) => void;
@@ -23,10 +19,6 @@ export default function ShowTokenPanel(props: ShowTokenPanelProps) {
   const [copied, setCopied] = useState(false);
   const [copiedText, setCopiedText] = useState(token?.clientToken);
 
-  useEffect(() => {
-    hljs.initHighlighting();
-  }, [token]);
-
   return (
     <>
       <div>
@@ -54,7 +46,7 @@ export default function ShowTokenPanel(props: ShowTokenPanelProps) {
           </div>
           <div className="m-auto mt-4 flex content-center bg-[#1a1b26]">
             <div className="m-auto flex">
-              <pre className="p-2 text-sm md:h-full">
+              <pre className="p-4 text-sm text-[#9aa5ce] md:h-full">
                 <code className="text rounded-sm md:h-full">{copiedText}</code>
               </pre>
               {token?.clientToken && (

From c83ec7c399b1b367cb8705b25804e0cbf5781daf Mon Sep 17 00:00:00 2001
From: Roman Dmytrenko <rdmytrenko@gmail.com>
Date: Thu, 11 Jan 2024 19:41:14 +0200
Subject: [PATCH 2/2] cleanup

---
 ui/src/app/console/Console.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/app/console/Console.tsx b/ui/src/app/console/Console.tsx
index e9a2c04cd2..6e864e90d1 100644
--- a/ui/src/app/console/Console.tsx
+++ b/ui/src/app/console/Console.tsx
@@ -297,7 +297,7 @@ export default function Console() {
             </div>
             <div className="mt-8 w-full overflow-hidden md:w-1/2 md:pl-4">
               {response && (
-                <pre className="monaco-editor bg-[#] p-2 text-sm md:h-full">
+                <pre className="monaco-editor p-2 text-sm md:h-full">
                   {hasEvaluationError ? (
                     <p className="text-red-400">{response}</p>
                   ) : (