Merge branch 'main' into 1.29-releases

Author: addaleax

THIRD-PARTY-NOTICES.md

@@ -1,5 +1,5 @@
 The following third-party software is used by and included in **compass**.
-This document was automatically generated on Fri Dec 03 2021.
+This document was automatically generated on Sun Dec 12 2021.
 
 ## List of dependencies
 

package-lock.json

@@ -12,6 +12,12 @@ color: #999999;\
 background: #ffffff;\
 color: #000;\
 }\
+.ace-mongodb-query .ace_placeholder {\
+font-family: inherit;\
+transform: none;\
+opacity: 1;\
+margin: 0;\
+}\
 .ace-mongodb-query .ace_keyword {\
 color: #999999;\
 font-weight: normal;\

packages/ace-theme-query/index.js

@@ -79,6 +79,7 @@
     "react-dom": "^16.14.0",
     "resolve": "^1.15.1",
     "rimraf": "^3.0.2",
+    "sinon": "^8.1.1",
     "xvfb-maybe": "^0.2.1"
   },
   "homepage": "https://github.com/mongodb-js/compass",

packages/compass-home/package.json

@@ -3,6 +3,8 @@ import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import { expect } from 'chai';
 import AppRegistry from 'hadron-app-registry';
 import InstanceModel from 'mongodb-instance-model';
+import ipc from 'hadron-ipc';
+import sinon from 'sinon';
 
 import AppRegistryContext from '../contexts/app-registry-context';
 import Home from '.';
@@ -178,9 +180,14 @@ describe('Home [Component]', function () {
     });
 
     describe('UI status is complete', function () {
+      let dataServiceDisconnectedSpy: sinon.SinonSpy;
       beforeEach(async function () {
         const instance = createInstance();
-        await renderHome(createDataService(), instance);
+        dataServiceDisconnectedSpy = sinon.fake.resolves(true);
+        const dataService = {
+          disconnect: dataServiceDisconnectedSpy,
+        };
+        await renderHome(dataService, instance);
         instance.set({ status: 'ready', refreshingStatus: 'ready' });
         await waitFor(() => screen.getByTestId('test-Instance.Workspace'));
       });
@@ -298,6 +305,72 @@ describe('Home [Component]', function () {
         });
       });
     });
