From 4956ea4d4dd26dba023cdbc7f6afef56290e69a1 Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <lerouxb@gmail.com>
Date: Wed, 9 Oct 2024 17:04:44 +0100
Subject: [PATCH 1/5] save, connect, save & onnect

---
 .../src/stores/connections-store.tsx          |   9 +-
 .../multiple-connections/sidebar.tsx          |  37 ++++--
 ...=> connection-form-modal-actions.spec.tsx} |   2 +-
 ....tsx => connection-form-modal-actions.tsx} |  14 +-
 .../src/components/connection-form.spec.tsx   |   7 +-
 .../src/components/connection-form.tsx        | 120 +++++++++++-------
 .../src/hooks/use-connect-form-settings.tsx   |   2 +-
 7 files changed, 129 insertions(+), 62 deletions(-)
 rename packages/connection-form/src/components/{connection-form-actions.spec.tsx => connection-form-modal-actions.spec.tsx} (97%)
 rename packages/connection-form/src/components/{connection-form-actions.tsx => connection-form-modal-actions.tsx} (88%)

diff --git a/packages/compass-connections/src/stores/connections-store.tsx b/packages/compass-connections/src/stores/connections-store.tsx
index 1259a364e11..8ebf73a7911 100644
--- a/packages/compass-connections/src/stores/connections-store.tsx
+++ b/packages/compass-connections/src/stores/connections-store.tsx
@@ -5,6 +5,7 @@ type State = {
   connectionErrors: Record<string, Error | null>;
   editingConnectionInfo: ConnectionInfo;
   isEditingConnectionInfoModalOpen: boolean;
+  isEditingNewConnection: boolean;
   oidcDeviceAuthState: Record<string, { url: string; code: string }>;
 };
 
