fix(connection-form): vscode support & cleanup COMPASS-8098

packages/compass/src/app/components/home.spec.tsx

@@ -1,6 +1,5 @@
 import React, { type ComponentProps } from 'react';
 import { expect } from 'chai';
-import * as hadronIpc from 'hadron-ipc';
 import sinon from 'sinon';
 import { ThemedHome } from './home';
 import type { DataService } from 'mongodb-data-service';
@@ -11,7 +10,6 @@ import {
   screen,
   waitFor,
   within,
-  userEvent,
 } from '@mongodb-js/testing-library-compass';
 import type { AllPreferences } from 'compass-preferences-model/provider';
 import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider';
@@ -79,29 +77,12 @@ describe('Home [Component]', function () {
     return result;
   }
 
-  async function waitForConnect() {
-    userEvent.click(screen.getByRole('button', { name: 'Connect' }));
-
-    await waitFor(
-      () => {
-        screen.getByTestId('home');
-      },
-      { timeout: 1_000_000 }
-    );
-  }
-
   afterEach(() => {
     cleanup();
     sinon.restore();
   });
 
   describe('is not connected', function () {
-    it('renders the connect screen', function () {
-      renderHome();
-      expect(() => screen.getByTestId('home')).to.throw;
-      expect(screen.getByTestId('connections-wrapper')).to.be.displayed;
-    });
-
     it('renders welcome modal and hides it', async function () {
       renderHome({ showWelcomeModal: true });
       const modal = screen.getByTestId('welcome-modal');
@@ -137,58 +118,4 @@ describe('Home [Component]', function () {
       });
     });
   });
-
-  describe('is connected', function () {
-    describe('when UI status is complete', function () {
-      let dataServiceDisconnectedSpy: sinon.SinonSpy;
-
-      let onDisconnectSpy: sinon.SinonSpy;
-      let hideCollectionSubMenuSpy: sinon.SinonSpy;
-
-      beforeEach(async function () {
-        dataServiceDisconnectedSpy = sinon.fake.resolves(true);
-        hideCollectionSubMenuSpy = sinon.spy();
-        onDisconnectSpy = sinon.spy();
-        const dataService = {
-          ...createDataService(),
-          disconnect: dataServiceDisconnectedSpy,
-          addReauthenticationHandler: sinon.stub(),
-        };
-        renderHome(
-          {
-            hideCollectionSubMenu: hideCollectionSubMenuSpy,
-            onDisconnect: onDisconnectSpy,
-          },
-          [],
-          dataService
-        );
-        await waitForConnect();
-      });
-
-      afterEach(function () {
-        sinon.restore();
-      });
-
-      it('renders only the workspaces', function () {
-        expect(screen.getByTestId('home')).to.be.displayed;
-        expect(() => screen.getByTestId('connections-wrapper')).to.throw;
-      });
-
-      it('on `app:disconnect`', async function () {
-        hadronIpc.ipcRenderer?.emit('app:disconnect');
-        await waitFor(() => {
-          expect(onDisconnectSpy.called, 'it calls onDisconnect').to.be.true;
-          expect(
-            hideCollectionSubMenuSpy.called,
-            'it calls hideCollectionSubMenu'
-          ).to.be.true;
-        });
-
-        await waitFor(() => {
-          expect(screen.queryByTestId('connections-wrapper')).to.be.visible;
-        });
-        expect(dataServiceDisconnectedSpy.callCount).to.equal(1);
-      });
-    });
-  });
 });

packages/connection-form/src/components/connection-form-actions.spec.tsx

