From bea1053ee1c7b2637e9d395555016b47810f8ad2 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Thu, 7 Dec 2023 00:51:56 -0500 Subject: [PATCH 1/7] add connection-form package, use connection form without feature flag for development --- package-lock.json | 691 ++++++++++++++++-- package.json | 3 +- .../views/webview-app/connect-helper.test.tsx | 16 +- src/views/webview-app/app.tsx | 2 +- src/views/webview-app/connect-helper.tsx | 8 +- src/views/webview-app/connection-form.tsx | 59 ++ src/views/webview-app/overview-page.tsx | 17 +- webpack.config.js | 8 + 8 files changed, 745 insertions(+), 59 deletions(-) create mode 100644 src/views/webview-app/connection-form.tsx diff --git a/package-lock.json b/package-lock.json index f17b8f073..16d019fb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "@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.2", "@mongodb-js/mongodb-constants": "^0.7.1", "@mongosh/browser-runtime-electron": "^2.0.2", "@mongosh/i18n": "^2.0.2", @@ -1583,6 +1584,95 @@ "node": ">=0.1.95" } }, + "node_modules/@codemirror/autocomplete": { + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.11.1.tgz", + "integrity": "sha512-L5UInv8Ffd6BPw0P3EF7JLYAMeEbclY7+6Q11REt8vhih8RuLreKtPy/xk8wPxs4EQgYqzI7cdgpiYwWlbS/ow==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/commands": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.2.tgz", + "integrity": "sha512-tjoi4MCWDNxgIpoLZ7+tezdS9OEB6pkiDKhfKx9ReJ/XBcs2G2RXIu+/FxXBlWsPTsz6C9q/r4gjzrsxpcnqCQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.2.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.1.0" + } + }, + "node_modules/@codemirror/lang-javascript": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz", + "integrity": "sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.6.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-json": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz", + "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/json": "^1.0.0" + } + }, + "node_modules/@codemirror/language": { + "version": "6.9.3", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.3.tgz", + "integrity": "sha512-qq48pYzoi6ldYWV/52+Z9Ou6QouVI+8YwvxFbUypI33NbjG2UeRHKENRyhwljTTiOqjQ33FjyZj6EREQ9apAOQ==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.1.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "node_modules/@codemirror/lint": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz", + "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/state": { + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.3.3.tgz", + "integrity": "sha512-0wufKcTw2dEwEaADajjHf6hBy1sh3M6V0e+q4JKIhLuiMSe5td5HOWpUdvKth1fT1M9VYOboajoBHpkCd7PG7A==" + }, + "node_modules/@codemirror/view": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.22.1.tgz", + "integrity": "sha512-38BRn1nPqZqiHbmWfI8zri23IbRVbmSpSmh1E/Ysvc+lIGGdBC17K8zlK7ZU6fhfy9x4De9Zyj5JQqScPq5DkA==", + "dependencies": { + "@codemirror/state": "^6.1.4", + "style-mod": "^4.1.0", + "w3c-keyname": "^2.2.4" + } + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -4502,10 +4592,49 @@ "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-3.4.7.tgz", "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==" + }, + "node_modules/@lezer/highlight": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", + "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/javascript": { + "version": "1.4.10", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.10.tgz", + "integrity": "sha512-XJu3fZjHVVjJcRS7kHdwBO50irXc4H8rQwgm6SmT3Y8IHWk7WzpaLsaR2vdr/jSk/J4pQhXc1WLul7jVdxC+0Q==", + "dependencies": { + "@lezer/highlight": "^1.1.3", + "@lezer/lr": "^1.3.0" + } + }, + "node_modules/@lezer/json": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.1.tgz", + "integrity": "sha512-nkVC27qiEZEjySbi6gQRuMwa2sDu2PtfjSgz0A4QF81QyRGm3kb2YRzLcOPcTEtmcwvrX/cej7mlhbwViA4WJw==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.3.14", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.14.tgz", + "integrity": "sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, "node_modules/@mongodb-js/compass-components": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.19.0.tgz", - "integrity": "sha512-gaPj76Zc+tXkeHb0zMe8DulstY0ahnYEBLpHiNv+FButow4CPJ2tdTG2H9usItG81K6rGXSJlp6/ceE0XriAXg==", + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.0.tgz", + "integrity": "sha512-zU2ER11lATjE0sDRzHzU5kGAiKmGar5ACKOXU+IaIdIjL0v8QMzy0gQYzR5/R8W7Kk6z270yCwUdNQWW74ihsA==", "dependencies": { "@dnd-kit/core": "^6.0.7", "@dnd-kit/sortable": "^7.0.2", @@ -4554,10 +4683,10 @@ "@react-aria/utils": "^3.13.1", "@react-aria/visually-hidden": "^3.3.1", "@react-stately/tooltip": "^3.0.5", - "bson": "^6.0.0", + "bson": "^6.2.0", "focus-trap-react": "^8.4.2", - "hadron-document": "^8.4.3", - "hadron-type-checker": "^7.1.0", + "hadron-document": "^8.4.4", + "hadron-type-checker": "^7.1.1", "is-electron-renderer": "^2.0.1", "lodash": "^4.17.21", "polished": "^4.2.2", @@ -4585,6 +4714,37 @@ "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-3.4.7.tgz", "integrity": "sha512-AsvPlbvF7CERiZbAQR8hy3lAJ2/rieXI3cO0jsOwV8ztDqYNotKAdLujyr/NviudrRUenYiXrLizIKVlSPUMuA==" }, + "node_modules/@mongodb-js/compass-editor": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.0.tgz", + "integrity": "sha512-ISKyMmswf1dldHqsj4FHWNYDXd/5XhBisa85ipTX0RxJ1YWFJpCbHzGc8/CxQuwhDy2Tnf5+Mf815xDTN6r8tA==", + "dependencies": { + "@codemirror/autocomplete": "^6.4.0", + "@codemirror/commands": "^6.1.2", + "@codemirror/lang-javascript": "^6.1.2", + "@codemirror/lang-json": "^6.0.1", + "@codemirror/language": "^6.3.2", + "@codemirror/lint": "^6.1.1", + "@codemirror/state": "^6.1.4", + "@codemirror/view": "^6.7.1", + "@lezer/highlight": "^1.1.3", + "@mongodb-js/compass-components": "^1.20.0", + "@mongodb-js/mongodb-constants": "^0.8.7", + "polished": "^4.2.2", + "prettier": "^2.7.1" + }, + "peerDependencies": { + "react": "^17.0.2" + } + }, + "node_modules/@mongodb-js/compass-editor/node_modules/@mongodb-js/mongodb-constants": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@mongodb-js/mongodb-constants/-/mongodb-constants-0.8.8.tgz", + "integrity": "sha512-Exdpz+U+iv2qFZ6i7UTaxFbzSjhu3OuSiBUK/sbInCwlOWSO9KOczzZBYkmqvJBCksv9z4gdSEOT/b5wvCDndQ==", + "dependencies": { + "semver": "^7.5.4" + } + }, "node_modules/@mongodb-js/compass-logging": { "version": "1.1.9", "resolved": "https://registry.npmjs.org/@mongodb-js/compass-logging/-/compass-logging-1.1.9.tgz", @@ -4631,6 +4791,56 @@ "node": ">= 12.20.55" } }, + "node_modules/@mongodb-js/connection-form": { + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@mongodb-js/connection-form/-/connection-form-1.20.2.tgz", + "integrity": "sha512-y7AmbJuM5t9uRMoKE6drrgfV9WmF/PH8p730qSPH8s00tOlb9AbwiTj05jUTzQ74QEGdF1RAYE2M0eYGrVcurg==", + "dependencies": { + "@mongodb-js/compass-components": "^1.20.0", + "@mongodb-js/compass-editor": "^0.19.0", + "@testing-library/react-hooks": "^7.0.2", + "lodash": "^4.17.21", + "mongodb-build-info": "^1.7.0", + "mongodb-connection-string-url": "^2.6.0", + "mongodb-query-parser": "^4.0.0" + }, + "peerDependencies": { + "@mongodb-js/compass-components": "^1.20.0", + "@mongodb-js/compass-editor": "^0.19.0", + "react": "^17.0.2" + } + }, + "node_modules/@mongodb-js/connection-form/node_modules/ejson-shell-parser": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ejson-shell-parser/-/ejson-shell-parser-2.0.0.tgz", + "integrity": "sha512-6JF9J7RCxHRikBi5u9qAAHA0LleY3DKamqH5vwMVjSnlNAQJGTxfgl3z16/G9bxH7xZnHOg4w0XSgnFzTQ2QCg==", + "dependencies": { + "acorn": "^8.1.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "bson": "^4.6.3 || ^5 || ^6" + } + }, + "node_modules/@mongodb-js/connection-form/node_modules/mongodb-query-parser": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mongodb-query-parser/-/mongodb-query-parser-4.0.0.tgz", + "integrity": "sha512-3HjuFfkUH5OQCi8/qkT/ljMfp8tMOY0Yx9sCoNGEkQ7Utz2eR/IxbrkGs+SnsjwPCITc49d6dAm+/pFeGf0c1Q==", + "dependencies": { + "debug": "^4.2.0", + "ejson-shell-parser": "^2.0.0", + "javascript-stringify": "^2.0.1", + "lodash": "^4.17.15" + }, + "engines": { + "node": ">= 16.17.0" + }, + "peerDependencies": { + "bson": "^5 || ^6" + } + }, "node_modules/@mongodb-js/devtools-connect": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@mongodb-js/devtools-connect/-/devtools-connect-2.4.2.tgz", @@ -5908,6 +6118,34 @@ "react-dom": "<18.0.0" } }, + "node_modules/@testing-library/react-hooks": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz", + "integrity": "sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@types/react": ">=16.9.0", + "@types/react-dom": ">=16.9.0", + "@types/react-test-renderer": ">=16.9.0", + "react-error-boundary": "^3.1.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0", + "react-test-renderer": ">=16.9.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-test-renderer": { + "optional": true + } + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -6253,7 +6491,6 @@ "version": "17.0.20", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz", "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==", - "dev": true, "dependencies": { "@types/react": "^17" } @@ -6266,6 +6503,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-test-renderer": { + "version": "18.0.7", + "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.0.7.tgz", + "integrity": "sha512-1+ANPOWc6rB3IkSnElhjv6VLlKg2dSv/OWClUyZimbLsQyBn8Js9Vtdsi3UICJ2rIQ3k2la06dkB+C92QfhKmg==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", @@ -8290,9 +8535,9 @@ } }, "node_modules/bson": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/bson/-/bson-6.1.0.tgz", - "integrity": "sha512-yiQ3KxvpVoRpx1oD1uPz4Jit9tAVTJgjdmjDKtUErkOoL9VNoF8Dd58qtAOL5E40exx2jvAT9sqdRSK/r+SHlA==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/bson/-/bson-6.2.0.tgz", + "integrity": "sha512-ID1cI+7bazPDyL9wYy9GaQ8gEEohWvcUl/Yf0dIdutJxnmInEEyCsb4awy/OiBfall7zBA179Pahi3vCdFze3Q==", "engines": { "node": ">=16.20.1" } @@ -9386,6 +9631,11 @@ "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", "dev": true }, + "node_modules/crelt": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", + "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==" + }, "node_modules/cross-env": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", @@ -13687,14 +13937,14 @@ } }, "node_modules/hadron-document": { - "version": "8.4.3", - "resolved": "https://registry.npmjs.org/hadron-document/-/hadron-document-8.4.3.tgz", - "integrity": "sha512-p2dg14A7LpbOushMLjmC1uWR4qG5g/5zjFLQNQ03M8Jhi/VS1zeiSTxNi3dE5LLKFwzlQyY2Atxloc8am9UbjA==", + "version": "8.4.4", + "resolved": "https://registry.npmjs.org/hadron-document/-/hadron-document-8.4.4.tgz", + "integrity": "sha512-5Ke77wtP3FO97CynYmoLIub2k/mxdWjoGZge1vo9EO1lnHVH1Bxap0uJ461vGA/emBY336on5B7Q7bwDmt6VEw==", "dependencies": { - "bson": "^6.0.0", + "bson": "^6.2.0", "debug": "^4.2.0", "eventemitter3": "^4.0.0", - "hadron-type-checker": "^7.1.0", + "hadron-type-checker": "^7.1.1", "lodash": "^4.17.21" } }, @@ -13710,11 +13960,11 @@ } }, "node_modules/hadron-type-checker": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/hadron-type-checker/-/hadron-type-checker-7.1.0.tgz", - "integrity": "sha512-6lxqhOEBz9SCo1nY4xpTsM29I46qVUrYgTIPkUUy5+IMsZbynRRPeA42nHCYOl6VjY3H/0viMEOdX038FfZbzw==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/hadron-type-checker/-/hadron-type-checker-7.1.1.tgz", + "integrity": "sha512-fkCf7ryFhWlag0GYG3FNuOuyO5/ty9Rnj39k+PApxkvXGhyZawAHxT711Hx2ICihX/TKxtYtXfeOhs6Xet/HGQ==", "dependencies": { - "bson": "^6.0.0", + "bson": "^6.2.0", "lodash": "^4.17.21" } }, @@ -17602,11 +17852,59 @@ } }, "node_modules/mongodb-build-info": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/mongodb-build-info/-/mongodb-build-info-1.6.2.tgz", - "integrity": "sha512-kSEu/dJNABTnrrrnyACTyPxsXYa8hfxuhhv1xMYhTi5c9Y0n76levzp/YMHVuFeQ4fE52HeEHBXksKQZfQ6wbw==", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/mongodb-build-info/-/mongodb-build-info-1.7.1.tgz", + "integrity": "sha512-he4lTotY5AkGSc4Js9Dtqvx4W7x5JSNa9xtvR08y1tUyhglHG1tV+NnuUTrysXA0hNHMMvOd/Hh4Ez9Po84p1g==", + "dependencies": { + "mongodb-connection-string-url": "^3.0.0" + } + }, + "node_modules/mongodb-build-info/node_modules/@types/whatwg-url": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-11.0.3.tgz", + "integrity": "sha512-z1ELvMijRL1QmU7QuzDkeYXSF2+dXI0ITKoQsIoVKcNBOiK5RMmWy+pYYxJTHFt8vkpZe7UsvRErQwcxZkjoUw==", + "dependencies": { + "@types/webidl-conversions": "*" + } + }, + "node_modules/mongodb-build-info/node_modules/mongodb-connection-string-url": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.0.tgz", + "integrity": "sha512-t1Vf+m1I5hC2M5RJx/7AtxgABy1cZmIPQRMXw+gEIPn/cZNF3Oiy+l0UIypUwVB5trcWHq3crg2g3uAR9aAwsQ==", + "dependencies": { + "@types/whatwg-url": "^11.0.2", + "whatwg-url": "^13.0.0" + } + }, + "node_modules/mongodb-build-info/node_modules/tr46": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz", + "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==", + "dependencies": { + "punycode": "^2.3.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/mongodb-build-info/node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "engines": { + "node": ">=12" + } + }, + "node_modules/mongodb-build-info/node_modules/whatwg-url": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-13.0.0.tgz", + "integrity": "sha512-9WWbymnqj57+XEuqADHrCJ2eSXzn8WXIW/YSGaZtb2WKAInQ6CHfaUUcTyyver0p8BDg5StLQq8h1vtZuwmOig==", "dependencies": { - "mongodb-connection-string-url": "^2.2.0" + "tr46": "^4.1.1", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=16" } }, "node_modules/mongodb-client-encryption": { @@ -20194,7 +20492,6 @@ "version": "2.8.8", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "dev": true, "bin": { "prettier": "bin-prettier.js" }, @@ -20554,6 +20851,21 @@ "react": "17.0.2" } }, + "node_modules/react-error-boundary": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "node_modules/react-hotkeys-hook": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz", @@ -23144,6 +23456,11 @@ "node": ">=8.9.0" } }, + "node_modules/style-mod": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz", + "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==" + }, "node_modules/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", @@ -24528,6 +24845,11 @@ "browser-process-hrtime": "^1.0.0" } }, + "node_modules/w3c-keyname": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" + }, "node_modules/w3c-xmlserializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz", @@ -26392,6 +26714,89 @@ "minimist": "^1.2.0" } }, + "@codemirror/autocomplete": { + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.11.1.tgz", + "integrity": "sha512-L5UInv8Ffd6BPw0P3EF7JLYAMeEbclY7+6Q11REt8vhih8RuLreKtPy/xk8wPxs4EQgYqzI7cdgpiYwWlbS/ow==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + } + }, + "@codemirror/commands": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.2.tgz", + "integrity": "sha512-tjoi4MCWDNxgIpoLZ7+tezdS9OEB6pkiDKhfKx9ReJ/XBcs2G2RXIu+/FxXBlWsPTsz6C9q/r4gjzrsxpcnqCQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.2.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.1.0" + } + }, + "@codemirror/lang-javascript": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz", + "integrity": "sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.6.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "@codemirror/lang-json": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz", + "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/json": "^1.0.0" + } + }, + "@codemirror/language": { + "version": "6.9.3", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.3.tgz", + "integrity": "sha512-qq48pYzoi6ldYWV/52+Z9Ou6QouVI+8YwvxFbUypI33NbjG2UeRHKENRyhwljTTiOqjQ33FjyZj6EREQ9apAOQ==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.1.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "@codemirror/lint": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz", + "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "@codemirror/state": { + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.3.3.tgz", + "integrity": "sha512-0wufKcTw2dEwEaADajjHf6hBy1sh3M6V0e+q4JKIhLuiMSe5td5HOWpUdvKth1fT1M9VYOboajoBHpkCd7PG7A==" + }, + "@codemirror/view": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.22.1.tgz", + "integrity": "sha512-38BRn1nPqZqiHbmWfI8zri23IbRVbmSpSmh1E/Ysvc+lIGGdBC17K8zlK7ZU6fhfy9x4De9Zyj5JQqScPq5DkA==", + "requires": { + "@codemirror/state": "^6.1.4", + "style-mod": "^4.1.0", + "w3c-keyname": "^2.2.4" + } + }, "@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -28954,10 +29359,49 @@ } } }, + "@lezer/common": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.1.tgz", + "integrity": "sha512-aAPB9YbvZHqAW+bIwiuuTDGB4DG0sYNRObGLxud8cW7osw1ZQxfDuTZ8KQiqfZ0QJGcR34CvpTMDXEyo/+Htgg==" + }, + "@lezer/highlight": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", + "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@lezer/javascript": { + "version": "1.4.10", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.10.tgz", + "integrity": "sha512-XJu3fZjHVVjJcRS7kHdwBO50irXc4H8rQwgm6SmT3Y8IHWk7WzpaLsaR2vdr/jSk/J4pQhXc1WLul7jVdxC+0Q==", + "requires": { + "@lezer/highlight": "^1.1.3", + "@lezer/lr": "^1.3.0" + } + }, + "@lezer/json": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.1.tgz", + "integrity": "sha512-nkVC27qiEZEjySbi6gQRuMwa2sDu2PtfjSgz0A4QF81QyRGm3kb2YRzLcOPcTEtmcwvrX/cej7mlhbwViA4WJw==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/lr": { + "version": "1.3.14", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.14.tgz", + "integrity": "sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, "@mongodb-js/compass-components": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.19.0.tgz", - "integrity": "sha512-gaPj76Zc+tXkeHb0zMe8DulstY0ahnYEBLpHiNv+FButow4CPJ2tdTG2H9usItG81K6rGXSJlp6/ceE0XriAXg==", + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.0.tgz", + "integrity": "sha512-zU2ER11lATjE0sDRzHzU5kGAiKmGar5ACKOXU+IaIdIjL0v8QMzy0gQYzR5/R8W7Kk6z270yCwUdNQWW74ihsA==", "requires": { "@dnd-kit/core": "^6.0.7", "@dnd-kit/sortable": "^7.0.2", @@ -29006,10 +29450,10 @@ "@react-aria/utils": "^3.13.1", "@react-aria/visually-hidden": "^3.3.1", "@react-stately/tooltip": "^3.0.5", - "bson": "^6.0.0", + "bson": "^6.2.0", "focus-trap-react": "^8.4.2", - "hadron-document": "^8.4.3", - "hadron-type-checker": "^7.1.0", + "hadron-document": "^8.4.4", + "hadron-type-checker": "^7.1.1", "is-electron-renderer": "^2.0.1", "lodash": "^4.17.21", "polished": "^4.2.2", @@ -29036,6 +29480,36 @@ } } }, + "@mongodb-js/compass-editor": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.0.tgz", + "integrity": "sha512-ISKyMmswf1dldHqsj4FHWNYDXd/5XhBisa85ipTX0RxJ1YWFJpCbHzGc8/CxQuwhDy2Tnf5+Mf815xDTN6r8tA==", + "requires": { + "@codemirror/autocomplete": "^6.4.0", + "@codemirror/commands": "^6.1.2", + "@codemirror/lang-javascript": "^6.1.2", + "@codemirror/lang-json": "^6.0.1", + "@codemirror/language": "^6.3.2", + "@codemirror/lint": "^6.1.1", + "@codemirror/state": "^6.1.4", + "@codemirror/view": "^6.7.1", + "@lezer/highlight": "^1.1.3", + "@mongodb-js/compass-components": "^1.20.0", + "@mongodb-js/mongodb-constants": "^0.8.7", + "polished": "^4.2.2", + "prettier": "^2.7.1" + }, + "dependencies": { + "@mongodb-js/mongodb-constants": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@mongodb-js/mongodb-constants/-/mongodb-constants-0.8.8.tgz", + "integrity": "sha512-Exdpz+U+iv2qFZ6i7UTaxFbzSjhu3OuSiBUK/sbInCwlOWSO9KOczzZBYkmqvJBCksv9z4gdSEOT/b5wvCDndQ==", + "requires": { + "semver": "^7.5.4" + } + } + } + }, "@mongodb-js/compass-logging": { "version": "1.1.9", "resolved": "https://registry.npmjs.org/@mongodb-js/compass-logging/-/compass-logging-1.1.9.tgz", @@ -29074,6 +29548,41 @@ } } }, + "@mongodb-js/connection-form": { + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@mongodb-js/connection-form/-/connection-form-1.20.2.tgz", + "integrity": "sha512-y7AmbJuM5t9uRMoKE6drrgfV9WmF/PH8p730qSPH8s00tOlb9AbwiTj05jUTzQ74QEGdF1RAYE2M0eYGrVcurg==", + "requires": { + "@mongodb-js/compass-components": "^1.20.0", + "@mongodb-js/compass-editor": "^0.19.0", + "@testing-library/react-hooks": "^7.0.2", + "lodash": "^4.17.21", + "mongodb-build-info": "^1.7.0", + "mongodb-connection-string-url": "^2.6.0", + "mongodb-query-parser": "^4.0.0" + }, + "dependencies": { + "ejson-shell-parser": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ejson-shell-parser/-/ejson-shell-parser-2.0.0.tgz", + "integrity": "sha512-6JF9J7RCxHRikBi5u9qAAHA0LleY3DKamqH5vwMVjSnlNAQJGTxfgl3z16/G9bxH7xZnHOg4w0XSgnFzTQ2QCg==", + "requires": { + "acorn": "^8.1.0" + } + }, + "mongodb-query-parser": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mongodb-query-parser/-/mongodb-query-parser-4.0.0.tgz", + "integrity": "sha512-3HjuFfkUH5OQCi8/qkT/ljMfp8tMOY0Yx9sCoNGEkQ7Utz2eR/IxbrkGs+SnsjwPCITc49d6dAm+/pFeGf0c1Q==", + "requires": { + "debug": "^4.2.0", + "ejson-shell-parser": "^2.0.0", + "javascript-stringify": "^2.0.1", + "lodash": "^4.17.15" + } + } + } + }, "@mongodb-js/devtools-connect": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@mongodb-js/devtools-connect/-/devtools-connect-2.4.2.tgz", @@ -30080,6 +30589,18 @@ "@types/react-dom": "<18.0.0" } }, + "@testing-library/react-hooks": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz", + "integrity": "sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==", + "requires": { + "@babel/runtime": "^7.12.5", + "@types/react": ">=16.9.0", + "@types/react-dom": ">=16.9.0", + "@types/react-test-renderer": ">=16.9.0", + "react-error-boundary": "^3.1.0" + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -30422,7 +30943,6 @@ "version": "17.0.20", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz", "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==", - "dev": true, "requires": { "@types/react": "^17" } @@ -30435,6 +30955,14 @@ "@types/react": "*" } }, + "@types/react-test-renderer": { + "version": "18.0.7", + "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.0.7.tgz", + "integrity": "sha512-1+ANPOWc6rB3IkSnElhjv6VLlKg2dSv/OWClUyZimbLsQyBn8Js9Vtdsi3UICJ2rIQ3k2la06dkB+C92QfhKmg==", + "requires": { + "@types/react": "*" + } + }, "@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", @@ -32043,9 +32571,9 @@ } }, "bson": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/bson/-/bson-6.1.0.tgz", - "integrity": "sha512-yiQ3KxvpVoRpx1oD1uPz4Jit9tAVTJgjdmjDKtUErkOoL9VNoF8Dd58qtAOL5E40exx2jvAT9sqdRSK/r+SHlA==" + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/bson/-/bson-6.2.0.tgz", + "integrity": "sha512-ID1cI+7bazPDyL9wYy9GaQ8gEEohWvcUl/Yf0dIdutJxnmInEEyCsb4awy/OiBfall7zBA179Pahi3vCdFze3Q==" }, "bson-transpilers": { "version": "2.0.4", @@ -32897,6 +33425,11 @@ "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", "dev": true }, + "crelt": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", + "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==" + }, "cross-env": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", @@ -36218,14 +36751,14 @@ } }, "hadron-document": { - "version": "8.4.3", - "resolved": "https://registry.npmjs.org/hadron-document/-/hadron-document-8.4.3.tgz", - "integrity": "sha512-p2dg14A7LpbOushMLjmC1uWR4qG5g/5zjFLQNQ03M8Jhi/VS1zeiSTxNi3dE5LLKFwzlQyY2Atxloc8am9UbjA==", + "version": "8.4.4", + "resolved": "https://registry.npmjs.org/hadron-document/-/hadron-document-8.4.4.tgz", + "integrity": "sha512-5Ke77wtP3FO97CynYmoLIub2k/mxdWjoGZge1vo9EO1lnHVH1Bxap0uJ461vGA/emBY336on5B7Q7bwDmt6VEw==", "requires": { - "bson": "^6.0.0", + "bson": "^6.2.0", "debug": "^4.2.0", "eventemitter3": "^4.0.0", - "hadron-type-checker": "^7.1.0", + "hadron-type-checker": "^7.1.1", "lodash": "^4.17.21" } }, @@ -36241,11 +36774,11 @@ } }, "hadron-type-checker": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/hadron-type-checker/-/hadron-type-checker-7.1.0.tgz", - "integrity": "sha512-6lxqhOEBz9SCo1nY4xpTsM29I46qVUrYgTIPkUUy5+IMsZbynRRPeA42nHCYOl6VjY3H/0viMEOdX038FfZbzw==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/hadron-type-checker/-/hadron-type-checker-7.1.1.tgz", + "integrity": "sha512-fkCf7ryFhWlag0GYG3FNuOuyO5/ty9Rnj39k+PApxkvXGhyZawAHxT711Hx2ICihX/TKxtYtXfeOhs6Xet/HGQ==", "requires": { - "bson": "^6.0.0", + "bson": "^6.2.0", "lodash": "^4.17.21" } }, @@ -39243,11 +39776,52 @@ } }, "mongodb-build-info": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/mongodb-build-info/-/mongodb-build-info-1.6.2.tgz", - "integrity": "sha512-kSEu/dJNABTnrrrnyACTyPxsXYa8hfxuhhv1xMYhTi5c9Y0n76levzp/YMHVuFeQ4fE52HeEHBXksKQZfQ6wbw==", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/mongodb-build-info/-/mongodb-build-info-1.7.1.tgz", + "integrity": "sha512-he4lTotY5AkGSc4Js9Dtqvx4W7x5JSNa9xtvR08y1tUyhglHG1tV+NnuUTrysXA0hNHMMvOd/Hh4Ez9Po84p1g==", "requires": { - "mongodb-connection-string-url": "^2.2.0" + "mongodb-connection-string-url": "^3.0.0" + }, + "dependencies": { + "@types/whatwg-url": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-11.0.3.tgz", + "integrity": "sha512-z1ELvMijRL1QmU7QuzDkeYXSF2+dXI0ITKoQsIoVKcNBOiK5RMmWy+pYYxJTHFt8vkpZe7UsvRErQwcxZkjoUw==", + "requires": { + "@types/webidl-conversions": "*" + } + }, + "mongodb-connection-string-url": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.0.tgz", + "integrity": "sha512-t1Vf+m1I5hC2M5RJx/7AtxgABy1cZmIPQRMXw+gEIPn/cZNF3Oiy+l0UIypUwVB5trcWHq3crg2g3uAR9aAwsQ==", + "requires": { + "@types/whatwg-url": "^11.0.2", + "whatwg-url": "^13.0.0" + } + }, + "tr46": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz", + "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==", + "requires": { + "punycode": "^2.3.0" + } + }, + "webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==" + }, + "whatwg-url": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-13.0.0.tgz", + "integrity": "sha512-9WWbymnqj57+XEuqADHrCJ2eSXzn8WXIW/YSGaZtb2WKAInQ6CHfaUUcTyyver0p8BDg5StLQq8h1vtZuwmOig==", + "requires": { + "tr46": "^4.1.1", + "webidl-conversions": "^7.0.0" + } + } } }, "mongodb-client-encryption": { @@ -41161,8 +41735,7 @@ "prettier": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "dev": true + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==" }, "pretty-format": { "version": "26.6.2", @@ -41447,6 +42020,14 @@ "scheduler": "^0.20.2" } }, + "react-error-boundary": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "requires": { + "@babel/runtime": "^7.12.5" + } + }, "react-hotkeys-hook": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz", @@ -43466,6 +44047,11 @@ } } }, + "style-mod": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz", + "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==" + }, "stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", @@ -44535,6 +45121,11 @@ "browser-process-hrtime": "^1.0.0" } }, + "w3c-keyname": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" + }, "w3c-xmlserializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz", diff --git a/package.json b/package.json index 476696f8e..3d0a644f0 100644 --- a/package.json +++ b/package.json @@ -979,7 +979,8 @@ "@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.2", "@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/connect-helper.test.tsx b/src/test/suite/views/webview-app/connect-helper.test.tsx index 43552949a..ad106301c 100644 --- a/src/test/suite/views/webview-app/connect-helper.test.tsx +++ b/src/test/suite/views/webview-app/connect-helper.test.tsx @@ -8,7 +8,13 @@ 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(); + render( + { + /* todo */ + }} + /> + ); expect(screen.getByLabelText('Connect with connection string')).to.not.be .null; expect(screen.getByLabelText('Open connection form')).to.not.be.null; @@ -16,7 +22,13 @@ describe('ConnectHelper test suite', function () { test('when connecting with string, it should call vscode to open connection string input', function () { const postMessageStub = Sinon.stub(vscode, 'postMessage'); - render(); + render( + { + /* todo */ + }} + /> + ); screen.getByLabelText('Connect with connection string').click(); expect(postMessageStub).to.have.been.calledWithExactly({ command: MESSAGE_TYPES.OPEN_CONNECTION_STRING_INPUT, diff --git a/src/views/webview-app/app.tsx b/src/views/webview-app/app.tsx index ecbc7af33..234e7a15a 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 getFeatureFlag('useNewConnectionForm') ? ( + return true || getFeatureFlag('useNewConnectionForm') ? ( diff --git a/src/views/webview-app/connect-helper.tsx b/src/views/webview-app/connect-helper.tsx index a5f997ca2..7cf80e75b 100644 --- a/src/views/webview-app/connect-helper.tsx +++ b/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 (
@@ -89,9 +91,7 @@ const ConnectHelper: React.FC = () => { diff --git a/src/views/webview-app/connection-form.tsx b/src/views/webview-app/connection-form.tsx new file mode 100644 index 000000000..040030a66 --- /dev/null +++ b/src/views/webview-app/connection-form.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import CompassConnectionForm from '@mongodb-js/connection-form'; +import { Modal, ModalBody, css, spacing } from '@mongodb-js/compass-components'; +import { v4 as uuidv4 } from 'uuid'; + +const formContainerStyles = css({ + padding: spacing[1], +}); + +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 ( + <> + onClose()} + open={open} + data-testid="connection-form-modal" + size="large" + > + +
+ +
+ + + + ); +}; + +export { ConnectionForm }; diff --git a/src/views/webview-app/overview-page.tsx b/src/views/webview-app/overview-page.tsx index 8ebe9cb56..eb998c1d8 100644 --- a/src/views/webview-app/overview-page.tsx +++ b/src/views/webview-app/overview-page.tsx @@ -5,6 +5,7 @@ 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 +22,7 @@ const pageStyles = css({ const OverviewPage: React.FC = () => { const [showResourcesPanel, setShowResourcesPanel] = useState(false); + const [showConnectionForm, setShowConnectionForm] = useState(false); const handleResourcesPanelClose = useCallback( () => setShowResourcesPanel(false), [] @@ -34,10 +36,23 @@ const OverviewPage: React.FC = () => { {showResourcesPanel && ( )} + {showConnectionForm && ( + { + // 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} + /> + )} - + setShowConnectionForm(true)} + />
); diff --git a/webpack.config.js b/webpack.config.js index 23bfb5c9c..48284a961 100644 --- a/webpack.config.js +++ b/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: { From 708520cfd972b53f0c320cb548a64d80fb56b9e1 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Thu, 7 Dec 2023 11:18:32 -0500 Subject: [PATCH 2/7] chore: update connection-form versions, add reset-css --- package-lock.json | 75 +++++++------------ package.json | 3 +- src/views/webview-app/connection-form.tsx | 8 ++ src/views/webview-app/index.tsx | 4 + .../components/mongodb-logo/mongodb-logo.tsx | 2 +- src/views/webview-app/reset-css.ts | 69 +++++++++++++++++ 6 files changed, 110 insertions(+), 51 deletions(-) create mode 100644 src/views/webview-app/reset-css.ts diff --git a/package-lock.json b/package-lock.json index 16d019fb3..25a906d57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,9 +16,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.20.0", - "@mongodb-js/connection-form": "^1.20.2", + "@mongodb-js/connection-form": "^1.20.3", "@mongodb-js/mongodb-constants": "^0.7.1", "@mongosh/browser-runtime-electron": "^2.0.2", "@mongosh/i18n": "^2.0.2", @@ -3481,16 +3480,6 @@ "react": "^17.0.0" } }, - "node_modules/@leafygreen-ui/logo": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/@leafygreen-ui/logo/-/logo-8.0.4.tgz", - "integrity": "sha512-kztKqlFvHXXw8ZhuWcvGvt/jSHmBAXpamiNAyl9Fe58QrL8ewTOnnJU1ZH4AtFbKjtSaaPfQVAf4l2TUtNC5HA==", - "dependencies": { - "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/lib": "^10.4.0", - "@leafygreen-ui/palette": "^4.0.3" - } - }, "node_modules/@leafygreen-ui/marketing-modal": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@leafygreen-ui/marketing-modal/-/marketing-modal-3.0.10.tgz", @@ -4632,9 +4621,9 @@ } }, "node_modules/@mongodb-js/compass-components": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.0.tgz", - "integrity": "sha512-zU2ER11lATjE0sDRzHzU5kGAiKmGar5ACKOXU+IaIdIjL0v8QMzy0gQYzR5/R8W7Kk6z270yCwUdNQWW74ihsA==", + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.1.tgz", + "integrity": "sha512-QEe+mz9zZKeMbGGGInmKc8fokImFnTf2jldTf2IHd4v5ezrCZJRV2kiyF43cNGtaPLOAbK7vLGNMXfJofODfug==", "dependencies": { "@dnd-kit/core": "^6.0.7", "@dnd-kit/sortable": "^7.0.2", @@ -4715,9 +4704,9 @@ "integrity": "sha512-AsvPlbvF7CERiZbAQR8hy3lAJ2/rieXI3cO0jsOwV8ztDqYNotKAdLujyr/NviudrRUenYiXrLizIKVlSPUMuA==" }, "node_modules/@mongodb-js/compass-editor": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.0.tgz", - "integrity": "sha512-ISKyMmswf1dldHqsj4FHWNYDXd/5XhBisa85ipTX0RxJ1YWFJpCbHzGc8/CxQuwhDy2Tnf5+Mf815xDTN6r8tA==", + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.1.tgz", + "integrity": "sha512-mtIExRSRGafY0J14dnxYLkfjMQQ5cRsqrTmzEz7a+Njdlsq2fJjhoVcSPDi0cQBWYMuCdujX5RACHkvo1EcT9g==", "dependencies": { "@codemirror/autocomplete": "^6.4.0", "@codemirror/commands": "^6.1.2", @@ -4728,7 +4717,7 @@ "@codemirror/state": "^6.1.4", "@codemirror/view": "^6.7.1", "@lezer/highlight": "^1.1.3", - "@mongodb-js/compass-components": "^1.20.0", + "@mongodb-js/compass-components": "^1.20.1", "@mongodb-js/mongodb-constants": "^0.8.7", "polished": "^4.2.2", "prettier": "^2.7.1" @@ -4792,12 +4781,12 @@ } }, "node_modules/@mongodb-js/connection-form": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/@mongodb-js/connection-form/-/connection-form-1.20.2.tgz", - "integrity": "sha512-y7AmbJuM5t9uRMoKE6drrgfV9WmF/PH8p730qSPH8s00tOlb9AbwiTj05jUTzQ74QEGdF1RAYE2M0eYGrVcurg==", + "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==", "dependencies": { - "@mongodb-js/compass-components": "^1.20.0", - "@mongodb-js/compass-editor": "^0.19.0", + "@mongodb-js/compass-components": "^1.20.1", + "@mongodb-js/compass-editor": "^0.19.1", "@testing-library/react-hooks": "^7.0.2", "lodash": "^4.17.21", "mongodb-build-info": "^1.7.0", @@ -4805,8 +4794,8 @@ "mongodb-query-parser": "^4.0.0" }, "peerDependencies": { - "@mongodb-js/compass-components": "^1.20.0", - "@mongodb-js/compass-editor": "^0.19.0", + "@mongodb-js/compass-components": "^1.20.1", + "@mongodb-js/compass-editor": "^0.19.1", "react": "^17.0.2" } }, @@ -28349,16 +28338,6 @@ "prop-types": "^15.7.2" } }, - "@leafygreen-ui/logo": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/@leafygreen-ui/logo/-/logo-8.0.4.tgz", - "integrity": "sha512-kztKqlFvHXXw8ZhuWcvGvt/jSHmBAXpamiNAyl9Fe58QrL8ewTOnnJU1ZH4AtFbKjtSaaPfQVAf4l2TUtNC5HA==", - "requires": { - "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/lib": "^10.4.0", - "@leafygreen-ui/palette": "^4.0.3" - } - }, "@leafygreen-ui/marketing-modal": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@leafygreen-ui/marketing-modal/-/marketing-modal-3.0.10.tgz", @@ -29399,9 +29378,9 @@ } }, "@mongodb-js/compass-components": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.0.tgz", - "integrity": "sha512-zU2ER11lATjE0sDRzHzU5kGAiKmGar5ACKOXU+IaIdIjL0v8QMzy0gQYzR5/R8W7Kk6z270yCwUdNQWW74ihsA==", + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/@mongodb-js/compass-components/-/compass-components-1.20.1.tgz", + "integrity": "sha512-QEe+mz9zZKeMbGGGInmKc8fokImFnTf2jldTf2IHd4v5ezrCZJRV2kiyF43cNGtaPLOAbK7vLGNMXfJofODfug==", "requires": { "@dnd-kit/core": "^6.0.7", "@dnd-kit/sortable": "^7.0.2", @@ -29481,9 +29460,9 @@ } }, "@mongodb-js/compass-editor": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.0.tgz", - "integrity": "sha512-ISKyMmswf1dldHqsj4FHWNYDXd/5XhBisa85ipTX0RxJ1YWFJpCbHzGc8/CxQuwhDy2Tnf5+Mf815xDTN6r8tA==", + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/@mongodb-js/compass-editor/-/compass-editor-0.19.1.tgz", + "integrity": "sha512-mtIExRSRGafY0J14dnxYLkfjMQQ5cRsqrTmzEz7a+Njdlsq2fJjhoVcSPDi0cQBWYMuCdujX5RACHkvo1EcT9g==", "requires": { "@codemirror/autocomplete": "^6.4.0", "@codemirror/commands": "^6.1.2", @@ -29494,7 +29473,7 @@ "@codemirror/state": "^6.1.4", "@codemirror/view": "^6.7.1", "@lezer/highlight": "^1.1.3", - "@mongodb-js/compass-components": "^1.20.0", + "@mongodb-js/compass-components": "^1.20.1", "@mongodb-js/mongodb-constants": "^0.8.7", "polished": "^4.2.2", "prettier": "^2.7.1" @@ -29549,12 +29528,12 @@ } }, "@mongodb-js/connection-form": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/@mongodb-js/connection-form/-/connection-form-1.20.2.tgz", - "integrity": "sha512-y7AmbJuM5t9uRMoKE6drrgfV9WmF/PH8p730qSPH8s00tOlb9AbwiTj05jUTzQ74QEGdF1RAYE2M0eYGrVcurg==", + "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==", "requires": { - "@mongodb-js/compass-components": "^1.20.0", - "@mongodb-js/compass-editor": "^0.19.0", + "@mongodb-js/compass-components": "^1.20.1", + "@mongodb-js/compass-editor": "^0.19.1", "@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 3d0a644f0..665247201 100644 --- a/package.json +++ b/package.json @@ -978,9 +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.20.0", - "@mongodb-js/connection-form": "^1.20.2", + "@mongodb-js/connection-form": "^1.20.3", "@mongodb-js/mongodb-constants": "^0.7.1", "@mongosh/browser-runtime-electron": "^2.0.2", "@mongosh/i18n": "^2.0.2", diff --git a/src/views/webview-app/connection-form.tsx b/src/views/webview-app/connection-form.tsx index 040030a66..15e7c8d43 100644 --- a/src/views/webview-app/connection-form.tsx +++ b/src/views/webview-app/connection-form.tsx @@ -3,6 +3,11 @@ import CompassConnectionForm from '@mongodb-js/connection-form'; import { Modal, ModalBody, 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[1], }); @@ -26,6 +31,9 @@ const ConnectionForm: React.FunctionComponent<{ return ( <> onClose()} open={open} data-testid="connection-form-modal" diff --git a/src/views/webview-app/index.tsx b/src/views/webview-app/index.tsx index 9b23cf863..e1f4c28bc 100644 --- a/src/views/webview-app/index.tsx +++ b/src/views/webview-app/index.tsx @@ -2,5 +2,9 @@ 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/legacy/components/mongodb-logo/mongodb-logo.tsx b/src/views/webview-app/legacy/components/mongodb-logo/mongodb-logo.tsx index 708a008e0..273331db2 100644 --- a/src/views/webview-app/legacy/components/mongodb-logo/mongodb-logo.tsx +++ b/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'; diff --git a/src/views/webview-app/reset-css.ts b/src/views/webview-app/reset-css.ts new file mode 100644 index 000000000..8106319bc --- /dev/null +++ b/src/views/webview-app/reset-css.ts @@ -0,0 +1,69 @@ +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; +} +`); +} From 1023dce247e0f87df336c4905e8aa52c09d60e36 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Thu, 7 Dec 2023 15:24:06 -0500 Subject: [PATCH 3/7] chore: bump connection-form for global css reset --- package-lock.json | 66 +++++++++--------- package.json | 2 +- .../suite/views/webview-app/jest-setup.js | 5 ++ .../views/webview-app/overview-page.test.tsx | 19 +++++ src/views/webview-app/app.tsx | 2 +- src/views/webview-app/connection-form.tsx | 45 ++++++------ src/views/webview-app/index.tsx | 4 -- src/views/webview-app/overview-page.tsx | 17 ++++- src/views/webview-app/reset-css.ts | 69 ------------------- 9 files changed, 97 insertions(+), 132 deletions(-) delete mode 100644 src/views/webview-app/reset-css.ts 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; -} -`); -} From 239a1233c9093e84fcb19d1f2ac39f5b7fed03b2 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Thu, 7 Dec 2023 15:30:40 -0500 Subject: [PATCH 4/7] fixup: update comment --- src/test/suite/views/webview-app/connect-helper.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/suite/views/webview-app/connect-helper.test.tsx b/src/test/suite/views/webview-app/connect-helper.test.tsx index ad106301c..3b7ce1259 100644 --- a/src/test/suite/views/webview-app/connect-helper.test.tsx +++ b/src/test/suite/views/webview-app/connect-helper.test.tsx @@ -11,7 +11,7 @@ describe('ConnectHelper test suite', function () { render( { - /* todo */ + /* noop */ }} /> ); @@ -25,7 +25,7 @@ describe('ConnectHelper test suite', function () { render( { - /* todo */ + /* noop */ }} /> ); From 56c01ce528cd829c625894823ce3463284c01d70 Mon Sep 17 00:00:00 2001 From: Rhys Date: Thu, 7 Dec 2023 21:03:43 -0500 Subject: [PATCH 5/7] fixup: remove extra container Co-authored-by: Himanshu Singh --- src/views/webview-app/connection-form.tsx | 58 +++++++++++------------ 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/src/views/webview-app/connection-form.tsx b/src/views/webview-app/connection-form.tsx index 66b093ecf..6e8766470 100644 --- a/src/views/webview-app/connection-form.tsx +++ b/src/views/webview-app/connection-form.tsx @@ -32,36 +32,34 @@ const ConnectionForm: React.FunctionComponent<{ open: boolean; }> = ({ onConnectClicked, onClose, open }) => { return ( - <> - onClose()} - open={open} - data-testid="connection-form-modal" - size="large" - > -
- -
- - + onClose()} + open={open} + data-testid="connection-form-modal" + size="large" + > +
+ +
+ ); }; From e274e11a7f2273cd283be86eef0aa5bffd08aff8 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Thu, 7 Dec 2023 21:08:25 -0500 Subject: [PATCH 6/7] fixup: remove extra test setup, remove old comment --- .../views/webview-app/overview-page.test.tsx | 20 ++++++------------- webpack.config.js | 7 ------- 2 files changed, 6 insertions(+), 21 deletions(-) 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 f23e3a2d9..4e72538a4 100644 --- a/src/test/suite/views/webview-app/overview-page.test.tsx +++ b/src/test/suite/views/webview-app/overview-page.test.tsx @@ -1,10 +1,8 @@ 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); @@ -30,19 +28,13 @@ describe('OverviewPage test suite', function () { 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 () { + render(); - test('it renders the new connection form when opened', function () { - const connectionFormTestId = 'connection-form-modal'; - expect(screen.queryByTestId(connectionFormTestId)).to.not.exist; + const connectionFormTestId = 'connection-form-modal'; + expect(screen.queryByTestId(connectionFormTestId)).to.not.exist; - screen.getByText('Open form').click(); - expect(screen.getByTestId(connectionFormTestId)).to.exist; - }); + screen.getByText('Open form').click(); + expect(screen.getByTestId(connectionFormTestId)).to.exist; }); }); diff --git a/webpack.config.js b/webpack.config.js index 48284a961..49793d306 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -157,13 +157,6 @@ 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, }, }, From ff5d2b2a22793654a794561c58ad612c159c6de7 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Fri, 8 Dec 2023 02:55:48 -0500 Subject: [PATCH 7/7] increase max bundle size test for now --- scripts/check-vsix-size.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/check-vsix-size.ts b/scripts/check-vsix-size.ts index 02bd717e6..0492e2161 100644 --- a/scripts/check-vsix-size.ts +++ b/scripts/check-vsix-size.ts @@ -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(