connections UX WIP

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -519,7 +519,7 @@ await dbgateApi.dropAllDbObjects(${JSON.stringify(
   }}
   on:click={() => {
     // switchCurrentDatabase(data);
-    $focusedConnectionOrDatabase = { conid: data.connection?._id, database: data.name };
+    $focusedConnectionOrDatabase = { conid: data.connection?._id, database: data.name, connection: data.connection };
   }}
   on:dragstart
   on:dragenter

packages/web/src/buttons/FormStyledButton.svelte

@@ -7,6 +7,7 @@
   export let disabled = false;
   export let value;
   export let title = null;
+  export let skipWidth = false;
 
   function handleClick() {
     if (!disabled) dispatch('click');
@@ -19,19 +20,22 @@
   }
 </script>
 
-<input {type} {value} {title} class:disabled {...$$restProps} on:click={handleClick} bind:this={domButton} />
+<input {type} {value} {title} class:disabled {...$$restProps} on:click={handleClick} bind:this={domButton} class:skipWidth />
 
 <style>
   input {
     border: 1px solid var(--theme-bg-button-inv-2);
     padding: 5px;
     margin: 2px;
-    width: 100px;
     background-color: var(--theme-bg-button-inv);
     color: var(--theme-font-inv-1);
     border-radius: 2px;
   }
 
+  input:not(.skipWidth) {
+    width: 100px;
+  }
+
   input:hover:not(.disabled) {
     background-color: var(--theme-bg-button-inv-2);
   }

packages/web/src/stores.ts

@@ -158,7 +158,7 @@ export const appliedCurrentSchema = writable<string>(null);
 export const loadingSchemaLists = writable({}); // dict [`${conid}::${database}`]: true
 
 export const selectedDatabaseObjectAppObject = writable(null);
-export const focusedConnectionOrDatabase = writable<{ conid: string; database?: string }>(null);
+export const focusedConnectionOrDatabase = writable<{ conid: string; database?: string; connection: any }>(null);
 
 export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) =>
   $extensions.themes.find(x => x.themeClassName == $currentTheme)

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -13,6 +13,7 @@
 
   let isListFocused = false;
   let domDiv = null;
+  export let hideContent = false;
 
   function handleKeyDown(ev) {
     const listInstance = _.isFunction(list) ? list() : list;
@@ -126,6 +127,7 @@
     isListFocused = false;
   }}
   bind:this={domDiv}
+  class:hideContent
 >
   <slot />
 </div>
@@ -134,4 +136,8 @@
   .wrapper:focus {
     outline: none;
   }
+
+  .hideContent {
+    visibility: hidden;
+  }
 </style>

packages/web/src/widgets/ConnectionList.svelte

@@ -97,10 +97,7 @@
           res.push({
             conid: con._id,
             database: db.name,
-            dbobj: {
-              connection: con,
-              name: db.name,
-            },
+            connection: con,
           });
         }
       }
@@ -202,7 +199,7 @@
     list={getFocusFlatList}
     selectedObjectStore={focusedConnectionOrDatabase}
     getSelectedObject={getFocusedConnectionOrDatabase}
-    selectedObjectMatcher={(o1, o2) => o1.conid == o2.conid && o1.database == o2.database}
+    selectedObjectMatcher={(o1, o2) => o1?.conid == o2?.conid && o1?.database == o2?.database}
     onScrollTop={() => {
       domContainer?.scrollTop();
     }}
@@ -212,7 +209,7 @@
     handleObjectClick={(data, options) => {
       if (data.database) {
         if (options.focusTab) {
-          switchCurrentDatabase(data.dbobj);
+          switchCurrentDatabase({ connection: data.connection, name: data.database });
           // console.log('FOCUSING DB', passProps);
           // passProps?.onFocusSqlObjectList?.();
         }

packages/web/src/widgets/SqlObjectList.svelte

@@ -31,7 +31,7 @@
   import { chevronExpandIcon } from '../icons/expandIcons';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
-  import { getObjectTypeFieldLabel } from '../utility/common';
+  import { getObjectTypeFieldLabel, switchCurrentDatabase } from '../utility/common';
   import DropDownButton from '../buttons/DropDownButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
@@ -39,6 +39,7 @@
   import {
     currentDatabase,
     extensions,
+    focusedConnectionOrDatabase,
     getSelectedDatabaseObjectAppObject,
     selectedDatabaseObjectAppObject,
   } from '../stores';
@@ -50,6 +51,8 @@
   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';
 
   export let conid;
   export let database;
@@ -129,6 +132,11 @@
   export function focus() {
     domListHandler?.focusFirst();
   }
+
+  $: differentFocusedDb =
+    $focusedConnectionOrDatabase &&
+    $focusedConnectionOrDatabase?.database &&
+    ($focusedConnectionOrDatabase.conid != conid || $focusedConnectionOrDatabase?.database != database);
 </script>
 
 {#if $status && $status.name == 'error'}
@@ -189,7 +197,25 @@
     negativeMarginTop
   />
 
-  <WidgetsInnerContainer bind:this={domContainer}>
+  {#if differentFocusedDb}
+    <div class="no-focused-info">
+      <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,
+          })}
+      />
+    </div>
+  {/if}
+
+  <WidgetsInnerContainer bind:this={domContainer} hideContent={differentFocusedDb}>
     {#if ($status && ($status.name == 'pending' || $status.name == 'checkStructure' || $status.name == 'loadStructure') && $objects) || !$objects}
       <LoadingInfo message={$status?.feedback?.analysingMessage || 'Loading database structure'} />
     {:else}
@@ -228,3 +254,12 @@
     {/if}
   </WidgetsInnerContainer>
 {/if}
+
+<style>
+  .no-focused-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+</style>

packages/web/src/widgets/WidgetsInnerContainer.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   let domDiv;
 
+  export let hideContent = false;
+
   export function scrollTop() {
     domDiv.scrollTop = 0;
   }
 </script>
 
-<div on:drop bind:this={domDiv}><slot /></div>
+<div on:drop bind:this={domDiv} class:hideContent><slot /></div>
 
 <style>
   div {
@@ -15,4 +17,8 @@
     overflow-y: auto;
     width: var(--dim-left-panel-width);
   }
+
+  .hideContent {
+    visibility: hidden;
+  }
 </style>