Merge branch 'master' into develop

2026-04-20 22:55:59 +00:00 · 2021-09-30 08:28:25 +02:00
parent 1d31e1665c 00c98b10b9
commit 0be07ba093
56 changed files with 752 additions and 225 deletions
--- a/packages/web/src/appobj/AppObjectGroup.svelte
+++ b/packages/web/src/appobj/AppObjectGroup.svelte
@@ -52,8 +52,9 @@
    </div>
  {/if}

-  {#each filtered as item}
+  {#each items as item}
    <AppObjectListItem
+      isHidden={!item.isMatched}
      {...$$restProps}
      {module}
      data={item.data}
--- a/packages/web/src/appobj/AppObjectList.svelte
+++ b/packages/web/src/appobj/AppObjectList.svelte
@@ -1,5 +1,6 @@
 <script>
  import _ from 'lodash';
+  import { asyncFilter } from '../utility/common';
  import AppObjectGroup from './AppObjectGroup.svelte';

  import AppObjectListItem from './AppObjectListItem.svelte';
@@ -16,11 +17,36 @@

  export let groupFunc = undefined;

-  $: filtered = list.filter(data => {
-    const matcher = module.createMatcher && module.createMatcher(data);
-    if (matcher && !matcher(filter)) return false;
-    return true;
-  });
+  $: filtered = !groupFunc
+    ? list.filter(data => {
+        const matcher = module.createMatcher && module.createMatcher(data);
+        if (matcher && !matcher(filter)) return false;
+        return true;
+      })
+    : null;
+
+  $: childrenMatched = !groupFunc
+    ? list.filter(data => {
+        const matcher = module.createChildMatcher && module.createChildMatcher(data);
+        if (matcher && !matcher(filter)) return false;
+        return true;
+      })
+    : null;
+
+
+  // let filtered = [];
+
+  // $: {
+  //   if (!groupFunc) {
+  //     asyncFilter(list, async data => {
+  //       const matcher = module.createMatcher && module.createMatcher(data);
+  //       if (matcher && !(await matcher(filter))) return false;
+  //       return true;
+  //     }).then(res => {
+  //       filtered = res;
+  //     });
+  //   }
+  // }

  $: listGrouped = groupFunc
    ? _.compact(
@@ -34,7 +60,6 @@
    : null;

  $: groups = groupFunc ? _.groupBy(listGrouped, 'group') : null;
-
 </script>

 {#if groupFunc}
@@ -49,11 +74,13 @@
      {checkedObjectsStore}
      {groupFunc}
      {disableContextMenu}
+      {filter}
    />
  {/each}
 {:else}
-  {#each filtered as data}
+  {#each list as data}
    <AppObjectListItem
+      isHidden={!filtered.includes(data)}
      {module}
      {subItemsComponent}
      {expandOnClick}
@@ -63,6 +90,8 @@
      {expandIconFunc}
      {checkedObjectsStore}
      {disableContextMenu}
+      {filter}
+      isExpandedBySearch={childrenMatched.includes(data)}
    />
  {/each}
 {/if}
--- a/packages/web/src/appobj/AppObjectListItem.svelte
+++ b/packages/web/src/appobj/AppObjectListItem.svelte
@@ -10,6 +10,8 @@
  import { tick } from 'svelte';
  import { plusExpandIcon } from '../icons/expandIcons';

+  export let isHidden;
+  export let filter;
  export let module;
  export let data;
  export let subItemsComponent;
@@ -18,6 +20,7 @@
  export let expandIconFunc = plusExpandIcon;
  export let checkedObjectsStore = null;
  export let disableContextMenu = false;
+  export let isExpandedBySearch = false;

  let isExpanded = false;

@@ -37,21 +40,23 @@
  $: if (!expandable && isExpanded) isExpanded = false;
 </script>

-<svelte:component
-  this={module.default}
-  {data}
-  on:click={handleExpand}
-  on:expand={handleExpandButton}
-  expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
-  {checkedObjectsStore}
-  {module}
-  {disableContextMenu}
-/>
+{#if !isHidden}
+  <svelte:component
+    this={module.default}
+    {data}
+    on:click={handleExpand}
+    on:expand={handleExpandButton}
+    expandIcon={getExpandIcon(!isExpandedBySearch && expandable, subItemsComponent, isExpanded, expandIconFunc)}
+    {checkedObjectsStore}
+    {module}
+    {disableContextMenu}
+  />

-{#if isExpanded && subItemsComponent}
-  <div class="subitems">
-    <svelte:component this={subItemsComponent} {data} />
-  </div>
+  {#if (isExpanded || isExpandedBySearch) && subItemsComponent}
+    <div class="subitems">
+      <svelte:component this={subItemsComponent} {data} {filter} />
+    </div>
+  {/if}
 {/if}

 <style>
--- a/packages/web/src/appobj/ConnectionAppObject.svelte
+++ b/packages/web/src/appobj/ConnectionAppObject.svelte
@@ -1,12 +1,22 @@
 <script context="module">
  export const extractKey = data => data._id;
-  export const createMatcher = ({ displayName, server }) => filter => filterName(filter, displayName, server);
+  export const createMatcher = props => filter => {
+    const { _id, displayName, server } = props;
+    const databases = getLocalStorage(`database_list_${_id}`) || [];
+    return filterName(filter, displayName, server, ...databases.map(x => x.name));
+  };
+  export const createChildMatcher = props => filter => {
+    if (!filter) return false;
+    const { _id } = props;
+    const databases = getLocalStorage(`database_list_${_id}`) || [];
+    return filterName(filter, ...databases.map(x => x.name));
+  };
 </script>

 <script lang="ts">
  import _ from 'lodash';
  import AppObjectCore from './AppObjectCore.svelte';
-  import { currentDatabase, extensions, getCurrentConfig, openedConnections } from '../stores';
+  import { currentDatabase, extensions, getCurrentConfig, getOpenedConnections, openedConnections } from '../stores';
  import axiosInstance from '../utility/axiosInstance';
  import { filterName } from 'dbgate-tools';
  import { showModal } from '../modals/modalTools';
@@ -17,6 +27,8 @@
  import { getDatabaseMenuItems } from './DatabaseAppObject.svelte';
  import getElectron from '../utility/getElectron';
  import getConnectionLabel from '../utility/getConnectionLabel';
+  import { getDatabaseList } from '../utility/metadataLoaders';
+  import { getLocalStorage } from '../utility/storageCache';

  export let data;

--- a/packages/web/src/appobj/DatabaseObjectAppObject.svelte
+++ b/packages/web/src/appobj/DatabaseObjectAppObject.svelte
@@ -3,7 +3,7 @@
  export const createMatcher = ({ pureName }) => filter => filterName(filter, pureName);
  const electron = getElectron();

-  const icons = {
+  export const databaseObjectIcons = {
    tables: 'img table',
    collections: 'img collection',
    views: 'img view',
@@ -337,7 +337,7 @@
      {
        title: scriptTemplate ? 'Query #' : pureName,
        tooltip,
-        icon: scriptTemplate ? 'img sql-file' : icons[objectTypeField],
+        icon: scriptTemplate ? 'img sql-file' : databaseObjectIcons[objectTypeField],
        tabComponent: scriptTemplate ? 'QueryTab' : tabComponent,
        props: {
          schemaName,
@@ -352,6 +352,24 @@
      { forceNewTab }
    );
  }
+
+  export function handleDatabaseObjectClick(data, forceNewTab = false) {
+    const { schemaName, pureName, conid, database, objectTypeField } = data;
+
+    openDatabaseObjectDetail(
+      defaultTabs[objectTypeField],
+      defaultTabs[objectTypeField] ? null : 'CREATE OBJECT',
+      {
+        schemaName,
+        pureName,
+        conid,
+        database,
+        objectTypeField,
+      },
+      forceNewTab,
+      null
+    );
+  }
 </script>

 <script lang="ts">
@@ -378,34 +396,7 @@
  export let data;

  function handleClick(forceNewTab = false) {
-    const { schemaName, pureName, conid, database, objectTypeField } = data;
-
-    openDatabaseObjectDetail(
-      defaultTabs[objectTypeField],
-      defaultTabs[objectTypeField] ? null : 'CREATE OBJECT',
-      {
-        schemaName,
-        pureName,
-        conid,
-        database,
-        objectTypeField,
-      },
-      forceNewTab,
-      null
-    );
-
-    // openNewTab({
-    //   title: data.pureName,
-    //   icon: 'img table',
-    //   tabComponent: 'TableDataTab',
-    //   props: {
-    //     schemaName,
-    //     pureName,
-    //     conid,
-    //     database,
-    //     objectTypeField,
-    //   },
-    // });
+    handleDatabaseObjectClick(data, forceNewTab);
  }

  const getDriver = async () => {
@@ -557,7 +548,7 @@
  module={$$props.module}
  {data}
  title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
-  icon={icons[data.objectTypeField]}
+  icon={databaseObjectIcons[data.objectTypeField]}
  menu={createMenu}
  on:click={() => handleClick()}
  on:middleclick={() => handleClick(true)}
--- a/packages/web/src/appobj/SubDatabaseList.svelte
+++ b/packages/web/src/appobj/SubDatabaseList.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
+  import { filterName } from 'dbgate-tools';
  import { useDatabaseList } from '../utility/metadataLoaders';
  import AppObjectList from './AppObjectList.svelte';
  import * as databaseAppObject from './DatabaseAppObject.svelte';

+  export let filter;
  export let data;

  $: databases = useDatabaseList({ conid: data._id });
 </script>

-<AppObjectList list={($databases || []).map(db => ({ ...db, connection: data }))} module={databaseAppObject} />
+<AppObjectList
+  list={($databases || []).filter(x => filterName(filter, x.name)).map(db => ({ ...db, connection: data }))}
+  module={databaseAppObject}
+/>
--- a/packages/web/src/commands/CommandPalette.svelte
+++ b/packages/web/src/commands/CommandPalette.svelte
@@ -1,17 +1,62 @@
 <script context="module">
+  const electron = getElectron();
+
  registerCommand({
    id: 'commandPalette.show',
    category: 'Command palette',
    name: 'Show',
-    toolbarName: 'Menu',
+    toolbarName: 'Menu+Search',
    toolbarOrder: 0,
    keyText: 'F1',
    toolbar: true,
    showDisabled: true,
    icon: 'icon menu',
-    onClick: () => visibleCommandPalette.set(true),
-    testEnabled: () => !getVisibleCommandPalette(),
+    onClick: () => visibleCommandPalette.set('menu'),
+    testEnabled: () => getVisibleCommandPalette() != 'menu',
  });
+
+  registerCommand({
+    id: 'database.search',
+    category: 'Database',
+    toolbarName: 'Database search',
+    name: 'Search',
+    keyText: electron ? 'Ctrl+P' : 'F3',
+    onClick: () => visibleCommandPalette.set('database'),
+    testEnabled: () => getVisibleCommandPalette() != 'database',
+  });
+
+  function extractDbItems(db, dbConnectionInfo, connectionList) {
+    const objectList = _.flatten(
+      ['tables', 'collections', 'views', 'matviews', 'procedures', 'functions'].map(objectTypeField =>
+        _.sortBy(
+          ((db || {})[objectTypeField] || []).map(obj => ({
+            text: obj.pureName,
+            onClick: () => handleDatabaseObjectClick({ objectTypeField, ...dbConnectionInfo, ...obj }),
+            icon: databaseObjectIcons[objectTypeField],
+          })),
+          ['text']
+        )
+      )
+    );
+    const databaseList = [];
+    for (const connection of connectionList || []) {
+      const conid = connection._id;
+      const databases = getLocalStorage(`database_list_${conid}`) || [];
+      for (const db of databases) {
+        databaseList.push({
+          text: `${db.name} on ${getConnectionLabel(connection)}`,
+          icon: 'img database',
+          onClick: () => currentDatabase.set({ connection, name: db.name }),
+        });
+      }
+    }
+    return [..._.sortBy(databaseList, 'text'), ...objectList];
+
+    // return db?.tables?.map(table => ({
+    //   text: table.pureName,
+    //   onClick: () => handleDatabaseObjectClick({ ...dbinfo, ...table }),
+    // }));
+  }
 </script>

 <script>
@@ -19,9 +64,21 @@

  import _ from 'lodash';
  import { onMount } from 'svelte';
-  import { commands, commandsCustomized, getVisibleCommandPalette, visibleCommandPalette } from '../stores';
+  import { databaseObjectIcons, handleDatabaseObjectClick } from '../appobj/DatabaseObjectAppObject.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import {
+    commands,
+    commandsCustomized,
+    currentDatabase,
+    getVisibleCommandPalette,
+    visibleCommandPalette,
+  } from '../stores';
  import clickOutside from '../utility/clickOutside';
+  import getConnectionLabel from '../utility/getConnectionLabel';
+  import getElectron from '../utility/getElectron';
  import keycodes from '../utility/keycodes';
+  import { useConnectionList, useDatabaseInfo } from '../utility/metadataLoaders';
+  import { getLocalStorage } from '../utility/storageCache';
  import registerCommand from './registerCommand';

  let domInput;
@@ -44,9 +101,17 @@
    'text'
  );

-  $: filteredItems = (parentCommand ? parentCommand.getSubCommands() : sortedComands).filter(
-    x => !x.isGroupCommand && filterName(filter, x.text)
-  );
+  $: conid = _.get($currentDatabase, 'connection._id');
+  $: database = _.get($currentDatabase, 'name');
+  $: databaseInfo = useDatabaseInfo({ conid, database });
+  $: connectionList = useConnectionList();
+
+  $: filteredItems = ($visibleCommandPalette == 'database'
+    ? extractDbItems($databaseInfo, { conid, database }, $connectionList)
+    : parentCommand
+    ? parentCommand.getSubCommands()
+    : sortedComands
+  ).filter(x => !x.isGroupCommand && filterName(filter, x.text));

  function handleCommand(command) {
    if (command.getSubCommands) {
@@ -55,7 +120,7 @@
      filter = '';
      selectedIndex = 0;
    } else {
-      $visibleCommandPalette = false;
+      $visibleCommandPalette = null;
      command.onClick();
    }
  }
@@ -68,7 +133,7 @@
      e.stopPropagation();
      handleCommand(filteredItems[selectedIndex]);
    }
-    if (e.keyCode == keycodes.escape) $visibleCommandPalette = false;
+    if (e.keyCode == keycodes.escape) $visibleCommandPalette = null;

    if (e.keyCode == keycodes.pageDown) selectedIndex = Math.min(selectedIndex + 15, filteredItems.length - 1);
    if (e.keyCode == keycodes.pageUp) selectedIndex = Math.max(selectedIndex - 15, 0);
@@ -77,30 +142,65 @@
  $: if (domItems[selectedIndex]) domItems[selectedIndex].scrollIntoView({ block: 'nearest', inline: 'nearest' });
 </script>

-<div class="main" use:clickOutside on:clickOutside={() => ($visibleCommandPalette = false)}>
-  <div class="search">
-    <input
-      type="text"
-      bind:this={domInput}
-      bind:value={filter}
-      on:keydown={handleKeyDown}
-      placeholder={parentCommand?.text || ''}
-    />
+<div
+  class="main"
+  use:clickOutside
+  on:clickOutside={() => {
+    $visibleCommandPalette = null;
+  }}
+>
+  <div class="pages">
+    <div
+      class="page"
+      class:selected={$visibleCommandPalette == 'menu'}
+      on:click={() => {
+        $visibleCommandPalette = 'menu';
+        domInput.focus();
+      }}
+    >
+      <FontIcon icon="icon menu" /> Commands
+    </div>
+    <div
+      class="page"
+      class:selected={$visibleCommandPalette == 'database'}
+      on:click={() => {
+        $visibleCommandPalette = 'database';
+        domInput.focus();
+      }}
+    >
+      <FontIcon icon="icon database" /> Database
+    </div>
  </div>
-  <div class="content">
-    {#each filteredItems as command, index}
-      <div
-        class="command"
-        class:selected={index == selectedIndex}
-        on:click={() => handleCommand(command)}
-        bind:this={domItems[index]}
-      >
-        <div>{command.text}</div>
-        {#if command.keyText}
-          <div class="shortcut">{command.keyText}</div>
-        {/if}
-      </div>
-    {/each}
+  <div class="mainInner">
+    <div class="search">
+      <input
+        type="text"
+        bind:this={domInput}
+        bind:value={filter}
+        on:keydown={handleKeyDown}
+        placeholder={parentCommand?.text || ''}
+      />
+    </div>
+    <div class="content">
+      {#each filteredItems as command, index}
+        <div
+          class="command"
+          class:selected={index == selectedIndex}
+          on:click={() => handleCommand(command)}
+          bind:this={domItems[index]}
+        >
+          <div>
+            {#if command.icon}
+              <span class="mr-1"><FontIcon icon={command.icon} /></span>
+            {/if}
+            {command.text}
+          </div>
+          {#if command.keyText}
+            <div class="shortcut">{command.keyText}</div>
+          {/if}
+        </div>
+      {/each}
+    </div>
  </div>
 </div>

@@ -108,6 +208,9 @@
  .main {
    width: 500px;
    background: var(--theme-bg-2);
+  }
+
+  .mainInner {
    padding: 5px;
  }

@@ -135,4 +238,19 @@
  .shortcut {
    background: var(--theme-bg-3);
  }
+
+  .pages {
+    display: flex;
+  }
+  .page {
+    padding: 5px;
+    border: 1px solid var(--theme-border);
+    cursor: pointer;
+  }
+  .page:hover {
+    color: var(--theme-font-hover);
+  }
+  .page.selected {
+    background: var(--theme-bg-1);
+  }
 </style>
--- a/packages/web/src/commands/stdCommands.ts
+++ b/packages/web/src/commands/stdCommands.ts
@@ -266,6 +266,15 @@ if (hasPermission('settings/change')) {
  });
 }

+if (electron) {
+  registerCommand({
+    id: 'file.exit',
+    category: 'File',
+    name: 'Exit',
+    onClick: () => electron.remote.getCurrentWindow().close(),
+  });
+}
+
 export function registerFileCommands({
  idPrefix,
  category,
--- a/packages/web/src/forms/SelectField.svelte
+++ b/packages/web/src/forms/SelectField.svelte
@@ -10,6 +10,7 @@
  export let isNative = false;
  export let isMulti = false;
  export let notSelected = null;
+  export let defaultValue = '';

  let listOpen = false;
  let isFocused = false;
@@ -21,18 +22,19 @@

 {#if isNative}
  <select
+    value={value || defaultValue}
    {...$$restProps}
    on:change={e => {
      dispatch('change', e.target['value']);
    }}
  >
    {#if notSelected}
-      <option value="" selected={!value}>
+      <option value="">
        {_.isString(notSelected) ? notSelected : '(not selected)'}
      </option>
    {/if}
    {#each _.compact(options) as x (x.value)}
-      <option value={x.value} selected={value == x.value}>
+      <option value={x.value}>
        {x.label}
      </option>
    {/each}
--- a/packages/web/src/modals/ConfirmSqlModal.svelte
+++ b/packages/web/src/modals/ConfirmSqlModal.svelte
@@ -1,10 +1,10 @@
 <script>
-  import _ from 'lodash';
+  import _, { startsWith } from 'lodash';
+  import { writable } from 'svelte/store';
  import FormStyledButton from '../elements/FormStyledButton.svelte';
  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
-  import FormProvider from '../forms/FormProvider.svelte';
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
  import FormSubmit from '../forms/FormSubmit.svelte';
-  import FormValues from '../forms/FormValues.svelte';
  import FontIcon from '../icons/FontIcon.svelte';
  import SqlEditor from '../query/SqlEditor.svelte';

@@ -15,20 +15,77 @@
  export let onConfirm;
  export let engine;
  export let recreates;
+  export let deleteCascadesScripts;

  $: isRecreated = _.sum(_.values(recreates || {})) > 0;
+  const values = writable({});

  // $: console.log('recreates', recreates);
 </script>

-<FormProvider>
+<FormProviderCore {values}>
  <ModalBase {...$$restProps}>
    <div slot="header">Save changes</div>

    <div class="editor">
-      <SqlEditor {engine} value={sql} readOnly />
+      <SqlEditor
+        {engine}
+        value={$values.deleteReferencesCascade
+          ? [
+              ...deleteCascadesScripts
+                .filter(({ script, title }) => $values[`deleteReferencesFor_${title}`] !== false)
+                .map(({ script, title }) => script),
+              sql,
+            ].join('\n')
+          : sql}
+        readOnly
+      />
    </div>

+    {#if !_.isEmpty(deleteCascadesScripts)}
+      <div class="mt-2">
+        <FormCheckboxField
+          templateProps={{ noMargin: true }}
+          label="Delete references CASCADE"
+          name="deleteReferencesCascade"
+        />
+      </div>
+    {/if}
+
+    {#if $values.deleteReferencesCascade}
+      <div class="form-margin flex">
+        <FormStyledButton
+          value="Check all"
+          on:click={() => {
+            $values = _.omitBy($values, (v, k) => k.startsWith('deleteReferencesFor_'));
+          }}
+        />
+        <FormStyledButton
+          value="Uncheck all"
+          on:click={() => {
+            const newValues = { ...$values };
+            for (const item of deleteCascadesScripts) {
+              newValues[`deleteReferencesFor_${item.title}`] = false;
+            }
+            $values = newValues;
+          }}
+        />
+      </div>
+
+      <div class="form-margin flex flex-wrap">
+        {#each _.sortBy(deleteCascadesScripts, 'title') as deleteTable}
+          <div class="mr-1 nowrap">
+            <FormCheckboxField
+              defaultValue={true}
+              templateProps={{ noMargin: true }}
+              label={deleteTable.title}
+              name={`deleteReferencesFor_${deleteTable.title}`}
+            />
+          </div>
+        {/each}
+      </div>
+    {/if}
+
    {#if isRecreated}
      <div class="form-margin">
        <div>
@@ -44,20 +101,27 @@
    {/if}

    <div slot="footer">
-      <FormValues let:values>
-        <FormSubmit
-          value="OK"
-          disabled={isRecreated && !values.allowRecreate}
-          on:click={() => {
-            closeCurrentModal();
-            onConfirm();
-          }}
-        />
-        <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
-      </FormValues>
+      <FormSubmit
+        value="OK"
+        disabled={isRecreated && !$values.allowRecreate}
+        on:click={e => {
+          closeCurrentModal();
+          onConfirm(
+            e.detail.deleteReferencesCascade
+              ? [
+                  ...deleteCascadesScripts
+                    .filter(({ script, title }) => e.detail[`deleteReferencesFor_${title}`] !== false)
+                    .map(({ script, title }) => script),
+                  sql,
+                ].join('\n')
+              : null
+          );
+        }}
+      />
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
    </div>
  </ModalBase>
-</FormProvider>
+</FormProviderCore>

 <style>
  .editor {
@@ -69,4 +133,8 @@
  .form-margin {
    margin: var(--dim-large-form-margin);
  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
 </style>
--- a/packages/web/src/modals/ConnectionModalDriverFields.svelte
+++ b/packages/web/src/modals/ConnectionModalDriverFields.svelte
@@ -24,7 +24,6 @@
  $: disabledFields = (currentAuthType ? currentAuthType.disabledFields : null) || [];
  $: driver = $extensions.drivers.find(x => x.engine == engine);
  $: defaultDatabase = $values.defaultDatabase;
-
 </script>

 <FormSelectField
@@ -125,6 +124,7 @@
    label="Password mode"
    isNative
    name="passwordMode"
+    defaultValue="saveEncrypted"
    options={[
      { value: 'saveEncrypted', label: 'Save and encrypt' },
      { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
@@ -154,5 +154,4 @@
  .radio :global(label) {
    margin-right: 10px;
  }
-
 </style>
--- a/packages/web/src/modals/ConnectionModalSshTunnelFields.svelte
+++ b/packages/web/src/modals/ConnectionModalSshTunnelFields.svelte
@@ -22,7 +22,7 @@
  $: {
    if (!$values.sshMode) setFieldValue('sshMode', 'userPassword');
    if (!$values.sshPort) setFieldValue('sshPort', '22');
-    if (!$values.sshKeyfile && $platformInfo) setFieldValue('sshKeyfile', $platformInfo.defaultKeyFile);
+    if (!$values.sshKeyfile && $platformInfo) setFieldValue('sshKeyfile', $platformInfo.defaultKeyfile);
  }
 </script>

--- a/packages/web/src/modals/SetFilterModal_Select.svelte
+++ b/packages/web/src/modals/SetFilterModal_Select.svelte
@@ -43,4 +43,4 @@
  }
 </script>

-<FormSelectFieldRaw {name} options={getOptions()} />
+<FormSelectFieldRaw {name} options={getOptions()} isNative />
--- a/packages/web/src/stores.ts
+++ b/packages/web/src/stores.ts
@@ -35,7 +35,7 @@ export const openedConnections = writable([]);
 export const currentDatabase = writable(null);
 export const openedTabs = writableWithStorage<TabDefinition[]>([], 'openedTabs');
 export const extensions = writable<ExtensionsDirectory>(null);
-export const visibleCommandPalette = writable(false);
+export const visibleCommandPalette = writable(null);
 export const commands = writable({});
 export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
@@ -156,3 +156,9 @@ extensions.subscribe(value => {
  extensionsValue = value;
 });
 export const getExtensions = () => extensionsValue;
+
+let openedConnectionsValue = null;
+openedConnections.subscribe(value => {
+  openedConnectionsValue = value;
+});
+export const getOpenedConnections = () => openedConnectionsValue;
--- a/packages/web/src/tabs/TableDataTab.svelte
+++ b/packages/web/src/tabs/TableDataTab.svelte
@@ -16,10 +16,10 @@

  export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
  export const allowAddToFavorites = props => true;
-
 </script>

 <script lang="ts">
+  import _ from 'lodash';
  import App from '../App.svelte';
  import TableDataGrid from '../datagrid/TableDataGrid.svelte';
  import useGridConfig from '../utility/useGridConfig';
@@ -29,6 +29,7 @@
    createChangeSet,
    createGridCache,
    createGridConfig,
+    getDeleteCascades,
    TableFormViewDisplay,
    TableGridDisplay,
  } from 'dbgate-datalib';
@@ -87,11 +88,18 @@
  export function save() {
    const driver = findEngineDriver($connection, $extensions);
    const script = changeSetToSql($changeSetStore?.value, $dbinfo);
+    const deleteCascades = getDeleteCascades($changeSetStore?.value, $dbinfo);
    const sql = scriptToSql(driver, script);
+    const deleteCascadesScripts = _.map(deleteCascades, ({ title, commands }) => ({
+      title,
+      script: scriptToSql(driver, commands),
+    }));
+    console.log('deleteCascadesScripts', deleteCascadesScripts);
    showModal(ConfirmSqlModal, {
      sql,
-      onConfirm: () => handleConfirmSql(sql),
+      onConfirm: sqlOverride => handleConfirmSql(sqlOverride || sql),
      engine: driver.engine,
+      deleteCascadesScripts,
    });
  }

@@ -105,7 +113,6 @@
  }

  registerMenu({ command: 'tableData.save', tag: 'save' });
-
 </script>

 <TableDataGrid
--- a/packages/web/src/utility/ErrorHandler.svelte
+++ b/packages/web/src/utility/ErrorHandler.svelte
@@ -22,7 +22,7 @@
              'Sorry, DbGate has crashed again.\nDo you want to clear local user data to avoid crashing after next reload?'
            )
          ) {
-            localStorage.clear();
+            localStorage.removeItem('openedTabs');
            try {
              await localforage.clear();
            } catch (err) {
--- a/packages/web/src/utility/common.ts
+++ b/packages/web/src/utility/common.ts
@@ -32,3 +32,9 @@ export function getObjectTypeFieldLabel(objectTypeField) {
  if (objectTypeField == 'matviews') return 'Materialized Views';
  return _.startCase(objectTypeField);
 }
+
+export async function asyncFilter(arr, predicate) {
+  const results = await Promise.all(arr.map(predicate));
+
+  return arr.filter((_v, index) => results[index]);
+}
--- a/packages/web/src/utility/metadataLoaders.ts
+++ b/packages/web/src/utility/metadataLoaders.ts
@@ -8,6 +8,7 @@ import getAsArray from './getAsArray';
 import { DatabaseInfo } from 'dbgate-types';
 import { derived } from 'svelte/store';
 import { extendDatabaseInfo } from 'dbgate-tools';
+import { setLocalStorage } from '../utility/storageCache';

 const databaseInfoLoader = ({ conid, database }) => ({
  url: 'database-connections/structure',
@@ -74,6 +75,9 @@ const databaseListLoader = ({ conid }) => ({
  url: 'server-connections/list-databases',
  params: { conid },
  reloadTrigger: `database-list-changed-${conid}`,
+  onLoaded: value => {
+    if (value?.length > 0) setLocalStorage(`database_list_${conid}`, value);
+  },
 });

 const serverVersionLoader = ({ conid }) => ({
@@ -135,7 +139,7 @@ const authTypesLoader = ({ engine }) => ({
 });

 async function getCore(loader, args) {
-  const { url, params, reloadTrigger, transform } = loader(args);
+  const { url, params, reloadTrigger, transform, onLoaded } = loader(args);
  const key = stableStringify({ url, ...params });

  async function doLoad() {
@@ -144,7 +148,9 @@ async function getCore(loader, args) {
      url,
      params,
    });
-    return (transform || (x => x))(resp.data);
+    const res = (transform || (x => x))(resp.data);
+    if (onLoaded) onLoaded(res);
+    return res;
  }

  const fromCache = cacheGet(key);
@@ -156,7 +162,7 @@ async function getCore(loader, args) {
 }

 function useCore(loader, args) {
-  const { url, params, reloadTrigger, transform } = loader(args);
+  const { url, params, reloadTrigger, transform, onLoaded } = loader(args);
  const cacheKey = stableStringify({ url, ...params });

  return {
@@ -168,7 +174,9 @@ function useCore(loader, args) {
            params,
            url,
          });
-          return (transform || (x => x))(resp.data);
+          const res = (transform || (x => x))(resp.data);
+          if (onLoaded) onLoaded(res);
+          return res;
        }

        if (cacheKey) {
--- a/packages/web/src/utility/storageCache.js
+++ b/packages/web/src/utility/storageCache.js
@@ -0,0 +1,22 @@
+const cache = {};
+
+export function getLocalStorage(key) {
+  if (key in cache) return cache[key];
+  const item = localStorage.getItem(key);
+  if (item) {
+    const res = JSON.parse(item);
+    cache[key] = res;
+    return res;
+  }
+  return undefined;
+}
+
+export function setLocalStorage(key, value) {
+  localStorage.setItem(key, JSON.stringify(value));
+  delete cache[key];
+}
+
+export function removeLocalStorage(key) {
+  localStorage.removeItem(key);
+  delete cache[key];
+}
--- a/packages/web/src/widgets/TabsPanel.svelte
+++ b/packages/web/src/widgets/TabsPanel.svelte
@@ -1,4 +1,6 @@
 <script lang="ts" context="module">
+  const electron = getElectron();
+
  const closeTabFunc = closeCondition => tabid => {
    openedTabs.update(files => {
      const active = files.find(x => x.tabid == tabid);
@@ -33,6 +35,9 @@
      }))
    );
  };
+  const closeCurrentTab = () => {
+    closeTab(getActiveTabId());
+  };
  const closeWithSameDb = closeTabFunc(
    (x, active) =>
      _.get(x, 'props.conid') == _.get(active, 'props.conid') &&
@@ -96,6 +101,15 @@
    onClick: closeAll,
  });

+  registerCommand({
+    id: 'tabs.closeTab',
+    category: 'Tabs',
+    name: 'Close tab',
+    keyText: electron ? 'Ctrl+W' : null,
+    testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 1,
+    onClick: closeCurrentTab,
+  });
+
  registerCommand({
    id: 'tabs.addToFavorites',
    category: 'Tabs',
@@ -120,11 +134,12 @@
  import FavoriteModal from '../modals/FavoriteModal.svelte';
  import { showModal } from '../modals/modalTools';

-  import { currentDatabase, getActiveTab, getOpenedTabs, openedTabs, activeTabId } from '../stores';
+  import { currentDatabase, getActiveTab, getOpenedTabs, openedTabs, activeTabId, getActiveTabId } from '../stores';
  import tabs from '../tabs';
  import { setSelectedTab } from '../utility/common';
  import contextMenu from '../utility/contextMenu';
  import getConnectionLabel from '../utility/getConnectionLabel';
+  import getElectron from '../utility/getElectron';
  import { getConnectionInfo, useConnectionList } from '../utility/metadataLoaders';
  import { duplicateTab } from '../utility/openNewTab';

--- a/packages/web/src/widgets/WidgetIconPanel.svelte
+++ b/packages/web/src/widgets/WidgetIconPanel.svelte
@@ -66,7 +66,7 @@

 <div class="main">
  {#if !$visibleToolbar}
-    <div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = true)}>
+    <div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = 'menu')}>
      <FontIcon icon="icon menu" />
    </div>
  {/if}