wip

Author: lerouxb

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

@@ -1,6 +1,14 @@
-import { connect } from 'react-redux';
+import { connect as reduxConnect } from 'react-redux';
 import ConnectionFormModal from '@mongodb-js/connection-form';
 import type { ConnectionInfo } from '@mongodb-js/connection-storage/provider';
+import {
+  connect,
+  disconnect,
+  cancelEditConnection,
+  saveEditedConnectionInfo,
+  saveAndConnect,
+} from '../stores/connections-store-redux';
+
 import type {
   ConnectionId,
   ConnectionState,
@@ -11,11 +19,13 @@ function shouldDisableConnectionEditing(connection: ConnectionState): boolean {
 }
 
 function mapState({
+  isEditingNewConnection,
   isEditingConnectionInfoModalOpen,
   editingConnectionInfo,
   connectionErrors,
   connections,
 }: {
+  isEditingNewConnection: boolean;
   isEditingConnectionInfoModalOpen: boolean;
   editingConnectionInfo: ConnectionInfo;
   connectionErrors: Record<string, Error | null>;
@@ -32,53 +42,86 @@ function mapState({
     initialConnectionInfo: editingConnectionInfo,
     connectionErrorMessage: connectionErrors[editingConnectionInfo.id]?.message,
     disableEditingConnectedConnection,
+    editingConnectionInfo,
+    isEditingNewConnection,
+    connections,
   };
 }
 
-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;
+const mapDispatch = {
+  connect,
+  disconnect,
+  cancelEditConnection,
+  saveEditedConnectionInfo,
+  saveAndConnect,
+};
 
-    //removeAllRecentConnections: () => void;
-    //showNonGenuineMongoDBWarningModal: (connectionId: string) => void;
-  },
-  {
-    isEditingNewConnection,
-    editingConnectionInfo,
-    connections,
-  }: {
-    isEditingNewConnection: boolean;
-    editingConnectionInfo: ConnectionInfo;
-    connections: {
-      byId: Record<ConnectionId, ConnectionState>;
-    };
+function mergeProps(
+  stateProps: ReturnType<typeof mapState>,
+  dispatchProps: {
+    // TODO: surely there's a way of inferring these types?
+    connect: (connectionInfo: ConnectionInfo) => any;
+    disconnect: (id: string) => void;
+    cancelEditConnection: (id: string) => void;
+    saveEditedConnectionInfo: (connectionInfo: ConnectionInfo) => any;
+    saveAndConnect: (connectionInfo: ConnectionInfo) => any;
   }
 ) {
-  const disableEditingConnectedConnection = shouldDisableConnectionEditing(
-    connections.byId[editingConnectionInfo.id]
-  );
+  const {
+    isOpen,
+    initialConnectionInfo,
+    connectionErrorMessage,
+    disableEditingConnectedConnection,
+    editingConnectionInfo,
+    isEditingNewConnection,
+  } = stateProps;
 
-  return {
+  const {
+    connect,
     disconnect,
+    saveAndConnect,
+    saveEditedConnectionInfo,
+    cancelEditConnection,
+  } = dispatchProps;
+
+  return {
+    isOpen,
+    initialConnectionInfo,
+    connectionErrorMessage,
+    disableEditingConnectedConnection,
+
+    onDisconnectClicked: () => disconnect(editingConnectionInfo.id),
+    setOpen: (newOpen: boolean) => {
+      // This is how leafygreen propagates `X` button click
+      if (newOpen === false) {
+        cancelEditConnection(editingConnectionInfo.id);
+      }
+    },
+    openSettingsModal: () => {
+      // TODO: this has to emit on the global app registry somehow
+    },
+    onCancel: () => {
+      cancelEditConnection(editingConnectionInfo.id);
+    },
+    onSaveClicked: (connectionInfo: ConnectionInfo) => {
+      return saveEditedConnectionInfo(connectionInfo);
+    },
+    onConnectClicked:
+      isEditingNewConnection || disableEditingConnectedConnection
+        ? undefined
+        : (connectionInfo: ConnectionInfo) => {
+            void connect(connectionInfo);
+          },
+    onSaveAndConnectClicked: disableEditingConnectedConnection
+      ? undefined
+      : (connectionInfo: ConnectionInfo) => {
+          void saveAndConnect(connectionInfo);
+        },
   };
 }
 
-export default connect(mapState, mapDispatch)(ConnectionFormModal);
+export default reduxConnect(
+  mapState,
+  mapDispatch,
+  mergeProps
+)(ConnectionFormModal);

packages/compass-connections/src/index.tsx

@@ -23,6 +23,7 @@ export { useConnectionFormPreferences } from './hooks/use-connection-form-prefer
 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';
 
@@ -37,10 +38,11 @@ const ConnectionsComponent: React.FunctionComponent<{
   connectFn?: typeof devtoolsConnect | undefined;
   preloadStorageConnectionInfos?: ConnectionInfo[];
 }> = ({ children }) => {
+  const formPreferences = useConnectionFormPreferences();
   return (
     <ConnectionActionsProvider>
       {children}
-      <ConnectionModal />
+      <ConnectionModal {...formPreferences} />
     </ConnectionActionsProvider>
   );
 };

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

@@ -1,4 +1,4 @@
-import type { Reducer, AnyAction, Action } from 'redux';
+import type { Store, Reducer, AnyAction, Action } from 'redux';
 import { createStore, applyMiddleware } from 'redux';
 import type { ThunkAction } from 'redux-thunk';
 import thunk from 'redux-thunk';
@@ -2178,3 +2178,10 @@ export function configureStore(
     applyMiddleware(thunk.withExtraArgument(thunkArg))
   );
 }
+
+export type ConnectionsStore = ReturnType<typeof configureStore> extends Store<
+  infer S,
+  infer A
+> & { dispatch: infer D }
+  ? { state: S; actions: A; dispatch: D }
+  : never;

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

@@ -14,6 +14,7 @@ import type {
   configureStore,
   ConnectionId,
   ConnectionState,
+  ConnectionsStore,
 } from './connections-store-redux';
 import {
   cancelEditConnection,
@@ -33,21 +34,13 @@ import {
   importConnections,
   refreshConnections,
 } from './connections-store-redux';
-import type { Store } from 'redux';
 import {
   getConnectionTitle,
   type ConnectionInfo,
 } from '@mongodb-js/connection-info';
 import { createServiceLocator } from 'hadron-app-registry';
 import { isEqual } from 'lodash';
 
-type ConnectionsStore = ReturnType<typeof configureStore> extends Store<
-  infer S,
-  infer A
-> & { dispatch: infer D }
-  ? { state: S; actions: A; dispatch: D }
-  : never;
-
 export const ConnectionsStoreContext = React.createContext<
   ReactReduxContextValue<ConnectionsStore['state']>
   // @ts-expect-error not possible to correctly pass default value here

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

@@ -5,7 +5,6 @@ import {
   useConnections,
   useConnectionsWithStatus,
 } from '@mongodb-js/compass-connections/provider';
-import { useConnectionFormPreferences } from '@mongodb-js/compass-connections';
 import { type ConnectionInfo } from '@mongodb-js/connection-info';
 import {
   ResizableSidebar,
@@ -15,7 +14,6 @@ import {
   HorizontalRule,
 } from '@mongodb-js/compass-components';
 import { SidebarHeader } from './header/sidebar-header';
-import { ConnectionFormModal } from '@mongodb-js/connection-form';
 import { type RootState, type SidebarThunkAction } from '../../modules';
 import { Navigation } from './navigation/navigation';
 import ConnectionInfoModal from '../connection-info-modal';
@@ -27,7 +25,6 @@ import CSFLEConnectionModal, {
 } from '../csfle-connection-modal';
 import type { ConnectionsFilter } from '../use-filtered-connections';
 import { setConnectionIsCSFLEEnabled } from '../../modules/data-service';
-import { useGlobalAppRegistry } from 'hadron-app-registry';
 
 const TOAST_TIMEOUT_MS = 5000; // 5 seconds.
 
@@ -107,27 +104,17 @@ export function MultipleConnectionSidebar({
   const [connectionInfoModalConnectionId, setConnectionInfoModalConnectionId] =
     useState<string | undefined>();
 
-  const formPreferences = useConnectionFormPreferences();
   const maybeProtectConnectionString = useMaybeProtectConnectionString();
   const connectionsWithStatus = useConnectionsWithStatus();
   const {
     connect,
-    saveAndConnect,
     disconnect,
     createNewConnection,
     editConnection,
-    cancelEditConnection,
     removeConnection,
     duplicateConnection,
-    saveEditedConnection,
     toggleConnectionFavoritedStatus,
     showNonGenuineMongoDBWarningModal,
-    state: {
-      editingConnectionInfo,
-      isEditingNewConnection,
-      isEditingConnectionInfoModalOpen,
-      connectionErrors,
-    },
   } = useConnections();
 
   const findActiveConnection = (id: string) => {
@@ -177,16 +164,6 @@ export function MultipleConnectionSidebar({
     [csfleModalConnectionId, onConnectionCsfleModeChanged]
   );
 
-  const globalAppRegistry = useGlobalAppRegistry();
-  const openSettingsModal = useCallback(
-    (tab?: string) => globalAppRegistry.emit('open-compass-settings', tab),
-    [globalAppRegistry]
-  );
-
-  const disableEditingConnectedConnection = !!findActiveConnection(
-    editingConnectionInfo.id
-  );
-
   return (
     <ResizableSidebar data-testid="navigation-sidebar" useNewTheme={true}>
       <aside className={sidebarStyles}>