secondary edit button

packages/web/src/datagrid/DataGridCell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import _ from 'lodash';
+  import _, { isPlainObject } from 'lodash';
   import ShowFormButton from '../formview/ShowFormButton.svelte';
   import { detectTypeIcon, getConvertValueMenu, isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
   import { openJsonDocument } from '../tabs/JsonTab.svelte';
@@ -84,6 +84,22 @@
         menu={() => getConvertValueMenu(value, onSetValue, editorTypes)}
       />
     {/if}
+    {#if _.isPlainObject(value)}
+      <ShowFormButton secondary icon="icon open-in-new" on:click={() => openJsonDocument(value, undefined, true)} />
+    {/if}
+    {#if _.isArray(value)}
+      <ShowFormButton
+        secondary
+        icon="icon open-in-new"
+        on:click={() => {
+          if (_.every(value, x => _.isPlainObject(x))) {
+            openJsonLinesData(value);
+          } else {
+            openJsonDocument(value, undefined, true);
+          }
+        }}
+      />
+    {/if}
   {:else if col.foreignKey && rowData && rowData[col.uniqueName] && !isCurrentCell}
     <ShowFormButton on:click={() => onSetFormView(rowData, col)} />
   {:else if col.foreignKey && isCurrentCell && onDictionaryLookup}

packages/web/src/formview/ShowFormButton.svelte

@@ -2,6 +2,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
 
   export let icon = 'icon form';
+  export let secondary = false;
 </script>
 
 <div
@@ -9,6 +10,7 @@
   on:mousedown|stopPropagation|preventDefault
   on:mouseup|stopPropagation|preventDefault
   class="showFormButtonMarker"
+  class:secondary
 >
   <FontIcon {icon} />
 </div>
@@ -23,6 +25,10 @@
     border: 1px solid var(--theme-bg-1);
   }
 
+  .secondary {
+    margin-right: 20px;
+  }
+
   div:hover {
     color: var(--theme-font-hover);
     border: var(--theme-border);