table & view preview mode switch

packages/web/src/tabs/SqlObjectTab.svelte

@@ -29,6 +29,9 @@
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
   import SelectField from '../forms/SelectField.svelte';
   import { changeTab } from '../utility/common';
+  import ToolStripButton from '../buttons/ToolStripButton.svelte';
+  import openNewTab from '../utility/openNewTab';
+  import { template } from 'lodash';
 
   export let tabid;
   export let appObjectData;
@@ -109,5 +112,67 @@
         }));
       }}
     />
+    {#if objectTypeField == 'tables' || objectTypeField == 'views' || objectTypeField == 'matviews'}
+      <ToolStripButton
+        icon="icon structure"
+        on:click={() => {
+          openNewTab({
+            title: pureName,
+            icon: 'img table-structure',
+            tabComponent: 'TableStructureTab',
+            tabPreviewMode: true,
+            props: {
+              schemaName,
+              pureName,
+              conid,
+              database,
+              objectTypeField,
+              defaultActionId: 'openStructure',
+            },
+          });
+        }}>Open structure</ToolStripButton
+      >
+      <ToolStripButton
+        icon="icon table"
+        on:click={() => {
+          openNewTab({
+            title: pureName,
+            icon: objectTypeField == 'tables' ? 'img table' : 'img view',
+            tabComponent: objectTypeField == 'tables' ? 'TableDataTab' : 'ViewDataTab',
+            objectTypeField,
+            tabPreviewMode: true,
+            props: {
+              schemaName,
+              pureName,
+              conid,
+              database,
+              objectTypeField,
+              defaultActionId: 'openTable',
+            },
+          });
+        }}>Open data</ToolStripButton
+      >
+    {/if}
+    {#each getSupportedScriptTemplates(appObjectData.objectTypeField) as template}
+      <ToolStripButton
+        icon="img sql-file"
+        on:click={() => {
+          openNewTab({
+            title: 'Query #',
+            icon: 'img sql-file',
+            tabComponent: 'QueryTab',
+            objectTypeField: appObjectData.objectTypeField,
+            props: {
+              conid,
+              database,
+              schemaName,
+              pureName,
+              objectTypeField,
+              initialArgs: { scriptTemplate: template.scriptTemplate },
+            },
+          });
+        }}>{template.label}</ToolStripButton
+      >
+    {/each}
   </svelte:fragment>
 </ToolStripContainer>

packages/web/src/tabs/TableDataTab.svelte

@@ -298,17 +298,39 @@
           title: pureName,
           icon: 'img table-structure',
           tabComponent: 'TableStructureTab',
+          tabPreviewMode: true,
           props: {
             schemaName,
             pureName,
             conid,
             database,
             objectTypeField: 'tables',
+            defaultActionId: 'openStructure',
           },
         });
       }}>Open structure</ToolStripButton
     >
 
+    <ToolStripButton
+      icon="img sql-file"
+      on:click={() => {
+        openNewTab({
+          title: pureName,
+          icon: 'img sql-file',
+          tabComponent: 'SqlObjectTab',
+          tabPreviewMode: true,
+          props: {
+            schemaName,
+            pureName,
+            conid,
+            database,
+            objectTypeField: 'tables',
+            defaultActionId: 'showSql',
+          },
+        });
+      }}>Table SQL</ToolStripButton
+    >
+
     <ToolStripButton
       icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
       on:click={() => collapsedLeftColumnStore.update(x => !x)}>View columns</ToolStripButton

packages/web/src/tabs/TableStructureTab.svelte

@@ -175,24 +175,43 @@
     <ToolStripCommandButton command="tableEditor.addColumn" />
     <ToolStripCommandButton command="tableEditor.addIndex" hideDisabled />
 
