wip

Author: lerouxb

packages/compass-connections/src/components/connection-modal.tsx

@@ -0,0 +1,84 @@
+import { connect } from 'react-redux';
+import ConnectionFormModal from '@mongodb-js/connection-form';
+import type { ConnectionInfo } from '@mongodb-js/connection-storage/provider';
+import type {
+  ConnectionId,
+  ConnectionState,
+} from '../stores/connections-store-redux';
+
+function shouldDisableConnectionEditing(connection: ConnectionState): boolean {
+  return connection.status === 'connected';
+}
+
+function mapState({
+  isEditingConnectionInfoModalOpen,
+  editingConnectionInfo,
+  connectionErrors,
+  connections,
+}: {
+  isEditingConnectionInfoModalOpen: boolean;
+  editingConnectionInfo: ConnectionInfo;
+  connectionErrors: Record<string, Error | null>;
+  connections: {
+    byId: Record<ConnectionId, ConnectionState>;
+  };
+}) {
+  const disableEditingConnectedConnection = shouldDisableConnectionEditing(
+    connections.byId[editingConnectionInfo.id]
+  );
+
+  return {
+    isOpen: isEditingConnectionInfoModalOpen,
+    initialConnectionInfo: editingConnectionInfo,
+    connectionErrorMessage: connectionErrors[editingConnectionInfo.id]?.message,
+    disableEditingConnectedConnection,
+  };
+}
+
+function mapDispatch(
+  {
+    disconnect,
+    cancelEditConnection,
+  }: {
+    //connect: (connectionInfo: ConnectionInfo) => Promise<void>;
+    //saveAndConnect: (connectionInfo: ConnectionInfo) => Promise<void>;
+    disconnect: (connectionId: string) => void;
+
+    //createNewConnection: () => void;
+    //editConnection: (connectionId: string) => void;
+    //saveEditedConnection: (connectionInfo: ConnectionInfo) => Promise<void>;
+    cancelEditConnection: (connectionId: string) => void;
+    /*
+  duplicateConnection: (
+    connectionId: string,
+    options?: { autoDuplicate: boolean }
+  ) => void;
+  */
+    //toggleConnectionFavoritedStatus: (connectionId: string) => void;
+    //removeConnection: (connectionId: string) => void;
+
+    //removeAllRecentConnections: () => void;
+    //showNonGenuineMongoDBWarningModal: (connectionId: string) => void;
+  },
+  {
+    isEditingNewConnection,
+    editingConnectionInfo,
+    connections,
+  }: {
+    isEditingNewConnection: boolean;
+    editingConnectionInfo: ConnectionInfo;
+    connections: {
+      byId: Record<ConnectionId, ConnectionState>;
+    };
+  }
+) {
+  const disableEditingConnectedConnection = shouldDisableConnectionEditing(
+    connections.byId[editingConnectionInfo.id]
+  );
+
+  return {
+    disconnect,
+  };
+}
+
+export default connect(mapState, mapDispatch)(ConnectionFormModal);

packages/compass-connections/src/index.tsx

@@ -20,6 +20,7 @@ import {
 export { default as SingleConnectionForm } from './components/legacy-connections';
 export { LegacyConnectionsModal } from './components/legacy-connections-modal';
 export { useConnectionFormPreferences } from './hooks/use-connection-form-preferences';
+import ConnectionModal from './components/connection-modal';
 import type { connect as devtoolsConnect } from 'mongodb-data-service';
 import type { ExtraConnectionData as ExtraConnectionDataForTelemetry } from '@mongodb-js/compass-telemetry';
 export type { ConnectionFeature } from './utils/connection-supports';
@@ -36,7 +37,12 @@ const ConnectionsComponent: React.FunctionComponent<{
   connectFn?: typeof devtoolsConnect | undefined;
   preloadStorageConnectionInfos?: ConnectionInfo[];
 }> = ({ children }) => {
-  return <ConnectionActionsProvider>{children}</ConnectionActionsProvider>;
+  return (
+    <ConnectionActionsProvider>
+      {children}
+      <ConnectionModal />
+    </ConnectionActionsProvider>
+  );
 };
 
 const CompassConnectionsPlugin = registerHadronPlugin(

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

@@ -229,47 +229,6 @@ export function MultipleConnectionSidebar({
           }}
           onOpenConnectViaModal={onOpenConnectViaModal}
         />
-        {editingConnectionInfo && (
-          <ConnectionFormModal
-            disableEditingConnectedConnection={
-              disableEditingConnectedConnection
-            }
-            onDisconnectClicked={() => disconnect(editingConnectionInfo.id)}
-            isOpen={isEditingConnectionInfoModalOpen}
-            setOpen={(newOpen) => {
-              // This is how leafygreen propagates `X` button click
-              if (newOpen === false) {
-                cancelEditConnection(editingConnectionInfo.id);
-              }
-            }}
-            initialConnectionInfo={editingConnectionInfo}
-            connectionErrorMessage={
-              connectionErrors[editingConnectionInfo.id]?.message
-            }
-            openSettingsModal={openSettingsModal}
-            {...formPreferences}
-            onCancel={() => {
-              cancelEditConnection(editingConnectionInfo.id);
-            }}
-            onSaveClicked={(connectionInfo) => {
-              return saveEditedConnection(connectionInfo);
-            }}
-            onConnectClicked={
-              isEditingNewConnection || disableEditingConnectedConnection
-                ? undefined
-                : (connectionInfo) => {
-                    void connect(connectionInfo);
-                  }
-            }
-            onSaveAndConnectClicked={
-              disableEditingConnectedConnection
-                ? undefined
-                : (connectionInfo) => {
-                    void saveAndConnect(connectionInfo);
-                  }
-            }
-          />
-        )}
         <MappedCsfleModal
           connectionId={csfleModalConnectionId}
           onClose={onCloseCsfleModal}