tmp: implement store and most of the business logic

Author: gribnoysup

package-lock.json

@@ -1,3 +1,4 @@
+import React, { useCallback } from 'react';
 import {
   Cell,
   Checkbox,
@@ -7,8 +8,7 @@ import {
   Table,
   TableBody,
   TableHead,
-} from '@mongodb-js/compass-components';
-import React, { useCallback } from 'react';
+} from './leafygreen';
 
 type SelectItem = {
   id: string;

packages/compass-connection-import-export/src/components/select-table.spec.tsx renamed to packages/compass-components/src/components/select-table.spec.tsx

@@ -99,7 +99,7 @@ const darkThemeStyles = css({
 });
 
 type WorkspaceContainerProps = {
-  toolbar?: React.ReactNode;
+  toolbar?: React.ReactNode | (() => void);
   toolbarRef?: React.Ref<HTMLDivElement>;
   scrollableContainerRef?: React.Ref<HTMLDivElement>;
   initialTopInView?: boolean;
@@ -148,7 +148,7 @@ function WorkspaceContainer({
     >
       {toolbar && (
         <div ref={toolbarRef} className={toolbarStyles}>
-          {toolbar}
+          {typeof toolbar === 'function' ? toolbar() : toolbar}
         </div>
       )}
       <div className={scrollBoxStyles} ref={scrollContainer}>

packages/compass-connection-import-export/src/components/select-table.tsx renamed to packages/compass-components/src/components/select-table.tsx

@@ -209,3 +209,4 @@ export {
   type VirtualListProps,
   type ItemRenderer as VirtualListItemRenderer,
 } from './components/virtual-list';
+export { SelectTable } from './components/select-table';

packages/compass-components/src/components/workspace-container.tsx

@@ -72,7 +72,6 @@
     "chai": "^4.3.6",
     "depcheck": "^1.4.1",
     "gen-esm-wrapper": "^1.1.0",
-    "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "nyc": "^15.1.0",
     "sinon": "^9.2.3",

packages/compass-components/src/index.ts

@@ -6,10 +6,10 @@ import {
   FormFieldContainer,
   FormModal,
   openToast,
+  SelectTable,
 } from '@mongodb-js/compass-components';
 import { FileInput } from './file-input';
 import { Passphrase } from './passphrase';
-import { SelectTable } from './select-table';
 import type { ImportExportResult } from '../hooks/common';
 import { useOpenModalThroughIpc } from '../hooks/common';
 import { useExportConnections } from '../hooks/use-export-connections';

packages/compass-connection-import-export/package.json

@@ -7,10 +7,10 @@ import {
   FormModal,
   spacing,
   openToast,
+  SelectTable,
 } from '@mongodb-js/compass-components';
 import { FileInput } from './file-input';
 import { Passphrase } from './passphrase';
-import { SelectTable } from './select-table';
 import type { ImportExportResult } from '../hooks/common';
 import { useOpenModalThroughIpc } from '../hooks/common';
 import { useImportConnections } from '../hooks/use-import-connections';

packages/compass-connection-import-export/src/components/export-modal.tsx

@@ -1479,6 +1479,13 @@ const connectWithOptions = (
       return inflightConnection;
     }
     inflightConnection = (async () => {
+      if (
+        getCurrentConnectionStatus(getState(), connectionInfo.id) ===
+        'connected'
+      ) {
+        return;
+      }
+
       const isAutoconnectAttempt = isAutoconnectInfo(
         getState(),
         connectionInfo.id

packages/compass-connection-import-export/src/components/import-modal.tsx

@@ -271,14 +271,15 @@ export function useConnectionIds(
 export function useConnectionsList(
   filter?: (connection: ConnectionState) => boolean
 ) {
-  return useSelector<ConnectionState[]>(
+  return useSelector<(ConnectionState & { title: string })[]>(
     (state) => {
       return state.connections.ids
         .filter((id) => {
           return filter?.(state.connections.byId[id]) ?? true;
         })
         .map((id) => {
-          return state.connections.byId[id];
+          const connection = state.connections.byId[id];
+          return { ...connection, title: getConnectionTitle(connection.info) };
         });
     },
     (a, b) => {