From fc23de67e497f258b7d0e6f206a4705093ddb293 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 13 Sep 2024 11:37:59 -0300
Subject: [PATCH] fix: JSONViewer component style update to fits on dark and
 light mode (#3792)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (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                      | 13 +++++++++++++
 src/frontend/package.json                           |  1 +
 src/frontend/src/modals/dictAreaModal/index.tsx     |  5 ++---
 src/frontend/src/style/classes.css                  | 12 ++++--------
 .../regression/generalBugs-shard-13.spec.ts         |  1 -
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index ddcef6df7..dbd35cc62 100644
--- a/src/frontend/package-lock.json
+++ b/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",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index a0d618204..ed20c4dfe 100644
--- a/src/frontend/package.json
+++ b/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",
diff --git a/src/frontend/src/modals/dictAreaModal/index.tsx b/src/frontend/src/modals/dictAreaModal/index.tsx
index b0499e7a8..3fd098ba0 100644
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/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>
diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css
index 22d4a2545..f8c3d9d0a 100644
--- a/src/frontend/src/style/classes.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
index a2396b011..0289f68ca 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
+++ b/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 });