query toolbar

packages/web/src/buttons/ToolStripContainer.svelte

@@ -10,7 +10,8 @@
   .content {
     position: absolute;
     left: 0;
-    top: var(--dim-toolbar-height);
+    top: var(--dim-toolstrip-height);
+    border-top: 1px solid var(--theme-border);
     right: 0;
     bottom: 0;
     display: flex;
@@ -19,9 +20,9 @@
   .toolstrip {
     position: absolute;
     left: 0;
-    height: var(--dim-toolbar-height);
+    height: var(--dim-toolstrip-height);
     right: 0;
     display: flex;
-    background: var(--theme-bg-0);
+    background: var(--theme-bg-1);
   }
 </style>

packages/web/src/buttons/ToolStripExportButton.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" context="module">
+  import { getContext, setContext } from 'svelte';
+  import { extensions } from '../stores';
+  import { createQuickExportMenuItems } from '../utility/createQuickExportMenu';
+
+  import createRef from '../utility/createRef';
+
+  export function createQuickExportHandlerRef() {
+    const quickExportHandlerRef = createRef(null);
+    setContext('quickExportHandlerRef', quickExportHandlerRef);
+    return quickExportHandlerRef;
+  }
+
+  export function registerQuickExportHandler(handler) {
+    const quickExportHandlerRef: any = getContext('quickExportHandlerRef');
+    if (quickExportHandlerRef) {
+      quickExportHandlerRef.set(handler);
+    }
+  }
+</script>
+
+<script lang="ts">
+  import getElectron from '../utility/getElectron';
+  import ToolStripCommandButton from './ToolStripCommandButton.svelte';
+  import ToolStripDropDownButton from './ToolStripDropDownButton.svelte';
+
+  const electron = getElectron();
+
+  export let quickExportHandlerRef;
+
+  function getExportMenu() {
+    return [
+      quickExportHandlerRef?.value ? createQuickExportMenuItems($extensions, quickExportHandlerRef?.value) : null,
+      { divider: true },
+      { command: 'sqlDataGrid.export', text: 'Advanced settings' },
+    ];
+  }
+</script>
+
+{#if electron}
+  <ToolStripDropDownButton menu={getExportMenu} label="Export" icon="icon export" />
+{:else}
+  <ToolStripCommandButton command="sqlDataGrid.export" />
+{/if}

packages/web/src/datagrid/SqlDataGridCore.svelte

@@ -66,6 +66,7 @@
 <script lang="ts">
   import _ from 'lodash';
   import { getContext } from 'svelte';
+import { registerQuickExportHandler } from '../buttons/ToolStripExportButton.svelte';
 
   import registerCommand from '../commands/registerCommand';
   import ImportExportModal from '../modals/ImportExportModal.svelte';
@@ -196,8 +197,7 @@
       fmt
     );
   };
-  const setQuickExportHandler = getContext('setQuickExportHandler');
+  registerQuickExportHandler(quickExportHandler);
-  if (setQuickExportHandler) (setQuickExportHandler as any)(quickExportHandler);
 
   registerMenu(
     { command: 'sqlDataGrid.openActiveChart', tag: 'chart' },

packages/web/src/tabs/QueryTab.svelte

@@ -68,6 +68,8 @@
   import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
   import { showSnackbarError } from '../utility/snackbar';
   import { apiCall, apiOff, apiOn } from '../utility/api';
+import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
 
   export let tabid;
   export let conid;
@@ -270,52 +272,60 @@
   }
 </script>
 
