feat(webview): use Compass' connection form in the new overview page VSCODE-488

package.json

@@ -978,8 +978,8 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@iconify-icons/codicon": "^1.2.25",
     "@iconify/react": "^1.1.4",
-    "@leafygreen-ui/logo": "^8.0.4",
-    "@mongodb-js/compass-components": "^1.19.0",
+    "@mongodb-js/compass-components": "^1.20.0",
+    "@mongodb-js/connection-form": "^1.20.4",
     "@mongodb-js/mongodb-constants": "^0.7.1",
     "@mongosh/browser-runtime-electron": "^2.0.2",
     "@mongosh/i18n": "^2.0.2",

src/test/suite/views/webview-app/connect-helper.test.tsx

@@ -8,15 +8,27 @@ import { MESSAGE_TYPES } from '../../../../views/webview-app/extension-app-messa
 
 describe('ConnectHelper test suite', function () {
   test('when rendered it should show both connection options', function () {
-    render(<ConnectHelper />);
+    render(
+      <ConnectHelper
+        onClickOpenConnectionForm={() => {
+          /* noop */
+        }}
+      />
+    );
     expect(screen.getByLabelText('Connect with connection string')).to.not.be
       .null;
     expect(screen.getByLabelText('Open connection form')).to.not.be.null;
   });
 
   test('when connecting with string, it should call vscode to open connection string input', function () {
     const postMessageStub = Sinon.stub(vscode, 'postMessage');
-    render(<ConnectHelper />);
+    render(
+      <ConnectHelper
+        onClickOpenConnectionForm={() => {
+          /* noop */
+        }}
+      />
+    );
     screen.getByLabelText('Connect with connection string').click();
     expect(postMessageStub).to.have.been.calledWithExactly({
       command: MESSAGE_TYPES.OPEN_CONNECTION_STRING_INPUT,

src/test/suite/views/webview-app/jest-setup.js

@@ -4,12 +4,17 @@
 const Enzyme = require('enzyme');
 const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
 const chai = require('chai');
+const { TextEncoder, TextDecoder } = require('util');
+
 chai.use(require('sinon-chai'));
 Enzyme.configure({ adapter: new Adapter() });
 
 // eslint-disable-next-line no-undef
 jest.mock('@iconify-icons/codicon/book', () => {});
 
+// Note applied with js dom so we do manually. (Required by node_modules/mongodb-connection-string-url/node_modules/whatwg-url/lib/encoding.js)
+Object.assign(global, { TextDecoder, TextEncoder });
+
 global.vscodeFake = {
   postMessage: (message) => {},
 };

src/test/suite/views/webview-app/overview-page.test.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { expect } from 'chai';
 import { cleanup, render, screen } from '@testing-library/react';
+import sinon from 'sinon';
+
 import OverviewPage from '../../../../views/webview-app/overview-page';
+import * as featureFlags from '../../../../featureFlags';
 
 describe('OverviewPage test suite', function () {
   afterEach(cleanup);
@@ -26,4 +29,20 @@ describe('OverviewPage test suite', function () {
     screen.getByLabelText('Close').click();
     expect(screen.queryByText('Product overview')).to.be.null;
   });
+
+  describe('with the new connection form feature flag useNewConnectionForm enabled', function () {
+    beforeEach(function () {
+      sinon.stub(featureFlags, 'getFeatureFlag').returns(true);
+
+      render(<OverviewPage />);
+    });
+
+    test('it renders the new connection form when opened', function () {
+      const connectionFormTestId = 'connection-form-modal';
+      expect(screen.queryByTestId(connectionFormTestId)).to.not.exist;
+
+      screen.getByText('Open form').click();
+      expect(screen.getByTestId(connectionFormTestId)).to.exist;
+    });
+  });
 });

src/views/webview-app/connect-helper.tsx

@@ -56,7 +56,9 @@ const getOSCommandShortcutName = (): string => {
   return 'Cmd';
 };
 
-const ConnectHelper: React.FC = () => {
+const ConnectHelper: React.FC<{
+  onClickOpenConnectionForm: () => void;
+}> = ({ onClickOpenConnectionForm }) => {
   return (
     <div className={containerStyles}>
       <div className={cardContainerStyles}>
@@ -89,9 +91,7 @@ const ConnectHelper: React.FC = () => {
           <Button
             aria-label="Open connection form"
             darkMode
-            onClick={() => {
-              // TODO
-            }}
+            onClick={onClickOpenConnectionForm}
           >
             Open form
           </Button>

src/views/webview-app/connection-form.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import CompassConnectionForm from '@mongodb-js/connection-form';
+import { Modal, css, spacing } from '@mongodb-js/compass-components';
+import { v4 as uuidv4 } from 'uuid';
+
+const modalContentStyles = css({
+  // Override LeafyGreen width to accommodate the strict connection-form size.
+  width: `${spacing[6] * 12}px !important`,
+});
+
+const formContainerStyles = css({
+  padding: spacing[3],
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+function createNewConnectionInfo() {
+  return {
+    id: uuidv4(),
+    connectionOptions: {
+      connectionString: 'mongodb://localhost:27017',
+    },
+  };
+}
+
+const initialConnectionInfo = createNewConnectionInfo();
+
+const ConnectionForm: React.FunctionComponent<{
+  onConnectClicked: (onConnectClicked: unknown) => void;
+  onClose: () => void;
+  open: boolean;
+}> = ({ onConnectClicked, onClose, open }) => {
+  return (
+    <>
+      <Modal
+        // Warning: This property may be removed in future
+        // modal releases.
+        contentClassName={modalContentStyles}
+        setOpen={() => onClose()}
+        open={open}
+        data-testid="connection-form-modal"
+        size="large"
+      >
+        <div className={formContainerStyles}>
+          <CompassConnectionForm
+            onConnectClicked={onConnectClicked}
+            initialConnectionInfo={initialConnectionInfo}
+            preferences={{
+              protectConnectionStrings: false,
+              forceConnectionOptions: [],
+              showKerberosPasswordField: false,
+              showOIDCDeviceAuthFlow: false,
+              enableOidc: false,
+              enableDebugUseCsfleSchemaMap: false,
+              protectConnectionStringsForNewConnections: false,
+              showOIDCAuth: false,
+              showKerberosAuth: false,
+              showCSFLE: false,
+            }}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export { ConnectionForm };

src/views/webview-app/legacy/components/mongodb-logo/mongodb-logo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { MongoDBLogo as LeafyGreenMongoDBLogo } from '@leafygreen-ui/logo';
+import { MongoDBLogo as LeafyGreenMongoDBLogo } from '@mongodb-js/compass-components';
 
 import styles from './mongodb-logo.less';
 

src/views/webview-app/overview-page.tsx

@@ -1,10 +1,17 @@
-import React, { useCallback, useState } from 'react';
-import { HorizontalRule, css, spacing } from '@mongodb-js/compass-components';
+import React, { useCallback, useLayoutEffect, useState } from 'react';
+import {
+  HorizontalRule,
+  css,
+  resetGlobalCSS,
+  spacing,
+} from '@mongodb-js/compass-components';
+
 import OverviewHeader from './overview-header';
 import ConnectionStatus from './connection-status';
 import ConnectHelper from './connect-helper';
 import AtlasCta from './atlas-cta';
 import ResourcesPanel from './resources-panel/panel';
+import { ConnectionForm } from './connection-form';
 
 const pageStyles = css({
   width: '90%',
@@ -21,6 +28,7 @@
 
 const OverviewPage: React.FC = () => {
   const [showResourcesPanel, setShowResourcesPanel] = useState(false);
+  const [showConnectionForm, setShowConnectionForm] = useState(false);
   const handleResourcesPanelClose = useCallback(
     () => setShowResourcesPanel(false),
     []
@@ -29,15 +37,35 @@
     () => setShowResourcesPanel(true),
     []
   );
+
+  useLayoutEffect(() => {
+    // TODO(VSCODE-490): Move this reset css call to the top level entry point
+    // of the app and out of the react lifecycle.
+    resetGlobalCSS();
+  }, []);
+
   return (
     <div className={pageStyles}>
       {showResourcesPanel && (
         <ResourcesPanel onClose={handleResourcesPanelClose} />
       )}
+      {showConnectionForm && (
+        <ConnectionForm
+          onConnectClicked={(connectionInfo) => {
+            // TODO(VSCODE-489): Type connection form and post message to the webview controller.
+            // Maintain connecting status.
+            console.log('connect', connectionInfo);
+          }}
+          onClose={() => setShowConnectionForm(false)}
+          open={showConnectionForm}
+        />
+      )}
       <OverviewHeader onResourcesClick={handleResourcesClick} />
       <HorizontalRule />
       <ConnectionStatus />
-      <ConnectHelper />
+      <ConnectHelper
+        onClickOpenConnectionForm={() => setShowConnectionForm(true)}
+      />
       <AtlasCta />
     </div>
   );

webpack.config.js

@@ -157,6 +157,14 @@ module.exports = (env, argv) => {
         buffer: require.resolve('buffer'),
         crypto: require.resolve('crypto-browserify'),
         path: require.resolve('path-browserify'),
+        // We don't want to bundle the mongodb driver code with the webview.
+        // There's a chance in the future that one of the dependencies
+        // like connection-form will accidentally use this as a dependency,
+        // when that happens the webpack with fail asking for a lot of
+        // polyfills. Instead of adding the polyfills we should
+        // update the upstream usage and, where applicable, prevent future
+        // regressions with lint rules.
+        mongodb: false,
       },
     },
     module: {