add forceSave option to connect action creator

Author: lerouxb

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

@@ -313,6 +313,9 @@ type ConnectionAutoconnectCheckAction = {
 type ConnectionAttemptStartAction = {
   type: ActionTypes.ConnectionAttemptStart;
   connectionInfo: ConnectionInfo;
+  options: {
+    forceSave: boolean;
+  };
 };
 
 type ConnectionAttemptSuccessAction = {
@@ -823,10 +826,13 @@ const reducer: Reducer<State, Action> = (state = INITIAL_STATE, action) => {
         state.connections,
         action.connectionInfo.id,
         {
-          ...(isNewConnection(state, action.connectionInfo.id)
+          ...(isNewConnection(state, action.connectionInfo.id) ||
+          action.options.forceSave
             ? {
-                // For new connections, update the state with new info right
-                // away (we will also save it to the storage at the end)
+                // For new connections or when we're forcing a
+                // save (the Save & Connect button), update the state with new
+                // info right away (we will also save it to the storage at the
+                // end)
                 info: action.connectionInfo,
               }
             : {
@@ -1464,6 +1470,35 @@ export const connect = (
   | ConnectionAttemptSuccessAction
   | ConnectionAttemptCancelledAction
   | OidcNotifyDeviceAuthAction
+> => {
+  return connectWithOptions(connectionInfo, { forceSave: false });
+};
+
+export const saveAndConnect = (
+  connectionInfo: ConnectionInfo
+): ConnectionsThunkAction<
+  Promise<void>,
+  | ConnectionAttemptStartAction
+  | ConnectionAttemptErrorAction
+  | ConnectionAttemptSuccessAction
+  | ConnectionAttemptCancelledAction
+  | OidcNotifyDeviceAuthAction
+> => {
+  return connectWithOptions(connectionInfo, { forceSave: true });
+};
+
+const connectWithOptions = (
+  connectionInfo: ConnectionInfo,
+  options: {
+    forceSave: boolean;
+  }
+): ConnectionsThunkAction<
+  Promise<void>,
+  | ConnectionAttemptStartAction
+  | ConnectionAttemptErrorAction
+  | ConnectionAttemptSuccessAction
+  | ConnectionAttemptCancelledAction
+  | OidcNotifyDeviceAuthAction
 > => {
   return async (
     dispatch,
@@ -1516,6 +1551,7 @@ export const connect = (
       dispatch({
         type: ActionTypes.ConnectionAttemptStart,
         connectionInfo,
+        options: { forceSave: options.forceSave },
       });
 
       track(

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

@@ -323,6 +323,37 @@ describe('useConnections', function () {
     }
   });
 
+  describe('#saveAndConnect', function () {
+    it('saves the connection options before connecting', async function () {
+      const { result, track, connectionStorage } = renderHookWithConnections(
+        useConnections,
+        {
+          connections: mockConnections,
+          preferences: defaultPreferences,
+        }
+      );
+
+      const updatedConnection = {
+        ...mockConnections[0],
+        savedConnectionType: 'recent' as const,
+      };
+
+      await result.current.saveAndConnect(updatedConnection);
+
+      await waitFor(() => {
+        expect(track.getCall(1).firstArg).to.eq('New Connection');
+      });
+
+      expect(
+        await connectionStorage.load({ id: updatedConnection.id })
+      ).to.have.property('savedConnectionType', 'recent');
+
+      expect(
+        screen.getByText(`Connected to ${mockConnections[0].favorite.name}`)
+      ).to.exist;
+    });
+  });
+
   describe('#disconnect', function () {
     it('disconnect even if connection is in progress cleaning up progress toasts', async function () {
       const { result, track } = renderHookWithConnections(useConnections, {

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

@@ -16,6 +16,7 @@ export function useConnections(): {
   state: State;
 
   connect: (connectionInfo: ConnectionInfo) => Promise<void>;
+  saveAndConnect: (connectionInfo: ConnectionInfo) => Promise<void>;
   disconnect: (connectionId: string) => void;
 
   createNewConnection: () => void;
@@ -53,6 +54,7 @@ export function useConnections(): {
   };
   const {
     connect,
+    saveAndConnect,
     disconnect,
     createNewConnection,
     editConnection,
@@ -67,6 +69,7 @@ export function useConnections(): {
   return {
     state,
     connect,
+    saveAndConnect,
     disconnect,
     createNewConnection,
     editConnection,

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

@@ -18,6 +18,7 @@ import type {
 import {
   cancelEditConnection,
   connect as connectionsConnect,
+  saveAndConnect,
   connectionsEventEmitter,
   createNewConnection,
   disconnect,
@@ -87,6 +88,9 @@ function getConnectionsActions(dispatch: ConnectionsStore['dispatch']) {
     connect: (connectionInfo: ConnectionInfo) => {
       return dispatch(connectionsConnect(connectionInfo));
     },
+    saveAndConnect: (connectionInfo: ConnectionInfo) => {
+      return dispatch(saveAndConnect(connectionInfo));
+    },
     disconnect: (connectionId: ConnectionId) => {
       return dispatch(disconnect(connectionId));
     },

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

@@ -109,6 +109,7 @@ export function MultipleConnectionSidebar({
   const connectionsWithStatus = useConnectionsWithStatus();
   const {
     connect,
+    saveAndConnect,
     disconnect,
     createNewConnection,
     editConnection,
@@ -267,8 +268,7 @@ export function MultipleConnectionSidebar({
               disableEditingConnectedConnection
                 ? undefined
                 : (connectionInfo) => {
-                    void saveEditedConnection(connectionInfo);
-                    void connect(connectionInfo);
+                    void saveAndConnect(connectionInfo);
                   }
             }
           />