feat(connection-form): use loose connection string validation

packages/compass-connect/package.json

@@ -106,7 +106,7 @@
     "mongodb-build-info": "^1.3.0",
     "mongodb-cloud-info": "^1.1.3",
     "mongodb-connection-model": "^21.13.0",
-    "mongodb-connection-string-url": "^2.4.2",
+    "mongodb-connection-string-url": "^2.5.2",
     "mongodb-data-service": "^21.17.0",
     "mongodb-runner": "^4.8.3",
     "mongodb-shell-to-url": "^0.1.0",

packages/compass-connections/package.json

@@ -84,7 +84,7 @@
     "mocha": "^8.4.0",
     "mongodb-build-info": "^1.3.0",
     "mongodb-cloud-info": "^1.1.3",
-    "mongodb-connection-string-url": "^2.4.2",
+    "mongodb-connection-string-url": "^2.5.2",
     "mongodb-data-service": "^21.17.0",
     "nyc": "^15.1.0",
     "prettier": "2.3.2",

packages/compass-e2e-tests/package.json

@@ -56,7 +56,7 @@
     "lodash": "^4.17.21",
     "mocha": "*",
     "mongodb": "^4.4.0",
-    "mongodb-connection-string-url": "^2.4.2",
+    "mongodb-connection-string-url": "^2.5.2",
     "mongodb-log-writer": "^1.1.4",
     "mongodb-runner": "^4.8.3",
     "prettier": "*",

packages/compass-export-to-language/package.json

@@ -127,7 +127,7 @@
     "@mongodb-js/compass-logging": "^0.8.0",
     "@mongodb-js/mongodb-redux-common": "^1.9.0",
     "js-beautify": "^1.10.2",
-    "mongodb-connection-string-url": "^2.4.2",
+    "mongodb-connection-string-url": "^2.5.2",
     "react-select-plus": "^1.2.0",
     "redux-thunk": "^2.3.0"
   },

packages/compass-metrics/package.json

@@ -123,7 +123,7 @@
     "lodash.values": "^4.3.0",
     "lodash.zipobject": "^4.1.3",
     "mongodb-cloud-info": "^1.1.3",
