cloud database content

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
+  <DatabaseWidgetDetailContent bind:domSqlObjectList />
-    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>
 </WidgetColumnBar>

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>

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>