fix: JSONViewer component style update to fits on dark and light mode (#3792)

* ✨ (frontend): Add react-json-view-lite package to frontend dependencies
📝 (frontend): Update JsonView component in dictAreaModal to use dark theme and adjust class name
📝 (frontend): Update background color for dark theme in JsonView component styling

* 🔧 (generalBugs-shard-13.spec.ts): remove unnecessary line causing linting issue

* updating lock

src/frontend/package-lock.json

@@ -67,6 +67,7 @@
         "react-hook-form": "^7.52.0",
         "react-hotkeys-hook": "^4.5.0",
         "react-icons": "^5.2.1",
+        "react-json-view-lite": "^1.5.0",
         "react-laag": "^2.0.5",
         "react-markdown": "^8.0.7",
         "react-pdf": "^9.0.0",
@@ -14018,6 +14019,18 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-json-view-lite": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.5.0.tgz",
+      "integrity": "sha512-nWqA1E4jKPklL2jvHWs6s+7Na0qNgw9HCP6xehdQJeg6nPBTFZgGwyko9Q0oj+jQWKTTVRS30u0toM5wiuL3iw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-laag": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/react-laag/-/react-laag-2.0.5.tgz",

src/frontend/package.json

@@ -62,6 +62,7 @@
     "react-hook-form": "^7.52.0",
     "react-hotkeys-hook": "^4.5.0",
     "react-icons": "^5.2.1",
+    "react-json-view-lite": "^1.5.0",
     "react-laag": "^2.0.5",
     "react-markdown": "^8.0.7",
     "react-pdf": "^9.0.0",

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -65,14 +65,13 @@ export default function DictAreaModal({
     <BaseModal.Content>
       <div className="flex h-full w-full flex-col transition-all">
         <JsonView
-          theme="vscode"
-          dark={isDark}
-          className={!isDark ? "json-view-white" : "json-view-dark"}
+          dark
           editable={!!onChange}
           enableClipboard
           onChange={handleJsonChange}
           src={cloneDeep(componentValue)}
           customizeCopy={customizeCopy}
+          theme="vscode"
         />
       </div>
     </BaseModal.Content>

src/frontend/src/style/classes.css

@@ -151,18 +151,14 @@ textarea[class^="ag-"]:focus {
   height: fit-content !important;
 }
 
-.json-view-white {
-  background-color: #f8fafc !important;
-}
-
-.json-view-dark {
-  background-color: #141924 !important;
+.json-view.dark {
+  background-color: #161c28 !important;
 }
 
 .react-flow__node.dragging * {
   cursor: grabbing !important;
 }
 
-.react-flow__node-noteNode:not(.selected){
+.react-flow__node-noteNode:not(.selected) {
   z-index: -1 !important;
-}
+}

src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts

@@ -63,7 +63,6 @@ test("should be able to share a component on the store by clicking on the share
   await page.getByText("New Project", { exact: true }).click();
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-
   await page.waitForSelector("text=share", { timeout: 10000 });
   await page.waitForSelector("text=playground", { timeout: 10000 });
   await page.waitForSelector("text=api", { timeout: 10000 });