compass-connections plugin component

Author: lerouxb

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

@@ -1,4 +1,4 @@
-import { connect as reduxConnect } from 'react-redux';
+import { connect as reduxConnect } from '../stores/store-context';
 import ConnectionFormModal from '@mongodb-js/connection-form';
 import type { ConnectionInfo } from '@mongodb-js/connection-storage/provider';
 import {
@@ -21,30 +21,29 @@ function shouldDisableConnectionEditing(connection: ConnectionState): boolean {
 function mapState({
   isEditingNewConnection,
   isEditingConnectionInfoModalOpen,
-  editingConnectionInfo,
-  connectionErrors,
+  editingConnectionInfoId,
   connections,
 }: {
   isEditingNewConnection: boolean;
   isEditingConnectionInfoModalOpen: boolean;
-  editingConnectionInfo: ConnectionInfo;
-  connectionErrors: Record<string, Error | null>;
+  editingConnectionInfoId: ConnectionId;
   connections: {
     byId: Record<ConnectionId, ConnectionState>;
   };
 }) {
-  const disableEditingConnectedConnection = shouldDisableConnectionEditing(
-    connections.byId[editingConnectionInfo.id]
-  );
+  const editingConnection = connections.byId[editingConnectionInfoId];
+  const editingConnectionInfo = editingConnection.info;
+
+  const disableEditingConnectedConnection =
+    shouldDisableConnectionEditing(editingConnection);
 
   return {
     isOpen: isEditingConnectionInfoModalOpen,
     initialConnectionInfo: editingConnectionInfo,
-    connectionErrorMessage: connectionErrors[editingConnectionInfo.id]?.message,
+    connectionErrorMessage: editingConnection?.error?.message,
     disableEditingConnectedConnection,
-    editingConnectionInfo,
+    editingConnectionInfoId,
     isEditingNewConnection,
-    connections,
   };
 }
 
@@ -72,7 +71,7 @@ function mergeProps(
     initialConnectionInfo,
     connectionErrorMessage,
     disableEditingConnectedConnection,
-    editingConnectionInfo,
+    editingConnectionInfoId,
     isEditingNewConnection,
   } = stateProps;
 
@@ -90,18 +89,18 @@ function mergeProps(
     connectionErrorMessage,
     disableEditingConnectedConnection,
 
-    onDisconnectClicked: () => disconnect(editingConnectionInfo.id),
+    onDisconnectClicked: () => disconnect(editingConnectionInfoId),
     setOpen: (newOpen: boolean) => {
       // This is how leafygreen propagates `X` button click
       if (newOpen === false) {
-        cancelEditConnection(editingConnectionInfo.id);
+        cancelEditConnection(editingConnectionInfoId);
       }
     },
     openSettingsModal: () => {
       // TODO: this has to emit on the global app registry somehow
     },
     onCancel: () => {
-      cancelEditConnection(editingConnectionInfo.id);
+      cancelEditConnection(editingConnectionInfoId);
     },
     onSaveClicked: (connectionInfo: ConnectionInfo) => {
       return saveEditedConnectionInfo(connectionInfo);

packages/compass-connections/src/index.tsx

@@ -8,49 +8,20 @@ import React, { useContext, useRef } from 'react';
 import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
 import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
 import { preferencesLocator } from 'compass-preferences-model/provider';
-import type {
-  ConnectionInfo,
-  ConnectionStorage,
-} from '@mongodb-js/connection-storage/provider';
 import { connectionStorageLocator } from '@mongodb-js/connection-storage/provider';
-import {
-  ConnectionActionsProvider,
-  ConnectionsStoreContext,
-} from './stores/store-context';
+import { ConnectionsStoreContext } from './stores/store-context';
 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';
-import { useConnectionFormPreferences } from './hooks/use-connection-form-preferences';
 export type { ConnectionFeature } from './utils/connection-supports';
 export { connectionSupports } from './utils/connection-supports';
-
-const ConnectionsComponent: React.FunctionComponent<{
-  appName: string;
-  onExtraConnectionDataRequest: (
-    connectionInfo: ConnectionInfo
-  ) => Promise<[ExtraConnectionDataForTelemetry, string | null]>;
-  onAutoconnectInfoRequest?: (
-    connectionStorage: ConnectionStorage
-  ) => Promise<ConnectionInfo | undefined>;
-  connectFn?: typeof devtoolsConnect | undefined;
-  preloadStorageConnectionInfos?: ConnectionInfo[];
-}> = ({ children }) => {
-  const formPreferences = useConnectionFormPreferences();
-  return (
-    <ConnectionActionsProvider>
-      {children}
-      <ConnectionModal {...formPreferences} />
-    </ConnectionActionsProvider>
-  );
-};
+import ConnectionsPlugin from './plugin';
 
 const CompassConnectionsPlugin = registerHadronPlugin(
   {
     name: 'CompassConnections',
-    component: ConnectionsComponent,
+    component: ConnectionsPlugin,
     activate(
       initialProps,
       { logger, preferences, connectionStorage, track },

packages/compass-connections/src/plugin.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import type {
+  ConnectionInfo,
+  ConnectionStorage,
+} from '@mongodb-js/connection-storage/provider';
+
+import {
+  connect as reduxConnect,
+  ConnectionActionsProvider,
+} from './stores/store-context';
+
+import ConnectionModal from './components/connection-modal';
+
+import type { ExtraConnectionData as ExtraConnectionDataForTelemetry } from '@mongodb-js/compass-telemetry';
+import { useConnectionFormPreferences } from './hooks/use-connection-form-preferences';
+
+import type { connect as devtoolsConnect } from 'mongodb-data-service';
+import type { ConnectionId } from './stores/connections-store-redux';
+
+const ConnectionsComponent: React.FunctionComponent<{
+  appName: string;
+  onExtraConnectionDataRequest: (
+    connectionInfo: ConnectionInfo
+  ) => Promise<[ExtraConnectionDataForTelemetry, string | null]>;
+  onAutoconnectInfoRequest?: (
+    connectionStorage: ConnectionStorage
+  ) => Promise<ConnectionInfo | undefined>;
+  connectFn?: typeof devtoolsConnect | undefined;
+  preloadStorageConnectionInfos?: ConnectionInfo[];
+  editingConnectionInfoId?: ConnectionId;
+}> = ({ editingConnectionInfoId, children }) => {
+  const formPreferences = useConnectionFormPreferences();
+  return (
+    <ConnectionActionsProvider>
+      {children}
+      {editingConnectionInfoId && <ConnectionModal {...formPreferences} />}
+    </ConnectionActionsProvider>
+  );
+};
+
+function mapState({
+  editingConnectionInfoId,
+}: {
+  editingConnectionInfoId?: ConnectionId;
+}) {
+  return { editingConnectionInfoId };
+}
+
+export default reduxConnect(mapState)(ConnectionsComponent);