connecting to cloud database

packages/web/src/appobj/CloudContentAppObject.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" context="module">
+  import { cloudConnectionsStore } from '../stores';
+  import { apiCall } from '../utility/api';
   import AppObjectCore from './AppObjectCore.svelte';
 
   export const extractKey = data => data.cntid;
@@ -10,15 +12,44 @@
 
 <script lang="ts">
   import { filterName } from 'dbgate-tools';
+  import ConnectionAppObject, { openConnection } from './ConnectionAppObject.svelte';
 
   export let data;
+  export let passProps;
 
   function createMenu() {
     return [];
   }
+
+  async function handleOpenContent() {
+    switch (data.type) {
+      case 'connection':
+        const conn = await apiCall('connections/get', { conid: data.conid });
+        $cloudConnectionsStore[data.conid] = conn;
+        openConnection(conn);
+        break;
+    }
+  }
 </script>
 
-<AppObjectCore {...$$restProps} {data} icon={'img connection'} title={data.name} menu={createMenu}></AppObjectCore>
+{#if data.conid && $cloudConnectionsStore[data.conid]}
+  <ConnectionAppObject
+    {passProps}
+    data={{
+      ...$cloudConnectionsStore[data.conid],
+      status: data.status,
+    }}
+  />
+{:else}
+  <AppObjectCore
+    {...$$restProps}
+    {data}
+    icon={'img connection'}
+    title={data.name}
+    menu={createMenu}
+    on:click={handleOpenContent}
+  ></AppObjectCore>
+{/if}
 
 <style>
   .info {

packages/web/src/appobj/SubCloudItemsList.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cloudConnectionsStore } from '../stores';
+  import SubDatabaseList from './SubDatabaseList.svelte';
+
+  export let data;
+</script>
+
+{#if data.conid && $cloudConnectionsStore[data.conid]}
+  <SubDatabaseList {...$$props} data={$cloudConnectionsStore[data.conid]} />
+{/if}

packages/web/src/stores.ts

@@ -184,6 +184,8 @@ export const focusedTreeDbKey = writable<{ key: string; root: string; type: stri
 
 export const cloudSigninToken = writableSettingsValue(null, 'cloudSigninToken');
 
+export const cloudConnectionsStore = writable({});
+
 // export const cloudSigninToken = getElectron()
 //   ? writableSettingsValue(null, 'cloudSigninToken')
 //   : writableWithStorage(null, 'cloudSigninToken');

packages/web/src/widgets/CloudItemsWidget.svelte

@@ -7,7 +7,7 @@
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import * as publicCloudFileAppObject from '../appobj/PublicCloudFileAppObject.svelte';
   import * as cloudContentAppObject from '../appobj/CloudContentAppObject.svelte';
-  import { useCloudContentList, usePublicCloudFiles } from '../utility/metadataLoaders';
+  import { useCloudContentList, usePublicCloudFiles, useServerStatus } from '../utility/metadataLoaders';
   import { _t } from '../translations';
 
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
@@ -17,19 +17,41 @@
   import InlineButton from '../buttons/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import { apiCall } from '../utility/api';
-  import { cloudSigninToken } from '../stores';
+  import { cloudConnectionsStore, cloudSigninToken, expandedConnections, openedConnections } from '../stores';
   import _ from 'lodash';
+  import SubDatabaseList from '../appobj/SubDatabaseList.svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
+  import { volatileConnectionMapStore } from '../utility/api';
+  import SubCloudItemsList from '../appobj/SubCloudItemsList.svelte';
 
   let publicFilter = '';
   let cloudFilter = '';
 
-  $: publicFiles = usePublicCloudFiles();
-  $: cloudContentList = useCloudContentList();
+  const publicFiles = usePublicCloudFiles();
+  const cloudContentList = useCloudContentList();
+  const serverStatus = useServerStatus();
 
   $: emptyCloudContent = ($cloudContentList || []).filter(x => !x.items?.length).map(x => x.folid);
-  $: cloudContentFlat = ($cloudContentList || []).flatMap(fld => fld.items ?? []);
+  $: cloudContentFlat = ($cloudContentList || [])
+    .flatMap(fld => fld.items ?? [])
+    .map(data => {
+      if (data.type == 'connection') {
+        const conid = `cloud://${data.folid}/${data.cntid}`;
+        const status = $serverStatus ? $serverStatus[$volatileConnectionMapStore[conid] || conid] : undefined;
+
+        return {
+          ...data,
+          conid,
+          status,
+        };
+      }
+
+      return data;
+    });
   $: contentGroupTitleMap = _.fromPairs(($cloudContentList || []).map(x => [x.folid, x.name]));
 
+  $: console.log('cloudContentFlat', cloudContentFlat);
+
   async function handleRefreshPublic() {
     await apiCall('cloud/refresh-public-files');
   }
@@ -67,6 +89,17 @@
         groupFunc={data => data.folid}
         mapGroupTitle={folid => contentGroupTitleMap[folid]}
         filter={publicFilter}
+        subItemsComponent={() => SubCloudItemsList}
+        expandIconFunc={plusExpandIcon}
+        isExpandable={data =>
+          data.conid &&
+          $cloudConnectionsStore[data.conid] &&
+          !$cloudConnectionsStore[data.conid].singleDatabase &&
+          $openedConnections.includes(data.conid)}
+        getIsExpanded={data => $expandedConnections.includes(data.conid) && !data.singleDatabase}
+        setIsExpanded={(data, value) => {
+          expandedConnections.update(old => (value ? [...old, data.conid] : old.filter(x => x != data.conid)));
+        }}
       />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>