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

Author: Anemy

package-lock.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",

package.json

@@ -12,7 +12,7 @@ const vsixFileName = path.resolve(
 );
 const size = fs.statSync(vsixFileName).size;
 
-const maxSize = 7 * 1000000; // 7 MB
+const maxSize = 8 * 1000000; // 8 MB
 
 if (size >= maxSize) {
   throw new Error(

scripts/check-vsix-size.ts

@@ -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/connect-helper.test.tsx

@@ -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/jest-setup.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { cleanup, render, screen } from '@testing-library/react';
+
 import OverviewPage from '../../../../views/webview-app/overview-page';
 
 describe('OverviewPage test suite', function () {
@@ -26,4 +27,14 @@ describe('OverviewPage test suite', function () {
     screen.getByLabelText('Close').click();
     expect(screen.queryByText('Product overview')).to.be.null;
   });
+
+  test('it renders the new connection form when opened', function () {
+    render(<OverviewPage />);
+
+    const connectionFormTestId = 'connection-form-modal';
+    expect(screen.queryByTestId(connectionFormTestId)).to.not.exist;
+
+    screen.getByText('Open form').click();
+    expect(screen.getByTestId(connectionFormTestId)).to.exist;
+  });
 });

src/test/suite/views/webview-app/overview-page.test.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/connect-helper.tsx

@@ -0,0 +1,66 @@
+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/connection-form.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/legacy/components/mongodb-logo/mongodb-logo.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 pageStyles = css({
 
 const OverviewPage: React.FC = () => {
   const [showResourcesPanel, setShowResourcesPanel] = useState(false);
+  const [showConnectionForm, setShowConnectionForm] = useState(false);
   const handleResourcesPanelClose = useCallback(
     () => setShowResourcesPanel(false),
     []
@@ -29,15 +37,35 @@ const OverviewPage: React.FC = () => {
     () => 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>
   );