IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added support for formatted JSON viewer/editor when interacting with data in a JSON column. Fixes #5198

Browse Source
This commit is contained in:
Yogesh Mahajan
2021-08-03 11:36:45 +05:30
committed by Akshay Joshi
parent 23265061b2
commit 8e214ca8fb
15 changed files with 708 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
docs/en_US/editgrid.rst
View File

@@ -107,6 +107,86 @@ properties of the geometries directly in map, just click the specific geometry:
- *Internet access:* An internet connection is required for the Geometry Viewer
to function correctly.
**JSON Data Editor**
A built in json editor is provided for *JSON/JSONB Data*.Double clicking on json/jsonb
data type cell in data grid will open JSON Editor.Editor provides different mode to
view and edit json data.
.. image:: images/json_editor_modes.png
:alt: Json Editor
:align: center
*Code Mode*:
Provides way to format & compact json data.Also provides ability to repair json data
by fixing quotes and escape characters, removing comments and JSONP notation and
turn JavaScript objects into JSON.
*Tree Mode*:
Enabled to change, add, move, remove, and duplicate fields and values.Provides ability
to searh & hilight data.
*Form Mode*:
Allows only to edit values in json data there by providing ability to keep data structure
unchanged while editing.
*Preview Mode*:
Provides ability to check data before saving and also shows size of current json data.
Format and compact json data as well.
*Editor Toolbar*
Different options are provided to manipulate json data.
Code/Preview mode:
.. image:: images/json_editor_code_preview_tool_bar.png
:alt: Json Editor Code/Preview mode Tool Bar
:align: center
Tree/Form mode:
.. image:: images/json_editor_tree_form_mode_tool_bar.png
:alt: Json Editor Tree/Form mode Tool Bar
:align: center
.. table::
:class: longtable
:widths: 1 3 2
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| Icon | Behavior | Available in mode |
+======================+========================================================================================+===========================+
| *Format Json* | Click to *Format Json* format json data with proper indentation. | Code, Preview |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Compact Json* | Click to *Compact Json* get compacted json data. | Code, Preview |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Sort* | Click to *Sort* icon to set sorting criteria for the data using file values. | Code, Preview, Tree |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Transform* | Click to *Transform* to filter data using JSME query language. | Code, Preview, Tree |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Undo* | Click to *Undo* to undo last action performed on data . | Code, Preview, Tree, From |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Redo* | Click to *Redo* to repat last action performed on data . | Code, Preview, Tree, From |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Mode* | Click to *Mode* dropdown to change dipaly mode of editor.Different modes avaialble | Code, Tree, From, Preview |
| | are Code, Preview, Tree, From. | |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Expand All* | Click to *Expand All* to expand json data. | Tree, From |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Collapse All* | Click to *Redo* to collapse json data. | Tree, From |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
| *Search Box* | Enter partial/complete string to search in data. | Tree, From |
+----------------------+----------------------------------------------------------------------------------------+---------------------------+
Sort/Filter options dialog
**************************

BIN
docs/en_US/images/json_editor_code_preview_tool_bar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/en_US/images/json_editor_modes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 387 KiB

BIN
docs/en_US/images/json_editor_tree_form_mode_tool_bar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
docs/en_US/release_notes_5_6.rst
View File

@@ -9,6 +9,7 @@ This release contains a number of bug fixes and new features since the release o
New features
************
| `Issue #5198 <https://redmine.postgresql.org/issues/5198>`_ - Added support for formatted JSON viewer/editor when interacting with data in a JSON column.
Housekeeping
************

1
web/package.json
View File

@@ -100,6 +100,7 @@
"jquery-contextmenu": "^2.9.2",
"jquery-ui": "^1.12.1",
"json-bignumber": "^1.0.1",
"jsoneditor": "^9.5.1",
"karma-coverage": "^2.0.3",
"leaflet": "^1.5.1",
"lodash": "4.*",