@@ -32,16 +33,16 @@ export function useConnections(): {
   showNonGenuineMongoDBWarningModal: (connectionId: string) => void;
 } {
   const connectionsState = useConnectionsState();
+  const editingConnection =
+    connectionsState.connections.byId[connectionsState.editingConnectionInfoId];
   const state = {
     connectionErrors: Object.fromEntries(
       Object.entries(connectionsState.connections.byId).map(([k, v]) => {
         return [k, v.error ?? null];
       })
     ),
-    editingConnectionInfo:
-      connectionsState.connections.byId[
-        connectionsState.editingConnectionInfoId
-      ].info,
+    editingConnectionInfo: editingConnection.info,
+    isEditingNewConnection: !!editingConnection.isBeingCreated,
     isEditingConnectionInfoModalOpen:
       connectionsState.isEditingConnectionInfoModalOpen,
     oidcDeviceAuthState: Object.fromEntries(
diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx
index d89835c4a7a..5e505aeedbc 100644
--- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx
+++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx
@@ -120,6 +120,7 @@ export function MultipleConnectionSidebar({
     showNonGenuineMongoDBWarningModal,
     state: {
       editingConnectionInfo,
+      isEditingNewConnection,
       isEditingConnectionInfoModalOpen,
       connectionErrors,
     },
@@ -184,6 +185,10 @@ export function MultipleConnectionSidebar({
     [globalAppRegistry]
   );
 
+  const disableEditingConnectedConnection = !!findActiveConnection(
+    editingConnectionInfo.id
+  );
+
   return (
     <ResizableSidebar data-testid="navigation-sidebar" useNewTheme={true}>
       <aside className={sidebarStyles}>
@@ -229,7 +234,7 @@ export function MultipleConnectionSidebar({
         {editingConnectionInfo && (
           <ConnectionFormModal
             disableEditingConnectedConnection={
-              !!findActiveConnection(editingConnectionInfo.id)
+              disableEditingConnectedConnection
             }
             onDisconnectClicked={() => disconnect(editingConnectionInfo.id)}
             isOpen={isEditingConnectionInfoModalOpen}
@@ -240,20 +245,32 @@ export function MultipleConnectionSidebar({
               }
             }}
             initialConnectionInfo={editingConnectionInfo}
-            onSaveAndConnectClicked={(connectionInfo) => {
-              void connect(connectionInfo);
-            }}
-            onSaveClicked={(connectionInfo) => {
-              return saveEditedConnection(connectionInfo);
-            }}
-            onCancel={() => {
-              cancelEditConnection(editingConnectionInfo.id);
-            }}
             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 saveEditedConnection(connectionInfo);
+                    void connect(connectionInfo);
+                  }
+            }
           />
         )}
         <MappedCsfleModal
diff --git a/packages/connection-form/src/components/connection-form-actions.spec.tsx b/packages/connection-form/src/components/connection-form-modal-actions.spec.tsx
similarity index 97%
rename from packages/connection-form/src/components/connection-form-actions.spec.tsx
rename to packages/connection-form/src/components/connection-form-modal-actions.spec.tsx
index 23483d33e9a..5810c6d33bb 100644
--- a/packages/connection-form/src/components/connection-form-actions.spec.tsx
+++ b/packages/connection-form/src/components/connection-form-modal-actions.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 import sinon from 'sinon';
 
-import { ConnectionFormModalActions } from './connection-form-actions';
+import { ConnectionFormModalActions } from './connection-form-modal-actions';
 
 describe('<ConnectionFormModalActions />', function () {
   it('should show warnings', function () {
diff --git a/packages/connection-form/src/components/connection-form-actions.tsx b/packages/connection-form/src/components/connection-form-modal-actions.tsx
similarity index 88%
rename from packages/connection-form/src/components/connection-form-actions.tsx
rename to packages/connection-form/src/components/connection-form-modal-actions.tsx
index 17c4263e86a..4fa858fbb16 100644
--- a/packages/connection-form/src/components/connection-form-actions.tsx
+++ b/packages/connection-form/src/components/connection-form-modal-actions.tsx
@@ -45,6 +45,7 @@ export type ConnectionFormModalActionsProps = {
   onCancel?(): void;
   onSave?(): void;
   onSaveAndConnect?(): void;
+  onConnect?(): void;
 };
 
 export function ConnectionFormModalActions({
@@ -53,6 +54,7 @@ export function ConnectionFormModalActions({
   onCancel,
   onSave,
   onSaveAndConnect,
+  onConnect
 }: ConnectionFormModalActionsProps): React.ReactElement {
   const saveAndConnectLabel = useConnectionFormSetting('saveAndConnectLabel');
   return (
@@ -102,9 +104,19 @@ export function ConnectionFormModalActions({
           </div>
         )}
 
+        {onConnect && (
+          <Button
+            data-testid={'connect-button'}
+            variant={ButtonVariant.PrimaryOutline}
+            onClick={onConnect}
+          >
+            Connect
+          </Button>
+        )}
+
         {onSaveAndConnect && (
           <Button
-            data-testid="connect-button"
+            data-testid={onConnect ? 'save-and-connect-button' : 'connect-button'}
             variant={ButtonVariant.Primary}
             onClick={onSaveAndConnect}
           >
diff --git a/packages/connection-form/src/components/connection-form.spec.tsx b/packages/connection-form/src/components/connection-form.spec.tsx
index 5dc306317fd..e860968ae63 100644
--- a/packages/connection-form/src/components/connection-form.spec.tsx
+++ b/packages/connection-form/src/components/connection-form.spec.tsx
@@ -81,12 +81,14 @@ describe('ConnectionForm Component', function () {
       it('renders a banner, disables the connection string and removes advanced connection options + connect button', function () {
         const onDisconnectClicked = Sinon.spy();
         const onSaveClicked = Sinon.spy();
-        const onSaveAndConnectClicked = Sinon.spy();
+        const onConnectClicked = undefined;
+        const onSaveAndConnectClicked = undefined;
 
         renderForm({
           disableEditingConnectedConnection: true,
           onDisconnectClicked,
           onSaveClicked,
+          onConnectClicked,
           onSaveAndConnectClicked,
         });
 
@@ -105,7 +107,6 @@ describe('ConnectionForm Component', function () {
         // pressing enter calls onSubmit which saves
         fireEvent.submit(screen.getByRole('form'));
         expect(onSaveClicked.callCount).to.equal(1);
-        expect(onSaveAndConnectClicked.callCount).to.equal(0);
 
         fireEvent.click(screen.getByRole('button', { name: 'Disconnect' }));
         expect(onDisconnectClicked.callCount).to.equal(1);
@@ -116,12 +117,14 @@ describe('ConnectionForm Component', function () {
       it('leaves the connection string, advanced connection options and connect button intact, does not render a banner', function () {
         const onDisconnectClicked = Sinon.spy();
         const onSaveClicked = Sinon.spy();
+        const onConnectClicked = Sinon.spy();
         const onSaveAndConnectClicked = Sinon.spy();
 
         renderForm({
           disableEditingConnectedConnection: false,
           onDisconnectClicked,
           onSaveClicked,
+          onConnectClicked,
           onSaveAndConnectClicked,
         });
 
diff --git a/packages/connection-form/src/components/connection-form.tsx b/packages/connection-form/src/components/connection-form.tsx
index c70c0313d05..383fb45de44 100644
--- a/packages/connection-form/src/components/connection-form.tsx
+++ b/packages/connection-form/src/components/connection-form.tsx
@@ -25,7 +25,7 @@ import {
 import { cloneDeep } from 'lodash';
 import ConnectionStringInput from './connection-string-input';
 import AdvancedConnectionOptions from './advanced-connection-options';
-import { ConnectionFormModalActions } from './connection-form-actions';
+import { ConnectionFormModalActions } from './connection-form-modal-actions';
 import {
   useConnectForm,
   type ConnectionPersonalizationOptions,
@@ -316,13 +316,27 @@ type ConnectionFormPropsWithoutSettings = {
   initialConnectionInfo: ConnectionInfo;
   connectionErrorMessage?: string | null;
   disableEditingConnectedConnection?: boolean;
-  onCancel?: () => void;
-  onConnectClicked?: (connectionInfo: ConnectionInfo) => void;
-  onSaveAndConnectClicked?: (connectionInfo: ConnectionInfo) => void;
-  onSaveClicked?: (connectionInfo: ConnectionInfo) => Promise<void>;
   onDisconnectClicked?: () => void;
   onAdvancedOptionsToggle?: (newState: boolean) => void;
   openSettingsModal?: (tab?: string) => void;
+
+  // form action buttons:
+
+  onCancel?: () => void;
+
+  // If onSaveClicked is specified, a Save button will show up. It will be the
+  // primary button if there is no onSaveAndConnectClick.
+  onSaveClicked?: (connectionInfo: ConnectionInfo) => Promise<void>;
+
+  // If onConnectClicked is specified, a Connect button will show up.
+  onConnectClicked?: (connectionInfo: ConnectionInfo) => void;
+
+  // If onSaveAndConnectClicked is specified, a button will show up with
+  // its label set to the value of the setting saveAndConnectLabel. It will be
+  // the primary button if specified. If onConnectClicked is specified, the test
+  // id will be save-and-connect-button, otherwise it will be connect-button.
+  // For historical/backwards compatible reasons.
+  onSaveAndConnectClicked?: (connectionInfo: ConnectionInfo) => void;
 };
 
 export type ConnectionFormProps = ConnectionFormPropsWithoutSettings &
@@ -334,6 +348,7 @@ function ConnectionForm({
   disableEditingConnectedConnection = false,
   onSaveAndConnectClicked,
   onSaveClicked,
+  onConnectClicked,
   onDisconnectClicked,
   onCancel,
   onAdvancedOptionsToggle,
@@ -422,39 +437,52 @@ function ConnectionForm({
     },
     [onSaveClicked, setErrors]
   );
-  const onSubmitForm = useCallback(() => {
-    const updatedConnectionOptions = cloneDeep(connectionOptions);
-    // TODO: this method throws on malformed connection strings instead of
-    // returning errors
-    const formErrors = validateConnectionOptionsErrors(
-      updatedConnectionOptions
-    );
-    if (formErrors.length) {
-      setErrors(formErrors);
-      return;
-    }
-    if (disableEditingConnectedConnection) {
-      // there isn't a connect button in this case, so the default action should
-      // be to save, not to save and connect
-      void callOnSaveConnectionClickedAndStoreErrors?.(
-        getConnectionInfoToSave()
+  const onSubmitForm = useCallback(
+    (intendedAction?: 'connect' | 'save-and-connect') => {
+      const updatedConnectionOptions = cloneDeep(connectionOptions);
+      // TODO: this method throws on malformed connection strings instead of
+      // returning errors
+      const formErrors = validateConnectionOptionsErrors(
+        updatedConnectionOptions
       );
-    } else {
-      onSaveAndConnectClicked?.({
-        ...initialConnectionInfo,
-        ...getConnectionInfoToSave(),
-        connectionOptions: updatedConnectionOptions,
-      });
-    }
-  }, [
-    connectionOptions,
-    disableEditingConnectedConnection,
-    setErrors,
-    callOnSaveConnectionClickedAndStoreErrors,
-    getConnectionInfoToSave,
-    onSaveAndConnectClicked,
-    initialConnectionInfo,
-  ]);
+      if (formErrors.length) {
+        setErrors(formErrors);
+        return;
+      }
+      if (intendedAction === 'connect') {
+        // The user explicitly clicked connect, so we use that.
+        onConnectClicked?.({
+          ...initialConnectionInfo,
+          ...getConnectionInfoToSave(),
+          connectionOptions: updatedConnectionOptions,
+        });
+      } else {
+        if (onSaveAndConnectClicked) {
+          // If there is a save&connect button, we use that action by default.
+          onSaveAndConnectClicked?.({
+            ...initialConnectionInfo,
+            ...getConnectionInfoToSave(),
+            connectionOptions: updatedConnectionOptions,
+          });
+        } else {
+          // If there isn't a save&connect button then the next default action
+          // should be to save.
+          void callOnSaveConnectionClickedAndStoreErrors?.(
+            getConnectionInfoToSave()
+          );
+        }
+      }
+    },
+    [
+      connectionOptions,
+      setErrors,
+      onConnectClicked,
+      initialConnectionInfo,
+      getConnectionInfoToSave,
+      callOnSaveConnectionClickedAndStoreErrors,
+      onSaveAndConnectClicked,
+    ]
+  );
 
   const showPersonalisationForm = useConnectionFormSetting(
     'showPersonalisationForm'
@@ -588,14 +616,20 @@ function ConnectionForm({
             warnings={connectionStringInvalidError ? [] : warnings}
             onCancel={onCancel}
             onSave={
-              onSaveClicked &&
-              (() =>
-                void callOnSaveConnectionClickedAndStoreErrors?.(
-                  getConnectionInfoToSave()
-                ))
+              onSaveClicked
+                ? () =>
+                    void callOnSaveConnectionClickedAndStoreErrors?.(
+                      getConnectionInfoToSave()
+                    )
+                : undefined
+            }
+            onConnect={
+              onConnectClicked ? () => onSubmitForm('connect') : undefined
             }
             onSaveAndConnect={
-              disableEditingConnectedConnection ? undefined : onSubmitForm
+              onSaveAndConnectClicked
+                ? () => onSubmitForm('save-and-connect')
+                : undefined
             }
           />
         </div>
diff --git a/packages/connection-form/src/hooks/use-connect-form-settings.tsx b/packages/connection-form/src/hooks/use-connect-form-settings.tsx
index c0803853253..1d6d35aec02 100644
--- a/packages/connection-form/src/hooks/use-connect-form-settings.tsx
+++ b/packages/connection-form/src/hooks/use-connect-form-settings.tsx
@@ -33,7 +33,7 @@ const defaultSettings = {
   showKerberosAuth: true,
   showCSFLE: true,
   showProxySettings: true,
-  saveAndConnectLabel: 'Connect',
+  saveAndConnectLabel: 'Save & Connect',
 };
 
 export const ConnectionFormSettingsContext = createContext<

From bf62a66e5244ccf2cab19d6708c7735039312e1c Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <lerouxb@gmail.com>
Date: Thu, 10 Oct 2024 08:56:03 +0100
Subject: [PATCH 2/5] reformat

---
 .../src/components/connection-form-modal-actions.tsx        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/connection-form/src/components/connection-form-modal-actions.tsx b/packages/connection-form/src/components/connection-form-modal-actions.tsx
index 4fa858fbb16..42b88ed6c88 100644
--- a/packages/connection-form/src/components/connection-form-modal-actions.tsx
+++ b/packages/connection-form/src/components/connection-form-modal-actions.tsx
@@ -54,7 +54,7 @@ export function ConnectionFormModalActions({
   onCancel,
   onSave,
   onSaveAndConnect,
-  onConnect
+  onConnect,
 }: ConnectionFormModalActionsProps): React.ReactElement {
   const saveAndConnectLabel = useConnectionFormSetting('saveAndConnectLabel');
   return (
@@ -116,7 +116,9 @@ export function ConnectionFormModalActions({
 
         {onSaveAndConnect && (
           <Button
-            data-testid={onConnect ? 'save-and-connect-button' : 'connect-button'}
+            data-testid={
+              onConnect ? 'save-and-connect-button' : 'connect-button'
+            }
             variant={ButtonVariant.Primary}
             onClick={onSaveAndConnect}
           >

From 2de9e8506d16075e6b49cd4c8350f25a3d194644 Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <lerouxb@gmail.com>
Date: Thu, 10 Oct 2024 09:12:38 +0100
Subject: [PATCH 3/5] tests

---
 .../components/legacy-connections.spec.tsx    |  4 +-
 .../connection-form-modal-actions.spec.tsx    |  9 ++--
 .../src/components/connection-form.spec.tsx   | 54 +++++++++++++++++--
 3 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/packages/compass-connections/src/components/legacy-connections.spec.tsx b/packages/compass-connections/src/components/legacy-connections.spec.tsx
index 55034c5a608..00442545096 100644
--- a/packages/compass-connections/src/components/legacy-connections.spec.tsx
+++ b/packages/compass-connections/src/components/legacy-connections.spec.tsx
@@ -288,7 +288,9 @@ describe.skip('Connections Component', function () {
         });
 
         it('should enable the connect button', function () {
-          const connectButton = screen.getByText('Connect');
+          const connectButton = screen.getByRole('button', {
+            name: 'Save & Connect',
+          });
           expect(connectButton).to.not.match('disabled');
         });
 
diff --git a/packages/connection-form/src/components/connection-form-modal-actions.spec.tsx b/packages/connection-form/src/components/connection-form-modal-actions.spec.tsx
index 5810c6d33bb..33c420dcd69 100644
--- a/packages/connection-form/src/components/connection-form-modal-actions.spec.tsx
+++ b/packages/connection-form/src/components/connection-form-modal-actions.spec.tsx
@@ -30,7 +30,7 @@ describe('<ConnectionFormModalActions />', function () {
     expect(screen.getByText('Error!')).to.be.visible;
   });
 
-  describe('Connect Button', function () {
+  describe('Save&Connect Button', function () {
     it('should call onSaveAndConnect function', function () {
       const onSaveAndConnectSpy = sinon.spy();
       render(
@@ -41,7 +41,9 @@ describe('<ConnectionFormModalActions />', function () {
           onSaveAndConnect={onSaveAndConnectSpy}
         ></ConnectionFormModalActions>
       );
-      const connectButton = screen.getByRole('button', { name: 'Connect' });
+      const connectButton = screen.getByRole('button', {
+        name: 'Save & Connect',
+      });
       userEvent.click(connectButton);
 
       expect(onSaveAndConnectSpy).to.have.been.calledOnce;
@@ -54,7 +56,8 @@ describe('<ConnectionFormModalActions />', function () {
           warnings={[]}
         ></ConnectionFormModalActions>
       );
-      expect(screen.queryByRole('button', { name: 'Connect' })).to.not.exist;
+      expect(screen.queryByRole('button', { name: 'Save & Connect' })).to.not
+        .exist;
     });
   });
 
diff --git a/packages/connection-form/src/components/connection-form.spec.tsx b/packages/connection-form/src/components/connection-form.spec.tsx
index e860968ae63..8260a59a292 100644
--- a/packages/connection-form/src/components/connection-form.spec.tsx
+++ b/packages/connection-form/src/components/connection-form.spec.tsx
@@ -39,7 +39,6 @@ describe('ConnectionForm Component', function () {
             connectionString: 'mongodb://pineapple:orangutans@localhost:27019',
           },
         }}
-        onSaveClicked={noop}
         {...props}
       />
     );
@@ -54,10 +53,55 @@ describe('ConnectionForm Component', function () {
     expect(screen.getByText('New Connection')).to.exist;
   });
 
-  it('should show the connect button', function () {
+  it('should show no save or connect buttons by default', function () {
     renderForm();
-    const button = screen.getByText('Connect').closest('button');
+    expect(screen.queryByRole('button', { name: 'Save' })).to.be.null;
+    expect(screen.queryByRole('button', { name: 'Connect' })).to.be.null;
+    expect(screen.queryByRole('button', { name: 'Save & Connect' })).to.be.null;
+  });
+
+  it('should show the save button if onSaveClicked is specified', function () {
+    const onSaveClicked = Sinon.spy();
+    renderForm({
+      onSaveClicked: onSaveClicked,
+    });
+    const button = screen
+      .getByRole('button', { name: 'Save' })
+      .closest('button');
     expect(button?.getAttribute('aria-disabled')).to.not.equal('true');
+
+    button?.click();
+    expect(onSaveClicked.callCount).to.equal(1);
+  });
+
+  it('should show the connect button if onConnectClicked is specified', function () {
+    const onConnectClicked = Sinon.spy();
+
+    renderForm({
+      onConnectClicked,
+    });
+    const button = screen
+      .getByRole('button', { name: 'Connect' })
+      .closest('button');
+    expect(button?.getAttribute('aria-disabled')).to.not.equal('true');
+
+    button?.click();
+    expect(onConnectClicked.callCount).to.equal(1);
+  });
+
+  it('should show the save & connect button if onSaveAndConnectClicked is specified', function () {
+    const onSaveAndConnectClicked = Sinon.spy();
+
+    renderForm({
+      onSaveAndConnectClicked,
+    });
+    const button = screen
+      .getByRole('button', { name: 'Save & Connect' })
+      .closest('button');
+    expect(button?.getAttribute('aria-disabled')).to.not.equal('true');
+
+    button?.click();
+    expect(onSaveAndConnectClicked.callCount).to.equal(1);
   });
 
   it('should render the connection string textbox', function () {
@@ -103,6 +147,9 @@ describe('ConnectionForm Component', function () {
           screen.getByTestId('advanced-connection-options')
         ).to.throw;
         expect(() => screen.getByRole('button', { name: 'Connect' })).to.throw;
+        expect(() =>
+          screen.getByRole('button', { name: 'Save & Connect' })
+        ).to.throw;
 
         // pressing enter calls onSubmit which saves
         fireEvent.submit(screen.getByRole('form'));
@@ -137,6 +184,7 @@ describe('ConnectionForm Component', function () {
         expect(screen.getByTestId('toggle-edit-connection-string')).to.exist;
         expect(screen.getByTestId('advanced-connection-options')).to.exist;
         expect(screen.getByRole('button', { name: 'Connect' })).to.exist;
+        expect(screen.getByRole('button', { name: 'Save & Connect' })).to.exist;
 
         // pressing enter calls onSubmit which saves and connects (the default)
         fireEvent.submit(screen.getByRole('form'));

From f2a74f03de920799e84005d5338c2584b7da1b6b Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <lerouxb@gmail.com>
Date: Thu, 10 Oct 2024 10:26:42 +0100
Subject: [PATCH 4/5] tests

---
 .../src/components/legacy-connections.spec.tsx              | 6 ++++--
 packages/compass-web/src/entrypoint.spec.tsx                | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/compass-connections/src/components/legacy-connections.spec.tsx b/packages/compass-connections/src/components/legacy-connections.spec.tsx
index 00442545096..6a09b91114c 100644
--- a/packages/compass-connections/src/components/legacy-connections.spec.tsx
+++ b/packages/compass-connections/src/components/legacy-connections.spec.tsx
@@ -25,7 +25,7 @@ async function loadSavedConnectionAndConnect(connectionInfo: ConnectionInfo) {
     )
   );
 
-  const connectButton = screen.getByRole('button', { name: 'Connect' });
+  const connectButton = screen.getByRole('button', { name: 'Save & Connect' });
   userEvent.click(connectButton);
 
   // Wait for the connecting... modal to hide.
@@ -267,7 +267,9 @@ describe.skip('Connections Component', function () {
           )
         );
 
-        const connectButton = screen.getByRole('button', { name: 'Connect' });
+        const connectButton = screen.getByRole('button', {
+          name: 'Save & Connect',
+        });
         userEvent.click(connectButton);
 
         // Wait for the connecting... modal to be shown.
diff --git a/packages/compass-web/src/entrypoint.spec.tsx b/packages/compass-web/src/entrypoint.spec.tsx
index 896498eeaec..e920b5189c2 100644
--- a/packages/compass-web/src/entrypoint.spec.tsx
+++ b/packages/compass-web/src/entrypoint.spec.tsx
@@ -81,9 +81,9 @@ describe('CompassWeb', function () {
       screen.getAllByRole('button', { name: 'Add new connection' })[0]
     );
     await waitFor(() => {
-      screen.getByRole('button', { name: 'Connect' });
+      screen.getByRole('button', { name: 'Save & Connect' });
     });
-    userEvent.click(screen.getByRole('button', { name: 'Connect' }));
+    userEvent.click(screen.getByRole('button', { name: 'Save & Connect' }));
     return result;
   }
 

From c374ecffc3d53b561464f902c39b229873710331 Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <lerouxb@gmail.com>
Date: Thu, 10 Oct 2024 12:54:41 +0100
Subject: [PATCH 5/5] add forceSave option to connect action creator

---
 .../src/stores/connections-store-redux.ts     | 42 +++++++++++++++++--
 .../src/stores/connections-store.spec.tsx     | 31 ++++++++++++++
 .../src/stores/connections-store.tsx          |  3 ++
 .../src/stores/store-context.tsx              |  4 ++
 .../multiple-connections/sidebar.tsx          |  4 +-
 5 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts
index 886675028fc..368e5875e65 100644
--- a/packages/compass-connections/src/stores/connections-store-redux.ts
+++ b/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(
diff --git a/packages/compass-connections/src/stores/connections-store.spec.tsx b/packages/compass-connections/src/stores/connections-store.spec.tsx
index f0f23139ea0..680118364bf 100644
--- a/packages/compass-connections/src/stores/connections-store.spec.tsx
+++ b/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, {
diff --git a/packages/compass-connections/src/stores/connections-store.tsx b/packages/compass-connections/src/stores/connections-store.tsx
index 8ebf73a7911..523fa5c7c48 100644
--- a/packages/compass-connections/src/stores/connections-store.tsx
+++ b/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,
diff --git a/packages/compass-connections/src/stores/store-context.tsx b/packages/compass-connections/src/stores/store-context.tsx
index 39c6cc778dd..80a66aa7978 100644
--- a/packages/compass-connections/src/stores/store-context.tsx
+++ b/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));
     },
diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx
index 5e505aeedbc..3abebc22e78 100644
--- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx
+++ b/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);
                   }
             }
           />