Merge pull request #2965 from beekeeper-studio/fix/json-viewer

fix json viewer theme, spacing, and empty state

apps/studio/src/assets/styles/app/sidebar/base.scss

@@ -1,3 +1,4 @@
+@use 'json-viewer-sidebar.scss';
 @import 'sidebar';
 @import 'secondary-sidebar';
 @import 'global';

apps/studio/src/assets/styles/app/sidebar/json-viewer-sidebar.scss

@@ -0,0 +1,7 @@
+.json-viewer-sidebar {
+  height: 100%;
+
+  .text-editor {
+    padding-left: 0.8rem;
+  }
+}

apps/studio/src/assets/styles/app/sidebar/secondary-sidebar.scss

@@ -10,6 +10,7 @@
       padding: 0;
       min-height: 0px;
       color: $text;
+      z-index: 0;
       --selection-indicator-height: 0;
       --ripple-background: none;
 

apps/studio/src/assets/styles/components/_all.scss

@@ -5,5 +5,5 @@
 @import "grouped-tables.scss";
 @import "dropzone.scss";
 @import "text-editor.scss";
-@import "detail-view-sidebar.scss";
+@import "json-viewer.scss";
 @import './upsell/upsell-content.scss';

apps/studio/src/assets/styles/components/json-viewer.scss

@@ -42,6 +42,10 @@
       --checkmark-margin: 0 0.3rem 0 0;
       --checkmark-height: 1.4rem;
       --checkmark-width: 1.4rem;
+
+      &:not([togglable]) {
+        padding-left: calc(var(--checkmark-width) + 0.45rem);
+      }
     }
 
     .filter-wrap {
@@ -74,7 +78,7 @@
     height: auto;
     padding-left: 1rem;
 
-    &, .CodeMirror-gutters {
+    &.CodeMirror, .CodeMirror-gutters {
       background-color: $theme-bg !important;
     }
 
@@ -155,7 +159,18 @@
   flex-direction: column;
   padding-bottom: 0.5rem;
 
-  .text-editor {
-    flex: 1;
+  .text-editor-wrapper {
+    flex: 1 1 auto;
+    height: 100%;
+    position:relative;
+
+    .text-editor {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 100%
+    }
   }
 }

apps/studio/src/components/sidebar/JsonViewer.vue

@@ -35,7 +35,7 @@
               v-for="option in menuOptions"
               :key="option.name"
               :toggled="option.checked"
-              togglable
+              :togglable="typeof option.checked !== 'undefined'"
               @click.prevent="option.handler"
             >
               <x-label>{{ option.name }}</x-label>
@@ -44,20 +44,22 @@
         </x-button>
       </div>
     </div>
-    <text-editor
-      :fold-gutter="true"
-      :fold-all="foldAll"
-      :unfold-all="unfoldAll"
-      :value="text"
-      :mode="mode"
-      :force-initialize="reinitializeTextEditor + (reinitialize ?? 0)"
-      :markers="markers"
-      :plugins="textEditorPlugins"
-      :line-wrapping="wrapText"
-      :line-gutters="lineGutters"
-      :line-numbers="false"
-      :extra-keybindings="disableReplaceKeybindings"
-    />
+    <div class="text-editor-wrapper">
+      <text-editor
+        :fold-gutter="true"
+        :fold-all="foldAll"
+        :unfold-all="unfoldAll"
+        :value="text"
+        :mode="mode"
+        :force-initialize="reinitializeTextEditor + (reinitialize ?? 0)"
+        :markers="markers"
+        :plugins="textEditorPlugins"
+        :line-wrapping="wrapText"
+        :line-gutters="lineGutters"
+        :line-numbers="false"
+        :extra-keybindings="disableReplaceKeybindings"
+      />
+    </div>
     <div class="empty-state" v-show="empty">
       Open a table to view its data
     </div>
@@ -144,6 +146,9 @@ export default Vue.extend({
       return { name: "javascript", json: true };
     },
     text() {
+      if (this.empty) {
+        return ""
+      }
       return this.sourceMap.json
     },
     debouncedFilter: {

apps/studio/src/components/sidebar/JsonViewerSidebar.vue

@@ -1,16 +1,18 @@
 <template>
-  <json-viewer
-    :value="value"
-    :data-id="dataId"
-    :hidden="hidden"
-    :expandable-paths="expandablePaths"
-    :reinitialize="reinitializeJsonViewer"
-    :signs="signs"
-    :binary-encoding="$bksConfig.ui.general.binaryEncoding"
-    :editable-paths="editablePaths"
-    @bks-json-value-change="handleJsonValueChange"
-    @expandPath="handleExpandPath"
-  />
+  <div class="json-viewer-sidebar">
+    <json-viewer
+      :value="value"
+      :data-id="dataId"
+      :hidden="hidden"
+      :expandable-paths="expandablePaths"
+      :reinitialize="reinitializeJsonViewer"
+      :signs="signs"
+      :binary-encoding="$bksConfig.ui.general.binaryEncoding"
+      :editable-paths="editablePaths"
+      @bks-json-value-change="handleJsonValueChange"
+      @expandPath="handleExpandPath"
+    />
+  </div>
 </template>
 
 <script lang="ts">

apps/studio/src/components/tableview/TableTable.vue

@@ -1005,8 +1005,6 @@ export default Vue.extend({
 
       this.tableFilters = getFilters(this.tab) || [createTableFilter(this.table.columns?.[0]?.columnName)]
       this.filters = normalizeFilters(this.tableFilters || [])
-
-      this.updateSplit()
     },
     rowActionsMenu(range: RangeComponent) {
       const rowRangeLabel = `${range.getTopEdge() + 1} - ${range.getBottomEdge() + 1}`