Show Data/Structure button in one place #1015

packages/web/src/icons/FontIcon.svelte

@@ -67,6 +67,7 @@
     'icon parameter': 'mdi mdi-at',
     'icon trigger': 'mdi mdi-lightning-bolt',
     'icon scheduler-event': 'mdi mdi-calendar-blank',
+    'icon arrow-link': 'mdi mdi-arrow-top-right-thick',
 
     'icon window-restore': 'mdi mdi-window-restore',
     'icon window-maximize': 'mdi mdi-window-maximize',

packages/web/src/tabs/SqlObjectTab.svelte

@@ -94,6 +94,50 @@
   {/await}
 
   <svelte:fragment slot="toolstrip">
+    {#if objectTypeField == 'tables' || objectTypeField == 'views' || objectTypeField == 'matviews'}
+      <ToolStripButton
+        icon="icon structure"
+        iconAfter="icon arrow-link"
+        on:click={() => {
+          openNewTab({
+            title: pureName,
+            icon: 'img table-structure',
+            tabComponent: 'TableStructureTab',
+            tabPreviewMode: true,
+            props: {
+              schemaName,
+              pureName,
+              conid,
+              database,
+              objectTypeField,
+              defaultActionId: 'openStructure',
+            },
+          });
+        }}>Structure</ToolStripButton
+      >
+      <ToolStripButton
+        icon="icon table"
+        iconAfter="icon arrow-link"
+        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',
+            },
+          });
+        }}>Data</ToolStripButton
+      >
+    {/if}
+
     <SelectField
       isNative
       value={scriptTemplate ?? defaultScriptTemplate}
@@ -111,47 +155,6 @@
         }));
       }}
     />
-    {#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"

packages/web/src/tabs/TableDataTab.svelte

@@ -262,6 +262,48 @@
   />
 
   <svelte:fragment slot="toolstrip">
+    <ToolStripButton
+      icon="icon structure"
+      iconAfter="icon arrow-link"
+      on:click={() => {
+        openNewTab({
+          title: pureName,
+          icon: 'img table-structure',
+          tabComponent: 'TableStructureTab',
+          tabPreviewMode: true,
+          props: {
+            schemaName,
+            pureName,
+            conid,
+            database,
+            objectTypeField: 'tables',
+            defaultActionId: 'openStructure',
+          },
+        });
+      }}>Structure</ToolStripButton
+    >
+
+    <ToolStripButton
+      icon="img sql-file"
+      iconAfter="icon arrow-link"
+      on:click={() => {
+        openNewTab({
+          title: pureName,
+          icon: 'img sql-file',
+          tabComponent: 'SqlObjectTab',
+          tabPreviewMode: true,
+          props: {
+            schemaName,
+            pureName,
+            conid,
+            database,
+            objectTypeField: 'tables',
+            defaultActionId: 'showSql',
+          },
+        });
+      }}>SQL</ToolStripButton
+    >
+
     <ToolStripCommandSplitButton
       buttonLabel={autoRefreshStarted ? `Refresh (every ${autoRefreshInterval}s)` : null}
       commands={['dataGrid.refresh', ...createAutoRefreshMenu()]}
@@ -292,46 +334,6 @@
     <ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled />
     <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: '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

@@ -170,16 +170,9 @@
       : null}
   />
   <svelte:fragment slot="toolstrip">
-    <ToolStripCommandButton
-      command="tableStructure.save"
-      buttonLabel={$editorValue?.base ? 'Alter table' : 'Create table'}
-    />
-    <ToolStripCommandButton command="tableStructure.reset" />
-    <ToolStripCommandButton command="tableEditor.addColumn" />
-    <ToolStripCommandButton command="tableEditor.addIndex" hideDisabled />
-
     <ToolStripButton
       icon={'icon table'}
+      iconAfter="icon arrow-link"
       on:click={() => {
         openNewTab({
           title: pureName,
@@ -195,10 +188,12 @@
             defaultActionId: 'openTable',
           },
         });
-      }}>Open data</ToolStripButton
+      }}>Data</ToolStripButton
     >
+
     <ToolStripButton
       icon="img sql-file"
+      iconAfter="icon arrow-link"
       on:click={() => {
         openNewTab({
           title: pureName,
@@ -214,7 +209,15 @@
             defaultActionId: 'showSql',
           },
         });
-      }}>Show SQL</ToolStripButton
+      }}>SQL</ToolStripButton
     >
+
+    <ToolStripCommandButton
+      command="tableStructure.save"
+      buttonLabel={$editorValue?.base ? 'Alter table' : 'Create table'}
+    />
+    <ToolStripCommandButton command="tableStructure.reset" />
+    <ToolStripCommandButton command="tableEditor.addColumn" />
+    <ToolStripCommandButton command="tableEditor.addIndex" hideDisabled />
   </svelte:fragment>
 </ToolStripContainer>

packages/web/src/tabs/ViewDataTab.svelte

@@ -82,11 +82,9 @@
       formViewComponent={SqlFormView}
     />
     <svelte:fragment slot="toolstrip">
-      <ToolStripCommandButton command="dataGrid.refresh" />
-      <ToolStripExportButton {quickExportHandlerRef} />
-
       <ToolStripButton
         icon="icon structure"
+        iconAfter="icon arrow-link"
         on:click={() => {
           openNewTab({
             title: pureName,
@@ -102,11 +100,12 @@
               defaultActionId: 'openStructure',
             },
           });
-        }}>Open structure</ToolStripButton
+        }}>Structure</ToolStripButton
       >
 
       <ToolStripButton
         icon="img sql-file"
+        iconAfter="icon arrow-link"
         on:click={() => {
           openNewTab({
             title: pureName,
@@ -122,8 +121,11 @@
               defaultActionId: 'showSql',
             },
           });
-        }}>View SQL</ToolStripButton
+        }}>SQL</ToolStripButton
       >
+
+      <ToolStripCommandButton command="dataGrid.refresh" />
+      <ToolStripExportButton {quickExportHandlerRef} />
     </svelte:fragment>
   </ToolStripContainer>
 {/if}