database content UX

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>