chore: bump connection-form for global css reset

package.json

@@ -979,7 +979,7 @@
     "@iconify-icons/codicon": "^1.2.25",
     "@iconify/react": "^1.1.4",
     "@mongodb-js/compass-components": "^1.20.0",
-    "@mongodb-js/connection-form": "^1.20.3",
+    "@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/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/app.tsx

@@ -8,7 +8,7 @@ import { useDetectVsCodeDarkMode } from './use-detect-vscode-dark-mode';
 const App: React.FC = () => {
   const darkMode = useDetectVsCodeDarkMode();
 
-  return true || getFeatureFlag('useNewConnectionForm') ? (
+  return getFeatureFlag('useNewConnectionForm') ? (
     <LeafyGreenProvider darkMode={darkMode}>
       <OverviewPage />
     </LeafyGreenProvider>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import CompassConnectionForm from '@mongodb-js/connection-form';
-import { Modal, ModalBody, css, spacing } from '@mongodb-js/compass-components';
+import { Modal, css, spacing } from '@mongodb-js/compass-components';
 import { v4 as uuidv4 } from 'uuid';
 
 const modalContentStyles = css({
@@ -9,7 +9,10 @@ const modalContentStyles = css({
 });
 
 const formContainerStyles = css({
-  padding: spacing[1],
+  padding: spacing[3],
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
 });
 
 function createNewConnectionInfo() {
@@ -39,26 +42,24 @@ const ConnectionForm: React.FunctionComponent<{
         data-testid="connection-form-modal"
         size="large"
       >
-        <ModalBody>
-          <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>
-        </ModalBody>
+        <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>
     </>
   );

src/views/webview-app/index.tsx

@@ -2,9 +2,5 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import App from './app';
-// import './reset.less';
 
-import { resetGlobalCSS } from './reset-css';
-
-resetGlobalCSS();
 ReactDOM.render(<App />, document.getElementById('root'));

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

@@ -1,5 +1,11 @@
-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';
@@ -31,6 +37,13 @@ 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 && (