@mongodb-js/connection-form 0.2.0 → 0.5.0

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.js

@@ -5,18 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const compass_components_1 = require("@mongodb-js/compass-components");
+const tls_ssl_tab_1 = require("./tls-ssl-tab");
 const form_field_container_1 = __importDefault(require("../../form-field-container"));
 const caFieldsContainer = (0, compass_components_1.css)({
     width: '80%',
 });
-function TLSCertificateAuthority({ connectionStringUrl, disabled, updateCAFile, }) {
-    const caFile = connectionStringUrl
-        .typedSearchParams()
-        .get('tlsCAFile');
+function TLSCertificateAuthority({ tlsCAFile, useSystemCA, disabled, displayDatabaseConnectionUserHints = true, handleTlsOptionChanged, }) {
     return (react_1.default.createElement(form_field_container_1.default, { className: caFieldsContainer },
-        react_1.default.createElement(compass_components_1.FileInput, { description: 'Learn More', disabled: disabled, id: "tlsCAFile", dataTestId: "tlsCAFile-input", label: "Certificate Authority (.pem)", link: 'https://docs.mongodb.com/manual/reference/connection-string/#mongodb-urioption-urioption.tlsCAFile', onChange: (files) => {
-                updateCAFile(files && files.length > 0 ? files[0] : null);
-            }, showFileOnNewLine: true, values: caFile ? [caFile] : undefined, optional: true })));
+        react_1.default.createElement(compass_components_1.FileInput, { description: displayDatabaseConnectionUserHints ? 'Learn More' : undefined, disabled: disabled || useSystemCA, id: "tlsCAFile", dataTestId: "tlsCAFile-input", label: "Certificate Authority (.pem)", link: displayDatabaseConnectionUserHints
+                ? 'https://docs.mongodb.com/manual/reference/connection-string/#mongodb-urioption-urioption.tlsCAFile'
+                : undefined, onChange: (files) => {
+                var _a;
+                handleTlsOptionChanged('tlsCAFile', (_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
+            }, showFileOnNewLine: true, values: tlsCAFile ? [tlsCAFile] : undefined, optional: true }),
+        react_1.default.createElement(compass_components_1.Checkbox, { onChange: (event) => {
+                handleTlsOptionChanged('useSystemCA', event.target.checked ? 'true' : null);
+            }, "data-testid": "useSystemCA-input", id: "useSystemCA-input", label: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(compass_components_1.Label, { htmlFor: "useSystemCA-input" }, "Use System Certificate Authority"),
+                react_1.default.createElement(compass_components_1.Description, { className: (0, compass_components_1.cx)(tls_ssl_tab_1.checkboxDescriptionStyles, {
+                        [tls_ssl_tab_1.disabledCheckboxDescriptionStyles]: disabled,
+                    }) }, "Use the operating system\u2019s Certificate Authority store.")), disabled: disabled, checked: useSystemCA })));
 }
 exports.default = TLSCertificateAuthority;
 //# sourceMappingURL=tls-certificate-authority.js.map

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.js.map

