fix(compass-sidebar): convert to ts, fix save connections bug COMPASS…

…-7418 (#5077)

packages/compass-databases-navigation/src/databases-navigation-tree.tsx

@@ -66,7 +66,7 @@ type TreeItem = PlaceholderTreeItem | DatabaseTreeItem | CollectionTreeItem;
 type ListItemData = {
   items: TreeItem[];
   isReadOnly: boolean;
-  activeNamespace: string;
+  activeNamespace?: string;
   currentTabbable?: string;
   onDatabaseExpand(this: void, id: string, isExpanded: boolean): void;
   onNamespaceAction(this: void, namespace: string, action: Actions): void;

packages/compass-sidebar/.mocharc.js

@@ -1,6 +1 @@
-const base = require('@mongodb-js/mocha-config-compass/compass-plugin');
-
-module.exports = {
-  ...base,
-  require: base.require.concat(['test/setup.js']),
-};
+module.exports = require('@mongodb-js/mocha-config-compass/compass-plugin');

packages/compass-sidebar/package.json

@@ -24,14 +24,14 @@
   ],
   "license": "SSPL",
   "main": "dist/index.js",
-  "compass:main": "src/index.js",
+  "compass:main": "src/index.ts",
   "types": "dist/src/index.d.ts",
   "exports": {
     "browser": "./dist/browser.js",
     "require": "./dist/index.js"
   },
   "compass:exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.ts"
   },
   "scripts": {
     "bootstrap": "npm run postcompile",
@@ -97,22 +97,17 @@
     "debug": "^4.2.0",
     "depcheck": "^1.4.1",
     "eslint": "^7.25.0",
-    "hadron-app": "^5.15.0",
     "hadron-app-registry": "^9.0.13",
     "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "mongodb-ns": "^2.4.0",
-    "mongodb-reflux-store": "^0.0.1",
     "nyc": "^15.1.0",
     "prettier": "^2.7.1",
-    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.1",
-    "reflux": "^0.4.1",
-    "reflux-state-mixin": "github:mongodb-js/reflux-state-mixin",
     "sinon": "^9.2.3",
     "xvfb-maybe": "^0.2.1"
   }

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

@@ -2,22 +2,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { InfoModal, Body, css, spacing } from '@mongodb-js/compass-components';
 import { ServerType, TopologyType } from 'mongodb-instance-model';
