Created tab for adding key, replaced modal

packages/web/src/tabs/DbKeyTab.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+  import FormFieldTemplateLarge from "../forms/FormFieldTemplateLarge.svelte";
+  import FormProvider from '../forms/FormProvider.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+  import TextField from "../forms/TextField.svelte";
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import { _t } from '../translations';
+  import { apiCall } from '../utility/api';
+  import { showSnackbarSuccess } from '../utility/snackbar';
+  import { findEngineDriver } from 'dbgate-tools';
+  import { activeDbKeysStore, getExtensions, openedTabs } from '../stores';
+  import { useConnectionInfo } from '../utility/metadataLoaders';
+  import openNewTab from '../utility/openNewTab';
+
+  export let conid;
+  export let database;
+  export let tabid;
+
+  $: connection = useConnectionInfo({ conid });
+  $: driver = $connection && findEngineDriver($connection, getExtensions());
+
+  let item = {};
+  let keyName = '';
+  $: type = driver?.supportedKeyTypes?.[0]?.name || '';
+
+  $: console.log('DbKeyTab debug:', { conid, database, connection: $connection, driver, hasTypes: driver?.supportedKeyTypes?.length });
+
+  async function handleSave() {
+    if (!driver) return;
+    
+    const typeConfig = driver.supportedKeyTypes.find(x => x.name == type);
+    
+    await apiCall('database-connections/call-method', {
+      conid,
+      database,
+      method: typeConfig.addMethod,
+      args: [keyName, ...typeConfig.dbKeyFields.map(fld => item[fld.name])],
+    });
+
+    showSnackbarSuccess('Key created successfully');
+
+    $activeDbKeysStore = {
+      ...$activeDbKeysStore,
+      [`${conid}:${database}`]: keyName,
+    };
+
+    openedTabs.update(tabs => 
+      tabs.map(tab => 
+        tab.tabid === tabid 
+          ? { ...tab, closedTime: new Date().getTime(), selected: false }
+          : tab
+      )
+    );
+
+    openNewTab({
+      tabComponent: 'DbKeyDetailTab',
+      title: keyName || '(no name)',
+      icon: 'img keydb',
+      props: {
+        isDefaultBrowser: true,
+        conid,
+        database,
+      },
+    });
+  }
+</script>
+
+{#if driver && driver.supportedKeyTypes && driver.supportedKeyTypes.length > 0}
+  <FormProvider>
+    <div class="wrapper">
+      <div class="container">
+        <FormFieldTemplateLarge label={_t('addDbKeyModal.key', { defaultMessage: 'Key' })} type="text" noMargin>
+          <TextField
+            value={keyName}
+            on:change={e => {
+              // @ts-ignore
+              keyName = e.target.value;
+            }}
+          />
+        </FormFieldTemplateLarge>
+
+        <div class="m-3" />
+
+        <FormFieldTemplateLarge label={_t('addDbKeyModal.type', { defaultMessage: 'Type' })} type="combo" noMargin>
+          <SelectField
+            options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
+            value={type}
+            isNative
+            on:change={e => {
+              type = e.detail;
+            }}
+          />
+        </FormFieldTemplateLarge>
+
+        <DbKeyItemDetail
+          dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
+          {item}
+          onChangeItem={value => {
+            item = value;
+          }}
+        />
+
+        <div class="m-3" />
+
+        <div class="button-container">
+          <FormStyledButton 
+            value={_t('common.save', { defaultMessage: 'Save' })} 
+            on:click={handleSave}
+            disabled={!keyName || keyName.trim() === ''}
+          />
+        </div>
+      </div>
+    </div>
+  </FormProvider>
+{:else}
+  <div class="wrapper">
+    <div class="container">
+      <div class="loading">Loading...</div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+  }
+
+  .button-container {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+  }
+</style>

packages/web/src/tabs/index.js

@@ -18,6 +18,7 @@ import * as JsonTab from './JsonTab.svelte';
 import * as ChangelogTab from './ChangelogTab.svelte';
 import * as DiagramTab from './DiagramTab.svelte';
 import * as DbKeyDetailTab from './DbKeyDetailTab.svelte';
+import * as DbKeyTab from './DbKeyTab.svelte';
 import * as QueryDataTab from './QueryDataTab.svelte';
 import * as ConnectionTab from './ConnectionTab.svelte';
 import * as MapTab from './MapTab.svelte';
@@ -50,6 +51,7 @@ export default {
   ChangelogTab,
   DiagramTab,
   DbKeyDetailTab,
+  DbKeyTab,
   QueryDataTab,
   ConnectionTab,
   MapTab,

packages/web/src/widgets/DbKeysTree.svelte

@@ -51,25 +51,34 @@
   function handleAddKey() {
     const connection = $currentDatabase?.connection;
     const database = $currentDatabase?.name;
-    const driver = findEngineDriver(connection, getExtensions());
 
-    showModal(AddDbKeyModal, {
+    openNewTab({
-      conid: connection._id,
+      tabComponent: 'DbKeyTab',
-      database,
+      title: 'Add key',
-      driver,
+      icon: 'img keydb',
-      onConfirm: async item => {
+      props: {
-        const type = driver.supportedKeyTypes.find(x => x.name == item.type);
+        conid: connection?._id,
-
+        database,
-        await apiCall('database-connections/call-method', {
-          conid: connection._id,
-          database,
-          method: type.addMethod,
-          args: [item.keyName, ...type.dbKeyFields.map(fld => item[fld.name])],
-        });
-
-        reloadModel();
       },
     });
+
+    // showModal(AddDbKeyModal, {
+    //   conid: connection._id,
+    //   database,
+    //   driver,
+    //   onConfirm: async item => {
+    //     const type = driver.supportedKeyTypes.find(x => x.name == item.type);
+
+    //     await apiCall('database-connections/call-method', {
+    //       conid: connection._id,
+    //       database,
+    //       method: type.addMethod,
+    //       args: [item.keyName, ...type.dbKeyFields.map(fld => item[fld.name])],
+    //     });
+
+    //     reloadModel();
+    //   },
+    // });
   }
 
   $: differentFocusedDb =