json tab, json dark mode style fix

packages/web/src/celldata/JsonCellView.svelte

@@ -49,17 +49,4 @@
     right: 0;
     bottom: 0;
   }
-
-  :global(.theme-type-dark) .inner {
-    --json-tree-string-color: #ffc5c5;
-    --json-tree-symbol-color: #ffc5c5;
-    --json-tree-boolean-color: #b6c3ff;
-    --json-tree-function-color: #b6c3ff;
-    --json-tree-number-color: #bfbdff;
-    --json-tree-label-color: #e9aaed;
-    --json-tree-arrow-color: #d4d4d4;
-    --json-tree-null-color: #dcdcdc;
-    --json-tree-undefined-color: #dcdcdc;
-    --json-tree-date-color: #dcdcdc;
-  }
 </style>

packages/web/src/datagrid/DataGridCore.svelte

@@ -107,6 +107,14 @@
     onClick: () => getCurrentDataGrid().editJsonDocument(),
   });
 
+  registerCommand({
+    id: 'dataGrid.viewJsonDocument',
+    category: 'Data grid',
+    name: 'View row as JSON document',
+    testEnabled: () => getCurrentDataGrid()?.viewJsonEnabled(),
+    onClick: () => getCurrentDataGrid().viewJsonDocument(),
+  });
+
   registerCommand({
     id: 'dataGrid.copyJsonDocument',
     category: 'Data grid',
@@ -248,9 +256,9 @@
   import CollapseButton from './CollapseButton.svelte';
   import GenerateSqlFromDataModal from '../modals/GenerateSqlFromDataModal.svelte';
   import { showModal } from '../modals/modalTools';
-  import { updateStatuBarInfo } from '../widgets/StatusBar.svelte';
   import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
   import { findCommand } from '../commands/runCommand';
+  import { openJsonDocument } from '../tabs/JsonTab.svelte';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -454,12 +462,18 @@
     );
   }
 