-<VerticalSplitter isSplitter={visibleResultTabs}>
+<ToolStripContainer>
-  <svelte:fragment slot="1">
+  <VerticalSplitter isSplitter={visibleResultTabs}>
-    {#if driver?.dialect?.nosql}
+    <svelte:fragment slot="1">
-      <AceEditor
+      {#if driver?.dialect?.nosql}
-        mode="javascript"
+        <AceEditor
-        value={$editorState.value || ''}
+          mode="javascript"
-        splitterOptions={driver?.getQuerySplitterOptions('script')}
+          value={$editorState.value || ''}
-        menu={createMenu()}
+          splitterOptions={driver?.getQuerySplitterOptions('script')}
-        on:input={e => setEditorData(e.detail)}
+          menu={createMenu()}
-        on:focus={() => {
+          on:input={e => setEditorData(e.detail)}
-          activator.activate();
+          on:focus={() => {
-          invalidateCommands();
+            activator.activate();
-        }}
+            invalidateCommands();
-        bind:this={domEditor}
+          }}
-      />
+          bind:this={domEditor}
-    {:else}
-      <SqlEditor
-        engine={$connection && $connection.engine}
-        {conid}
-        {database}
-        splitterOptions={driver?.getQuerySplitterOptions('script')}
-        value={$editorState.value || ''}
-        menu={createMenu()}
-        on:input={e => setEditorData(e.detail)}
-        on:focus={() => {
-          activator.activate();
-          invalidateCommands();
-        }}
-        bind:this={domEditor}
-      />
-    {/if}
-  </svelte:fragment>
-  <svelte:fragment slot="2">
-    <ResultTabs tabs={[{ label: 'Messages', slot: 0 }]} {sessionId} {executeNumber}>
-      <svelte:fragment slot="0">
-        <SocketMessageView
-          eventName={sessionId ? `session-info-${sessionId}` : null}
-          on:messageClick={handleMesageClick}
-          {executeNumber}
-          showProcedure
-          showLine
         />
-      </svelte:fragment>
+      {:else}
-    </ResultTabs>
+        <SqlEditor
+          engine={$connection && $connection.engine}
+          {conid}
+          {database}
+          splitterOptions={driver?.getQuerySplitterOptions('script')}
+          value={$editorState.value || ''}
+          menu={createMenu()}
+          on:input={e => setEditorData(e.detail)}
+          on:focus={() => {
+            activator.activate();
+            invalidateCommands();
+          }}
+          bind:this={domEditor}
+        />
+      {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="2">
+      <ResultTabs tabs={[{ label: 'Messages', slot: 0 }]} {sessionId} {executeNumber}>
+        <svelte:fragment slot="0">
+          <SocketMessageView
+            eventName={sessionId ? `session-info-${sessionId}` : null}
+            on:messageClick={handleMesageClick}
+            {executeNumber}
+            showProcedure
+            showLine
+          />
+        </svelte:fragment>
+      </ResultTabs>
+    </svelte:fragment>
+  </VerticalSplitter>
+  <svelte:fragment slot="toolstrip">
+    <ToolStripCommandButton command="query.execute" />
+    <ToolStripCommandButton command="query.kill" />
+    <ToolStripCommandButton command="query.save" />
+    <ToolStripCommandButton command="query.formatCode" />
   </svelte:fragment>
-</VerticalSplitter>
+</ToolStripContainer>
 
 {#if sessionId}
   <StatusBarTabItem icon={busy ? 'icon loading' : 'icon check'} text={busy ? 'Running...' : 'Finished'} />

packages/web/src/tabs/TableDataTab.svelte

@@ -58,6 +58,7 @@
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
   import ToolStripDropDownButton from '../buttons/ToolStripDropDownButton.svelte';
   import { createQuickExportMenuItems } from '../utility/createQuickExportMenu';
+  import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
 
   export let tabid;
   export let conid;
@@ -119,18 +120,7 @@
   setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
   $: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
 
-  let quickExportHandler = null;
+  const quickExportHandlerRef = createQuickExportHandlerRef();
-  function setQuickExportHandler(value) {
-    quickExportHandler = value;
-  }
-  setContext('setQuickExportHandler', setQuickExportHandler);
-  function getExportMenu() {
-    return [
-      quickExportHandler ? createQuickExportMenuItems($extensions, quickExportHandler) : null,
-      { divider: true },
-      { command: 'sqlDataGrid.export', text: 'Advanced settings' },
-    ];
-  }
 </script>
 
 <ToolStripContainer>
@@ -151,7 +141,7 @@
     <ToolStripCommandButton command="tableData.save" />
     <ToolStripCommandButton command="dataGrid.insertNewRow" />
     <ToolStripCommandButton command="dataGrid.deleteSelectedRows" />
-    <ToolStripDropDownButton menu={getExportMenu} label="Export" icon="icon export" />
+    <ToolStripExportButton {quickExportHandlerRef} />
   </svelte:fragment>
 </ToolStripContainer>
 

packages/web/src/tabs/ViewDataTab.svelte

@@ -10,6 +10,7 @@
   import { writable } from 'svelte/store';
 import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
 import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
 
   import DataGrid from '../datagrid/DataGrid.svelte';
   import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
@@ -50,6 +51,8 @@ import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   const collapsedLeftColumnStore = writable(getLocalStorage('dataGrid_collapsedLeftColumn', false));
   setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
   $: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
+
+  const quickExportHandlerRef = createQuickExportHandlerRef();
 </script>
 
 {#if display}
@@ -66,7 +69,7 @@ import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
     />
     <svelte:fragment slot="toolstrip">
       <ToolStripCommandButton command="dataGrid.refresh" />
-      <ToolStripCommandButton command="sqlDataGrid.export" />
+      <ToolStripExportButton {quickExportHandlerRef} />
     </svelte:fragment>
   </ToolStripContainer>
 {/if}