SYNC: cell data widget moved

packages/web/src/datagrid/DataGrid.svelte

@@ -70,6 +70,7 @@
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import { __t, _t } from '../translations';
   import { isProApp } from '../utility/proTools';
+  import CellDataWidget from '../widgets/CellDataWidget.svelte';
 
   export let config;
   export let setConfig;
@@ -91,6 +92,7 @@
   export let hasMultiColumnFilter = false;
   export let setLoadedRows = null;
   export let hideGridLeftColumn = false;
+  export let cellDataViewVisible = true;
 
   export let onPublishedCellsChanged;
 
@@ -107,6 +109,7 @@
   setContext('macroValues', macroValues);
 
   let managerSize;
+  let cellViewWidth;
   const collapsedLeftColumnStore =
     getContext('collapsedLeftColumnStore') || writable(getLocalStorage('dataGrid_collapsedLeftColumn', false));
 
@@ -157,6 +160,7 @@
   );
 
   $: if (managerSize) setLocalStorage('dataGridManagerWidth', managerSize);
+  $: if (cellViewWidth) setLocalStorage('dataGridCellViewWidth', cellViewWidth);
 
   function getInitialManagerSize() {
     const width = getLocalStorage('dataGridManagerWidth');
@@ -165,6 +169,14 @@
     }
     return '300px';
   }
+
+  function getInitialCellViewWidth() {
+    const width = getLocalStorage('dataGridCellViewWidth');
+    if (_.isNumber(width) && width > 30 && width < 500) {
+      return width;
+    }
+    return 300;
+  }
 </script>
 
 <HorizontalSplitter
@@ -226,6 +238,12 @@
   </div>
   <svelte:fragment slot="2">
     <VerticalSplitter initialValue="70%" isSplitter={!!$selectedMacro && !isFormView && showMacros}>
+      <svelte:fragment slot="1">
+        <HorizontalSplitter
+          initialSizeRight={getInitialCellViewWidth()}
+          onChangeSize={value => (cellViewWidth = value)}
+          isSplitter={cellDataViewVisible && !isFormView}
+        >
           <svelte:fragment slot="1">
             {#if isFormView}
               <svelte:component this={formViewComponent} {...$$props} />
@@ -252,6 +270,15 @@
               />
             {/if}
           </svelte:fragment>
+          <svelte:fragment slot="2">
+            <CellDataWidget
+              onClose={() => {
+                cellDataViewVisible = false;
+              }}
+            />
+          </svelte:fragment>
+        </HorizontalSplitter>
+      </svelte:fragment>
 
       <svelte:fragment slot="2">
         {#if $selectedMacro}

packages/web/src/widgets/CellDataWidget.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" context="module">
-  import { isWktGeometry } from 'dbgate-tools';
 
   const formats = [
     {
@@ -110,9 +109,9 @@
   import XmlCellView from '../celldata/XmlCellView.svelte';
   import { _t } from '../translations';
 
-  let selectedFormatType = 'autodetect';
+  export let onClose;
 
-  export let selection = undefined;
+  let selectedFormatType = 'autodetect';
 
   $: autodetectFormatType = autodetect(selection);
   $: autodetectFormat = formats.find(x => x.type == autodetectFormatType);
@@ -124,7 +123,7 @@
 </script>
 
 <div class="wrapper">
-  <WidgetTitle>{_t('cellDataWidget.title', { defaultMessage: "Cell data view" })}</WidgetTitle>
+  <WidgetTitle {onClose}>{_t('cellDataWidget.title', { defaultMessage: "Cell data view" })}</WidgetTitle>
   <div class="main">
     <div class="toolbar">
       Format:<span>&nbsp;</span>

packages/web/src/widgets/WidgetContainer.svelte

@@ -4,7 +4,6 @@
   import DatabaseWidget from './DatabaseWidget.svelte';
   import FilesWidget from './FilesWidget.svelte';
   import PluginsWidget from './PluginsWidget.svelte';
-  import CellDataWidget from './CellDataWidget.svelte';
   import HistoryWidget from './HistoryWidget.svelte';
   import AdminMenuWidget from './AdminMenuWidget.svelte';
   import AdminPremiumPromoWidget from './AdminPremiumPromoWidget.svelte';
@@ -29,9 +28,6 @@
 {#if $visibleSelectedWidget == 'plugins' && hasPermission('widgets/plugins')}
   <PluginsWidget />
 {/if}
-{#if $visibleSelectedWidget == 'cell-data' && hasPermission('widgets/cell-data')}
-  <CellDataWidget />
-{/if}
 {#if $visibleSelectedWidget == 'admin' && hasPermission('widgets/admin')}
   <AdminMenuWidget />
 {/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -72,11 +72,6 @@
     //   name: 'plugins',
     //   title: 'Extensions & Plugins',
     // },
-    {
-      icon: 'icon cell-data',
-      name: 'cell-data',
-      title: _t('widgets.selectedCellDataDetailView', { defaultMessage: 'Selected cell data detail view' }),
-    },
     {
       name: 'cloud-public',
       title: _t('widgets.dbgateCloud', { defaultMessage: 'DbGate Cloud' }),