focused connection widget

packages/web/src/widgets/DatabaseWidget.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-  import { findEngineDriver, getConnectionLabel } from 'dbgate-tools';
+  import { findEngineDriver } from 'dbgate-tools';
   import {
     currentDatabase,
     extensions,
     pinnedDatabases,
     pinnedTables,
-    focusedConnectionOrDatabase,
-    openedConnections,
   } from '../stores';
   import { useConfig, useConnectionInfo } from '../utility/metadataLoaders';
 
@@ -21,9 +19,7 @@
   import DbKeysTree from './DbKeysTree.svelte';
   import SingleConnectionDatabaseList from './SingleConnectionDatabaseList.svelte';
   import _ from 'lodash';
-  import FormStyledButton from '../buttons/FormStyledButton.svelte';
-  import { switchCurrentDatabase } from '../utility/common';
-  import { openConnection } from '../appobj/ConnectionAppObject.svelte';
+  import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
 
   export let hidden = false;
   let domSqlObjectList = null;
@@ -88,25 +84,9 @@
     skip={conid && (database || singleDatabase)}
   >
     <WidgetsInnerContainer>
-      <ErrorInfo message="Database not selected" icon="img alert" />
+      <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
 
-      {#if $focusedConnectionOrDatabase?.database}
-        <FormStyledButton
-          value={`Switch to ${$focusedConnectionOrDatabase?.database}`}
-          skipWidth
-          on:click={() =>
-            switchCurrentDatabase({
-              connection: $focusedConnectionOrDatabase?.connection,
-              name: $focusedConnectionOrDatabase?.database,
-            })}
-        />
-      {:else if $focusedConnectionOrDatabase?.connection && !$openedConnections.includes($focusedConnectionOrDatabase?.conid)}
-        <FormStyledButton
-          value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
-          skipWidth
-          on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
-        />
-      {/if}
+      <ErrorInfo message="Database not selected" icon="img alert" />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/DbKeysTree.svelte

@@ -10,12 +10,13 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import AddDbKeyModal from '../modals/AddDbKeyModal.svelte';
   import { showModal } from '../modals/modalTools';
-  import { currentDatabase, getExtensions } from '../stores';
+  import { currentDatabase, focusedConnectionOrDatabase, getExtensions } from '../stores';
   import { apiCall } from '../utility/api';
   import { useConnectionInfo } from '../utility/metadataLoaders';
 
   import DbKeysSubTree from './DbKeysSubTree.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+  import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
 
   export let conid;
   export let database;
@@ -50,6 +51,13 @@
       },
     });
   }
+
+  $: differentFocusedDb =
+    $focusedConnectionOrDatabase &&
+    ($focusedConnectionOrDatabase.conid != conid ||
+      ($focusedConnectionOrDatabase?.database && $focusedConnectionOrDatabase?.database != database));
+
+  $: connection = useConnectionInfo({ conid });
 </script>
 
 <SearchBoxWrapper>
@@ -62,6 +70,9 @@
     <FontIcon icon="icon refresh" />
   </InlineButton>
 </SearchBoxWrapper>