25
web/pgadmin/feature_tests/view_data_dml_queries.py
View File

@@ -241,13 +241,34 @@ CREATE TABLE public.nonintpkey
else:
ActionChains(self.driver).send_keys(value). \
send_keys(Keys.ENTER).perform()
elif cell_type in ['text', 'json', 'text[]', 'boolean[]']:
elif cell_type in ['text', 'text[]', 'boolean[]']:
text_area_ele = self.page.find_by_css_selector(
QueryToolLocators.row_editor_text_area_css)
text_area_ele.clear()
text_area_ele.click()
text_area_ele.send_keys(value)
# Click on editor's Save button
self.page.find_by_css_selector(
QueryToolLocators.text_editor_ok_btn_css).click()
elif cell_type in ['json', 'jsonb']:
jsoneditor_area_ele = self.page.find_by_css_selector(
QueryToolLocators.json_editor_text_area_css)
if not value == "":
actions = ActionChains(self.driver)
platform = 'mac'
if "platform" in self.driver.capabilities:
platform = (self.driver.capabilities["platform"]).lower()
elif "platformName" in self.driver.capabilities:
platform = \
(self.driver.capabilities["platformName"]).lower()
if 'mac' in platform:
key_to_press = Keys.COMMAND
else:
key_to_press = Keys.CONTROL
ActionChains(self.driver).key_down(key_to_press)\
.send_keys('a').key_up(key_to_press)\
.send_keys(Keys.DELETE).perform()
ActionChains(self.driver).send_keys(value) .perform()
# Click on editor's Save button
self.page.find_by_css_selector(
QueryToolLocators.text_editor_ok_btn_css).click()

2
web/pgadmin/static/css/style.css
View File

@@ -23,3 +23,5 @@
@import '../vendor/backgrid/backgrid-select-all.css';
@import 'node_modules/xterm/css/xterm.css';
@import 'node_modules/jsoneditor/dist/jsoneditor.min.css';

155
web/pgadmin/static/js/slickgrid/editors.js
View File

