From f8081ff09ea9e96806708dfcc392f0b8c4a0ebc9 Mon Sep 17 00:00:00 2001
From: "SPRINX0\\prochazka" <jan.prochazka@sprinx.com>
Date: Thu, 22 May 2025 10:43:46 +0200
Subject: [PATCH] cloud database content

---
 .../web/src/widgets/DatabaseWidget.svelte     | 76 +---------------
 .../DatabaseWidgetDetailContent.svelte        | 87 +++++++++++++++++++
 .../web/src/widgets/PrivateCloudWidget.svelte |  7 ++
 3 files changed, 96 insertions(+), 74 deletions(-)
 create mode 100644 packages/web/src/widgets/DatabaseWidgetDetailContent.svelte

diff --git a/packages/web/src/widgets/DatabaseWidget.svelte b/packages/web/src/widgets/DatabaseWidget.svelte
index cce04923d..057ca0a04 100644
--- a/packages/web/src/widgets/DatabaseWidget.svelte
+++ b/packages/web/src/widgets/DatabaseWidget.svelte
@@ -1,31 +1,19 @@
 <script lang="ts">
-  import { findEngineDriver } from 'dbgate-tools';
-  import { currentDatabase, extensions, pinnedDatabases, pinnedTables } from '../stores';
   import { useCloudContentList, useConfig, useConnectionInfo } from '../utility/metadataLoaders';
 
   import ConnectionList from './ConnectionList.svelte';
-  import PinnedObjectsList from './PinnedObjectsList.svelte';
-  import ErrorInfo from '../elements/ErrorInfo.svelte';
-  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
   import WidgetColumnBar from './WidgetColumnBar.svelte';
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
-  import SqlObjectList from './SqlObjectList.svelte';
-  import DbKeysTree from './DbKeysTree.svelte';
   import SingleConnectionDatabaseList from './SingleConnectionDatabaseList.svelte';
   import _ from 'lodash';
-  import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
   import { _t } from '../translations';
+  import DatabaseWidgetDetailContent from './DatabaseWidgetDetailContent.svelte';
 
   export let hidden = false;
   let domSqlObjectList = null;
 
-  $: conid = $currentDatabase?.connection?._id;
-  $: connection = useConnectionInfo({ conid });
-  $: driver = findEngineDriver($connection, $extensions);
   $: config = useConfig();
-  $: singleDatabase = $currentDatabase?.connection?.singleDatabase;
-  $: database = $currentDatabase?.name;
   $: cloudContentList = useCloudContentList();
 </script>
 
@@ -54,66 +42,6 @@
       />
     </WidgetColumnBarItem>
   {/if}
-  <WidgetColumnBarItem
-    title={_t('widget.pinned', { defaultMessage: 'Pinned' })}
-    name="pinned"
-    height="15%"
-    storageName="pinnedItemsWidget"
-    skip={!_.compact($pinnedDatabases).length &&
-      !$pinnedTables.some(x => x && x.conid == conid && x.database == $currentDatabase?.name)}
-  >
-    <PinnedObjectsList />
-  </WidgetColumnBarItem>
 
-  <WidgetColumnBarItem
-    title={driver?.databaseEngineTypes?.includes('document')
-      ? (driver?.collectionPluralLabel ?? 'Collections/containers')
-      : _t('widget.tablesViewsFunctions', { defaultMessage: 'Tables, views, functions' })}
-    name="dbObjects"
-    storageName="dbObjectsWidget"
-    skip={!(
-      conid &&
-      (database || singleDatabase) &&
-      (driver?.databaseEngineTypes?.includes('sql') || driver?.databaseEngineTypes?.includes('document'))
-    )}
-  >
-    <SqlObjectList {conid} {database} bind:this={domSqlObjectList} />
-  </WidgetColumnBarItem>
-
-  <WidgetColumnBarItem
-    title={_t('widget.keys', { defaultMessage: 'Keys' })}
-    name="dbObjects"
-    storageName="dbObjectsWidget"
-    skip={!(conid && (database || singleDatabase) && driver?.databaseEngineTypes?.includes('keyvalue'))}
-  >
-    <DbKeysTree {conid} {database} treeKeySeparator={$connection?.treeKeySeparator || ':'} />
-  </WidgetColumnBarItem>
-
-  <WidgetColumnBarItem
-    title={_t('widget.databaseContent', { defaultMessage: 'Database content' })}
-    name="dbObjects"
-    storageName="dbObjectsWidget"
-    skip={conid && (database || singleDatabase)}
-  >
-    <WidgetsInnerContainer>
-      <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
-
-      <ErrorInfo message="Database not selected" icon="img alert" />
-    </WidgetsInnerContainer>
-  </WidgetColumnBarItem>
-
-  <WidgetColumnBarItem
-    title={_t('widget.databaseContent', { defaultMessage: 'Database content' })}
-    name="dbObjects"
-    storageName="dbObjectsWidget"
-    skip={!(conid && (database || singleDatabase) && !driver)}
-  >
-    <WidgetsInnerContainer>
-      <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
-
-      <ErrorInfo
-        message={_t('error.driverNotFound', { defaultMessage: 'Invalid database connection, driver not found' })}
-      />
-    </WidgetsInnerContainer>
-  </WidgetColumnBarItem>
+  <DatabaseWidgetDetailContent bind:domSqlObjectList />
 </WidgetColumnBar>