@@ -1 +1 @@
-{"version":3,"file":"tls-certificate-authority.js","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,uEAAgE;AAIhE,sFAA4D;AAE5D,MAAM,iBAAiB,GAAG,IAAA,wBAAG,EAAC;IAC5B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,SAAS,uBAAuB,CAAC,EAC/B,mBAAmB,EACnB,QAAQ,EACR,YAAY,GAKb;IACC,MAAM,MAAM,GAAG,mBAAmB;SAC/B,iBAAiB,EAAsB;SACvC,GAAG,CAAC,WAAW,CAAC,CAAC;IAEpB,OAAO,CACL,8BAAC,8BAAkB,IAAC,SAAS,EAAE,iBAAiB;QAC9C,8BAAC,8BAAS,IACR,WAAW,EAAE,YAAY,EACzB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAC,WAAW,EACd,UAAU,EAAC,iBAAiB,EAC5B,KAAK,EAAC,8BAA8B,EACpC,IAAI,EACF,oGAAoG,EAEtG,QAAQ,EAAE,CAAC,KAAsB,EAAE,EAAE;gBACnC,YAAY,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YAC5D,CAAC,EACD,iBAAiB,QACjB,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,EACrC,QAAQ,SACR,CACiB,CACtB,CAAC;AACJ,CAAC;AAED,kBAAe,uBAAuB,CAAC"}
+{"version":3,"file":"tls-certificate-authority.js","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,uEAOwC;AACxC,+CAGuB;AAEvB,sFAA4D;AAE5D,MAAM,iBAAiB,GAAG,IAAA,wBAAG,EAAC;IAC5B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,SAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,QAAQ,EACR,kCAAkC,GAAG,IAAI,EACzC,sBAAsB,GAUvB;IACC,OAAO,CACL,8BAAC,8BAAkB,IAAC,SAAS,EAAE,iBAAiB;QAC9C,8BAAC,8BAAS,IACR,WAAW,EACT,kCAAkC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAE/D,QAAQ,EAAE,QAAQ,IAAI,WAAW,EACjC,EAAE,EAAC,WAAW,EACd,UAAU,EAAC,iBAAiB,EAC5B,KAAK,EAAC,8BAA8B,EACpC,IAAI,EACF,kCAAkC;gBAChC,CAAC,CAAC,oGAAoG;gBACtG,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,CAAC,KAAsB,EAAE,EAAE;;gBACnC,sBAAsB,CAAC,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,CAAC;YAC1D,CAAC,EACD,iBAAiB,QACjB,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3C,QAAQ,SACR;QACF,8BAAC,6BAAQ,IACP,QAAQ,EAAE,CAAC,KAA0C,EAAE,EAAE;gBACvD,sBAAsB,CACpB,aAAa,EACb,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CACrC,CAAC;YACJ,CAAC,iBACW,mBAAmB,EAC/B,EAAE,EAAC,mBAAmB,EACtB,KAAK,EACH;gBACE,8BAAC,0BAAK,IAAC,OAAO,EAAC,mBAAmB,uCAE1B;gBACR,8BAAC,gCAAW,IACV,SAAS,EAAE,IAAA,uBAAE,EAAC,uCAAyB,EAAE;wBACvC,CAAC,+CAAiC,CAAC,EAAE,QAAQ;qBAC9C,CAAC,mEAGU,CACb,EAEL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,GACpB,CACiB,CACtB,CAAC;AACJ,CAAC;AAED,kBAAe,uBAAuB,CAAC"}

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
-import type ConnectionStringUrl from 'mongodb-connection-string-url';
-declare function TLSClientCertificate({ connectionStringUrl, disabled, updateTLSClientCertificate, updateTLSClientCertificatePassword, }: {
-    connectionStringUrl: ConnectionStringUrl;
+declare function TLSClientCertificate({ tlsCertificateKeyFile, tlsCertificateKeyFilePassword, disabled, displayDatabaseConnectionUserHints, optional, updateTLSClientCertificate, updateTLSClientCertificatePassword, }: {
+    tlsCertificateKeyFile?: string | null;
+    tlsCertificateKeyFilePassword?: string | null;
     disabled: boolean;
+    displayDatabaseConnectionUserHints?: boolean;
+    optional?: boolean;
     updateTLSClientCertificate: (newClientCertificateKeyFile: string | null) => void;
     updateTLSClientCertificatePassword: (newPassword: string | null) => void;
 }): React.ReactElement;

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tls-client-certificate.d.ts","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,mBAAmB,MAAM,+BAA+B,CAAC;AASrE,iBAAS,oBAAoB,CAAC,EAC5B,mBAAmB,EACnB,QAAQ,EACR,0BAA0B,EAC1B,kCAAkC,GACnC,EAAE;IACD,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,0BAA0B,EAAE,CAC1B,2BAA2B,EAAE,MAAM,GAAG,IAAI,KACvC,IAAI,CAAC;IACV,kCAAkC,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1E,GAAG,KAAK,CAAC,YAAY,CAkDrB;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"tls-client-certificate.d.ts","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,iBAAS,oBAAoB,CAAC,EAC5B,qBAAqB,EACrB,6BAA6B,EAC7B,QAAQ,EACR,kCAAyC,EACzC,QAAe,EACf,0BAA0B,EAC1B,kCAAkC,GACnC,EAAE;IACD,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,6BAA6B,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B,EAAE,CAC1B,2BAA2B,EAAE,MAAM,GAAG,IAAI,KACvC,IAAI,CAAC;IACV,kCAAkC,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1E,GAAG,KAAK,CAAC,YAAY,CAmDrB;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.js

@@ -9,15 +9,16 @@ const form_field_container_1 = __importDefault(require("../../form-field-contain
 const inputFieldStyles = (0, compass_components_1.css)({
     width: '80%',
 });
-function TLSClientCertificate({ connectionStringUrl, disabled, updateTLSClientCertificate, updateTLSClientCertificatePassword, }) {
-    const typedParams = connectionStringUrl.typedSearchParams();
-    const clientCertificateKeyFile = typedParams.get('tlsCertificateKeyFile');
-    const tlsCertificateKeyFilePassword = typedParams.get('tlsCertificateKeyFilePassword');
+function TLSClientCertificate({ tlsCertificateKeyFile, tlsCertificateKeyFilePassword, disabled, displayDatabaseConnectionUserHints = true, optional = true, updateTLSClientCertificate, updateTLSClientCertificatePassword, }) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(form_field_container_1.default, { className: inputFieldStyles },
-            react_1.default.createElement(compass_components_1.FileInput, { description: 'Learn More', disabled: disabled, id: "tlsCertificateKeyFile", label: "Client Certificate and Key (.pem)", dataTestId: "tlsCertificateKeyFile-input", link: 'https://docs.mongodb.com/manual/reference/connection-string/#mongodb-urioption-urioption.tlsCertificateKeyFile', values: clientCertificateKeyFile ? [clientCertificateKeyFile] : [], onChange: (files) => {
+            react_1.default.createElement(compass_components_1.FileInput, { description: displayDatabaseConnectionUserHints ? 'Learn More' : undefined, disabled: disabled, id: "tlsCertificateKeyFile", label: "Client Certificate and Key (.pem)", dataTestId: "tlsCertificateKeyFile-input", link: displayDatabaseConnectionUserHints
+                    ? 'https://docs.mongodb.com/manual/reference/connection-string/#mongodb-urioption-urioption.tlsCertificateKeyFile'
+                    : undefined, values: tlsCertificateKeyFile ? [tlsCertificateKeyFile] : [], onChange: (files) => {
                     updateTLSClientCertificate(files && files.length > 0 ? files[0] : null);
-                }, showFileOnNewLine: true, optional: true, optionalMessage: "Optional (required with X.509 auth)" })),
+                }, showFileOnNewLine: true, optional: optional, optionalMessage: optional && displayDatabaseConnectionUserHints
+                    ? 'Optional (required with X.509 auth)'
+                    : undefined })),
         react_1.default.createElement(form_field_container_1.default, null,
             react_1.default.createElement(compass_components_1.TextInput, { className: inputFieldStyles, onChange: ({ target: { value }, }) => {
                     updateTLSClientCertificatePassword(value);

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.js.map

@@ -1 +1 @@
-{"version":3,"file":"tls-client-certificate.js","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,uEAA2E;AAI3E,sFAA4D;AAE5D,MAAM,gBAAgB,GAAG,IAAA,wBAAG,EAAC;IAC3B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,SAAS,oBAAoB,CAAC,EAC5B,mBAAmB,EACnB,QAAQ,EACR,0BAA0B,EAC1B,kCAAkC,GAQnC;IACC,MAAM,WAAW,GACf,mBAAmB,CAAC,iBAAiB,EAAsB,CAAC;IAC9D,MAAM,wBAAwB,GAAG,WAAW,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;IAC1E,MAAM,6BAA6B,GAAG,WAAW,CAAC,GAAG,CACnD,+BAA+B,CAChC,CAAC;IAEF,OAAO,CACL;QACE,8BAAC,8BAAkB,IAAC,SAAS,EAAE,gBAAgB;YAC7C,8BAAC,8BAAS,IACR,WAAW,EAAE,YAAY,EACzB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,mCAAmC,EACzC,UAAU,EAAC,6BAA6B,EACxC,IAAI,EACF,gHAAgH,EAElH,MAAM,EAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,EAAE,EAClE,QAAQ,EAAE,CAAC,KAAe,EAAE,EAAE;oBAC5B,0BAA0B,CACxB,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C,CAAC;gBACJ,CAAC,EACD,iBAAiB,QACjB,QAAQ,QACR,eAAe,EAAC,qCAAqC,GACrD,CACiB;QACrB,8BAAC,8BAAkB;YACjB,8BAAC,8BAAS,IACR,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,EACT,MAAM,EAAE,EAAE,KAAK,EAAE,GACmB,EAAE,EAAE;oBACxC,kCAAkC,CAAC,KAAK,CAAC,CAAC;gBAC5C,CAAC,EACD,QAAQ,EAAE,QAAQ,iBACN,qCAAqC,EACjD,EAAE,EAAC,+BAA+B,EAClC,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,6BAA6B,IAAI,EAAE,EAC1C,QAAQ,SACR,CACiB,CACpB,CACJ,CAAC;AACJ,CAAC;AAED,kBAAe,oBAAoB,CAAC"}
+{"version":3,"file":"tls-client-certificate.js","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,uEAA2E;AAE3E,sFAA4D;AAE5D,MAAM,gBAAgB,GAAG,IAAA,wBAAG,EAAC;IAC3B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,SAAS,oBAAoB,CAAC,EAC5B,qBAAqB,EACrB,6BAA6B,EAC7B,QAAQ,EACR,kCAAkC,GAAG,IAAI,EACzC,QAAQ,GAAG,IAAI,EACf,0BAA0B,EAC1B,kCAAkC,GAWnC;IACC,OAAO,CACL;QACE,8BAAC,8BAAkB,IAAC,SAAS,EAAE,gBAAgB;YAC7C,8BAAC,8BAAS,IACR,WAAW,EACT,kCAAkC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAE/D,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,mCAAmC,EACzC,UAAU,EAAC,6BAA6B,EACxC,IAAI,EACF,kCAAkC;oBAChC,CAAC,CAAC,gHAAgH;oBAClH,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5D,QAAQ,EAAE,CAAC,KAAe,EAAE,EAAE;oBAC5B,0BAA0B,CACxB,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C,CAAC;gBACJ,CAAC,EACD,iBAAiB,QACjB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EACb,QAAQ,IAAI,kCAAkC;oBAC5C,CAAC,CAAC,qCAAqC;oBACvC,CAAC,CAAC,SAAS,GAEf,CACiB;QACrB,8BAAC,8BAAkB;YACjB,8BAAC,8BAAS,IACR,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,EACT,MAAM,EAAE,EAAE,KAAK,EAAE,GACmB,EAAE,EAAE;oBACxC,kCAAkC,CAAC,KAAK,CAAC,CAAC;gBAC5C,CAAC,EACD,QAAQ,EAAE,QAAQ,iBACN,qCAAqC,EACjD,EAAE,EAAC,+BAA+B,EAClC,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,6BAA6B,IAAI,EAAE,EAC1C,QAAQ,SACR,CACiB,CACpB,CACJ,CAAC;AACJ,CAAC;AAED,kBAAe,oBAAoB,CAAC"}

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
 import type ConnectionStringUrl from 'mongodb-connection-string-url';
+import type { ConnectionOptions } from 'mongodb-data-service';
 import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
 import type { TLS_OPTIONS } from '../../../utils/tls-handler';
+export declare const checkboxDescriptionStyles: string;
+export declare const disabledCheckboxDescriptionStyles: string;
 export declare function getTLSOptionForConnectionString(connectionStringUrl: ConnectionStringUrl): TLS_OPTIONS | undefined;
-declare function TLSTab({ connectionStringUrl, updateConnectionFormField, }: {
+declare function TLSTab({ connectionStringUrl, connectionOptions, updateConnectionFormField, }: {
     connectionStringUrl: ConnectionStringUrl;
+    connectionOptions: ConnectionOptions;
     updateConnectionFormField: UpdateConnectionFormField;
 }): React.ReactElement;
 export default TLSTab;

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tls-ssl-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAa3C,OAAO,KAAK,mBAAmB,MAAM,+BAA+B,CAAC;AAGrE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAIjF,OAAO,KAAK,EAAiB,WAAW,EAAE,MAAM,4BAA4B,CAAC;AA4B7E,wBAAgB,+BAA+B,CAC7C,mBAAmB,EAAE,mBAAmB,GACvC,WAAW,GAAG,SAAS,CAgCzB;AAED,iBAAS,MAAM,CAAC,EACd,mBAAmB,EACnB,yBAAyB,GAC1B,EAAE;IACD,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,yBAAyB,EAAE,yBAAyB,CAAC;CACtD,GAAG,KAAK,CAAC,YAAY,CAiIrB;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tls-ssl-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAa3C,OAAO,KAAK,mBAAmB,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAIjF,OAAO,KAAK,EAAiB,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE7E,eAAO,MAAM,yBAAyB,QAEpC,CAAC;AAEH,eAAO,MAAM,iCAAiC,QAE5C,CAAC;AAoBH,wBAAgB,+BAA+B,CAC7C,mBAAmB,EAAE,mBAAmB,GACvC,WAAW,GAAG,SAAS,CAgCzB;AAED,iBAAS,MAAM,CAAC,EACd,mBAAmB,EACnB,iBAAiB,EACjB,yBAAyB,GAC1B,EAAE;IACD,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,yBAAyB,EAAE,yBAAyB,CAAC;CACtD,GAAG,KAAK,CAAC,YAAY,CAgIrB;AAED,eAAe,MAAM,CAAC"}

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.js

@@ -22,16 +22,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTLSOptionForConnectionString = void 0;
+exports.getTLSOptionForConnectionString = exports.disabledCheckboxDescriptionStyles = exports.checkboxDescriptionStyles = void 0;
 const react_1 = __importStar(require("react"));
 const compass_components_1 = require("@mongodb-js/compass-components");
 const form_field_container_1 = __importDefault(require("../../form-field-container"));
 const tls_client_certificate_1 = __importDefault(require("./tls-client-certificate"));
 const tls_certificate_authority_1 = __importDefault(require("./tls-certificate-authority"));
-const checkboxDescriptionStyles = (0, compass_components_1.css)({
+exports.checkboxDescriptionStyles = (0, compass_components_1.css)({
     marginTop: compass_components_1.spacing[1],
 });
-const disabledCheckboxDescriptionStyles = (0, compass_components_1.css)({
+exports.disabledCheckboxDescriptionStyles = (0, compass_components_1.css)({
     color: compass_components_1.uiColors.gray.light1,
 });
 const TLS_TYPES = [
@@ -69,7 +69,7 @@ function getTLSOptionForConnectionString(connectionStringUrl) {
     }
 }
 exports.getTLSOptionForConnectionString = getTLSOptionForConnectionString;
-function TLSTab({ connectionStringUrl, updateConnectionFormField, }) {
+function TLSTab({ connectionStringUrl, connectionOptions, updateConnectionFormField, }) {
     const tlsOption = getTLSOptionForConnectionString(connectionStringUrl);
     const onChangeTLS = (0, react_1.useCallback)((event) => {
         updateConnectionFormField({
@@ -77,23 +77,22 @@ function TLSTab({ connectionStringUrl, updateConnectionFormField, }) {
             tlsOption: event.target.value,
         });
     }, [updateConnectionFormField]);
+    const searchParams = connectionStringUrl.typedSearchParams();
     const tlsOptionFields = [
         {
             name: 'tlsInsecure',
             description: 'This includes tlsAllowInvalidHostnames and tlsAllowInvalidCertificates.',
-            checked: connectionStringUrl.searchParams.get('tlsInsecure') === 'true',
+            checked: searchParams.get('tlsInsecure') === 'true',
         },
         {
             name: 'tlsAllowInvalidHostnames',
             description: 'Disable the validation of the hostnames in the certificate presented by the mongod/mongos instance.',
-            checked: connectionStringUrl.searchParams.get('tlsAllowInvalidHostnames') ===
-                'true',
+            checked: searchParams.get('tlsAllowInvalidHostnames') === 'true',
         },
         {
             name: 'tlsAllowInvalidCertificates',
             description: 'Disable the validation of the server certificates.',
-            checked: connectionStringUrl.searchParams.get('tlsAllowInvalidCertificates') ===
-                'true',
+            checked: searchParams.get('tlsAllowInvalidCertificates') === 'true',
         },
     ];
     const tlsOptionsDisabled = tlsOption === 'OFF';
@@ -106,24 +105,23 @@ function TLSTab({ connectionStringUrl, updateConnectionFormField, }) {
     }, [updateConnectionFormField]);
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(form_field_container_1.default, null,
-            react_1.default.createElement(compass_components_1.Label, { htmlFor: "connection-schema-radio-box-group" }, "SSL/TLS Connection"),
+            react_1.default.createElement(compass_components_1.Label, { htmlFor: "tls-radio-box-group" }, "SSL/TLS Connection"),
             react_1.default.createElement(compass_components_1.InlineInfoLink, { href: "https://docs.mongodb.com/manual/reference/connection-string/#tls-options", "aria-label": "TLS/SSL Option Documentation" }),
-            react_1.default.createElement(compass_components_1.RadioBoxGroup, { id: "connection-schema-radio-box-group", value: tlsOption || '', onChange: onChangeTLS }, TLS_TYPES.map((tlsType) => (react_1.default.createElement(compass_components_1.RadioBox, { id: `connection-tls-enabled-${tlsType.value}-radio-button`, "data-testid": `connection-tls-enabled-${tlsType.value}-radio-button`, value: tlsType.value, key: tlsType.value }, tlsType.label))))),
-        react_1.default.createElement(tls_certificate_authority_1.default, { connectionStringUrl: connectionStringUrl, disabled: tlsOptionsDisabled, updateCAFile: (newCertificatePath) => {
-                handleTlsOptionChanged('tlsCAFile', newCertificatePath);
-            } }),
-        react_1.default.createElement(tls_client_certificate_1.default, { connectionStringUrl: connectionStringUrl, disabled: tlsOptionsDisabled, updateTLSClientCertificate: (newCertificatePath) => {
+            react_1.default.createElement(compass_components_1.RadioBoxGroup, { id: "tls-radio-box-group", value: tlsOption || '', onChange: onChangeTLS }, TLS_TYPES.map((tlsType) => (react_1.default.createElement(compass_components_1.RadioBox, { id: `connection-tls-enabled-${tlsType.value}-radio-button`, "data-testid": `connection-tls-enabled-${tlsType.value}-radio-button`, value: tlsType.value, key: tlsType.value }, tlsType.label))))),
+        react_1.default.createElement(tls_certificate_authority_1.default, { tlsCAFile: searchParams.get('tlsCAFile'), useSystemCA: !!connectionOptions.useSystemCA, disabled: tlsOptionsDisabled, handleTlsOptionChanged: handleTlsOptionChanged }),
+        react_1.default.createElement(tls_client_certificate_1.default, { tlsCertificateKeyFile: searchParams.get('tlsCertificateKeyFile'), tlsCertificateKeyFilePassword: searchParams.get('tlsCertificateKeyFilePassword'), disabled: tlsOptionsDisabled, updateTLSClientCertificate: (newCertificatePath) => {
                 handleTlsOptionChanged('tlsCertificateKeyFile', newCertificatePath);
-            }, updateTLSClientCertificatePassword: (newCertificatePath) => {
-                handleTlsOptionChanged('tlsCertificateKeyFilePassword', newCertificatePath);
+            }, updateTLSClientCertificatePassword: (newPassword) => {
+                handleTlsOptionChanged('tlsCertificateKeyFilePassword', newPassword);
             } }),
         tlsOptionFields.map((tlsOptionField) => (react_1.default.createElement(form_field_container_1.default, { key: tlsOptionField.name },
             react_1.default.createElement(compass_components_1.Checkbox, { onChange: (event) => {
                     handleTlsOptionChanged(tlsOptionField.name, event.target.checked ? 'true' : null);
-                }, "data-testid": `${tlsOptionField.name}-input`, label: tlsOptionField.name, disabled: tlsOptionsDisabled, checked: tlsOptionField.checked, bold: false }),
-            react_1.default.createElement(compass_components_1.Description, { className: (0, compass_components_1.cx)(checkboxDescriptionStyles, {
-                    [disabledCheckboxDescriptionStyles]: tlsOptionsDisabled,
-                }) }, tlsOptionField.description))))));
+                }, "data-testid": `${tlsOptionField.name}-input`, id: `${tlsOptionField.name}-input`, label: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(compass_components_1.Label, { htmlFor: `${tlsOptionField.name}-input` }, tlsOptionField.name),
+                    react_1.default.createElement(compass_components_1.Description, { className: (0, compass_components_1.cx)(exports.checkboxDescriptionStyles, {
+                            [exports.disabledCheckboxDescriptionStyles]: tlsOptionsDisabled,
+                        }) }, tlsOptionField.description)), disabled: tlsOptionsDisabled, checked: tlsOptionField.checked }))))));
 }
 exports.default = TLSTab;
 //# sourceMappingURL=tls-ssl-tab.js.map

package/dist/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tls-ssl-tab.js","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tls-ssl-tab.js","sourceRoot":"","sources":["../../../../src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx"],"names":[],"mappings":"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"}

package/dist/components/connect-form-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connect-form-actions.d.ts","sourceRoot":"","sources":["../../src/components/connect-form-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EACV,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,qBAAqB,CAAC;AAgB7B,iBAAS,kBAAkB,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,EAAE;IACD,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;CAC/C,GAAG,KAAK,CAAC,YAAY,CA0BrB;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"connect-form-actions.d.ts","sourceRoot":"","sources":["../../src/components/connect-form-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EACV,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,qBAAqB,CAAC;AAgB7B,iBAAS,kBAAkB,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,EAAE;IACD,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;CAC/C,GAAG,KAAK,CAAC,YAAY,CA2BrB;AAED,eAAe,kBAAkB,CAAC"}

package/dist/components/connect-form-actions.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const compass_components_1 = require("@mongodb-js/compass-components");
-const validation_summary_1 = require("./validation-summary");
 const formActionStyles = (0, compass_components_1.css)({
     borderTop: `1px solid ${compass_components_1.uiColors.gray.light2}`,
     paddingLeft: compass_components_1.spacing[4],
@@ -20,10 +19,10 @@ const formActionButtonsStyles = (0, compass_components_1.css)({
 });
 function ConnectFormActions({ errors, warnings, onConnectClicked, onSaveClicked, saveButton, }) {
     return (react_1.default.createElement("div", { className: formActionStyles },
-        warnings.length ? react_1.default.createElement(validation_summary_1.WarningSummary, { warnings: warnings }) : '',
-        errors.length ? react_1.default.createElement(validation_summary_1.ErrorSummary, { errors: errors }) : '',
+        react_1.default.createElement(compass_components_1.WarningSummary, { warnings: warnings }),
+        react_1.default.createElement(compass_components_1.ErrorSummary, { dataTestId: "connection-error-summary", errors: errors }),
         react_1.default.createElement("div", { className: formActionButtonsStyles },
-            saveButton !== 'hidden' && (react_1.default.createElement(compass_components_1.Button, { variant: compass_components_1.ButtonVariant.Default, disabled: saveButton === 'disabled', onClick: onSaveClicked }, "Save")),
+            saveButton !== 'hidden' && (react_1.default.createElement(compass_components_1.Button, { "data-testid": "save-connection-button", variant: compass_components_1.ButtonVariant.Default, disabled: saveButton === 'disabled', onClick: onSaveClicked }, "Save")),
             react_1.default.createElement(compass_components_1.Button, { "data-testid": "connect-button", variant: compass_components_1.ButtonVariant.Primary, onClick: onConnectClicked }, "Connect"))));
 }
 exports.default = ConnectFormActions;

package/dist/components/connect-form-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"connect-form-actions.js","sourceRoot":"","sources":["../../src/components/connect-form-actions.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,uEAMwC;AACxC,6DAAoE;AAMpE,MAAM,gBAAgB,GAAG,IAAA,wBAAG,EAAC;IAC3B,SAAS,EAAE,aAAa,6BAAQ,CAAC,IAAI,CAAC,MAAM,EAAE;IAC9C,WAAW,EAAE,4BAAO,CAAC,CAAC,CAAC;IACvB,YAAY,EAAE,4BAAO,CAAC,CAAC,CAAC;CACzB,CAAC,CAAC;AAEH,MAAM,uBAAuB,GAAG,IAAA,wBAAG,EAAC;IAClC,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,UAAU;IAC1B,GAAG,EAAE,4BAAO,CAAC,CAAC,CAAC;IACf,UAAU,EAAE,4BAAO,CAAC,CAAC,CAAC;IACtB,aAAa,EAAE,4BAAO,CAAC,CAAC,CAAC;CAC1B,CAAC,CAAC;AAEH,SAAS,kBAAkB,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,UAAU,GAOX;IACC,OAAO,CACL,uCAAK,SAAS,EAAE,gBAAgB;QAC7B,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,8BAAC,mCAAc,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,EAAE;QAC7D,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,8BAAC,iCAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,EAAE;QACtD,uCAAK,SAAS,EAAE,uBAAuB;YACpC,UAAU,KAAK,QAAQ,IAAI,CAC1B,8BAAC,2BAAM,IACL,OAAO,EAAE,kCAAa,CAAC,OAAO,EAC9B,QAAQ,EAAE,UAAU,KAAK,UAAU,EACnC,OAAO,EAAE,aAAa,WAGf,CACV;YAED,8BAAC,2BAAM,mBACO,gBAAgB,EAC5B,OAAO,EAAE,kCAAa,CAAC,OAAO,EAC9B,OAAO,EAAE,gBAAgB,cAGlB,CACL,CACF,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,kBAAkB,CAAC"}
+{"version":3,"file":"connect-form-actions.js","sourceRoot":"","sources":["../../src/components/connect-form-actions.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,uEAQwC;AAMxC,MAAM,gBAAgB,GAAG,IAAA,wBAAG,EAAC;IAC3B,SAAS,EAAE,aAAa,6BAAQ,CAAC,IAAI,CAAC,MAAM,EAAE;IAC9C,WAAW,EAAE,4BAAO,CAAC,CAAC,CAAC;IACvB,YAAY,EAAE,4BAAO,CAAC,CAAC,CAAC;CACzB,CAAC,CAAC;AAEH,MAAM,uBAAuB,GAAG,IAAA,wBAAG,EAAC;IAClC,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,UAAU;IAC1B,GAAG,EAAE,4BAAO,CAAC,CAAC,CAAC;IACf,UAAU,EAAE,4BAAO,CAAC,CAAC,CAAC;IACtB,aAAa,EAAE,4BAAO,CAAC,CAAC,CAAC;CAC1B,CAAC,CAAC;AAEH,SAAS,kBAAkB,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,UAAU,GAOX;IACC,OAAO,CACL,uCAAK,SAAS,EAAE,gBAAgB;QAC9B,8BAAC,mCAAc,IAAC,QAAQ,EAAE,QAAQ,GAAI;QACtC,8BAAC,iCAAY,IAAC,UAAU,EAAC,0BAA0B,EAAC,MAAM,EAAE,MAAM,GAAI;QACtE,uCAAK,SAAS,EAAE,uBAAuB;YACpC,UAAU,KAAK,QAAQ,IAAI,CAC1B,8BAAC,2BAAM,mBACO,wBAAwB,EACpC,OAAO,EAAE,kCAAa,CAAC,OAAO,EAC9B,QAAQ,EAAE,UAAU,KAAK,UAAU,EACnC,OAAO,EAAE,aAAa,WAGf,CACV;YAED,8BAAC,2BAAM,mBACO,gBAAgB,EAC5B,OAAO,EAAE,kCAAa,CAAC,OAAO,EAC9B,OAAO,EAAE,gBAAgB,cAGlB,CACL,CACF,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,kBAAkB,CAAC"}

package/dist/components/connect-form.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { ConnectionInfo } from 'mongodb-data-service';
-declare function ConnectForm({ initialConnectionInfo, connectionErrorMessage, onConnectClicked, onSaveConnectionClicked, }: {
+declare const _default: React.ComponentType<{
+    darkMode?: boolean | undefined;
     initialConnectionInfo: ConnectionInfo;
-    connectionErrorMessage?: string | null;
+    connectionErrorMessage?: string | null | undefined;
     onConnectClicked: (connectionInfo: ConnectionInfo) => void;
-    onSaveConnectionClicked?: (connectionInfo: ConnectionInfo) => Promise<void>;
-}): React.ReactElement;
-export default ConnectForm;
+    onSaveConnectionClicked?: ((connectionInfo: ConnectionInfo) => Promise<void>) | undefined;
+}>;
+export default _default;
 //# sourceMappingURL=connect-form.d.ts.map

package/dist/components/connect-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connect-form.d.ts","sourceRoot":"","sources":["../../src/components/connect-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAgG9B,iBAAS,WAAW,CAAC,EACnB,qBAAqB,EACrB,sBAAsB,EACtB,gBAAgB,EAGhB,uBAAuB,GACxB,EAAE;IACD,qBAAqB,EAAE,cAAc,CAAC;IACtC,sBAAsB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3D,uBAAuB,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7E,GAAG,KAAK,CAAC,YAAY,CAiJrB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"connect-form.d.ts","sourceRoot":"","sources":["../../src/components/connect-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,sBAAsB,CAAC;;;;;;;;AA+S9B,wBAAsC"}

package/dist/components/connect-form.js

@@ -35,7 +35,7 @@ const formContainerStyles = (0, compass_components_1.css)({
     margin: 0,
     padding: 0,
     height: 'fit-content',
-    width: 700,
+    width: compass_components_1.spacing[6] * 10,
     position: 'relative',
     display: 'inline-block',
 });
@@ -48,9 +48,18 @@ const formCardStyles = (0, compass_components_1.css)({
     flexFlow: 'column nowrap',
     maxHeight: '95vh',
 });
+const formCardDarkThemeStyles = (0, compass_components_1.css)({
+    background: compass_components_1.uiColors.gray.dark3,
+});
+const formCardLightThemeStyles = (0, compass_components_1.css)({
+    background: compass_components_1.uiColors.white,
+});
 const descriptionStyles = (0, compass_components_1.css)({
     marginTop: compass_components_1.spacing[2],
 });
+const formStyles = (0, compass_components_1.css)({
+    display: 'contents',
+});
 const formContentContainerStyles = (0, compass_components_1.css)({
     padding: compass_components_1.spacing[4],
     overflowY: 'auto',
@@ -94,73 +103,81 @@ const favoriteButtonLabelStyles = (0, compass_components_1.css)({
     fontWeight: 'bold',
     fontSize: 12,
 });
-function ConnectForm({ initialConnectionInfo, connectionErrorMessage, onConnectClicked, onSaveConnectionClicked, }) {
+function ConnectForm({ darkMode, initialConnectionInfo, connectionErrorMessage, onConnectClicked, onSaveConnectionClicked, }) {
     var _a, _b;
     const [{ enableEditingConnectionString, isDirty, errors, warnings, connectionOptions, }, { setEnableEditingConnectionString, updateConnectionFormField, setErrors },] = (0, use_connect_form_1.useConnectForm)(initialConnectionInfo, connectionErrorMessage);
     const [showSaveConnectionModal, setShowSaveConnectionModal] = (0, react_1.useState)(false);
     const connectionStringInvalidError = errors.find((error) => error.fieldName === 'connectionString');
+    const onSubmitForm = (0, react_1.useCallback)(() => {
+        const updatedConnectionOptions = (0, lodash_1.cloneDeep)(connectionOptions);
+        const formErrors = (0, validation_1.validateConnectionOptionsErrors)(updatedConnectionOptions);
+        if (formErrors.length) {
+            setErrors(formErrors);
+            return;
+        }
+        onConnectClicked({
+            ...initialConnectionInfo,
+            connectionOptions: updatedConnectionOptions,
+        });
+    }, [initialConnectionInfo, onConnectClicked, setErrors, connectionOptions]);
+    const callOnSaveConnectionClickedAndStoreErrors = (0, react_1.useCallback)(async (connectionInfo) => {
+        try {
+            await (onSaveConnectionClicked === null || onSaveConnectionClicked === void 0 ? void 0 : onSaveConnectionClicked(connectionInfo));
+        }
+        catch (err) {
+            setErrors([
+                {
+                    message: `Unable to save connection: ${err.message}`,
+                },
+            ]);
+        }
+    }, [onSaveConnectionClicked, setErrors]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: formContainerStyles, "data-testid": "connection-form" },
-            react_1.default.createElement(compass_components_1.Card, { className: formCardStyles },
-                react_1.default.createElement("div", { className: formContentContainerStyles },
-                    react_1.default.createElement(compass_components_1.H3, { className: formHeaderStyles }, (_b = (_a = initialConnectionInfo.favorite) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'New Connection',
-                        !!onSaveConnectionClicked && (react_1.default.createElement(compass_components_1.IconButton, { "aria-label": "Save Connection", className: editFavoriteButtonStyles, onClick: () => {
+            react_1.default.createElement(compass_components_1.Card, { className: (0, compass_components_1.cx)(formCardStyles, darkMode ? formCardDarkThemeStyles : formCardLightThemeStyles) },
+                react_1.default.createElement("form", { className: formStyles, onSubmit: (e) => {
+                        e.preventDefault();
+                        onSubmitForm();
+                    }, noValidate: true },
+                    react_1.default.createElement("div", { className: formContentContainerStyles },
+                        react_1.default.createElement(compass_components_1.H3, { className: formHeaderStyles }, (_b = (_a = initialConnectionInfo.favorite) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'New Connection',
+                            !!onSaveConnectionClicked && (react_1.default.createElement(compass_components_1.IconButton, { type: "button", "aria-label": "Save Connection", "data-testid": "edit-favorite-name-button", className: editFavoriteButtonStyles, onClick: () => {
+                                    setShowSaveConnectionModal(true);
+                                } },
+                                react_1.default.createElement(compass_components_1.Icon, { glyph: "Edit" })))),
+                        react_1.default.createElement(compass_components_1.Description, { className: descriptionStyles }, "Connect to a MongoDB deployment"),
+                        !!onSaveConnectionClicked && (react_1.default.createElement(compass_components_1.IconButton, { "aria-label": "Save Connection", "data-testid": "edit-favorite-icon-button", type: "button", className: favoriteButtonStyles, size: "large", onClick: () => {
                                 setShowSaveConnectionModal(true);
                             } },
-                            react_1.default.createElement(compass_components_1.Icon, { glyph: "Edit" })))),
-                    react_1.default.createElement(compass_components_1.Description, { className: descriptionStyles }, "Connect to a MongoDB deployment"),
-                    !!onSaveConnectionClicked && (react_1.default.createElement(compass_components_1.IconButton, { "aria-label": "Save Connection", className: favoriteButtonStyles, size: "large", onMouseDown: (event) => {
-                            event.preventDefault();
-                        }, onClick: () => {
-                            setShowSaveConnectionModal(true);
-                        } },
-                        react_1.default.createElement("div", { className: favoriteButtonContentStyles },
-                            react_1.default.createElement(compass_components_1.FavoriteIcon, { isFavorite: !!initialConnectionInfo.favorite, size: compass_components_1.spacing[5] }),
-                            react_1.default.createElement("span", { className: favoriteButtonLabelStyles }, "FAVORITE")))),
-                    react_1.default.createElement(connection_string_input_1.default, { connectionString: connectionOptions.connectionString, enableEditingConnectionString: enableEditingConnectionString, setEnableEditingConnectionString: setEnableEditingConnectionString, updateConnectionFormField: updateConnectionFormField }),
-                    connectionStringInvalidError && (react_1.default.createElement(compass_components_1.Banner, { variant: compass_components_1.BannerVariant.Danger }, connectionStringInvalidError.message)),
-                    react_1.default.createElement(advanced_connection_options_1.default, { errors: connectionStringInvalidError ? [] : errors, disabled: !!connectionStringInvalidError, updateConnectionFormField: updateConnectionFormField, connectionOptions: connectionOptions })),
-                react_1.default.createElement("div", { className: formFooterStyles },
-                    react_1.default.createElement(connect_form_actions_1.default, { errors: connectionStringInvalidError ? [] : errors, warnings: connectionStringInvalidError ? [] : warnings, saveButton: initialConnectionInfo.favorite
-                            ? isDirty
-                                ? 'enabled'
-                                : 'disabled'
-                            : 'hidden', onSaveClicked: async () => {
-                            if (onSaveConnectionClicked) {
-                                await onSaveConnectionClicked({
+                            react_1.default.createElement("div", { className: favoriteButtonContentStyles },
+                                react_1.default.createElement(compass_components_1.FavoriteIcon, { isFavorite: !!initialConnectionInfo.favorite, size: compass_components_1.spacing[5] }),
+                                react_1.default.createElement("span", { className: favoriteButtonLabelStyles }, "FAVORITE")))),
+                        react_1.default.createElement(connection_string_input_1.default, { connectionString: connectionOptions.connectionString, enableEditingConnectionString: enableEditingConnectionString, setEnableEditingConnectionString: setEnableEditingConnectionString, onSubmit: onSubmitForm, updateConnectionFormField: updateConnectionFormField }),
+                        connectionStringInvalidError && (react_1.default.createElement(compass_components_1.Banner, { variant: compass_components_1.BannerVariant.Danger }, connectionStringInvalidError.message)),
+                        react_1.default.createElement(advanced_connection_options_1.default, { errors: connectionStringInvalidError ? [] : errors, disabled: !!connectionStringInvalidError, updateConnectionFormField: updateConnectionFormField, connectionOptions: connectionOptions })),
+                    react_1.default.createElement("div", { className: formFooterStyles },
+                        react_1.default.createElement(connect_form_actions_1.default, { errors: connectionStringInvalidError ? [] : errors, warnings: connectionStringInvalidError ? [] : warnings, saveButton: initialConnectionInfo.favorite
+                                ? isDirty
+                                    ? 'enabled'
+                                    : 'disabled'
+                                : 'hidden', onSaveClicked: async () => {
+                                await callOnSaveConnectionClickedAndStoreErrors({
                                     ...(0, lodash_1.cloneDeep)(initialConnectionInfo),
                                     connectionOptions: (0, lodash_1.cloneDeep)(connectionOptions),
                                 });
-                            }
-                        }, onConnectClicked: () => {
-                            const updatedConnectionOptions = (0, lodash_1.cloneDeep)(connectionOptions);
-                            const formErrors = (0, validation_1.validateConnectionOptionsErrors)(updatedConnectionOptions);
-                            if (formErrors.length) {
-                                setErrors(formErrors);
-                                return;
-                            }
-                            onConnectClicked({
-                                ...initialConnectionInfo,
-                                connectionOptions: updatedConnectionOptions,
-                            });
-                        } })))),
+                            }, onConnectClicked: onSubmitForm }))))),
         !!onSaveConnectionClicked && (react_1.default.createElement(save_connection_modal_1.default, { open: showSaveConnectionModal, onCancelClicked: () => {
                 setShowSaveConnectionModal(false);
             }, onSaveClicked: async (favoriteInfo) => {
                 setShowSaveConnectionModal(false);
-                try {
-                    await onSaveConnectionClicked({
-                        ...(0, lodash_1.cloneDeep)(initialConnectionInfo),
-                        connectionOptions: (0, lodash_1.cloneDeep)(connectionOptions),
-                        favorite: {
-                            ...favoriteInfo,
-                        },
-                    });
-                }
-                catch (err) {
-                    setErrors([err]);
-                }
+                await callOnSaveConnectionClickedAndStoreErrors({
+                    ...(0, lodash_1.cloneDeep)(initialConnectionInfo),
+                    connectionOptions: (0, lodash_1.cloneDeep)(connectionOptions),
+                    favorite: {
+                        ...favoriteInfo,
+                    },
+                });
             }, key: initialConnectionInfo.id, initialFavoriteInfo: initialConnectionInfo.favorite }))));
 }
-exports.default = ConnectForm;
+exports.default = (0, compass_components_1.withTheme)(ConnectForm);
 //# sourceMappingURL=connect-form.js.map

package/dist/components/connect-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"connect-form.js","sourceRoot":"","sources":["../../src/components/connect-form.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"connect-form.js","sourceRoot":"","sources":["../../src/components/connect-form.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAKrD,uEAcwC;AACxC,mCAAmC;AAEnC,wFAA8D;AAC9D,gGAAsE;AACtE,kFAAwD;AACxD,gEAA2D;AAC3D,oDAAsE;AACtE,oFAA0D;AAE1D,MAAM,mBAAmB,GAAG,IAAA,wBAAG,EAAC;IAC9B,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,4BAAO,CAAC,CAAC,CAAC,GAAG,EAAE;IACtB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;CACxB,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,IAAA,wBAAG,EAAC;IACzB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,eAAe;IACzB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH,MAAM,uBAAuB,GAAG,IAAA,wBAAG,EAAC;IAClC,UAAU,EAAE,6BAAQ,CAAC,IAAI,CAAC,KAAK;CAChC,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,IAAA,wBAAG,EAAC;IACnC,UAAU,EAAE,6BAAQ,CAAC,KAAK;CAC3B,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,IAAA,wBAAG,EAAC;IAC5B,SAAS,EAAE,4BAAO,CAAC,CAAC,CAAC;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,IAAA,wBAAG,EAAC;IACrB,OAAO,EAAE,UAAU;CACpB,CAAC,CAAC;AAEH,MAAM,0BAA0B,GAAG,IAAA,wBAAG,EAAC;IACrC,OAAO,EAAE,4BAAO,CAAC,CAAC,CAAC;IACnB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAAG,IAAA,wBAAG,EAAC;IAC3B,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,IAAA,wBAAG,EAAC;IAC/B,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,4BAAO,CAAC,CAAC,CAAC;IACf,KAAK,EAAE,4BAAO,CAAC,CAAC,CAAC;IACjB,KAAK,EAAE;QACL,MAAM,EAAE,SAAS;KAClB;IACD,KAAK,EAAE,4BAAO,CAAC,CAAC,CAAC;IACjB,MAAM,EAAE,4BAAO,CAAC,CAAC,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,2BAA2B,GAAG,IAAA,wBAAG,EAAC;IACtC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;CACzB,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAAG,IAAA,wBAAG,EAAC;IAC3B,MAAM,EAAE;QACN,UAAU,EAAE,QAAQ;KACrB;IACD,SAAS,EAAE;QACT,MAAM,EAAE;YACN,UAAU,EAAE,SAAS;SACtB;KACF;CACF,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,IAAA,wBAAG,EAAC;IACnC,aAAa,EAAE,UAAU;CAC1B,CAAC,CAAC;AAEH,MAAM,yBAAyB,GAAG,IAAA,wBAAG,EAAC;IACpC,UAAU,EAAE,4BAAO,CAAC,CAAC,CAAC;IACtB,KAAK,EAAE,6BAAQ,CAAC,KAAK;IACrB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC;AAEH,SAAS,WAAW,CAAC,EACnB,QAAQ,EACR,qBAAqB,EACrB,sBAAsB,EACtB,gBAAgB,EAGhB,uBAAuB,GAOxB;;IACC,MAAM,CACJ,EACE,6BAA6B,EAC7B,OAAO,EACP,MAAM,EACN,QAAQ,EACR,iBAAiB,GAClB,EACD,EAAE,gCAAgC,EAAE,yBAAyB,EAAE,SAAS,EAAE,EAC3E,GAAG,IAAA,iCAAc,EAAC,qBAAqB,EAAE,sBAAsB,CAAC,CAAC;IAElE,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9E,MAAM,4BAA4B,GAAG,MAAM,CAAC,IAAI,CAC9C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,KAAK,kBAAkB,CAClD,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACpC,MAAM,wBAAwB,GAAG,IAAA,kBAAS,EAAC,iBAAiB,CAAC,CAAC;QAC9D,MAAM,UAAU,GAAG,IAAA,4CAA+B,EAChD,wBAAwB,CACzB,CAAC;QACF,IAAI,UAAU,CAAC,MAAM,EAAE;YACrB,SAAS,CAAC,UAAU,CAAC,CAAC;YACtB,OAAO;SACR;QACD,gBAAgB,CAAC;YACf,GAAG,qBAAqB;YACxB,iBAAiB,EAAE,wBAAwB;SAC5C,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,qBAAqB,EAAE,gBAAgB,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5E,MAAM,yCAAyC,GAAG,IAAA,mBAAW,EAC3D,KAAK,EAAE,cAA8B,EAAiB,EAAE;QACtD,IAAI;YACF,MAAM,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,cAAc,CAAC,CAAA,CAAC;SACjD;QAAC,OAAO,GAAG,EAAE;YAIZ,SAAS,CAAC;gBACR;oBACE,OAAO,EAAE,8BAA+B,GAAa,CAAC,OAAO,EAAE;iBAChE;aACF,CAAC,CAAC;SACJ;IACH,CAAC,EACD,CAAC,uBAAuB,EAAE,SAAS,CAAC,CACrC,CAAC;IAEF,OAAO,CACL;QACE,uCAAK,SAAS,EAAE,mBAAmB,iBAAc,iBAAiB;YAChE,8BAAC,yBAAI,IACH,SAAS,EAAE,IAAA,uBAAE,EACX,cAAc,EACd,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,wBAAwB,CAC9D;gBAED,wCACE,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBAEd,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,YAAY,EAAE,CAAC;oBACjB,CAAC,EAED,UAAU;oBAEV,uCAAK,SAAS,EAAE,0BAA0B;wBACxC,8BAAC,uBAAE,IAAC,SAAS,EAAE,gBAAgB,IAC5B,MAAA,MAAA,qBAAqB,CAAC,QAAQ,0CAAE,IAAI,mCAAI,gBAAgB;4BACxD,CAAC,CAAC,uBAAuB,IAAI,CAC5B,8BAAC,+BAAU,IACT,IAAI,EAAC,QAAQ,gBACF,iBAAiB,iBAChB,2BAA2B,EACvC,SAAS,EAAE,wBAAwB,EACnC,OAAO,EAAE,GAAG,EAAE;oCACZ,0BAA0B,CAAC,IAAI,CAAC,CAAC;gCACnC,CAAC;gCAED,8BAAC,yBAAI,IAAC,KAAK,EAAC,MAAM,GAAG,CACV,CACd,CACE;wBACL,8BAAC,gCAAW,IAAC,SAAS,EAAE,iBAAiB,sCAE3B;wBACb,CAAC,CAAC,uBAAuB,IAAI,CAC5B,8BAAC,+BAAU,kBACE,iBAAiB,iBAChB,2BAA2B,EACvC,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,oBAAoB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;gCACZ,0BAA0B,CAAC,IAAI,CAAC,CAAC;4BACnC,CAAC;4BAED,uCAAK,SAAS,EAAE,2BAA2B;gCACzC,8BAAC,iCAAY,IACX,UAAU,EAAE,CAAC,CAAC,qBAAqB,CAAC,QAAQ,EAC5C,IAAI,EAAE,4BAAO,CAAC,CAAC,CAAC,GAChB;gCACF,wCAAM,SAAS,EAAE,yBAAyB,eAAiB,CACvD,CACK,CACd;wBACD,8BAAC,iCAAqB,IACpB,gBAAgB,EAAE,iBAAiB,CAAC,gBAAgB,EACpD,6BAA6B,EAAE,6BAA6B,EAC5D,gCAAgC,EAC9B,gCAAgC,EAElC,QAAQ,EAAE,YAAY,EACtB,yBAAyB,EAAE,yBAAyB,GACpD;wBACD,4BAA4B,IAAI,CAC/B,8BAAC,2BAAM,IAAC,OAAO,EAAE,kCAAa,CAAC,MAAM,IAClC,4BAA4B,CAAC,OAAO,CAC9B,CACV;wBACD,8BAAC,qCAAyB,IACxB,MAAM,EAAE,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAClD,QAAQ,EAAE,CAAC,CAAC,4BAA4B,EACxC,yBAAyB,EAAE,yBAAyB,EACpD,iBAAiB,EAAE,iBAAiB,GACpC,CACE;oBACN,uCAAK,SAAS,EAAE,gBAAgB;wBAC9B,8BAAC,8BAAkB,IACjB,MAAM,EAAE,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAClD,QAAQ,EAAE,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EACtD,UAAU,EACR,qBAAqB,CAAC,QAAQ;gCAC5B,CAAC,CAAC,OAAO;oCACP,CAAC,CAAC,SAAS;oCACX,CAAC,CAAC,UAAU;gCACd,CAAC,CAAC,QAAQ,EAEd,aAAa,EAAE,KAAK,IAAI,EAAE;gCACxB,MAAM,yCAAyC,CAAC;oCAC9C,GAAG,IAAA,kBAAS,EAAC,qBAAqB,CAAC;oCACnC,iBAAiB,EAAE,IAAA,kBAAS,EAAC,iBAAiB,CAAC;iCAChD,CAAC,CAAC;4BACL,CAAC,EACD,gBAAgB,EAAE,YAAY,GAC9B,CACE,CACD,CACF,CACH;QACL,CAAC,CAAC,uBAAuB,IAAI,CAC5B,8BAAC,+BAAmB,IAClB,IAAI,EAAE,uBAAuB,EAC7B,eAAe,EAAE,GAAG,EAAE;gBACpB,0BAA0B,CAAC,KAAK,CAAC,CAAC;YACpC,CAAC,EACD,aAAa,EAAE,KAAK,EAAE,YAAuC,EAAE,EAAE;gBAC/D,0BAA0B,CAAC,KAAK,CAAC,CAAC;gBAElC,MAAM,yCAAyC,CAAC;oBAC9C,GAAG,IAAA,kBAAS,EAAC,qBAAqB,CAAC;oBACnC,iBAAiB,EAAE,IAAA,kBAAS,EAAC,iBAAiB,CAAC;oBAC/C,QAAQ,EAAE;wBACR,GAAG,YAAY;qBAChB;iBACF,CAAC,CAAC;YACL,CAAC,EACD,GAAG,EAAE,qBAAqB,CAAC,EAAE,EAC7B,mBAAmB,EAAE,qBAAqB,CAAC,QAAQ,GACnD,CACH,CACA,CACJ,CAAC;AACJ,CAAC;AAED,kBAAe,IAAA,8BAAS,EAAC,WAAW,CAAC,CAAC"}

package/dist/components/connection-string-input.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { UpdateConnectionFormField } from '../hooks/use-connect-form';
 export declare function hidePasswordInConnectionString(connectionString: string): string;
-declare function ConnectStringInput({ connectionString, enableEditingConnectionString, setEnableEditingConnectionString, updateConnectionFormField, }: {
+declare function ConnectStringInput({ connectionString, enableEditingConnectionString, setEnableEditingConnectionString, updateConnectionFormField, onSubmit, }: {
     connectionString: string;
     enableEditingConnectionString: boolean;
     setEnableEditingConnectionString: (enableEditing: boolean) => void;
     updateConnectionFormField: UpdateConnectionFormField;
+    onSubmit: () => void;
 }): React.ReactElement;
 export default ConnectStringInput;
 //# sourceMappingURL=connection-string-input.d.ts.map

package/dist/components/connection-string-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connection-string-input.d.ts","sourceRoot":"","sources":["../../src/components/connection-string-input.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AA0C3E,wBAAgB,8BAA8B,CAC5C,gBAAgB,EAAE,MAAM,GACvB,MAAM,CAKR;AAED,iBAAS,kBAAkB,CAAC,EAC1B,gBAAgB,EAChB,6BAA6B,EAC7B,gCAAgC,EAChC,yBAAyB,GAC1B,EAAE;IACD,gBAAgB,EAAE,MAAM,CAAC;IACzB,6BAA6B,EAAE,OAAO,CAAC;IACvC,gCAAgC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,yBAAyB,EAAE,yBAAyB,CAAC;CACtD,GAAG,KAAK,CAAC,YAAY,CAsGrB;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"connection-string-input.d.ts","sourceRoot":"","sources":["../../src/components/connection-string-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAyC3E,wBAAgB,8BAA8B,CAC5C,gBAAgB,EAAE,MAAM,GACvB,MAAM,CAKR;AAED,iBAAS,kBAAkB,CAAC,EAC1B,gBAAgB,EAChB,6BAA6B,EAC7B,gCAAgC,EAChC,yBAAyB,EACzB,QAAQ,GACT,EAAE;IACD,gBAAgB,EAAE,MAAM,CAAC;IACzB,6BAA6B,EAAE,OAAO,CAAC;IACvC,gCAAgC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,yBAAyB,EAAE,yBAAyB,CAAC;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,KAAK,CAAC,YAAY,CAqHrB;AAED,eAAe,kBAAkB,CAAC"}

package/dist/components/connection-string-input.js

@@ -28,9 +28,8 @@ const compass_components_1 = require("@mongodb-js/compass-components");
 const mongodb_connection_string_url_1 = require("mongodb-connection-string-url");
 const confirm_edit_connection_string_1 = __importDefault(require("./confirm-edit-connection-string"));
 const textAreaContainerStyle = (0, compass_components_1.css)({
-    position: 'relative',
     marginTop: compass_components_1.spacing[1],
-    marginBottom: compass_components_1.spacing[2],
+    marginBottom: compass_components_1.spacing[3],
 });
 const uriLabelContainerStyles = (0, compass_components_1.css)({
     flexGrow: 1,
@@ -67,7 +66,7 @@ function hidePasswordInConnectionString(connectionString) {
     });
 }
 exports.hidePasswordInConnectionString = hidePasswordInConnectionString;
-function ConnectStringInput({ connectionString, enableEditingConnectionString, setEnableEditingConnectionString, updateConnectionFormField, }) {
+function ConnectStringInput({ connectionString, enableEditingConnectionString, setEnableEditingConnectionString, updateConnectionFormField, onSubmit, }) {
     const textAreaEl = (0, react_1.useRef)(null);
     const [editingConnectionString, setEditingConnectionString] = (0, react_1.useState)(connectionString);
     const [showEditConnectionStringPrompt, setShowEditConnectionStringPrompt] = (0, react_1.useState)(false);
@@ -81,6 +80,13 @@ function ConnectStringInput({ connectionString, enableEditingConnectionString, s
         enableEditingConnectionString,
         editingConnectionString,
     ]);
+    const onKeyPressedConnectionString = (0, react_1.useCallback)((event) => {
+        if (event.which === 13 && !event.shiftKey) {
+            event.preventDefault();
+            onSubmit();
+            return;
+        }
+    }, [onSubmit]);
     const onChangeConnectionString = (0, react_1.useCallback)((event) => {
         const newConnectionString = event.target.value;
         setEditingConnectionString(newConnectionString);
@@ -98,7 +104,7 @@ function ConnectStringInput({ connectionString, enableEditingConnectionString, s
                 react_1.default.createElement(compass_components_1.Label, { htmlFor: connectionStringInputId, id: connectionStringLabelId }, "URI"),
                 react_1.default.createElement(compass_components_1.InlineInfoLink, { "aria-label": "Connection String Documentation", "data-testid": "connectionStringDocsButton", href: "https://docs.mongodb.com/manual/reference/connection-string/" })),
             react_1.default.createElement(compass_components_1.Label, { className: editToggleLabelStyles, id: "edit-connection-string-label", htmlFor: "toggle-edit-connection-string" }, "Edit Connection String"),
-            react_1.default.createElement(compass_components_1.Toggle, { className: editToggleStyles, id: "toggle-edit-connection-string", "aria-labelledby": "edit-connection-string-label", size: "xsmall", checked: enableEditingConnectionString, onChange: (checked) => {
+            react_1.default.createElement(compass_components_1.Toggle, { className: editToggleStyles, id: "toggle-edit-connection-string", "aria-labelledby": "edit-connection-string-label", size: "xsmall", type: "button", checked: enableEditingConnectionString, onChange: (checked) => {
                     if (checked) {
                         setShowEditConnectionStringPrompt(true);
                         return;
@@ -106,7 +112,7 @@ function ConnectStringInput({ connectionString, enableEditingConnectionString, s
                     setEnableEditingConnectionString(false);
                 } })),
         react_1.default.createElement("div", { className: textAreaContainerStyle },
-            react_1.default.createElement(compass_components_1.TextArea, { onChange: onChangeConnectionString, value: displayedConnectionString, className: connectionStringStyles, disabled: !enableEditingConnectionString, id: connectionStringInputId, "data-testid": connectionStringInputId, ref: textAreaEl, "aria-labelledby": connectionStringLabelId, placeholder: "e.g mongodb+srv://username:password@cluster0-jtpxd.mongodb.net/admin", spellCheck: false }),
+            react_1.default.createElement(compass_components_1.TextArea, { onChange: onChangeConnectionString, onKeyPress: onKeyPressedConnectionString, value: displayedConnectionString, className: connectionStringStyles, disabled: !enableEditingConnectionString, id: connectionStringInputId, "data-testid": connectionStringInputId, ref: textAreaEl, "aria-labelledby": connectionStringLabelId, placeholder: "e.g mongodb+srv://username:password@cluster0-jtpxd.mongodb.net/admin", spellCheck: false }),
             react_1.default.createElement(confirm_edit_connection_string_1.default, { open: showEditConnectionStringPrompt, onCancel: () => {
                     setShowEditConnectionStringPrompt(false);
                 }, onConfirm: () => {