@@ -44,6 +44,11 @@ import gettext from 'sources/gettext';
return $('<textarea class=\'pg-textarea text-12\' hidefocus rows=5\'>');
}
// return json editor element
function getJsonEditor() {
return $('<div id=\'pg-json-editor\' hidefocus\'>');
}
// Generate and return editor buttons
function getButtons(editable) {
var $buttons = $('<div class=\'pg_buttons\' />'),
@@ -293,15 +298,16 @@ import gettext from 'sources/gettext';
// JSON data type editor
function JsonTextEditor(args) {
var $input, $wrapper, $buttons;
var defaultValue;
var $input, $wrapper, $buttons, $editor;
var defaultValue, tmpdata;
var scope = this;
var editorInitialized = false;
this.init = function() {
var $container = $('body');
$wrapper = getWrapper().appendTo($container);
$input = getTextArea().appendTo($wrapper);
$input = getJsonEditor().appendTo($wrapper);
$buttons = getButtons(true).appendTo($wrapper);
$buttons.find('button:first').on('click', this.cancel);
@@ -309,7 +315,6 @@ import gettext from 'sources/gettext';
$input.on('keydown', this.handleKeyDown);
scope.position(args.position);
$input.trigger('focus').trigger('select');
};
this.handleKeyDown = function(e) {
@@ -318,12 +323,6 @@ import gettext from 'sources/gettext';
} else if (e.which == $.ui.keyCode.ESCAPE) {
e.preventDefault();
scope.cancel();
} else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
e.preventDefault();
args.grid.navigatePrev();
} else if (e.which == $.ui.keyCode.TAB) {
e.preventDefault();
args.grid.navigateNext();
}
};
@@ -332,7 +331,6 @@ import gettext from 'sources/gettext';
};
this.cancel = function() {
$input.val(defaultValue);
args.cancelChanges();
};
@@ -352,15 +350,24 @@ import gettext from 'sources/gettext';
};
this.destroy = function() {
$editor.destroy();
$wrapper.remove();
};
this.focus = function() {
$input.trigger('focus');
$editor.focus();
};
this.loadValue = function(item) {
var data = defaultValue = item[args.column.field];
/* Can be useful until JSON editor loads */
tmpdata = data;
if ( _.isUndefined(data) || _.isNull(data)){
defaultValue = '{}';
data = '{}';
}
/* If jsonb or array */
if(args.column.column_type_internal === 'jsonb' && !Array.isArray(data) && data != null) {
data = JSONBigNumber.stringify(JSONBigNumber.parse(data), null, 4);
@@ -375,20 +382,60 @@ import gettext from 'sources/gettext';
});
data = '[' + temp.join() + ']';
}
/* if json take as is */
$input.val(data);
$input.trigger('select');
/* if data is string then convert to json*/
if ( data != '' && typeof data === 'string'){
data = JSON.parse(data);
}
/* Create editor if required & set data*/
if ($editor){
$editor.set(data);
$editor.focus();
}else{
editorInitialized = true;
require.ensure(['jsoneditor'], function(require) {
var JSONEditor = require('jsoneditor');
var jsonContainer = document.getElementById('pg-json-editor');
var options = { modes: ['code', 'form', 'tree','preview']};
$editor = new JSONEditor(jsonContainer, options);
$editor.set(data);
$editor.focus();
}, function(error){
throw(error);
}, 'jsoneditorchunk');
}
};
this.serializeValue = function() {
if ($input.val() === '') {
return null;
/* Create editor if data is null/new data entry */
if( !editorInitialized) {
require.ensure(['jsoneditor'], function(require) {
var JSONEditor = require('jsoneditor');
var jsonContainer = document.getElementById('pg-json-editor');
var options = {modes: ['code', 'form', 'tree','preview']};
if(jsonContainer) {
$editor = new JSONEditor(jsonContainer, options);
$editor.focus();
return null;
}
}, function(error){
throw(error);
}, 'jsoneditorchunk');}
if($editor){
let data = $editor.getText();
if (data === '') {
return null;
}
return data;
}else{
// The loader is not loaded yet ?
return tmpdata;
}
return $input.val();
};
this.applyValue = function(item, state){
if(args.column.column_type_internal === 'jsonb') {
if(args.column.column_type_internal === 'jsonb' || args.column.column_type_internal === 'json') {
setValue(args, item, state, 'jsonb');
} else {
setValue(args, item, state, 'text');
@@ -396,19 +443,24 @@ import gettext from 'sources/gettext';
};
this.isValueChanged = function() {
if ($input.val() == '' && _.isUndefined(defaultValue)) {
let data = $editor.getText();
if (data == '' && (_.isUndefined(defaultValue) || _.isNull(defaultValue) )) {
return false;
} else {
return (!($input.val() == '' && _.isNull(defaultValue))) && ($input.val() != defaultValue);
if(! _.isUndefined(defaultValue) && defaultValue != '{}'){
defaultValue = JSON.stringify(JSON.parse(defaultValue), null,2);
}
return (!( data == '' && _.isNull(defaultValue)) && (data != defaultValue));
}
};
this.validate = function() {
if(args.column.column_type_internal === 'jsonb' ||
args.column.column_type_internal === 'json') {
let data = $editor.getText();
try {
if($input.val() != ''){
JSON.parse($input.val());
if(data != '{}'){
JSON.parse(data);
}
} catch(e) {
$input.addClass('pg-text-invalid');
@@ -418,7 +470,6 @@ import gettext from 'sources/gettext';
};
}
}
$input.removeClass('pg-text-invalid');
return {
valid: true,
msg: null,
@@ -529,22 +580,22 @@ import gettext from 'sources/gettext';
// JSON data type editor
function ReadOnlyJsonTextEditor(args) {
var $input, $wrapper, $buttons;
var $input, $wrapper, $buttons, $editor;
var defaultValue;
var scope = this;
var tmpdata;
this.init = function() {
var $container = $('body');
$wrapper = getWrapper().appendTo($container);
$input = getTextArea().appendTo($wrapper);
$input = getJsonEditor().appendTo($wrapper);
$buttons = getButtons(false).appendTo($wrapper);
$buttons.find('button:first').on('click', this.cancel);
$input.on('keydown', this.handleKeyDown);
scope.position(args.position);
$input.trigger('focus').trigger('select');
};
this.handleKeyDown = function(e) {
@@ -553,14 +604,6 @@ import gettext from 'sources/gettext';
} else if (e.which == $.ui.keyCode.ESCAPE) {
e.preventDefault();
scope.cancel();
} else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
scope.cancel();
e.preventDefault();
args.grid.navigatePrev();
} else if (e.which == $.ui.keyCode.TAB) {
scope.cancel();
e.preventDefault();
args.grid.navigateNext();
}
};
@@ -585,15 +628,17 @@ import gettext from 'sources/gettext';
};
this.destroy = function() {
$editor.destroy();
$wrapper.remove();
};
this.focus = function() {
$input.trigger('focus');
$editor.focus();
};
this.loadValue = function(item) {
var data = defaultValue = item[args.column.field];
tmpdata = data;
if(args.column.column_type_internal === 'jsonb' && !Array.isArray(data)) {
data = JSONBigNumber.stringify(JSONBigNumber.parse(data), null, 4);
} else if (Array.isArray(data)) {
@@ -607,12 +652,39 @@ import gettext from 'sources/gettext';
});
data = '[' + temp.join() + ']';
}
$input.val(data);
$input.trigger('select');
/* if data is string then convert to json*/
if (typeof data === 'string')
data = JSON.parse(data);
require.ensure(['jsoneditor'], function(require) {
var JSONEditor = require('jsoneditor');
var jsonContainer = document.getElementById('pg-json-editor');
let options = {
modes: ['code', 'form', 'tree', 'preview'],
onEditable: function() {
return false;
}
};
if(jsonContainer) {
$editor = new JSONEditor(jsonContainer, options);
$editor.set(data);
}
}, function(error){
throw(error);
}, 'jsoneditorchunk');
};
this.serializeValue = function() {
return $input.val();
if($editor) {
let data = $editor.getText();
if (data === '') {
return null;
}
return data;
} else {
// The loader is not loaded yet ?
return tmpdata;
}
};
this.applyValue = function(item, state) {
@@ -620,12 +692,13 @@ import gettext from 'sources/gettext';
};
this.isValueChanged = function() {
return (!($input.val() == '' && defaultValue == null)) && ($input.val() != defaultValue);
let data = $editor.getText();
return (!(data == '' && defaultValue == null)) && (data != defaultValue);
};
this.validate = function() {
if (args.column.validator) {
var validationResults = args.column.validator($input.val());
var validationResults = args.column.validator($editor.getText());
if (!validationResults.valid) {
return validationResults;
}

406
web/pgadmin/static/scss/_jsoneditor.overrides.scss Normal file
View File

@@ -0,0 +1,406 @@
.jsoneditor-menu a.jsoneditor-poweredBy {
visibility: hidden;
}
.jsoneditor {
border-color: $border-color;
}
/* Menu Bar*/
.jsoneditor-menu {
background: $color-gray-light;
border-bottom: 1px solid $border-color;
}
/* Menu Bar buttons*/
.jsoneditor-menu>button {
font-family: $font-family-icon !important;
font-size: $navbar-font-size !important;
line-height: $line-height-base !important;
background-image:none !important;
font-weight: 600 !important;
border-radius: $border-radius;
border-color:$color-gray;
opacity: 1;
background-color:$btn-primary-icon-bg;
color: $color-fg;
font-weight: normal !important;
}
/* Navigation Bar */
.jsoneditor-navigation-bar{
font-family: $font-family-primary !important;
background-color: $color-bg;
color: $color-fg;
border-bottom: 1px solid $color-gray;
}
/* Over rides icons */
.jsoneditor-menu>button.jsoneditor-expand-all::before{
content: "\f424";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-collapse-all::before{
content: "\f422";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-redo::before {
content: "\f01e";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-undo::before {
content: "\f0e2";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-format::before {
content: "\f03c";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-compact::before {
content: "\f066";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-sort::before {
content: "\f160";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-repair::before {
content: "\f0ad";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-transform::before {
content: "\f0b0";
font-weight: 600 !important;
}
/* Undo redo buttons */
.jsoneditor-menu>.jsoneditor-modes>button:disabled,
.jsoneditor-menu>button:disabled {
color:$color-fg !important;
opacity: $btn-disabled-opacity;
border: thin solid;
border-color:$color-gray;
border-radius: $border-radius;
background-color:$btn-primary-icon-bg !important;
}
/* Mode drop-down */
.jsoneditor-menu>.jsoneditor-modes>button,{
font-family: $font-family-primary !important;
font-size: $font-size-base !important;
line-height: $line-height-base !important;
background-image:none !important;
font-weight: 600 !important;
border-radius: $border-radius;
border-color:$color-gray;
opacity: 1;
background-color:$btn-primary-icon-bg;
color: $color-fg;
font-weight: normal !important;
}
/* Mode drop-down options */
.jsoneditor-contextmenu .jsoneditor-menu button,
.jsoneditor-contextmenu .jsoneditor-separator {
font-family: $font-family-primary !important;
font-size: $font-size-base !important;
background-color: $color-bg !important;
color: $color-fg !important;
border: none;
}
/* Drop-down hovered*/
.jsoneditor-contextmenu .jsoneditor-menu li button:hover {
background-color: $select2-container-hover-bg !important;
}
/* Drop-down selected*/
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
background-color: $color-primary !important;
color: $color-fg;
}
/* Search Box*/
.jsoneditor-frame,
.jsoneditor-search input{
color: $color-fg;
background-color: $color-bg;
}
/* Search Box results */
.jsoneditor-results {
color: $color-fg;
}
/* Ace editor Setting */
/* Ace editor numbers */
.ace-jsoneditor .ace_gutter {
background-color:$color-gray-light;
color:$color-fg;
}
/* Ace editor code background */
.ace-jsoneditor .ace_scroller {
background-color: $color-bg;
}
// .ace-jsoneditor .ace_scroller:read-only{
// background-color: $color-gray-lighter;
// }
/* Ace editor hide indent guide */
.ace-jsoneditor .ace_indent-guide {
background: none;
}
/* Ace editor Key names */
.ace-jsoneditor .ace_variable {
color: $color-fg !important;
}
/* Ace editorfonts */
.ace_editor,
.ace-jsoneditor *{
font-family: $font-family-editor !important;
font-size: $font-size-base !important;
line-height: $line-height-base !important;
color: $color-fg;
}
.ace-jsoneditor.ace_editor {
font-family: $font-family-editor !important;
font-size: $font-size-base !important;
line-height: $line-height-base !important;
color: $color-fg;
background-color:$color-bg !important;
}
/* /* font setting all other mode */
/* form, tree, code, preview, schema-error */
div.jsoneditor-default,
div.jsoneditor-field,
div.jsoneditor-value,
div.jsoneditor textarea,
div.jsoneditor td,
div.jsoneditor-readonly,
.jsoneditor-popover{
font-family: $font-family-primary !important;
font-size: $font-size-base !important;
line-height: $line-height-base !important;
color: $color-fg;
background-color:$color-bg;
}
pre.jsoneditor-preview{
background-color: $color-gray-lighter !important;
}
/* Hilight selected values in tree/form modes */
div.jsoneditor-field.jsoneditor-highlight,
div.jsoneditor-field[contenteditable=true]:focus,
div.jsoneditor-field[contenteditable=true]:hover,
div.jsoneditor-value.jsoneditor-highlight,
div.jsoneditor-value[contenteditable=true]:focus,
div.jsoneditor-value[contenteditable=true]:hover
{
background-color: $color-primary-light;
border: 1px solid $color-primary-light;
border-radius: $border-radius;
}
/* Hi-light line in code */
.ace-jsoneditor .ace_marker-layer .ace_active-line {
background-color: $color-primary-light;
border: 1px solid $color-primary-light;
border-radius: $border-radius;
}
.ace-jsoneditor .ace_gutter-active-line {
background-color:$color-gray-light;
}
.ace-jsoneditor .ace_marker-layer .ace_selected-word {
border: 1px solid $color-primary-light;
}
.ace-jsoneditor .ace_marker-layer .ace_selection {
background: $color-primary-light;
}
/* Nested DD*/
.jsoneditor-contextmenu .jsoneditor-icon {
background-image:none;
}
.jsoneditor-contextmenu .jsoneditor-text {
padding:4px 4px 4px 5px;
}
.jsoneditor-contextmenu .jsoneditor-menu{
border: 1px solid $border-color;
background: $color-bg !important;
color: $color-fg !important;
}
.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand, {
height:0px;
background-color: $color-gray-light !important;
}
.jsoneditor-contextmenu .jsoneditor-menu li ul {
padding: 0;
border: 1px solid $border-color;
}
.jsoneditor-contextmenu .jsoneditor-separator {
height: 0;
border-top: 1px solid $border-color;
padding-top: 5px;
margin-top: 5px;
}
/* Status Bar */
.jsoneditor-statusbar {
background-color: $color-gray-light !important;
color: $color-primary-light-fg !important;
border-top: 1px solid $border-color;
}
/* Validation Bar */
.jsoneditor .jsoneditor-validation-errors {
background-color:$sql-history-error-bg !important;
color:$color-fg;
border: 1px solid $color-danger;
}
.jsoneditor .jsoneditor-text-errors {
width: 100%;
border-collapse: collapse;
border-top: 1px solid $color-gray;;
}
.jsoneditor .jsoneditor-text-errors tr,
.jsoneditor .jsoneditor-text-errors td,
.jsoneditor .jsoneditor-text-errors td pre,
.jsoneditor .jsoneditor-text-errors tr.parse-error {
background-color: $color-danger-lighter !important;
color:$color-fg;
}
/* Transform & sort */
/* Header */
.jsoneditor-modal .pico-modal-header {
font-family: $font-family-primary !important;
font-size: $font-size-base !important;
font-weight: bold;
background: $color-primary;
color: $white;
}
/* Body */
.pico-content{
background-color: $color-gray-light !important;
}
/* Disable links */
.jsoneditor-modal a {
color: $color-fg !important;
pointer-events: none;
}
/* Hide links */
.jsoneditor-modal br{
}
/* Fields */
.jsoneditor-modal,
.jsoneditor-modal #query,
.jsoneditor-modal input,
.jsoneditor-modal input[type=text],
.jsoneditor-modal input[type=text]:focus,
.jsoneditor-modal option,
.jsoneditor-modal select,
.jsoneditor-modal table td,
.jsoneditor-modal table th,
.jsoneditor-modal textarea, {
color: $color-fg !important;
background-color: $color-bg !important;
font-size: $font-size-base !important;
font-family: $font-family-primary !important;
padding: 4px;
border-color:$input-border-color;
}
/* Ascending descending buttons */
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
color: $color-fg !important;
background-color: $color-primary !important;
border-color: $color-primary !important;
}
.jsoneditor-modal input[type=button]{
color: $color-fg;
background-color: $color-bg;
}
/* OK Button */
.jsoneditor-modal input[type=submit] {
color: $btn-primary-color !important;
border-color: $color-primary !important;
background-color: $color-primary !important;
}
.jsoneditor-modal .jsoneditor-jmespath-label {
color: $color-fg;
font-weight: bold;
}
.selectr-option,
.selectr-options-container {
color: $color-fg;
background-color: $color-bg;
}
.selectr-option.selected {
background-color: $color-primary !important;
color: $color-fg !important;
}
.selectr-option.active {
color: $color-fg !important;
background-color: $color-gray-light !important;
}
.jsoneditor-modal .selectr-selected{
color: $color-fg;
background-color: $color-bg;
}
.jsoneditor-modal .selectr-selected .selectr-tag {
color: $color-fg !important;
background-color: $color-primary !important;
border: 1px solid $color-primary;
}
.jsoneditor-modal .selectr-selected .selectr-tag-remove::before{
color: $color-primary !important;
}

1
web/pgadmin/static/scss/pgadmin.scss
View File

@@ -32,3 +32,4 @@ $theme-colors: (
@import 'bootstrap4-toggle.overrides';
@import 'pickr.overrides';
@import 'tippy.overrides';
@import 'jsoneditor.overrides';

14
web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
View File

@@ -300,8 +300,22 @@ li.CodeMirror-hint-active {
& .pg-text-invalid {
background: $color-danger-lighter;
}
& #pg-json-editor {
min-width:525px;
min-height:280px;
height:295px;
width:550px;
border: $panel-border;
outline:0;
resize: both;
overflow:auto
}
}
.pg_buttons {
padding-top: 3px;
}
.sql-editor-message {
white-space:pre-wrap;
font-family: $font-family-editor;

2
web/regression/feature_utils/locators.py
View File

@@ -183,6 +183,8 @@ class QueryToolLocators:
row_editor_text_area_css = ".pg-text-editor > textarea"
json_editor_text_area_css = "div.ace_layer.ace_text-layer"
text_editor_ok_btn_css = ".btn.btn-primary.long_text_editor"
btn_load_file_css = "#btn-load-file"

1
web/webpack.shim.js
View File

@@ -143,6 +143,7 @@ var webpackShimConfig = {
'dropzone': path.join(__dirname, './node_modules/dropzone/dist/dropzone'),
'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
'json-bignumber': path.join(__dirname, './node_modules/json-bignumber/dist/JSONBigNumber.min'),
'jsoneditor': path.join(__dirname, './node_modules/jsoneditor/dist/jsoneditor.min'),
'snap.svg': path.join(__dirname, './node_modules/snapsvg-cjs/dist/snap.svg-cjs'),
'color-picker': path.join(__dirname, './node_modules/@simonwep/pickr/dist/pickr.es5.min'),
'mousetrap': path.join(__dirname, './node_modules/mousetrap'),

64
web/yarn.lock
View File

@@ -1214,6 +1214,11 @@
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
"@sphinxxxx/color-conversion@^2.2.2":
version "2.2.2"
resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
"@tippyjs/react@^4.2.0":
version "4.2.5"
resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.5.tgz#9b5837db93a1cac953962404df906aef1a18e80d"
@@ -1500,6 +1505,11 @@ accepts@~1.3.4:
mime-types "~2.1.24"
negotiator "0.6.2"
ace-builds@^1.4.12:
version "1.4.12"
resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7"
integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg==
"acitree@git+https://github.com/imsurinder90/jquery-aciTree.git#rc.7":
version "4.5.0-rc.7"
resolved "git+https://github.com/imsurinder90/jquery-aciTree.git#24dcd7536a008abe25da6adb7bfde8eeb53892f1"
@@ -1568,7 +1578,7 @@ ajv@^5.0.0:
fast-json-stable-stringify "^2.0.0"
json-schema-traverse "^0.3.0"
ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.12.6:
version "6.12.6"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -5443,6 +5453,11 @@ jasmine-enzyme@^7.1.2:
dependencies:
enzyme-matchers "^7.1.2"
javascript-natural-sort@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
integrity sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k=
jest-worker@^26.3.0, jest-worker@^26.6.2:
version "26.6.2"
resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -5452,6 +5467,11 @@ jest-worker@^26.3.0, jest-worker@^26.6.2:
merge-stream "^2.0.0"
supports-color "^7.0.0"
jmespath@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
jquery-contextmenu@^2.6.4, jquery-contextmenu@^2.9.2:
version "2.9.2"
resolved "https://registry.yarnpkg.com/jquery-contextmenu/-/jquery-contextmenu-2.9.2.tgz#f9dc362e45871dda2e50fa45de2243e917446ced"
@@ -5559,6 +5579,11 @@ json-schema@0.2.3:
resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
json-source-map@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/json-source-map/-/json-source-map-0.6.1.tgz#e0b1f6f4ce13a9ad57e2ae165a24d06e62c79a0f"
integrity sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==
json-stable-stringify-without-jsonify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
@@ -5583,6 +5608,21 @@ json5@^2.1.2:
dependencies:
minimist "^1.2.5"
jsoneditor@^9.5.1:
version "9.5.3"
resolved "https://registry.yarnpkg.com/jsoneditor/-/jsoneditor-9.5.3.tgz#a44cce2556a21e13db360865ed4d4224908df3da"
integrity sha512-KW893jRnh/s41n7Is4aNFg5Gh2h4HhE9W8L2rP1Okue3aW5Aov9SRqXs/5rmAABmlBGx1yzyPMlj4Oqw5nXQcQ==
dependencies:
ace-builds "^1.4.12"
ajv "^6.12.6"
javascript-natural-sort "^0.7.1"
jmespath "^0.15.0"
json-source-map "^0.6.1"
jsonrepair "^2.2.1"
mobius1-selectr "^2.4.13"
picomodal "^3.0.0"
vanilla-picker "^2.11.2"
jsonfile@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -5595,6 +5635,11 @@ jsonparse@^1.2.0:
resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
jsonrepair@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/jsonrepair/-/jsonrepair-2.2.1.tgz#7c6257c36550a310150c41ab7d5d4cab71828456"
integrity sha512-o9Je8TceILo872uQC9fIBJm957j1Io7z8Ca1iWIqY6S5S65HGE9XN7XEEw7+tUviB9Vq4sygV89MVTxl+rhZyg==
jsprim@^1.2.2:
version "1.4.1"
resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -6212,6 +6257,11 @@ ml-matrix@^6.5.0:
dependencies:
ml-array-rescale "^1.3.5"
mobius1-selectr@^2.4.13:
version "2.4.13"
resolved "https://registry.yarnpkg.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz#0019dfd9f984840d6e40f70683ab3ec78ce3b5df"
integrity sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw==
module-deps@^6.2.3:
version "6.2.3"
resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-6.2.3.tgz#15490bc02af4b56cf62299c7c17cba32d71a96ee"
@@ -6849,6 +6899,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
picomodal@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/picomodal/-/picomodal-3.0.0.tgz#facd30f4fbf34a809c1e04ea525f004f399c0b82"
integrity sha1-+s0w9PvzSoCcHgTqUl8ATzmcC4I=
pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -8972,6 +9027,13 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"
vanilla-picker@^2.11.2:
version "2.11.2"
resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.11.2.tgz#eaa24efa68c27e7ee9e0776df55d6913b855f133"
integrity sha512-2cP7LlUnxHxwOf06ReUVtd2RFJMnJGaxN2s0p8wzBH3In5b00Le7fFZ9VrIoBE0svZkSq/BC/Pwq/k/9n+AA2g==
dependencies:
"@sphinxxxx/color-conversion" "^2.2.2"
varstream@^0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/varstream/-/varstream-0.3.2.tgz#18ac6494765f3ff1a35ad9a4be053bec188a5de1"