tmp: implement store and most of the business logic

Author: gribnoysup

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

@@ -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.tsx renamed to packages/compass-components/src/components/select-table.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-components/src/components/workspace-container.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/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/src/components/export-modal.tsx

@@ -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/import-modal.tsx

@@ -3,6 +3,10 @@
   "compilerOptions": {
     "outDir": "dist"
   },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*",
+    "../compass-components/src/components/select-table.spec.tsx",
+    "../compass-components/src/components/select-table.tsx"
+  ],
   "exclude": ["./src/**/*.spec.*"]
 }

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

@@ -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-connections/src/stores/connections-store-redux.ts

@@ -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) => {

packages/compass-connections/src/stores/store-context.tsx

@@ -1,12 +1,31 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import DiagramEditor from './diagram-editor';
+import SavedDiagramsList from './saved-diagrams-list';
+import NewDiagramFormModal from './new-diagram-form';
+import type { DataModelingState } from '../store/reducer';
 
-type DataModelingPluginInitialProps = Record<string, never>;
+type DataModelingPluginInitialProps = {
+  showList: boolean;
+};
 
-const DataModeling: React.FunctionComponent<
-  DataModelingPluginInitialProps
-> = () => {
-  return <>Hello from Data Modeling plugin</>;
+const DataModeling: React.FunctionComponent<DataModelingPluginInitialProps> = ({
+  showList,
+}) => {
+  return (
+    <>
+      {showList ? (
+        <SavedDiagramsList></SavedDiagramsList>
+      ) : (
+        <DiagramEditor></DiagramEditor>
+      )}
+      <NewDiagramFormModal></NewDiagramFormModal>
+    </>
+  );
 };
 
-export default connect()(DataModeling);
+export default connect((state: DataModelingState) => {
+  return {
+    showList: state.step === 'NO_DIAGRAM_SELECTED',
+  };
+})(DataModeling);