+
+    describe('with the new connect form (USE_NEW_CONNECT_FORM=true) and UI status is complete', function () {
+      let dataServiceDisconnectedSpy: sinon.SinonSpy;
+      let listenForDisconnectFake: sinon.SinonSpy;
+
+      beforeEach(async function () {
+        process.env.USE_NEW_CONNECT_FORM = 'true';
+
+        const instance = createInstance();
+        listenForDisconnectFake = sinon.fake();
+        testAppRegistry.on(
+          'data-service-disconnected',
+          listenForDisconnectFake
+        );
+        dataServiceDisconnectedSpy = sinon.fake.resolves(true);
+        const dataService = {
+          disconnect: dataServiceDisconnectedSpy,
+        };
+        await renderHome(dataService, instance);
+        instance.set({ status: 'ready', refreshingStatus: 'ready' });
+        await waitFor(() => screen.getByTestId('test-Instance.Workspace'));
+      });
+
+      afterEach(function () {
+        delete process.env.USE_NEW_CONNECT_FORM;
+        testAppRegistry.removeListener(
+          'data-service-disconnected',
+          listenForDisconnectFake
+        );
+        sinon.restore();
+      });
+
+      describe('on `app:disconnect`', function () {
+        // Skip disconnect testing when we're not running in a renderer instance.
+        // eslint-disable-next-line mocha/no-setup-in-describe
+        if (!ipc.ipcRenderer) {
+          // eslint-disable-next-line mocha/no-setup-in-describe
+          console.warn(
+            'Skipping "app:disconnect" ipc event tests on non-renderer environment.'
+          );
+          return;
+        }
+
+        beforeEach(function () {
+          ipc.ipcRenderer.emit('app:disconnect');
+        });
+
+        it('calls `data-service-disconnected`', async function () {
+          await waitFor(() =>
+            expect(listenForDisconnectFake.callCount).to.equal(1)
+          );
+        });
+
+        it('renders the new connect form', async function () {
+          await waitFor(
+            () => expect(screen.queryByTestId('new-connect-form')).to.be.visible
+          );
+        });
+
+        it('calls to disconnect the data service', async function () {
+          await waitFor(() =>
+            expect(dataServiceDisconnectedSpy.callCount).to.equal(1)
+          );
+        });
+      });
+    });
   });
 
   describe('when rendered', function () {

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback, useEffect, useReducer } from 'react';
+import React, { useCallback, useEffect, useReducer, useRef } from 'react';
 import {
   ConnectionInfo,
   DataService,
@@ -19,6 +19,7 @@ import {
   useAppRegistryRole,
 } from '../contexts/app-registry-context';
 import updateTitle from '../modules/update-title';
+import ipc from 'hadron-ipc';
 
 const homeViewStyles = css({
   display: 'flex',
@@ -124,16 +125,14 @@ function reducer(state: State, action: Action): State {
 }
 
 function hideCollectionSubMenu() {
-  void import('hadron-ipc').then(({ ipcRenderer }) => {
-    if (ipcRenderer) {
-      ipcRenderer.call('window:hide-collection-submenu');
-    }
-  });
+  void ipc.ipcRenderer?.call('window:hide-collection-submenu');
 }
 
 function Home({ appName }: { appName: string }): React.ReactElement | null {
   const appRegistry = useAppRegistryContext();
   const connectRole = useAppRegistryRole(AppRegistryRoles.APPLICATION_CONNECT);
+  const connectedDataService = useRef<DataService>();
+  const showNewConnectForm = process.env.USE_NEW_CONNECT_FORM === 'true';
 
   const [
     {
@@ -152,6 +151,7 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
     ds: DataService,
     connectionInfo: ConnectionInfo
   ) {
+    connectedDataService.current = ds;
     dispatch({
       type: 'connected',
       connectionTitle: getConnectionTitle(connectionInfo) || '',
@@ -282,7 +282,37 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
   }, [isConnected, appName, connectionTitle, namespace]);
 
   useEffect(() => {
-    // Setup listeners.
+    async function handleDisconnectClicked() {
+      if (!connectedDataService.current) {
+        // We aren't connected.
+        return;
+      }
+
+      await connectedDataService.current.disconnect();
+      connectedDataService.current = undefined;
+
+      appRegistry.emit('data-service-disconnected');
+    }
+
+    function onDisconnect() {
+      void handleDisconnectClicked();
+    }
+
+    // TODO: Once we merge https://jira.mongodb.org/browse/COMPASS-5302
+    // we can remove this check and handle the disconnect event here by default.
+    if (showNewConnectForm) {
+      // Setup ipc listener.
+      ipc.ipcRenderer?.on('app:disconnect', onDisconnect);
+
+      return () => {
+        // Clean up the ipc listener.
+        ipc.ipcRenderer?.removeListener('app:disconnect', onDisconnect);
+      };
+    }
+  }, [appRegistry, showNewConnectForm, onDataServiceDisconnected]);
+
+  useEffect(() => {
+    // Setup app registry listeners.
     appRegistry.on('instance-created', onInstanceCreated);
     appRegistry.on('data-service-connected', onDataServiceConnected);
     appRegistry.on('data-service-disconnected', onDataServiceDisconnected);
@@ -293,7 +323,7 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
     appRegistry.on('all-collection-tabs-closed', onAllTabsClosed);
 
     return () => {
-      // Clean up the listeners.
+      // Clean up the app registry listeners.
       appRegistry.removeListener('instance-created', onInstanceCreated);
       appRegistry.removeListener(
         'data-service-connected',
@@ -325,8 +355,6 @@ function Home({ appName }: { appName: string }): React.ReactElement | null {
     );
   }
 
-  const showNewConnectForm = process.env.USE_NEW_CONNECT_FORM === 'true';
-
   if (showNewConnectForm) {
     return (
       <div className={homeViewStyles} data-test-id="home-view">

packages/compass-home/src/components/home.tsx

@@ -59,7 +59,7 @@ function ConnectForm({
   );
 
   return (
-    <div className={formContainerStyles}>
+    <div className={formContainerStyles} data-testid="new-connect-form">
       <Card className={formCardStyles}>
         <div className={formContentContainerStyles}>
           <H3>New Connection</H3>