-<WidgetsInnerContainer>
+{#if differentFocusedDb}
+  <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
+{/if}
+<WidgetsInnerContainer hideContent={differentFocusedDb}>
   <DbKeysSubTree {conid} {database} root="" {reloadToken} connection={$currentDatabase?.connection} {filter} />
 </WidgetsInnerContainer>

packages/web/src/widgets/FocusedConnectionInfoWidget.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { switchCurrentDatabase } from '../utility/common';
+  import { getConnectionLabel } from 'dbgate-tools';
+  import { focusedConnectionOrDatabase, openedConnections } from '../stores';
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import { openConnection } from '../appobj/ConnectionAppObject.svelte';
+
+  export let conid;
+  export let database;
+  export let connection;
+</script>
+
+<div class="no-focused-info">
+  {#if $focusedConnectionOrDatabase?.database}
+    {#if database}
+      <div class="m-1">Current database:</div>
+      <div class="m-1 ml-3 mb-3">
+        <b>{database}</b>
+      </div>
+    {/if}
+    <FormStyledButton
+      value={`Switch to ${$focusedConnectionOrDatabase?.database}`}
+      skipWidth
+      on:click={() =>
+        switchCurrentDatabase({
+          connection: $focusedConnectionOrDatabase?.connection,
+          name: $focusedConnectionOrDatabase?.database,
+        })}
+    />
+    {#if database}
+      <FormStyledButton
+        value={`Show ${database}`}
+        skipWidth
+        on:click={() => {
+          $focusedConnectionOrDatabase = {
+            conid,
+            database,
+            connection,
+          };
+        }}
+      />
+    {/if}
+  {:else}
+    {#if connection}
+      <div class="m-1">Current connection:</div>
+      <div class="m-1 ml-3 mb-3">
+        <b>{getConnectionLabel(connection)}</b>
+      </div>
+    {/if}
+    {#if !$openedConnections.includes($focusedConnectionOrDatabase?.conid) && $focusedConnectionOrDatabase?.conid}
+      <FormStyledButton
+        value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
+        skipWidth
+        on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
+      />
+    {/if}
+    {#if connection}
+      <FormStyledButton
+        value={`Show ${getConnectionLabel(connection)}`}
+        skipWidth
+        on:click={() => {
+          $focusedConnectionOrDatabase = {
+            conid,
+            connection,
+          };
+        }}
+      />
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .no-focused-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    margin-top: 10px;
+  }
+</style>

packages/web/src/widgets/SqlObjectList.svelte

@@ -31,17 +31,16 @@
   import { chevronExpandIcon } from '../icons/expandIcons';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
-  import { getObjectTypeFieldLabel, switchCurrentDatabase } from '../utility/common';
+  import { getObjectTypeFieldLabel } from '../utility/common';
   import DropDownButton from '../buttons/DropDownButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
-  import { findEngineDriver, getConnectionLabel } from 'dbgate-tools';
+  import { findEngineDriver } from 'dbgate-tools';
   import {
     currentDatabase,
     extensions,
     focusedConnectionOrDatabase,
     getSelectedDatabaseObjectAppObject,
-    openedConnections,
     selectedDatabaseObjectAppObject,
   } from '../stores';
   import newQuery from '../query/newQuery';
@@ -52,9 +51,7 @@
   import { appliedCurrentSchema } from '../stores';
   import AppObjectListHandler from './AppObjectListHandler.svelte';
   import { matchDatabaseObjectAppObject } from '../appobj/appObjectTools';
-  import FormStyledButton from '../buttons/FormStyledButton.svelte';
-  import clickOutside from '../utility/clickOutside';
-  import { openConnection } from '../appobj/ConnectionAppObject.svelte';
+  import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
 
   export let conid;
   export let database;
@@ -200,56 +197,7 @@
   />
 
   {#if differentFocusedDb}
-    <div class="no-focused-info">
-      {#if $focusedConnectionOrDatabase?.database}
-        <div class="m-1">Current database:</div>
-        <div class="m-1 ml-3 mb-3">
-          <b>{database}</b>
-        </div>
-        <FormStyledButton
-          value={`Switch to ${$focusedConnectionOrDatabase?.database}`}
-          skipWidth
-          on:click={() =>
-            switchCurrentDatabase({
-              connection: $focusedConnectionOrDatabase?.connection,
-              name: $focusedConnectionOrDatabase?.database,
-            })}
-        />
-        <FormStyledButton
-          value={`Show ${database}`}
-          skipWidth
-          on:click={() => {
-            $focusedConnectionOrDatabase = {
-              conid,
-              database,
-              connection: $connection,
-            };
-          }}
-        />
-      {:else}
-        <div class="m-1">Current connection:</div>
-        <div class="m-1 ml-3 mb-3">
-          <b>{getConnectionLabel($connection)}</b>
-        </div>
-        {#if !$openedConnections.includes($focusedConnectionOrDatabase?.conid)}
-          <FormStyledButton
-            value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
-            skipWidth
-            on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
-          />
-        {/if}
-        <FormStyledButton
-          value={`Show ${getConnectionLabel($connection)}`}
-          skipWidth
-          on:click={() => {
-            $focusedConnectionOrDatabase = {
-              conid,
-              connection: $connection,
-            };
-          }}
-        />
-      {/if}
-    </div>
+    <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
   {/if}
 
   <WidgetsInnerContainer bind:this={domContainer} hideContent={differentFocusedDb}>
@@ -291,12 +239,3 @@
     {/if}
   </WidgetsInnerContainer>
 {/if}
-
-<style>
-  .no-focused-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-</style>