From e2e5a8208c05c1e0043b230e33b021be06d5c21f Mon Sep 17 00:00:00 2001
From: Yogesh Mahajan <yogesh.mahajan@enterprisedb.com>
Date: Mon, 15 Nov 2021 10:58:17 +0530
Subject: [PATCH] 1) Fixed an issue where JSON editor preview colours have
 inappropriate contrast in dark mode. Fixes #6944 2) Fixed JSON Editor
 scrolling issue in code mode. Fixes #6945

---
 docs/en_US/release_notes_6_2.rst                |  2 ++
 web/pgadmin/static/js/slickgrid/editors.js      | 17 +++++++++++++++++
 .../static/scss/_jsoneditor.overrides.scss      |  4 +++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/docs/en_US/release_notes_6_2.rst b/docs/en_US/release_notes_6_2.rst
index 0aeb20c1b..7ed4c8bdc 100644
--- a/docs/en_US/release_notes_6_2.rst
+++ b/docs/en_US/release_notes_6_2.rst
@@ -28,6 +28,8 @@ Bug fixes
 | `Issue #6905 <https://redmine.postgresql.org/issues/6905>`_ -  Fixed an issue where database nodes are not getting loaded behind a reverse proxy with SSL.
 | `Issue #6925 <https://redmine.postgresql.org/issues/6925>`_ -  Fixed SQL syntax error if select "Custom auto-vacuum" option and not set Autovacuum option to Yes or No.
 | `Issue #6939 <https://redmine.postgresql.org/issues/6939>`_ -  Fixed an issue where older server group name displayed in the confirmation pop-up when the user removes server group.
+| `Issue #6944 <https://redmine.postgresql.org/issues/6944>`_ -  Fixed an issue where JSON editor preview colours have inappropriate contrast in dark mode.
+| `Issue #6945 <https://redmine.postgresql.org/issues/6945>`_ -  Fixed JSON Editor scrolling issue in code mode.
 | `Issue #6940 <https://redmine.postgresql.org/issues/6940>`_ -  Fixed an issue where user details are not shown when the non-admin user tries to connect to the shared server.
 | `Issue #6949 <https://redmine.postgresql.org/issues/6949>`_ -  Ensure that dialog should be opened when clicking on Reassign/Drop owned menu.
 | `Issue #6954 <https://redmine.postgresql.org/issues/6954>`_ -  Ensure that changing themes should work on Windows when system high contrast mode is enabled.
diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js
index e2e6cd2c9..4167b29b5 100644
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -327,6 +327,12 @@ import Alertify from 'pgadmin.alertifyjs';
       }
     };
 
+    this.resizeJsoneditorObserver = new ResizeObserver(() => {
+      if ($editor){
+        $editor.resize();
+      }
+    });
+
     this.save = function() {
       args.commitChanges();
     };
@@ -352,6 +358,7 @@ import Alertify from 'pgadmin.alertifyjs';
     };
 
     this.destroy = function() {
+      this.resizeJsoneditorObserver.unobserve(document.getElementById('pg-json-editor'));
       $editor.destroy();
       $wrapper.remove();
     };
@@ -408,6 +415,7 @@ import Alertify from 'pgadmin.alertifyjs';
           throw(error);
         }, 'jsoneditorchunk');
       }
+      this.resizeJsoneditorObserver.observe(document.getElementById('pg-json-editor'));
     };
 
     this.serializeValue = function() {
@@ -641,6 +649,7 @@ import Alertify from 'pgadmin.alertifyjs';
     };
 
     this.destroy = function() {
+      this.resizeJsoneditorObserver.unobserve(document.getElementById('pg-json-editor'));
       $editor.destroy();
       $wrapper.remove();
     };
@@ -649,6 +658,13 @@ import Alertify from 'pgadmin.alertifyjs';
       $editor.focus();
     };
 
+    // listen to resize event for json editor
+    this.resizeJsoneditorObserver = new ResizeObserver(() => {
+      if ($editor){
+        $editor.resize();
+      }
+    });
+
     this.loadValue = function(item) {
       var data = defaultValue = item[args.column.field];
       tmpdata = data;
@@ -689,6 +705,7 @@ import Alertify from 'pgadmin.alertifyjs';
       }, function(error){
         throw(error);
       }, 'jsoneditorchunk');
+      this.resizeJsoneditorObserver.observe(document.getElementById('pg-json-editor'));
     };
 
     this.serializeValue = function() {
diff --git a/web/pgadmin/static/scss/_jsoneditor.overrides.scss b/web/pgadmin/static/scss/_jsoneditor.overrides.scss
index 93c1d1feb..4c27e5b3a 100644
--- a/web/pgadmin/static/scss/_jsoneditor.overrides.scss
+++ b/web/pgadmin/static/scss/_jsoneditor.overrides.scss
@@ -230,7 +230,9 @@ div.jsoneditor td.jsoneditor-tree {
 }
 
 pre.jsoneditor-preview{
- background-color: $color-gray-lighter !important;
+  background-color: $color-gray-lighter !important;
+  opacity: 0.8;
+  color: $color-fg;
 }