database content UX

packages/api/.env

@@ -1,6 +1,6 @@
 DEVMODE=1
 SHELL_SCRIPTING=1
-LOCAL_DBGATE_CLOUD=1
+# LOCAL_DBGATE_CLOUD=1
 # LOCAL_DBGATE_IDENTITY=1
 
 # CLOUD_UPGRADE_FILE=c:\test\upg\upgrade.zip

packages/web/src/widgets/DatabaseWidget.svelte

@@ -43,5 +43,5 @@
     </WidgetColumnBarItem>
   {/if}
 
-  <DatabaseWidgetDetailContent bind:domSqlObjectList />
+  <DatabaseWidgetDetailContent bind:domSqlObjectList showCloudConnection={false} />
 </WidgetColumnBar>

packages/web/src/widgets/DatabaseWidgetDetailContent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { findEngineDriver } from 'dbgate-tools';
-  import { currentDatabase, extensions, pinnedDatabases, pinnedTables } from '../stores';
+  import { currentDatabase, extensions, pinnedDatabases, pinnedTables, selectedWidget } from '../stores';
   import { useConnectionInfo } from '../utility/metadataLoaders';
 
   import PinnedObjectsList from './PinnedObjectsList.svelte';
@@ -13,14 +13,21 @@
   import _ from 'lodash';
   import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
   import { _t } from '../translations';
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
 
   export let domSqlObjectList = null;
+  export let showCloudConnection;
 
   $: conid = $currentDatabase?.connection?._id;
   $: connection = useConnectionInfo({ conid });
   $: driver = findEngineDriver($connection, $extensions);
   $: singleDatabase = $currentDatabase?.connection?.singleDatabase;
   $: database = $currentDatabase?.name;
+
+  $: correctCloudStatus =
+    !conid ||
+    (!showCloudConnection && !conid?.startsWith('cloud://')) ||
+    (showCloudConnection && conid?.startsWith('cloud://'));
 </script>
 
 <WidgetColumnBarItem
@@ -30,6 +37,7 @@
   storageName="pinnedItemsWidget"
   skip={!_.compact($pinnedDatabases).length &&
     !$pinnedTables.some(x => x && x.conid == conid && x.database == $currentDatabase?.name)}
+  positiveCondition={correctCloudStatus}
 >
   <PinnedObjectsList />
 </WidgetColumnBarItem>
@@ -45,6 +53,7 @@
     (database || singleDatabase) &&
     (driver?.databaseEngineTypes?.includes('sql') || driver?.databaseEngineTypes?.includes('document'))
   )}
+  positiveCondition={correctCloudStatus}
 >
   <SqlObjectList {conid} {database} bind:this={domSqlObjectList} />
 </WidgetColumnBarItem>
@@ -54,6 +63,7 @@
   name="dbObjects"
   storageName="dbObjectsWidget"
   skip={!(conid && (database || singleDatabase) && driver?.databaseEngineTypes?.includes('keyvalue'))}
+  positiveCondition={correctCloudStatus}
 >
   <DbKeysTree {conid} {database} treeKeySeparator={$connection?.treeKeySeparator || ':'} />
 </WidgetColumnBarItem>
@@ -63,6 +73,7 @@
   name="dbObjects"
   storageName="dbObjectsWidget"
   skip={conid && (database || singleDatabase)}
+  positiveCondition={correctCloudStatus}
 >
   <WidgetsInnerContainer>
     <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
@@ -76,6 +87,7 @@
   name="dbObjects"
   storageName="dbObjectsWidget"
   skip={!(conid && (database || singleDatabase) && !driver)}
+  positiveCondition={correctCloudStatus}
 >
   <WidgetsInnerContainer>
     <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
@@ -85,3 +97,39 @@
     />
   </WidgetsInnerContainer>
 </WidgetColumnBarItem>
+
+<WidgetColumnBarItem
+  title={_t('widget.databaseContent', { defaultMessage: 'Database content' })}
+  name="incorrectClaudStatus"
+  height="15%"
+  storageName="incorrectClaudStatusWidget"
+  skip={correctCloudStatus}
+>
+  <WidgetsInnerContainer>
+    <ErrorInfo
+      message={showCloudConnection
+        ? _t('error.selectedNotCloudConnection', { defaultMessage: 'Selected connection is not from DbGate cloud' })
+        : _t('error.selectedCloudConnection', { defaultMessage: 'Selected connection is from DbGate cloud' })}
+    />
+
+    <div class="incorrect-cloud-status-wrapper">
+      <FormStyledButton
+        value={`Show database content`}
+        skipWidth
+        on:click={() => {
+          $selectedWidget = conid?.startsWith('cloud://') ? 'cloud-private' : 'database';
+        }}
+      />
+    </div>
+  </WidgetsInnerContainer>
+</WidgetColumnBarItem>
+
+<style>
+  .incorrect-cloud-status-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    margin-top: 10px;
+  }
+</style>

packages/web/src/widgets/PrivateCloudWidget.svelte

@@ -225,5 +225,5 @@
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
 
-  <DatabaseWidgetDetailContent bind:domSqlObjectList />
+  <DatabaseWidgetDetailContent bind:domSqlObjectList showCloudConnection={true} />
 </WidgetColumnBar>

packages/web/src/widgets/WidgetColumnBar.svelte

@@ -29,7 +29,7 @@
     const visibleItemsCount = defs.filter(x => !x.collapsed && !x.skip).length;
     for (let index = 0; index < defs.length; index++) {
       const definition = defs[index];
-      const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip);
+      const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip && x.positiveCondition);
       dynamicPropsCollection[index].set({ splitterVisible, visibleItemsCount });
     }
   }

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -12,6 +12,7 @@
   export let title;
   export let name;
   export let skip = false;
+  export let positiveCondition = true;
   export let height = null;
   export let collapsed = null;
 
@@ -33,11 +34,12 @@
       collapsed,
       height,
       skip,
+      positiveCondition,
     },
     dynamicProps
   );
 
-  $: updateWidgetItemDefinition(widgetItemIndex, { collapsed: !visible, height, skip });
+  $: updateWidgetItemDefinition(widgetItemIndex, { collapsed: !visible, height, skip, positiveCondition });
 
   $: setInitialSize(height, $widgetColumnBarHeight);
 
@@ -67,7 +69,7 @@
   $: collapsible = $dynamicProps.visibleItemsCount != 1 || !visible;
 </script>
 
-{#if !skip}
+{#if !skip && positiveCondition}
   <WidgetTitle
     clickable={collapsible}
     on:click={collapsible ? () => (visible = !visible) : null}