feat(sidebar): move db stats to the connection modal COMPASS-6079 (#3408)

* move db stats to the connection modal

* tweak padding

Author: lerouxb

packages/compass-sidebar/src/components/connection-info-modal.tsx

@@ -6,6 +6,20 @@ import type { MongoDBInstance } from 'mongodb-instance-model';
 import type { ConnectionOptions } from '../modules/connection-options';
 import { ENTERPRISE, COMMUNITY } from '../constants/server-version';
 
+type Collection = {
+  id: string;
+  name: string;
+  type: string;
+};
+
+type Database = {
+  _id: string;
+  name: string;
+  collectionsStatus: string;
+  collectionsLength: number;
+  collections: Collection[];
+};
+
 type ConnectionInfo = {
   term: string;
   description: React.ReactChild;
@@ -76,10 +90,31 @@ function getVersionDistro(isEnterprise?: boolean): string {
 
 type InfoParameters = {
   instance: MongoDBInstance;
+  databases: Database[];
   connectionInfo: ConnectionInfo;
   connectionOptions: ConnectionOptions;
 };
 
+function getStatsInfo({ instance, databases }: InfoParameters): ConnectionInfo {
+  const isReady = instance.refreshingStatus === 'ready';
+
+  const numDbs = isReady ? databases.length : '-';
+  const numCollections = isReady
+    ? databases.map((db) => db.collectionsLength).reduce((acc, n) => acc + n, 0)
+    : '-';
+  return {
+    term: 'Stats',
+    description: (
+      <div>
+        <div>{`${numDbs} DB${numDbs === 1 ? '' : 's'}`}</div>
+        <div>{`${numCollections} Collection${
+          numCollections === 1 ? '' : 's'
+        }`}</div>
+      </div>
+    ),
+  };
+}
+
 function getHostInfo({ instance }: InfoParameters): ConnectionInfo {
   const { type, servers } = instance.topologyDescription;
 
@@ -178,6 +213,8 @@ function getInfos(infoParameters: InfoParameters) {
     return infos;
   }
 
+  infos.push(getStatsInfo(infoParameters));
+
   infos.push(getHostInfo(infoParameters));
 
   if (
@@ -198,16 +235,24 @@ function getInfos(infoParameters: InfoParameters) {
 
 const mapStateToProps = (state: {
   instance: MongoDBInstance;
+  databases: {
+    databases: Database[];
+  };
   connectionInfo: {
     connectionInfo: ConnectionInfo;
   };
   connectionOptions: ConnectionOptions;
 }) => {
-  const { instance, connectionOptions } = state;
+  const { instance, databases, connectionOptions } = state;
   const { connectionInfo } = state.connectionInfo;
 
   return {
-    infos: getInfos({ instance, connectionInfo, connectionOptions }),
+    infos: getInfos({
+      instance,
+      databases: databases.databases,
+      connectionInfo,
+      connectionOptions,
+    }),
   };
 };
 

packages/compass-sidebar/src/components/csfle-marker.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mongodb-js/compass-components';
 
 const badgeContainerStyles = css({
-  padding: `0 ${spacing[3]}px ${spacing[3]}px`,
+  padding: `0 ${spacing[3]}px ${spacing[2]}px`,
 });
 
 const badgeButtonStyles = css({

packages/compass-sidebar/src/components/db-stats.tsx

@@ -11,6 +11,7 @@ import {
   Subtitle,
   Overline,
 } from '@mongodb-js/compass-components';
+import type { MongoDBInstance } from 'mongodb-instance-model';
 
 type RefreshingStatus =
   | 'initial'
@@ -99,9 +100,7 @@ export function DBStats({
 }
 
 const mapStateToProps = (state: {
-  instance?: {
-    refreshingStatus: RefreshingStatus;
-  };
+  instance?: MongoDBInstance;
   databases: {
     databases: Database[];
   };

packages/compass-sidebar/src/components/non-genuine-marker.tsx

@@ -10,7 +10,7 @@ import {
 } from '@mongodb-js/compass-components';
 
 const nonGenuineMarkerContainer = css({
-  padding: `0 ${spacing[3]}px ${spacing[3]}px`,
+  padding: `0 ${spacing[3]}px ${spacing[2]}px`,
 });
 
 const nonGenuineMarkerButton = css({

packages/compass-sidebar/src/components/sidebar.tsx

@@ -4,6 +4,8 @@ import { connect } from 'react-redux';
 import { getConnectionTitle } from 'mongodb-data-service';
 import type { ConnectionInfo } from 'mongodb-data-service';
 import {
+  css,
+  spacing,
   ResizableSidebar,
   useToast,
   ToastVariant,
@@ -13,7 +15,6 @@ import { SaveConnectionModal } from '@mongodb-js/connection-form';
 
 import SidebarTitle from './sidebar-title';
 import FavoriteIndicator from './favorite-indicator';
-import DBStats from './db-stats';
 import NavigationItems from './navigation-items';
 import ConnectionInfoModal from './connection-info-modal';
 import NonGenuineWarningModal from './non-genuine-warning-modal';
@@ -27,6 +28,11 @@ import type { MongoDBInstance } from 'mongodb-instance-model';
 
 const TOAST_TIMEOUT_MS = 5000; // 5 seconds.
 
+// NOTE: This covers both the typical case where we have no badges and the case where we do.
+const badgesPlaceholderStyles = css({
+  paddingTop: spacing[3],
+});
+
 // eslint-disable-next-line no-empty-pattern
 export function Sidebar({
   connectionInfo,
@@ -149,19 +155,20 @@ export function Sidebar({
           <FavoriteIndicator favorite={connectionInfo.favorite} />
         )}
 
-        {isExpanded && <DBStats />}
-        {isExpanded && (
-          <NonGenuineMarker
-            isGenuine={isGenuine}
-            showNonGenuineModal={showNonGenuineModal}
-          />
-        )}
-        {isExpanded && (
-          <CSFLEMarker
-            csfleMode={csfleMode}
-            toggleCSFLEModalVisible={toggleCSFLEModalVisible}
-          />
-        )}
+        <div className={badgesPlaceholderStyles}>
+          {isExpanded && (
+            <NonGenuineMarker
+              isGenuine={isGenuine}
+              showNonGenuineModal={showNonGenuineModal}
+            />
+          )}
+          {isExpanded && (
+            <CSFLEMarker
+              csfleMode={csfleMode}
+              toggleCSFLEModalVisible={toggleCSFLEModalVisible}
+            />
+          )}
+        </div>
 
         <NavigationItems isExpanded={isExpanded} onAction={onAction} />
 

packages/compass-sidebar/src/stores/store.js

@@ -65,6 +65,7 @@ store.onActivated = (appRegistry) => {
         }),
       };
     });
+
     store.dispatch(changeDatabases(dbs));
   }, 300);
 
@@ -121,7 +122,7 @@ store.onActivated = (appRegistry) => {
       onDatabasesChange(instance.databases);
     });
 
-    instance.on('change:databases.', () => {
+    instance.on('change:databases', () => {
       onDatabasesChange(instance.databases);
     });
 

packages/database-model/lib/model.js

@@ -118,7 +118,7 @@ const DatabaseModel = AmpersandModel.extend(
       // if possible if we haven't fetched collections yet, but use the real
       // number if real collections info is available
       collectionsLength: {
-        deps: ['collection_count', 'collectionsStatus'],
+        deps: ['collection_count', 'collectionsStatus', 'collections'],
         fn() {
           return ['ready', 'refreshing'].includes(this.collectionsStatus)
             ? this.collections.length

packages/instance-model/index.d.ts

@@ -56,7 +56,7 @@ declare class MongoDBInstanceProps {
   statusError: string | null;
   databasesStatus: string;
   databasesStatusError: string | null;
-  refreshingStatus: string;
+  refreshingStatus: 'initial' | 'fetching' | 'refreshing' | 'ready' | 'error';
   refreshingStatusError: string | null;
   isAtlas: boolean;
   atlasVersion: string;