feat: disable scrollbar, remove line highlighting, set background col…

…or (#1408)

## Description:
Adding those features

## Is this change user facing?
YES

## References (if applicable):
Closes #1391

engine/frontend/src/component/CodeEditor.js

@@ -1,7 +1,7 @@
 import React, {useEffect, useMemo, useRef, useState} from "react";
 import {Box, Button, useClipboard} from "@chakra-ui/react";
 import useWindowDimensions from "../utils/windowDimension";
-import { saveTextAsFile } from "../utils/download";
+import {saveTextAsFile} from "../utils/download";
 import Editor from "@monaco-editor/react";
 
 export const CodeEditor = (
@@ -39,6 +39,11 @@ export const CodeEditor = (
         return monacoRef.current.editor.getEditors()[id];
     }
 
+    const defineAndSetTheme = (name, data) => {
+        monacoRef.current.editor.defineTheme(name, data);
+        monacoRef.current.editor.setTheme(name);
+    }
+
     const isEditorReadOnly = () => {
         try {
             return getEditor().getOption(monacoReadOnlyEnumId)
@@ -57,7 +62,6 @@ export const CodeEditor = (
 
     useEffect(() => {
         if (getEditor()) {
-            // console.log("Changing readOnly in monaco to:", readOnlySetting)
             getEditor().updateOptions({
                 readOnly: readOnlySetting,
             })
@@ -67,15 +71,13 @@ export const CodeEditor = (
     useEffect(() => {
         if (formatCode) {
             if (isEditorReadOnly()) {
-                // console.log("Cannot format with readonly=true, requesting to set readOnly=false")
                 setReadOnlySetting(false)
             } else {
                 if (getEditor()) {
                     getEditor()
                         .getAction('editor.action.formatDocument')
                         .run()
                         .then(() => {
-                            // console.log(`Formatting finished running. Setting readonly=${originalReadOnlySetting.current}`)
                             setReadOnlySetting(originalReadOnlySetting.current)
                             setFormatCode(false)
                         });
@@ -121,6 +123,14 @@ export const CodeEditor = (
         updateWindowHeightBasedOnContent();
         attachOptionsChangeListener()
         if (autoFormat) handleCodeFormat();
+        defineAndSetTheme('kurtosisTheme', {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.background': '#171923',
+            },
+        });
     }
 
     function handleDownload() {
@@ -141,6 +151,22 @@ export const CodeEditor = (
         return !languages.includes("json")
     }
 
+    const highlightLineOption = (readOnly) => {
+        if (readOnly) {
+            return "none"
+        } else {
+            return "line"
+        }
+    }
+
+    const scrollbarOption = (readOnly) => {
+        if (readOnly) {
+            return 0
+        } else {
+            return 10
+        }
+    }
+
     return (
         <Box
             border={border}
@@ -166,7 +192,11 @@ export const CodeEditor = (
                     minimap: {
                         enabled: false
                     },
-                    scrollBeyondLastLine: false
+                    scrollBeyondLastLine: false,
+                    scrollbar: {
+                        verticalScrollbarSize: scrollbarOption(readOnly),
+                    },
+                    renderLineHighlight: highlightLineOption(readOnly),
                 }}
             />
             <Box

engine/server/webapp/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "./static/css/main.d26dfda9.css",
-    "main.js": "./static/js/main.247fe456.js",
+    "main.js": "./static/js/main.2381e788.js",
     "index.html": "./index.html",
     "main.d26dfda9.css.map": "./static/css/main.d26dfda9.css.map",
-    "main.247fe456.js.map": "./static/js/main.247fe456.js.map"
+    "main.2381e788.js.map": "./static/js/main.2381e788.js.map"
   },
   "entrypoints": [
     "static/css/main.d26dfda9.css",
-    "static/js/main.247fe456.js"
+    "static/js/main.2381e788.js"
   ]
 }

engine/server/webapp/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.247fe456.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.2381e788.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>