@@ -1,12 +1,54 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@mongodb-js/testing-library-compass';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 import sinon from 'sinon';
 
 import { ConnectionFormModalActions } from './connection-form-actions';
 
 describe('<ConnectionFormModalActions />', function () {
+  it('should show warnings', function () {
+    render(
+      <ConnectionFormModalActions
+        errors={[]}
+        warnings={[{ message: 'Warning!' }]}
+        onSave={() => undefined}
+        onSaveAndConnect={() => undefined}
+      ></ConnectionFormModalActions>
+    );
+    expect(screen.getByText('Warning!')).to.be.visible;
+  });
+
+  it('should show errors', function () {
+    render(
+      <ConnectionFormModalActions
+        errors={[{ message: 'Error!' }]}
+        warnings={[]}
+        onSave={() => undefined}
+        onSaveAndConnect={() => undefined}
+      ></ConnectionFormModalActions>
+    );
+    expect(screen.getByText('Error!')).to.be.visible;
+  });
+
   describe('Connect Button', function () {
+    it('should call onSaveAndConnect function', function () {
+      const onSaveAndConnectSpy = sinon.spy();
+      render(
+        <ConnectionFormModalActions
+          errors={[]}
+          warnings={[]}
+          onSave={() => undefined}
+          onSaveAndConnect={onSaveAndConnectSpy}
+        ></ConnectionFormModalActions>
+      );
+      const connectButton = screen.getByRole('button', { name: 'Connect' });
+      userEvent.click(connectButton);
+
+      expect(onSaveAndConnectSpy).to.have.been.calledOnce;
+    });
+  });
+
+  describe('Save Button', function () {
     it('should call onSave function', function () {
       const onSaveSpy = sinon.spy();
       render(
@@ -17,38 +59,24 @@ describe('<ConnectionFormModalActions />', function () {
           onSaveAndConnect={() => undefined}
         ></ConnectionFormModalActions>
       );
-      const saveButton = screen.getByText('Save');
-      fireEvent(
-        saveButton,
-        new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true,
-        })
-      );
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      userEvent.click(saveButton);
       expect(onSaveSpy).to.have.been.calledOnce;
     });
 
-    it('should call onSaveAndConnect function', function () {
-      const onSaveAndConnectSpy = sinon.spy();
+    it('should hide "save" button if there is no callback', function () {
       render(
         <ConnectionFormModalActions
           errors={[]}
           warnings={[]}
-          onSave={() => undefined}
-          onSaveAndConnect={onSaveAndConnectSpy}
+          onSaveAndConnect={() => undefined}
         ></ConnectionFormModalActions>
       );
-      const saveButton = screen.getByText('Connect');
-      fireEvent(
-        saveButton,
-        new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true,
-        })
-      );
-      expect(onSaveAndConnectSpy).to.have.been.calledOnce;
+      expect(screen.queryByRole('button', { name: 'Save' })).to.not.exist;
     });
+  });
 
+  describe('Cancel Button', function () {
     it('should call onCancel function', function () {
       const onCancelSpy = sinon.spy();
       render(
@@ -60,39 +88,22 @@ describe('<ConnectionFormModalActions />', function () {
           onCancel={onCancelSpy}
         ></ConnectionFormModalActions>
       );
-      const saveButton = screen.getByText('Cancel');
-      fireEvent(
-        saveButton,
-        new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true,
-        })
-      );
+      const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+      userEvent.click(cancelButton);
+
       expect(onCancelSpy).to.have.been.calledOnce;
     });
 
-    it('should show warnings', function () {
+    it('should hide onCancel button if there is no callback', function () {
       render(
         <ConnectionFormModalActions
           errors={[]}
-          warnings={[{ message: 'Warning!' }]}
-          onSave={() => undefined}
-          onSaveAndConnect={() => undefined}
-        ></ConnectionFormModalActions>
-      );
-      expect(screen.getByText('Warning!')).to.be.visible;
-    });
-
-    it('should show errors', function () {
-      render(
-        <ConnectionFormModalActions
-          errors={[{ message: 'Error!' }]}
           warnings={[]}
           onSave={() => undefined}
           onSaveAndConnect={() => undefined}
         ></ConnectionFormModalActions>
       );
-      expect(screen.getByText('Error!')).to.be.visible;
+      expect(screen.queryByRole('button', { name: 'Cancel' })).to.not.exist;
     });
   });
 });

packages/connection-form/src/components/connection-form-actions.tsx

@@ -38,106 +38,25 @@ const saveAndConnectStyles = css({
   justifyContent: 'flex-end',
 });
 
-export function LegacyConnectionFormActions({
-  errors,
-  warnings,
-  onConnectClicked,
-  onSaveClicked,
-  onSaveAndConnectClicked,
-  saveButton,
-  saveAndConnectButton,
-}: {
-  errors: ConnectionFormError[];
-  warnings: ConnectionFormWarning[];
-  onConnectClicked: () => void;
-  onSaveClicked: () => void;
-  onSaveAndConnectClicked: () => void;
-  saveButton: 'enabled' | 'disabled' | 'hidden';
-  saveAndConnectButton: 'enabled' | 'disabled' | 'hidden';
-}): React.ReactElement {
-  const showFavoriteActions = useConnectionFormPreference(
-    'showFavoriteActions'
-  );
-
-  return (
-    <div className={cx(formActionStyles)}>
-      {warnings.length > 0 && (
-        <div className={formActionItemStyles}>
-          <WarningSummary
-            data-testid="connection-warnings-summary"
-            warnings={warnings.map((warning) => warning.message)}
-          />
-        </div>
-      )}
-      {errors.length > 0 && (
-        <div className={formActionItemStyles}>
-          <ErrorSummary
-            data-testid="connection-error-summary"
-            errors={errors.map((error) => error.message)}
-          />
-        </div>
-      )}
-      <div className={cx(formActionItemStyles, formActionButtonsStyles)}>
-        {showFavoriteActions && (
-          <>
-            {saveButton !== 'hidden' && (
-              <Button
-                data-testid="save-connection-button"
-                variant={ButtonVariant.Default}
-                disabled={saveButton === 'disabled'}
-                onClick={onSaveClicked}
-              >
-                Save
-              </Button>
-            )}
-
-            {saveAndConnectButton !== 'hidden' && (
-              <div className={saveAndConnectStyles}>
-                <Button
-                  data-testid="save-and-connect-button"
-                  variant={ButtonVariant.PrimaryOutline}
-                  disabled={saveAndConnectButton === 'disabled'}
-                  onClick={onSaveAndConnectClicked}
-                >
-                  Save &amp; Connect
-                </Button>
-              </div>
-            )}
-          </>
-        )}
-
-        <Button
-          data-testid="connect-button"
-          variant={ButtonVariant.Primary}
-          onClick={onConnectClicked}
-        >
-          {showFavoriteActions ? 'Connect' : 'Save & Connect'}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
 export type ConnectionFormModalActionsProps = {
   errors: ConnectionFormError[];
   warnings: ConnectionFormWarning[];
 
   onCancel?(): void;
-  onSave(): void;
+  onSave?(): void;
   onSaveAndConnect(): void;
 };
 
-// TODO(COMPASS-8098): Make sure these work for VSCode, for example add:
-// saveButton: 'enabled' | 'disabled' | 'hidden';
-// saveAndConnectButton: 'enabled' | 'disabled' | 'hidden';
-// cancelButton: 'enabled' | 'disabled' | 'hidden';
 export function ConnectionFormModalActions({
   errors,
   warnings,
   onCancel,
   onSave,
   onSaveAndConnect,
 }: ConnectionFormModalActionsProps): React.ReactElement {
+  const saveAndConnectLabel = useConnectionFormPreference(
+    'saveAndConnectLabel'
+  );
   return (
     <div className={cx(formActionStyles)}>
       {warnings.length > 0 && (
@@ -168,23 +87,25 @@ export function ConnectionFormModalActions({
           </Button>
         )}
 
-        <div className={saveAndConnectStyles}>
-          <Button
-            data-testid="save-button"
-            variant={ButtonVariant.PrimaryOutline}
-            disabled={false}
-            onClick={onSave}
-          >
-            Save
-          </Button>
-        </div>
+        {onSave && (
+          <div className={saveAndConnectStyles}>
+            <Button
+              data-testid="save-button"
+              variant={ButtonVariant.PrimaryOutline}
+              disabled={false}
+              onClick={onSave}
+            >
+              Save
+            </Button>
+          </div>
+        )}
 
         <Button
           data-testid="connect-button"
           variant={ButtonVariant.Primary}
           onClick={onSaveAndConnect}
         >
-          Connect
+          {saveAndConnectLabel}
         </Button>
       </div>
     </div>