-    "mongodb-connection-string-url": "^2.4.2"
+    "mongodb-connection-string-url": "^2.5.1"
   },
   "homepage": "https://github.com/mongodb-js/compass",
   "bugs": {

packages/connection-form/package.json

@@ -55,7 +55,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "lodash": "^4.17.21",
     "mongodb-build-info": "^1.4.0",
-    "mongodb-connection-string-url": "^2.4.2",
+    "mongodb-connection-string-url": "^2.5.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },

packages/connection-form/src/components/advanced-options-tabs/advanced-options-tabs.tsx

@@ -74,7 +74,9 @@ function AdvancedOptionsTabs({
 
   const connectionStringUrl = useMemo(() => {
     try {
-      return new ConnectionStringUrl(connectionOptions.connectionString);
+      return new ConnectionStringUrl(connectionOptions.connectionString, {
+        looseValidation: true,
+      });
     } catch (e) {
       // Return default connection string url when can't be parsed.
       return new ConnectionStringUrl(defaultConnectionString);

packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.spec.tsx

@@ -76,7 +76,7 @@ describe('AuthenticationTab Component', function () {
     });
   });
 
-  it('does not render the username/password tab when auth is set', function () {
+  it('does not render the username/password tab when auth is not set', function () {
     renderComponent({
       connectionStringUrl: new ConnectionStringUrl('mongodb://localhost'),
       updateConnectionFormField: updateConnectionFormFieldSpy,
@@ -98,4 +98,18 @@ describe('AuthenticationTab Component', function () {
     expect(screen.getByLabelText('Username')).to.be.visible;
     expect(screen.getByLabelText('Password')).to.be.visible;
   });
+
+  it('renders the username/password tab when only password is set', function () {
+    renderComponent({
+      errors: [],
+      connectionStringUrl: new ConnectionStringUrl(
+        'mongodb://:b123@localhost',
+        { looseValidation: true }
+      ),
+      updateConnectionFormField: updateConnectionFormFieldSpy,
+    });
+
+    expect(screen.getByLabelText('Username')).to.be.visible;
+    expect(screen.getByLabelText('Password')).to.be.visible;
+  });
 });

packages/connection-form/src/components/connect-form.spec.tsx

@@ -58,11 +58,8 @@ describe('ConnectForm Component', function () {
         onSaveConnectionClicked={noop}
       />
     );
-    expect(
-      screen.getByText(
-        'Invalid scheme, expected connection string to start with "mongodb://" or "mongodb+srv://"'
-      )
-    ).to.be.visible;
+    expect(screen.getByText('Invalid connection string "pineapples"')).to.be
+      .visible;
   });
 
   it('should not show to save a connection when onSaveConnectionClicked doesnt exist', function () {

packages/connection-form/src/components/connect-form.tsx

@@ -128,6 +128,28 @@ function ConnectForm({
     (error) => error.fieldName === 'connectionString'
   );
 
+  const callOnSaveConnectionClickedAndStoreErrors = async (
+    connectionInfo: ConnectionInfo
+  ): Promise<void> => {
+    try {
+      const formErrors = validateConnectionOptionsErrors(
+        connectionInfo.connectionOptions,
+        { looseValidation: false }
+      );
+      if (formErrors.length) {
+        setErrors(formErrors);
+        return;
+      }
+      await onSaveConnectionClicked?.(connectionInfo);
+    } catch (err) {
+      setErrors([
+        {
+          message: `Unable to save connection: ${(err as Error).message}`,
+        },
+      ]);
+    }
+  };
+
   return (
     <>
       <div className={formContainerStyles} data-testid="connection-form">
@@ -203,12 +225,10 @@ function ConnectForm({
                   : 'hidden'
               }
               onSaveClicked={async () => {
-                if (onSaveConnectionClicked) {
-                  await onSaveConnectionClicked({
-                    ...cloneDeep(initialConnectionInfo),
-                    connectionOptions: cloneDeep(connectionOptions),
-                  });
-                }
+                await callOnSaveConnectionClickedAndStoreErrors({
+                  ...cloneDeep(initialConnectionInfo),
+                  connectionOptions: cloneDeep(connectionOptions),
+                });
               }}
               onConnectClicked={() => {
                 const updatedConnectionOptions = cloneDeep(connectionOptions);
@@ -237,17 +257,13 @@ function ConnectForm({
           onSaveClicked={async (favoriteInfo: ConnectionFavoriteOptions) => {
             setShowSaveConnectionModal(false);
 
-            try {
-              await onSaveConnectionClicked({
-                ...cloneDeep(initialConnectionInfo),
-                connectionOptions: cloneDeep(connectionOptions),
-                favorite: {
-                  ...favoriteInfo,
-                },
-              });
-            } catch (err) {
-              setErrors([err as Error]);
-            }
+            await callOnSaveConnectionClickedAndStoreErrors({
+              ...cloneDeep(initialConnectionInfo),
+              connectionOptions: cloneDeep(connectionOptions),
+              favorite: {
+                ...favoriteInfo,
+              },
+            });
           }}
           key={initialConnectionInfo.id}
           initialFavoriteInfo={initialConnectionInfo.favorite}

packages/connection-form/src/hooks/use-connect-form.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useReducer } from 'react';
 import type { ConnectionInfo, ConnectionOptions } from 'mongodb-data-service';
 import type { MongoClientOptions, ProxyOptions } from 'mongodb';
 import { cloneDeep, isEqual } from 'lodash';
-import ConnectionStringUrl from 'mongodb-connection-string-url';
+import type ConnectionStringUrl from 'mongodb-connection-string-url';
 import type {
   ConnectionFormError,
   ConnectionFormWarning,
@@ -219,9 +219,7 @@ function handleUpdateHost({
 
     // Build a new connection string url to ensure the
     // validity of the update.
-    const newConnectionStringUrl = new ConnectionStringUrl(
-      updatedConnectionString.toString()
-    );
+    const newConnectionStringUrl = updatedConnectionString.clone();
 
     return {
       connectionOptions: {