-import type { MongoDBInstance } from 'mongodb-instance-model';
-import type { ConnectionOptions } from '../modules/connection-options';
-
-type Collection = {
-  id: string;
-  name: string;
-  type: string;
-};
-
-type Database = {
-  _id: string;
-  name: string;
-  collectionsStatus: string;
-  collectionsLength: number;
-  collections: Collection[];
-};
+import type { ConnectionInfo as ConnectionStorageConnectionInfo } from '@mongodb-js/connection-storage/renderer';
+import type { RootState } from '../modules';
+import type { Database } from '../modules/databases';
 
 type ConnectionInfo = {
   term: string;
@@ -107,15 +94,13 @@ function getVersionDistro({
   return isEnterprise ? 'Enterprise' : 'Community';
 }
 
-type InfoParameters = {
-  instance: MongoDBInstance;
+type InfoParameters = Pick<RootState, 'instance' | 'connectionOptions'> & {
   databases: Database[];
-  connectionInfo: ConnectionInfo;
-  connectionOptions: ConnectionOptions;
+  connectionInfo: Partial<ConnectionStorageConnectionInfo>;
 };
 
 function getStatsInfo({ instance, databases }: InfoParameters): ConnectionInfo {
-  const isReady = instance.refreshingStatus === 'ready';
+  const isReady = instance?.refreshingStatus === 'ready';
 
   const numDbs = isReady ? databases.length : '-';
   const numCollections = isReady
@@ -135,7 +120,7 @@ function getStatsInfo({ instance, databases }: InfoParameters): ConnectionInfo {
 }
 
 function getHostInfo({ instance }: InfoParameters): ConnectionInfo {
-  const { type, servers } = instance.topologyDescription;
+  const { type, servers = [] } = instance?.topologyDescription ?? {};
 
   let heading = servers.length === 1 ? 'Host' : 'Hosts';
   if (type === TopologyType.LOAD_BALANCED) {
@@ -168,7 +153,7 @@ function makeNodesInfo(
 }
 
 function getClusterInfo({ instance }: InfoParameters): ConnectionInfo {
-  const { type, setName, servers } = instance.topologyDescription;
+  const { type, setName, servers = [] } = instance?.topologyDescription ?? {};
 
   let clusterType: string;
   let nodesInfo;
@@ -205,12 +190,12 @@ function getClusterInfo({ instance }: InfoParameters): ConnectionInfo {
 function getVersionInfo({ instance }: InfoParameters): ConnectionInfo {
   return {
     term: 'Edition',
-    description: instance.dataLake.isDataLake
-      ? `Atlas Data Federation ${instance.dataLake.version ?? ''}`
-      : `MongoDB ${instance.build.version} ${getVersionDistro({
-          isEnterprise: instance.build.isEnterprise,
-          isLocalAtlas: instance.isLocalAtlas,
-          isAtlas: instance.isAtlas,
+    description: instance?.dataLake.isDataLake
+      ? `Atlas Data Federation ${instance?.dataLake.version ?? ''}`
+      : `MongoDB ${instance?.build.version} ${getVersionDistro({
+          isEnterprise: instance?.build.isEnterprise,
+          isLocalAtlas: instance?.isLocalAtlas,
+          isAtlas: instance?.isAtlas,
         })}`,
   };
 }
@@ -254,16 +239,7 @@ function getInfos(infoParameters: InfoParameters) {
   return infos;
 }
 
-const mapStateToProps = (state: {
-  instance: MongoDBInstance;
-  databases: {
-    databases: Database[];
-  };
-  connectionInfo: {
-    connectionInfo: ConnectionInfo;
-  };
-  connectionOptions: ConnectionOptions;
-}) => {
+const mapStateToProps = (state: RootState) => {
   const { instance, databases, connectionOptions } = state;
   const { connectionInfo } = state.connectionInfo;
 

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

@@ -10,7 +10,8 @@ import {
   Subtitle,
   Overline,
 } from '@mongodb-js/compass-components';
-import type { MongoDBInstance } from 'mongodb-instance-model';
+import type { RootState } from '../modules';
+import type { Database } from '../modules/databases';
 
 type RefreshingStatus =
   | 'initial'
@@ -19,20 +20,6 @@ type RefreshingStatus =
   | 'ready'
   | 'error';
 
-type Collection = {
-  id: string;
-  name: string;
-  type: string;
-};
-
-type Database = {
-  _id: string;
-  name: string;
-  collectionsStatus: string;
-  collectionsLength: number;
-  collections: Collection[];
-};
-
 const dbStats = css({
   display: 'flex',
   alignItems: 'center',
@@ -93,12 +80,7 @@ export function DBStats({
   );
 }
 
-const mapStateToProps = (state: {
-  instance?: MongoDBInstance;
-  databases: {
-    databases: Database[];
-  };
-}) => ({
+const mapStateToProps = (state: RootState) => ({
   refreshingStatus: state.instance
     ? state.instance.refreshingStatus
     : 'initial',

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

@@ -22,6 +22,7 @@ import DatabaseCollectionFilter from './database-collection-filter';
 import SidebarDatabasesNavigation from './sidebar-databases-navigation';
 
 import { changeFilterRegex } from '../modules/databases';
+import type { RootState } from '../modules';
 
 type DatabasesActions = 'open-create-database' | 'refresh-databases';
 
@@ -272,45 +273,31 @@ export function NavigationItems({
   );
 }
 
-const mapStateToProps =
-  (state: // TODO(COMPASS-6914): Properly type stores instead of this
-  {
-    location: string | null;
-    databases: {
-      databases: any[];
-    };
-    instance?: {
-      dataLake: {
-        isDataLake: boolean;
-      };
-      isWritable: boolean;
-      databasesStatus: string;
-    };
-  }) => {
-    const totalCollectionsCount = state.databases.databases.reduce(
-      (acc: number, db: { collectionsLength: number }) => {
-        return acc + db.collectionsLength;
-      },
-      0
-    );
+const mapStateToProps = (state: RootState) => {
+  const totalCollectionsCount = state.databases.databases.reduce(
+    (acc: number, db: { collectionsLength: number }) => {
+      return acc + db.collectionsLength;
+    },
+    0
+  );
 
-    const databasesStatus = state.instance?.databasesStatus;
-    const isReady =
-      databasesStatus !== undefined &&
-      !['initial', 'fetching'].includes(databasesStatus);
+  const databasesStatus = state.instance?.databasesStatus;
+  const isReady =
+    databasesStatus !== undefined &&
+    !['initial', 'fetching'].includes(databasesStatus);
 
-    const numNonSpecialDatabases = state.databases.databases
-      .map((x: { _id: string }) => toNS(x._id))
-      .filter((x) => !x.specialish).length;
+  const numNonSpecialDatabases = state.databases.databases
+    .map((x: { _id: string }) => toNS(x._id))
+    .filter((x) => !x.specialish).length;
 
-    return {
-      currentLocation: state.location,
-      isDataLake: state.instance?.dataLake.isDataLake,
-      isWritable: state.instance?.isWritable,
-      showTooManyCollectionsInsight: totalCollectionsCount > 10_000,
-      showCreateDatabaseGuideCue: isReady && numNonSpecialDatabases === 0,
-    };
+  return {
+    currentLocation: state.location,
+    isDataLake: state.instance?.dataLake.isDataLake,
+    isWritable: state.instance?.isWritable,
+    showTooManyCollectionsInsight: totalCollectionsCount > 10_000,
+    showCreateDatabaseGuideCue: isReady && numNonSpecialDatabases === 0,
   };
+};
 
 const MappedNavigationItems = connect(mapStateToProps, {
   changeFilterRegex,