public cloud widget

packages/web/src/appobj/CloudFileAppObject.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export const extractKey = data => data.path;
+</script>
+
+<script lang="ts">
+  import openNewTab from '../utility/openNewTab';
+  import { copyTextToClipboard } from '../utility/clipboard';
+  import { showModal } from '../modals/modalTools';
+  import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import getElectron from '../utility/getElectron';
+  import FavoriteModal from '../modals/FavoriteModal.svelte';
+  import { apiCall } from '../utility/api';
+
+  export let data;
+
+  function createMenu() {
+    return [];
+    //   return [
+    //     { text: 'Delete', onClick: handleDelete },
+    //     { text: 'Edit', onClick: editFavorite },
+    //     { text: 'Edit JSON definition', onClick: editFavoriteJson },
+    //     !electron && data.urlPath && { text: 'Copy link', onClick: copyLink },
+    //   ];
+  }
+</script>
+
+<AppObjectCore {...$$restProps} {data} icon={'img sql-file'} title={data.title} menu={createMenu} />

packages/web/src/icons/FontIcon.svelte

@@ -40,6 +40,8 @@
     'icon invisible-box': 'mdi mdi-minus-box-outline icon-invisible',
     '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 import': 'mdi mdi-application-import',
     'icon export': 'mdi mdi-application-export',
     'icon new-connection': 'mdi mdi-database-plus',

packages/web/src/utility/metadataLoaders.ts

@@ -166,6 +166,12 @@ const authTypesLoader = ({ engine }) => ({
   errorValue: null,
 });
 
+const publicCloudFilesLoader = () => ({
+  url: 'cloud/public-files',
+  params: {},
+  reloadTrigger: { key: `public-cloud-changed` },
+});
+
 async function getCore(loader, args) {
   const { url, params, reloadTrigger, transform, onLoaded, errorValue } = loader(args);
   const key = stableStringify({ url, ...params });
@@ -456,3 +462,10 @@ export function getSchemaList(args) {
 export function useSchemaList(args) {
   return useCore(schemaListLoader, args);
 }
+
+export function getPublicCloudFiles(args) {
+  return getCore(publicCloudFilesLoader, args);
+}
+export function usePublicCloudFiles(args = {}) {
+  return useCore(publicCloudFilesLoader, args);
+}

packages/web/src/widgets/CloudItemsWidget.svelte

@@ -0,0 +1,25 @@
+<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 cloudFileAppObject from '../appobj/CloudFileAppObject.svelte';
+  import { usePublicCloudFiles } from '../utility/metadataLoaders';
+  import { _t } from '../translations';
+
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  $: publicFiles = usePublicCloudFiles();
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Public cloud" name="cloud" height="70%" storageName="publicCloudItems">
+    <WidgetsInnerContainer>
+      <AppObjectList list={$publicFiles || []} module={cloudFileAppObject} groupFunc={data => data.folder} />
+    </WidgetsInnerContainer>
+  </WidgetColumnBarItem>
+
+  <WidgetColumnBarItem title="Favorites" name="favorites" storageName="favoritesWidget"></WidgetColumnBarItem>
+</WidgetColumnBar>

packages/web/src/widgets/WidgetContainer.svelte

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

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -67,6 +67,8 @@
       name: 'cloud',
       title: 'DbGate Cloud',
       isCloud: true,
+      iconSignedIn: 'icon cloud-logged',
+      iconPublic: 'icon cloud-public',
     },
     {
       icon: 'icon premium',
@@ -143,8 +145,8 @@
   {/if}
   {#each widgets
     .filter(x => x && hasPermission(`widgets/${x.name}`))
-    .filter(x => !x.isCloud || $cloudSigninToken)
-    .filter(x => !x.isPremiumPromo || !isProApp()) as item}
+    .filter(x => !x.isPremiumPromo || !isProApp())
+    .map(x => (x.isCloud ? { ...x, icon: $cloudSigninToken ? x.iconSignedIn : x.iconPublic } : x)) as item}
     <div
       class="wrapper"
       class:selected={item.name == $visibleSelectedWidget}