cloud widgets refactor

packages/web/src/icons/FontIcon.svelte

@@ -41,7 +41,7 @@
     'icon cloud-upload': 'mdi mdi-cloud-upload',
     'icon cloud': 'mdi mdi-cloud',
     'icon cloud-public': 'mdi mdi-cloud-search',
-    'icon cloud-logged': 'mdi mdi-cloud-key',
+    'icon cloud-private': 'mdi mdi-cloud-key',
     'icon import': 'mdi mdi-application-import',
     'icon export': 'mdi mdi-application-export',
     'icon new-connection': 'mdi mdi-database-plus',

packages/web/src/widgets/PrivateCloudWidget.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-  import SavedFilesList from './SavedFilesList.svelte';
-
   import WidgetColumnBar from './WidgetColumnBar.svelte';
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
 
   import AppObjectList from '../appobj/AppObjectList.svelte';
-  import * as publicCloudFileAppObject from '../appobj/PublicCloudFileAppObject.svelte';
   import * as cloudContentAppObject from '../appobj/CloudContentAppObject.svelte';
   import { useCloudContentList, usePublicCloudFiles, useServerStatus } from '../utility/metadataLoaders';
   import { _t } from '../translations';
@@ -19,7 +16,6 @@
   import { apiCall } from '../utility/api';
   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';
@@ -27,7 +23,6 @@
   let publicFilter = '';
   let cloudFilter = '';
 
-  const publicFiles = usePublicCloudFiles();
   const cloudContentList = useCloudContentList();
   const serverStatus = useServerStatus();
 
@@ -52,10 +47,6 @@
 
   $: console.log('cloudContentFlat', cloudContentFlat);
 
-  async function handleRefreshPublic() {
-    await apiCall('cloud/refresh-public-files');
-  }
-
   async function handleRefreshContent() {
     await apiCall('cloud/refresh-content');
   }
@@ -103,27 +94,4 @@
       />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
-
-  <WidgetColumnBarItem title="Public Knowledge Base" name="publicCloud" storageName="publicCloudItems">
-    <WidgetsInnerContainer>
-      <SearchBoxWrapper>
-        <SearchInput placeholder="Search public files" bind:value={publicFilter} />
-        <CloseSearchButton bind:filter={publicFilter} />
-        <InlineButton
-          on:click={handleRefreshPublic}
-          title="Refresh files"
-          data-testid="CloudItemsWidget_buttonRefreshPublic"
-        >
-          <FontIcon icon="icon refresh" />
-        </InlineButton>
-      </SearchBoxWrapper>
-
-      <AppObjectList
-        list={$publicFiles || []}
-        module={publicCloudFileAppObject}
-        groupFunc={data => data.folder || undefined}
-        filter={publicFilter}
-      />
-    </WidgetsInnerContainer>
-  </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/PublicCloudWidget.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import SavedFilesList from './SavedFilesList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as publicCloudFileAppObject from '../appobj/PublicCloudFileAppObject.svelte';
+  import * as cloudContentAppObject from '../appobj/CloudContentAppObject.svelte';
+  import { useCloudContentList, usePublicCloudFiles, useServerStatus } from '../utility/metadataLoaders';
+  import { _t } from '../translations';
+
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
+  import InlineButton from '../buttons/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { apiCall } from '../utility/api';
+  import _ from 'lodash';
+  let publicFilter = '';
+
+  const publicFiles = usePublicCloudFiles();
+
+  async function handleRefreshPublic() {
+    await apiCall('cloud/refresh-public-files');
+  }
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Public Knowledge Base" name="publicCloud" storageName="publicCloudItems">
+    <WidgetsInnerContainer>
+      <SearchBoxWrapper>
+        <SearchInput placeholder="Search public files" bind:value={publicFilter} />
+        <CloseSearchButton bind:filter={publicFilter} />
+        <InlineButton
+          on:click={handleRefreshPublic}
+          title="Refresh files"
+          data-testid="CloudItemsWidget_buttonRefreshPublic"
+        >
+          <FontIcon icon="icon refresh" />
+        </InlineButton>
+      </SearchBoxWrapper>
+
+      <AppObjectList
+        list={$publicFiles || []}
+        module={publicCloudFileAppObject}
+        groupFunc={data => data.folder || undefined}
+        filter={publicFilter}
+      />
+    </WidgetsInnerContainer>
+  </WidgetColumnBarItem>
+</WidgetColumnBar>

packages/web/src/widgets/WidgetContainer.svelte

@@ -9,7 +9,8 @@
   import AppWidget from './AppWidget.svelte';
   import AdminMenuWidget from './AdminMenuWidget.svelte';
   import AdminPremiumPromoWidget from './AdminPremiumPromoWidget.svelte';
-  import CloudItemsWidget from './CloudItemsWidget.svelte';
+  import PublicCloudWidget from './PublicCloudWidget.svelte';
+  import PrivateCloudWidget from './PrivateCloudWidget.svelte';
 </script>
 
 <DatabaseWidget hidden={$visibleSelectedWidget != 'database'} />
@@ -38,6 +39,9 @@
 {#if $visibleSelectedWidget == 'premium'}
   <AdminPremiumPromoWidget />
 {/if}
-{#if $visibleSelectedWidget == 'cloud'}
-  <CloudItemsWidget />
+{#if $visibleSelectedWidget == 'cloud-public'}
+  <PublicCloudWidget />
+{/if}
+{#if $visibleSelectedWidget == 'cloud-private'}
+  <PrivateCloudWidget />
 {/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -33,6 +33,12 @@
       name: 'database',
       title: 'Database connections',
     },
+    {
+      name: 'cloud-private',
+      title: 'DbGate Cloud',
+      icon: 'icon cloud-private',
+    },
+
     // {
     //   icon: 'fa-table',
     //   name: 'table',
@@ -63,12 +69,9 @@
       title: 'Selected cell data detail view',
     },
     {
-      icon: 'icon cloud',
-      name: 'cloud',
+      name: 'cloud-public',
       title: 'DbGate Cloud',
-      isCloud: true,
-      iconSignedIn: 'icon cloud-logged',
-      iconPublic: 'icon cloud-public',
+      icon: 'icon cloud-public',
     },
     {
       icon: 'icon premium',
@@ -146,7 +149,7 @@
   {#each widgets
     .filter(x => x && hasPermission(`widgets/${x.name}`))
     .filter(x => !x.isPremiumPromo || !isProApp())
-    .map(x => (x.isCloud ? { ...x, icon: $cloudSigninToken ? x.iconSignedIn : x.iconPublic } : x)) as item}
+    .filter(x => x.name != 'cloud-private' || $cloudSigninToken) as item}
     <div
       class="wrapper"
       class:selected={item.name == $visibleSelectedWidget}