-    {#if objectTypeField == 'tables'}
+    <ToolStripButton
-      <ToolStripButton
+      icon={'icon table'}
-        icon="icon table"
+      on:click={() => {
-        on:click={() => {
+        openNewTab({
-          openNewTab({
+          title: pureName,
-            title: pureName,
+          icon: objectTypeField == 'tables' ? 'img table' : 'img view',
-            icon: 'img table',
+          tabComponent: objectTypeField == 'tables' ? 'TableDataTab' : 'ViewDataTab',
-            tabComponent: 'TableDataTab',
+          tabPreviewMode: true,
-            props: {
+          props: {
-              schemaName,
+            schemaName,
-              pureName,
+            pureName,
-              conid,
+            conid,
-              database,
+            database,
-              objectTypeField: 'tables',
+            objectTypeField,
-            },
+            defaultActionId: 'openTable',
-          });
+          },
-        }}>Open data</ToolStripButton
+        });
-      >
+      }}>Open data</ToolStripButton
-    {/if}
+    >
+    <ToolStripButton
+      icon="img sql-file"
+      on:click={() => {
+        openNewTab({
+          title: pureName,
+          icon: 'img sql-file',
+          tabComponent: 'SqlObjectTab',
+          tabPreviewMode: true,
+          props: {
+            schemaName,
+            pureName,
+            conid,
+            database,
+            objectTypeField,
+            defaultActionId: 'showSql',
+          },
+        });
+      }}>Show SQL</ToolStripButton
+    >
   </svelte:fragment>
 </ToolStripContainer>

packages/web/src/tabs/ViewDataTab.svelte

@@ -18,16 +18,24 @@
   import SqlFormView from '../formview/SqlFormView.svelte';
   import { getBoolSettingsValue } from '../settings/settingsTools';
   import { extensions } from '../stores';
-  import { useConnectionInfo, useDatabaseInfo, useDatabaseServerVersion, useViewInfo } from '../utility/metadataLoaders';
+  import {
+    useConnectionInfo,
+    useDatabaseInfo,
+    useDatabaseServerVersion,
+    useViewInfo,
+  } from '../utility/metadataLoaders';
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import useGridConfig from '../utility/useGridConfig';
   import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
+  import ToolStripButton from '../buttons/ToolStripButton.svelte';
+  import openNewTab from '../utility/openNewTab';
 
   export let tabid;
   export let conid;
   export let database;
   export let schemaName;
   export let pureName;
+  export let objectTypeField;
 
   $: connection = useConnectionInfo({ conid });
   $: viewInfo = useViewInfo({ conid, database, schemaName, pureName });
@@ -76,6 +84,46 @@
     <svelte:fragment slot="toolstrip">
       <ToolStripCommandButton command="dataGrid.refresh" />
       <ToolStripExportButton {quickExportHandlerRef} />
+
+      <ToolStripButton
+        icon="icon structure"
+        on:click={() => {
+          openNewTab({
+            title: pureName,
+            icon: 'img table-structure',
+            tabComponent: 'TableStructureTab',
+            tabPreviewMode: true,
+            props: {
+              schemaName,
+              pureName,
+              conid,
+              database,
+              objectTypeField,
+              defaultActionId: 'openStructure',
+            },
+          });
+        }}>Open structure</ToolStripButton
+      >
+
+      <ToolStripButton
+        icon="img sql-file"
+        on:click={() => {
+          openNewTab({
+            title: pureName,
+            icon: 'img sql-file',
+            tabComponent: 'SqlObjectTab',
+            tabPreviewMode: true,
+            props: {
+              schemaName,
+              pureName,
+              conid,
+              database,
+              objectTypeField,
+              defaultActionId: 'showSql',
+            },
+          });
+        }}>View SQL</ToolStripButton
+      >
     </svelte:fragment>
   </ToolStripContainer>
 {/if}

packages/web/src/utility/applyScriptTemplate.ts

@@ -138,4 +138,6 @@ export function getSupportedScriptTemplates(objectTypeField: string): { label: s
         },
       ];
   }
+
+  return [];
 }