chore(compass-connections): Move connection modal UI from compass-sidebar to compass-connections COMPASS-8471 (#6508)

* wip

* wip

* compass-connections plugin component

* help

* broken

* tweak

* put the code in the new component

* move back

* more minimal changes to Home

* undo unnecessary change

* undo unnecessary change

* remove unused dep

* test fix

* looks like the connection form has to be inside FileInputBackendProvider

* better types

Author: lerouxb

package-lock.json

@@ -0,0 +1,147 @@
+import React from 'react';
+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 {
+  connect,
+  disconnect,
+  cancelEditConnection,
+  saveEditedConnectionInfo,
+  saveAndConnect,
+  openSettingsModal,
+} from '../stores/connections-store-redux';
+
+import { useConnectionFormPreferences } from '../hooks/use-connection-form-preferences';
+
+import type {
+  ConnectionId,
+  ConnectionState,
+} from '../stores/connections-store-redux';
+
+function shouldDisableConnectionEditing(connection: ConnectionState): boolean {
+  return connection.status === 'connected';
+}
+
+function mapState({
+  isEditingNewConnection,
+  isEditingConnectionInfoModalOpen,
+  editingConnectionInfoId,
+  connections,
+}: {
+  isEditingNewConnection: boolean;
+  isEditingConnectionInfoModalOpen: boolean;
+  editingConnectionInfoId?: ConnectionId;
+  connections: {
+    byId: Record<ConnectionId, ConnectionState>;
+  };
+}) {
+  const editingConnection = editingConnectionInfoId
+    ? connections.byId[editingConnectionInfoId]
+    : undefined;
+  const editingConnectionInfo = editingConnection?.info;
+
+  const disableEditingConnectedConnection = editingConnection
+    ? shouldDisableConnectionEditing(editingConnection)
+    : false;
+
+  return {
+    isOpen: isEditingConnectionInfoModalOpen,
+    initialConnectionInfo: editingConnectionInfo,
+    connectionErrorMessage: editingConnection?.error?.message,
+    disableEditingConnectedConnection,
+    editingConnectionInfoId,
+    isEditingNewConnection,
+  };
+}
+
+const mapDispatch = {
+  connect,
+  disconnect,
+  cancelEditConnection,
+  saveEditedConnectionInfo,
+  saveAndConnect,
+  openSettingsModal,
+};
+
+type ConnectionModalProps = {
+  isOpen: boolean;
+  initialConnectionInfo?: ConnectionInfo;
+  connectionErrorMessage?: string;
+  disableEditingConnectedConnection: boolean;
+  editingConnectionInfoId?: ConnectionId;
+  isEditingNewConnection: boolean;
+  connect: (connectionInfo: ConnectionInfo) => Promise<void>;
+  disconnect: (id: string) => void;
+  cancelEditConnection: (id: string) => void;
+  saveEditedConnectionInfo: (connectionInfo: ConnectionInfo) => Promise<void>;
+  saveAndConnect: (connectionInfo: ConnectionInfo) => Promise<void>;
+  openSettingsModal: (tab?: string) => void;
+};
+
+const ConnectionModal: React.FunctionComponent<ConnectionModalProps> = ({
+  // pulling initialConnectionInfo out of props to help TypeScript know that it
+  // is not undefined by the time we render ConnectionFormModal
+  initialConnectionInfo,
+  // pulling editingConnectionInfoId and isEditingNewConnection out of props
+  // because they aren't known to ConnectionFormModal and only get used here.
+  editingConnectionInfoId,
+  isEditingNewConnection,
+  ...props
+}) => {
+  const formPreferences = useConnectionFormPreferences();
+
+  const {
+    disableEditingConnectedConnection,
+    connect,
+    disconnect,
+    cancelEditConnection,
+    saveEditedConnectionInfo,
+    saveAndConnect,
+  } = props;
+
+  if (!(editingConnectionInfoId && initialConnectionInfo)) {
+    return null;
+  }
+
+  return (
+    <ConnectionFormModal
+      initialConnectionInfo={initialConnectionInfo}
+      {...props}
+      {...formPreferences}
+      onDisconnectClicked={() => disconnect(editingConnectionInfoId)}
+      setOpen={(newOpen) => {
+        // This is how leafygreen propagates `X` button click
+        if (newOpen === false) {
+          cancelEditConnection(editingConnectionInfoId);
+        }
+      }}
+      onCancel={() => {
+        cancelEditConnection(editingConnectionInfoId);
+      }}
+      onSaveClicked={(connectionInfo) => {
+        return saveEditedConnectionInfo(connectionInfo);
+      }}
+      onConnectClicked={
+        isEditingNewConnection || disableEditingConnectedConnection
+          ? undefined
+          : (connectionInfo) => {
+              void connect(connectionInfo);
+            }
+      }
+      onSaveAndConnectClicked={
+        disableEditingConnectedConnection
+          ? undefined
+          : (connectionInfo) => {
+              void saveAndConnect(connectionInfo);
+            }
+      }
+    />
+  );
+};
+
+export const ConnectedConnectionModal = reduxConnect(
+  mapState,
+  mapDispatch
+)(ConnectionModal);
+
+export default ConnectedConnectionModal;

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

@@ -1,28 +1,28 @@
+import { preferencesLocator } from 'compass-preferences-model/provider';
 import { registerHadronPlugin } from 'hadron-app-registry';
-import {
-  autoconnectCheck,
-  configureStore,
-  disconnect,
-  loadConnections,
-} from './stores/connections-store-redux';
+import type { connect as devtoolsConnect } from 'mongodb-data-service';
 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 { connectionStorageLocator } from '@mongodb-js/connection-storage/provider';
 import type {
   ConnectionInfo,
   ConnectionStorage,
 } from '@mongodb-js/connection-storage/provider';
-import { connectionStorageLocator } from '@mongodb-js/connection-storage/provider';
+import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
+import type { ExtraConnectionData as ExtraConnectionDataForTelemetry } from '@mongodb-js/compass-telemetry';
+import { ConnectedConnectionModal } from './components/connection-modal';
+export { default as SingleConnectionForm } from './components/legacy-connections';
+export { LegacyConnectionsModal } from './components/legacy-connections-modal';
+import {
+  autoconnectCheck,
+  configureStore,
+  disconnect,
+  loadConnections,
+} from './stores/connections-store-redux';
 import {
-  ConnectionActionsProvider,
   ConnectionsStoreContext,
+  ConnectionActionsProvider,
 } 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 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';
 export { connectionSupports } from './utils/connection-supports';
 
@@ -37,7 +37,12 @@ const ConnectionsComponent: React.FunctionComponent<{
   connectFn?: typeof devtoolsConnect | undefined;
   preloadStorageConnectionInfos?: ConnectionInfo[];
 }> = ({ children }) => {
-  return <ConnectionActionsProvider>{children}</ConnectionActionsProvider>;
+  return (
+    <ConnectionActionsProvider>
+      {children}
+      <ConnectedConnectionModal />
+    </ConnectionActionsProvider>
+  );
 };
 
 const CompassConnectionsPlugin = registerHadronPlugin(
@@ -46,7 +51,7 @@ const CompassConnectionsPlugin = registerHadronPlugin(
     component: ConnectionsComponent,
     activate(
       initialProps,
-      { logger, preferences, connectionStorage, track },
+      { logger, preferences, connectionStorage, track, globalAppRegistry },
       { addCleanup, cleanup }
     ) {
       const store = configureStore(initialProps.preloadStorageConnectionInfos, {
@@ -57,6 +62,7 @@ const CompassConnectionsPlugin = registerHadronPlugin(
         getExtraConnectionData: initialProps.onExtraConnectionDataRequest,
         appName: initialProps.appName,
         connectFn: initialProps.connectFn,
+        globalAppRegistry,
       });
 
       setTimeout(() => {
@@ -106,7 +112,10 @@ export const ConnectFnProvider: React.FunctionComponent<{
 };
 
 export default function CompassConnections(
-  props: Omit<React.ComponentProps<typeof ConnectionsComponent>, 'connectFn'>
+  props: Omit<
+    React.ComponentProps<typeof CompassConnectionsPlugin>,
+    'connectFn'
+  >
 ) {
   const connectFn = useContext(ConnectFnContext);
   return (

packages/compass-connections/src/index.tsx

@@ -1,3 +1,4 @@
+import type AppRegistry from 'hadron-app-registry';
 import type { Reducer, AnyAction, Action } from 'redux';
 import { createStore, applyMiddleware } from 'redux';
 import type { ThunkAction } from 'redux-thunk';
@@ -185,6 +186,7 @@ type ThunkExtraArg = {
     connectionInfo: ConnectionInfo
   ) => Promise<[ExtraConnectionDataForTelemetry, string | null]>;
   connectFn?: typeof devtoolsConnect;
+  globalAppRegistry: Pick<AppRegistry, 'on' | 'emit' | 'removeListener'>;
 };
 
 export type ConnectionsThunkAction<
@@ -2167,6 +2169,14 @@ export const importConnections = (
   };
 };
 
+export const openSettingsModal = (
+  tab?: string
+): ConnectionsThunkAction<void> => {
+  return (_dispatch, _getState, { globalAppRegistry }) => {
+    globalAppRegistry.emit('open-compass-settings', tab);
+  };
+};
+
 export function configureStore(
   preloadConnectionInfos: ConnectionInfo[] = [],
   thunkArg: ThunkExtraArg

packages/compass-connections/src/stores/connections-store-redux.ts

@@ -57,7 +57,6 @@
     "@mongodb-js/compass-maybe-protect-connection-string": "^0.28.0",
     "@mongodb-js/compass-telemetry": "^1.2.3",
     "@mongodb-js/compass-workspaces": "^0.28.0",
-    "@mongodb-js/connection-form": "^1.44.0",
     "@mongodb-js/connection-info": "^0.9.3",
     "compass-preferences-model": "^2.30.0",
     "hadron-app-registry": "^9.2.7",