-  export function editJsonEnabled() {
+  export function viewJsonEnabled() {
-    return grider.editable && isDynamicStructure && _.uniq(selectedCells.map(x => x[0])).length == 1;
+    return isDynamicStructure && _.uniq(selectedCells.map(x => x[0])).length == 1;
   }
 
-  export function copyJsonEnabled() {
+  export function viewJsonDocument() {
-    return isDynamicStructure && _.uniq(selectedCells.map(x => x[0])).length == 1;
+    const rowIndex = selectedCells[0][0];
+    const json = grider.getRowData(rowIndex);
+    openJsonDocument(json);
+  }
+
+  export function editJsonEnabled() {
+    return grider.editable && isDynamicStructure && _.uniq(selectedCells.map(x => x[0])).length == 1;
   }
 
   export function editJsonDocument() {
@@ -467,6 +481,10 @@
     editJsonRowDocument(grider, rowIndex);
   }
 
+  export function copyJsonEnabled() {
+    return isDynamicStructure && _.uniq(selectedCells.map(x => x[0])).length == 1;
+  }
+
   export function copyJsonDocument() {
     const rowIndex = selectedCells[0][0];
     const rowData = grider.getRowData(rowIndex);
@@ -1164,8 +1182,8 @@
     { placeTag: 'switch' },
     { divider: true },
     { placeTag: 'save' },
-    { command: 'dataGrid.revertRowChanges' },
+    { command: 'dataGrid.revertRowChanges', hideDisabled: true },
-    { command: 'dataGrid.revertAllChanges' },
+    { command: 'dataGrid.revertAllChanges', hideDisabled: true },
     { command: 'dataGrid.deleteSelectedRows' },
     { command: 'dataGrid.insertNewRow' },
     { command: 'dataGrid.setNull' },
@@ -1175,9 +1193,10 @@
     { command: 'dataGrid.hideColumn' },
     { command: 'dataGrid.filterSelected' },
     { command: 'dataGrid.clearFilter' },
-    { command: 'dataGrid.undo' },
+    { command: 'dataGrid.undo', hideDisabled: true },
-    { command: 'dataGrid.redo' },
+    { command: 'dataGrid.redo', hideDisabled: true },
     { command: 'dataGrid.editJsonDocument', hideDisabled: true },
+    { command: 'dataGrid.viewJsonDocument', hideDisabled: true },
     { divider: true },
     { placeTag: 'export' },
     { command: 'dataGrid.generateSqlFromData' },

packages/web/src/icons/FontIcon.svelte

@@ -123,6 +123,7 @@
 
     'img free-table': 'mdi mdi-table color-icon-green',
     'img macro': 'mdi mdi-hammer-wrench',
+    'img json': 'mdi mdi-code-json icon-magenta',
 
     'img database': 'mdi mdi-database color-icon-gold',
     'img sqlite-database': 'mdi mdi-database color-icon-blue',

packages/web/src/jsontree/JSONTree.svelte

@@ -23,6 +23,18 @@
 </ul>
 
 <style>
+  :global(.theme-type-dark) ul {
+    --json-tree-string-color: #ffc5c5;
+    --json-tree-symbol-color: #ffc5c5;
+    --json-tree-boolean-color: #b6c3ff;
+    --json-tree-function-color: #b6c3ff;
+    --json-tree-number-color: #bfbdff;
+    --json-tree-label-color: #e9aaed;
+    --json-tree-arrow-color: #d4d4d4;
+    --json-tree-null-color: #dcdcdc;
+    --json-tree-undefined-color: #dcdcdc;
+    --json-tree-date-color: #dcdcdc;
+  }
   ul {
     --string-color: var(--json-tree-string-color, #cb3f41);
     --symbol-color: var(--json-tree-symbol-color, #cb3f41);

packages/web/src/query/useEditorData.ts

@@ -72,7 +72,7 @@ export default function useEditorData({ tabid, reloadToken = 0, loadFromArgs = n
         if (onInitialData) onInitialData(initFallback);
         value = initFallback;
         // move to local forage
-        await localforage.setItem(localStorageKey, initFallback);
+        await localforage.setItem(localStorageKey, JSON.stringify(initFallback));
         localStorage.removeItem(localStorageKey);
       } else {
         const init = await localforage.getItem(localStorageKey);

packages/web/src/tabs/JsonTab.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" context="module">
+  export function openJsonDocument(json, title = 'JSON') {
+    openNewTab(
+      {
+        title,
+        icon: 'img json',
+        tabComponent: 'JsonTab',
+      },
+      { editor: json }
+    );
+  }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import JSONTree from '../jsontree/JSONTree.svelte';
+  import useEditorData from '../query/useEditorData';
+  import openNewTab from '../utility/openNewTab';
+
+  export let selection;
+  export let showWholeRow = false;
+  export let tabid;
+
+  let json = null;
+  let error = null;
+
+  useEditorData({
+    tabid,
+    onInitialData: value => {
+      json = value;
+    },
+  });
+</script>
+
+<div class="outer">
+  <div class="inner">
+    <JSONTree value={json} expanded />
+  </div>
+</div>
+
+<style>
+  .outer {
+    flex: 1;
+    position: relative;
+  }
+  .inner {
+    overflow: scroll;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+</style>

packages/web/src/tabs/index.js

@@ -16,6 +16,7 @@ import * as QueryDesignTab from './QueryDesignTab.svelte';
 import * as CommandListTab from './CommandListTab.svelte';
 import * as YamlEditorTab from './YamlEditorTab.svelte';
 import * as CompareModelTab from './CompareModelTab.svelte';
+import * as JsonTab from './JsonTab.svelte';
 
 export default {
   TableDataTab,
@@ -36,4 +37,5 @@ export default {
   CommandListTab,
   YamlEditorTab,
   CompareModelTab,
+  JsonTab,
 };