diff --git a/package-lock.json b/package-lock.json
index 25a906d57..4f59ceca9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,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",
@@ -4582,9 +4582,9 @@
"integrity": "sha512-AsvPlbvF7CERiZbAQR8hy3lAJ2/rieXI3cO0jsOwV8ztDqYNotKAdLujyr/NviudrRUenYiXrLizIKVlSPUMuA=="
},
"node_modules/@lezer/common": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.1.tgz",
- "integrity": "sha512-aAPB9YbvZHqAW+bIwiuuTDGB4DG0sYNRObGLxud8cW7osw1ZQxfDuTZ8KQiqfZ0QJGcR34CvpTMDXEyo/+Htgg=="
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.2.tgz",
+ "integrity": "sha512-V+GqBsga5+cQJMfM0GdnHmg4DgWvLzgMWjbldBg0+jC3k9Gu6nJNZDLJxXEBT1Xj8KhRN4jmbC5CY7SIL++sVw=="
},
"node_modules/@lezer/highlight": {
"version": "1.2.0",
@@ -4621,9 +4621,9 @@
}
},
"node_modules/@mongodb-js/compass-components": {
- "version": "1.20.1",
- "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.1.tgz",
- "integrity": "sha512-QEe+mz9zZKeMbGGGInmKc8fokImFnTf2jldTf2IHd4v5ezrCZJRV2kiyF43cNGtaPLOAbK7vLGNMXfJofODfug==",
+ "version": "1.20.2",
+ "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.2.tgz",
+ "integrity": "sha512-EHWngr+15ga8wmuxt7HaqVXJh1YQuAE8ISRqzRborC8mEb+eTC7QxadwlQx4tny4sMKK1IjZPowDK3N2/3ig+A==",
"dependencies": {
"@dnd-kit/core": "^6.0.7",
"@dnd-kit/sortable": "^7.0.2",
@@ -4704,9 +4704,9 @@
"integrity": "sha512-AsvPlbvF7CERiZbAQR8hy3lAJ2/rieXI3cO0jsOwV8ztDqYNotKAdLujyr/NviudrRUenYiXrLizIKVlSPUMuA=="
},
"node_modules/@mongodb-js/compass-editor": {
- "version": "0.19.1",
- "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.1.tgz",
- "integrity": "sha512-mtIExRSRGafY0J14dnxYLkfjMQQ5cRsqrTmzEz7a+Njdlsq2fJjhoVcSPDi0cQBWYMuCdujX5RACHkvo1EcT9g==",
+ "version": "0.19.2",
+ "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.2.tgz",
+ "integrity": "sha512-BBaMIzTjwgddcfFdrH/PbBcRIOgqQZQkOLGdj/48s3ga+aZcnweytTNw3z0mtVrzCaWtZPInhrh958JGLOvGxA==",
"dependencies": {
"@codemirror/autocomplete": "^6.4.0",
"@codemirror/commands": "^6.1.2",
@@ -4717,7 +4717,7 @@
"@codemirror/state": "^6.1.4",
"@codemirror/view": "^6.7.1",
"@lezer/highlight": "^1.1.3",
- "@mongodb-js/compass-components": "^1.20.1",
+ "@mongodb-js/compass-components": "^1.20.2",
"@mongodb-js/mongodb-constants": "^0.8.7",
"polished": "^4.2.2",
"prettier": "^2.7.1"
@@ -4781,12 +4781,12 @@
}
},
"node_modules/@mongodb-js/connection-form": {
- "version": "1.20.3",
- "resolved": "https://registry.npmjs.org/@mongodb-js/connection-form/-/connection-form-1.20.3.tgz",
- "integrity": "sha512-gsY6MFUEh8UIxCheNlFUyfsuM8Z6cU8vrUkkKJy9KmL09T9XQeGtyD8z865eZgiu/zHlXg5aWMR8JjL+J3+Blw==",
+ "version": "1.20.4",
+ "resolved": "https://registry.npmjs.org/@mongodb-js/connection-form/-/connection-form-1.20.4.tgz",
+ "integrity": "sha512-ZshFg3Glzr+DSCdyMYR2ieS2MDn73gt5eD+sKGaCYKHzQcu1G0Li0ocpsMdmnkNvZafyHruyg1IvgIyMHx6e+g==",
"dependencies": {
- "@mongodb-js/compass-components": "^1.20.1",
- "@mongodb-js/compass-editor": "^0.19.1",
+ "@mongodb-js/compass-components": "^1.20.2",
+ "@mongodb-js/compass-editor": "^0.19.2",
"@testing-library/react-hooks": "^7.0.2",
"lodash": "^4.17.21",
"mongodb-build-info": "^1.7.0",
@@ -4794,8 +4794,8 @@
"mongodb-query-parser": "^4.0.0"
},
"peerDependencies": {
- "@mongodb-js/compass-components": "^1.20.1",
- "@mongodb-js/compass-editor": "^0.19.1",
+ "@mongodb-js/compass-components": "^1.20.2",
+ "@mongodb-js/compass-editor": "^0.19.2",
"react": "^17.0.2"
}
},
@@ -29339,9 +29339,9 @@
}
},
"@lezer/common": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.1.tgz",
- "integrity": "sha512-aAPB9YbvZHqAW+bIwiuuTDGB4DG0sYNRObGLxud8cW7osw1ZQxfDuTZ8KQiqfZ0QJGcR34CvpTMDXEyo/+Htgg=="
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.2.tgz",
+ "integrity": "sha512-V+GqBsga5+cQJMfM0GdnHmg4DgWvLzgMWjbldBg0+jC3k9Gu6nJNZDLJxXEBT1Xj8KhRN4jmbC5CY7SIL++sVw=="
},
"@lezer/highlight": {
"version": "1.2.0",
@@ -29378,9 +29378,9 @@
}
},
"@mongodb-js/compass-components": {
- "version": "1.20.1",
- "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.1.tgz",
- "integrity": "sha512-QEe+mz9zZKeMbGGGInmKc8fokImFnTf2jldTf2IHd4v5ezrCZJRV2kiyF43cNGtaPLOAbK7vLGNMXfJofODfug==",
+ "version": "1.20.2",
+ "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.2.tgz",
+ "integrity": "sha512-EHWngr+15ga8wmuxt7HaqVXJh1YQuAE8ISRqzRborC8mEb+eTC7QxadwlQx4tny4sMKK1IjZPowDK3N2/3ig+A==",
"requires": {
"@dnd-kit/core": "^6.0.7",
"@dnd-kit/sortable": "^7.0.2",
@@ -29460,9 +29460,9 @@
}
},
"@mongodb-js/compass-editor": {
- "version": "0.19.1",
- "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.1.tgz",
- "integrity": "sha512-mtIExRSRGafY0J14dnxYLkfjMQQ5cRsqrTmzEz7a+Njdlsq2fJjhoVcSPDi0cQBWYMuCdujX5RACHkvo1EcT9g==",
+ "version": "0.19.2",
+ "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.2.tgz",
+ "integrity": "sha512-BBaMIzTjwgddcfFdrH/PbBcRIOgqQZQkOLGdj/48s3ga+aZcnweytTNw3z0mtVrzCaWtZPInhrh958JGLOvGxA==",
"requires": {
"@codemirror/autocomplete": "^6.4.0",
"@codemirror/commands": "^6.1.2",
@@ -29473,7 +29473,7 @@
"@codemirror/state": "^6.1.4",
"@codemirror/view": "^6.7.1",
"@lezer/highlight": "^1.1.3",
- "@mongodb-js/compass-components": "^1.20.1",
+ "@mongodb-js/compass-components": "^1.20.2",
"@mongodb-js/mongodb-constants": "^0.8.7",
"polished": "^4.2.2",
"prettier": "^2.7.1"
@@ -29528,12 +29528,12 @@
}
},
"@mongodb-js/connection-form": {
- "version": "1.20.3",
- "resolved": "https://registry.npmjs.org/@mongodb-js/connection-form/-/connection-form-1.20.3.tgz",
- "integrity": "sha512-gsY6MFUEh8UIxCheNlFUyfsuM8Z6cU8vrUkkKJy9KmL09T9XQeGtyD8z865eZgiu/zHlXg5aWMR8JjL+J3+Blw==",
+ "version": "1.20.4",
+ "resolved": "https://registry.npmjs.org/@mongodb-js/connection-form/-/connection-form-1.20.4.tgz",
+ "integrity": "sha512-ZshFg3Glzr+DSCdyMYR2ieS2MDn73gt5eD+sKGaCYKHzQcu1G0Li0ocpsMdmnkNvZafyHruyg1IvgIyMHx6e+g==",
"requires": {
- "@mongodb-js/compass-components": "^1.20.1",
- "@mongodb-js/compass-editor": "^0.19.1",
+ "@mongodb-js/compass-components": "^1.20.2",
+ "@mongodb-js/compass-editor": "^0.19.2",
"@testing-library/react-hooks": "^7.0.2",
"lodash": "^4.17.21",
"mongodb-build-info": "^1.7.0",
diff --git a/package.json b/package.json
index 665247201..128218f10 100644
--- a/package.json
+++ b/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",
diff --git a/src/test/suite/views/webview-app/jest-setup.js b/src/test/suite/views/webview-app/jest-setup.js
index 754d9eec7..70ecd9e8a 100644
--- a/src/test/suite/views/webview-app/jest-setup.js
+++ b/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) => {},
};
diff --git a/src/test/suite/views/webview-app/overview-page.test.tsx b/src/test/suite/views/webview-app/overview-page.test.tsx
index 7771f6b44..f23e3a2d9 100644
--- a/src/test/suite/views/webview-app/overview-page.test.tsx
+++ b/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();
+ });
+
+ 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;
+ });
+ });
});
diff --git a/src/views/webview-app/app.tsx b/src/views/webview-app/app.tsx
index 234e7a15a..ecbc7af33 100644
--- a/src/views/webview-app/app.tsx
+++ b/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') ? (
diff --git a/src/views/webview-app/connection-form.tsx b/src/views/webview-app/connection-form.tsx
index 15e7c8d43..66b093ecf 100644
--- a/src/views/webview-app/connection-form.tsx
+++ b/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"
>
-
-
-
-
-
+
+
+
);
diff --git a/src/views/webview-app/index.tsx b/src/views/webview-app/index.tsx
index e1f4c28bc..9b23cf863 100644
--- a/src/views/webview-app/index.tsx
+++ b/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(, document.getElementById('root'));
diff --git a/src/views/webview-app/overview-page.tsx b/src/views/webview-app/overview-page.tsx
index eb998c1d8..93fa7e65b 100644
--- a/src/views/webview-app/overview-page.tsx
+++ b/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 (
{showResourcesPanel && (
diff --git a/src/views/webview-app/reset-css.ts b/src/views/webview-app/reset-css.ts
deleted file mode 100644
index 8106319bc..000000000
--- a/src/views/webview-app/reset-css.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { injectGlobal } from '@mongodb-js/compass-components';
-
-export function resetGlobalCSS() {
- injectGlobal(`
-/* Remove list styles (bullets/numbers) */
-ol,
-ul {
- list-style: none;
-}
-
-/* Preferred box-sizing value */
-*,
-*::after,
-*::before {
- box-sizing: border-box;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-smoothing: antialiased;
-}
-
-input,
-button,
-select,
-textarea {
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
- color: inherit;
- font: inherit;
- margin: 0;
-}
-
-html,
-body,
-fieldset,
-ul,
-ol,
-dd,
-dt {
- margin: 0;
- padding: 0;
- border: 0;
-}
-
-blockquote,
-q {
- quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
- content: '';
- content: none;
-}
-
-/* Remove spacing between cells in tables */
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-`);
-}