diff --git a/packages/web/src/widgets/DatabaseWidgetDetailContent.svelte b/packages/web/src/widgets/DatabaseWidgetDetailContent.svelte
new file mode 100644
index 000000000..732ae3b02
--- /dev/null
+++ b/packages/web/src/widgets/DatabaseWidgetDetailContent.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { findEngineDriver } from 'dbgate-tools';
+  import { currentDatabase, extensions, pinnedDatabases, pinnedTables } from '../stores';
+  import { useCloudContentList, useConfig, useConnectionInfo } from '../utility/metadataLoaders';
+
+  import PinnedObjectsList from './PinnedObjectsList.svelte';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+  import SqlObjectList from './SqlObjectList.svelte';
+  import DbKeysTree from './DbKeysTree.svelte';
+  import _ from 'lodash';
+  import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
+  import { _t } from '../translations';
+
+  export let domSqlObjectList = null;
+
+  $: conid = $currentDatabase?.connection?._id;
+  $: connection = useConnectionInfo({ conid });
+  $: driver = findEngineDriver($connection, $extensions);
+  $: singleDatabase = $currentDatabase?.connection?.singleDatabase;
+  $: database = $currentDatabase?.name;
+</script>
+
+<WidgetColumnBarItem
+  title={_t('widget.pinned', { defaultMessage: 'Pinned' })}
+  name="pinned"
+  height="15%"
+  storageName="pinnedItemsWidget"
+  skip={!_.compact($pinnedDatabases).length &&
+    !$pinnedTables.some(x => x && x.conid == conid && x.database == $currentDatabase?.name)}
+>
+  <PinnedObjectsList />
+</WidgetColumnBarItem>
+
+<WidgetColumnBarItem
+  title={driver?.databaseEngineTypes?.includes('document')
+    ? (driver?.collectionPluralLabel ?? 'Collections/containers')
+    : _t('widget.tablesViewsFunctions', { defaultMessage: 'Tables, views, functions' })}
+  name="dbObjects"
+  storageName="dbObjectsWidget"
+  skip={!(
+    conid &&
+    (database || singleDatabase) &&
+    (driver?.databaseEngineTypes?.includes('sql') || driver?.databaseEngineTypes?.includes('document'))
+  )}
+>
+  <SqlObjectList {conid} {database} bind:this={domSqlObjectList} />
+</WidgetColumnBarItem>
+
+<WidgetColumnBarItem
+  title={_t('widget.keys', { defaultMessage: 'Keys' })}
+  name="dbObjects"
+  storageName="dbObjectsWidget"
+  skip={!(conid && (database || singleDatabase) && driver?.databaseEngineTypes?.includes('keyvalue'))}
+>
+  <DbKeysTree {conid} {database} treeKeySeparator={$connection?.treeKeySeparator || ':'} />
+</WidgetColumnBarItem>
+
+<WidgetColumnBarItem
+  title={_t('widget.databaseContent', { defaultMessage: 'Database content' })}
+  name="dbObjects"
+  storageName="dbObjectsWidget"
+  skip={conid && (database || singleDatabase)}
+>
+  <WidgetsInnerContainer>
+    <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
+
+    <ErrorInfo message="Database not selected" icon="img alert" />
+  </WidgetsInnerContainer>
+</WidgetColumnBarItem>
+
+<WidgetColumnBarItem
+  title={_t('widget.databaseContent', { defaultMessage: 'Database content' })}
+  name="dbObjects"
+  storageName="dbObjectsWidget"
+  skip={!(conid && (database || singleDatabase) && !driver)}
+>
+  <WidgetsInnerContainer>
+    <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
+
+    <ErrorInfo
+      message={_t('error.driverNotFound', { defaultMessage: 'Invalid database connection, driver not found' })}
+    />
+  </WidgetsInnerContainer>
+</WidgetColumnBarItem>
diff --git a/packages/web/src/widgets/PrivateCloudWidget.svelte b/packages/web/src/widgets/PrivateCloudWidget.svelte
index 777ec4c00..aaed201c6 100644
--- a/packages/web/src/widgets/PrivateCloudWidget.svelte
+++ b/packages/web/src/widgets/PrivateCloudWidget.svelte
@@ -19,9 +19,11 @@
   import { plusExpandIcon } from '../icons/expandIcons';
   import { volatileConnectionMapStore } from '../utility/api';
   import SubCloudItemsList from '../appobj/SubCloudItemsList.svelte';
+  import DatabaseWidgetDetailContent from './DatabaseWidgetDetailContent.svelte';
 
   let publicFilter = '';
   let cloudFilter = '';
+  let domSqlObjectList = null;
 
   const cloudContentList = useCloudContentList();
   const serverStatus = useServerStatus();
@@ -91,7 +93,12 @@
         setIsExpanded={(data, value) => {
           expandedConnections.update(old => (value ? [...old, data.conid] : old.filter(x => x != data.conid)));
         }}
+        passProps={{
+          onFocusSqlObjectList: () => domSqlObjectList.focus(),
+        }}
       />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
+
+  <DatabaseWidgetDetailContent bind:domSqlObjectList />
 </WidgetColumnBar>