key detail tab, API

packages/web/src/tabs/DbKeyDetailTab.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" context="module">
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+
+  const getCurrentEditor = () => getActiveComponent('DbKeyDetailTab');
+
+  export const matchingProps = ['conid', 'database', 'isDefaultBrowser'];
+  export const allowAddToFavorites = props => true;
+</script>
+
+<script lang="ts">
+  export let conid;
+  export let database;
+  export let key;
+  export let isDefaultBrowser = false;
+
+  export const activator = createActivator('DbKeyDetailTab', true);
+</script>

packages/web/src/tabs/index.js

@@ -21,6 +21,7 @@ import * as CompareModelTab from './CompareModelTab.svelte';
 import * as JsonTab from './JsonTab.svelte';
 import * as ChangelogTab from './ChangelogTab.svelte';
 import * as DiagramTab from './DiagramTab.svelte';
+import * as DbKeyDetailTab from './DbKeyDetailTab.svelte';
 
 export default {
   TableDataTab,
@@ -46,4 +47,5 @@ export default {
   JsonTab,
   ChangelogTab,
   DiagramTab,
+  DbKeyDetailTab,
 };

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -2,6 +2,7 @@
   import AppObjectCore from '../appobj/AppObjectCore.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
   import FontIcon from '../icons/FontIcon.svelte';
+  import openNewTab from '../utility/openNewTab';
 
   import DbKeysSubTree from './DbKeysSubTree.svelte';
 
@@ -55,6 +56,16 @@
   on:click={() => {
     if (item.type == 'dir') {
       isExpanded = !isExpanded;
+    } else {
+      openNewTab({
+        tabComponent: 'DbKeyDetailTab',
+        title: 'Key: ' + database,
+        props: {
+          isDefaultBrowser: true,
+          conid,
+          database,
+        },
+      });
     }
   }}
   extInfo={item.count ? `(${item.count})` : null}