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

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

Use loose validation in the connection form UI. This allows
editing in situations like when the URI contains no username
but a password.

* fixup: prettier

* fixup: remove strict validation that prohibits editing into invalid state

* fixup: do not allow saving invalid connection strings

* fixup: prettier

Author: addaleax

package-lock.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-connect/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-connections/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-e2e-tests/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-export-to-language/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/compass-metrics/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/package.json

@@ -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/advanced-options-tabs.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/advanced-options-tabs/authentication-tab/authentication-tab.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 () {