feat(connect-form): Add PLAIN and x509 auth mechanisms COMPASS-5436, COMPASS-5437 (#2729)

* add ldap auth

* add x509 auth

* fix display error and add improve info for x509

Author: mcasimir

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import ConnectionStringUrl from 'mongodb-connection-string-url';
+
+import AuthenticationPlain, {
+  PLAIN_USERNAME_LABEL,
+  PLAIN_PASSWORD_LABEL,
+} from './authentication-plain';
+import { ConnectionFormError } from '../../../utils/validation';
+import { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
+
+function renderComponent({
+  errors = [],
+  connectionStringUrl = new ConnectionStringUrl('mongodb://localhost:27017'),
+  updateConnectionFormField,
+}: {
+  connectionStringUrl?: ConnectionStringUrl;
+  errors?: ConnectionFormError[];
+  updateConnectionFormField: UpdateConnectionFormField;
+}) {
+  render(
+    <AuthenticationPlain
+      errors={errors}
+      connectionStringUrl={connectionStringUrl}
+      updateConnectionFormField={updateConnectionFormField}
+    />
+  );
+}
+
+describe('AuthenticationAws Component', function () {
+  let updateConnectionFormFieldSpy: sinon.SinonSpy;
+  beforeEach(function () {
+    updateConnectionFormFieldSpy = sinon.spy();
+  });
+
+  describe('when the username input is changed', function () {
+    beforeEach(function () {
+      renderComponent({
+        updateConnectionFormField: updateConnectionFormFieldSpy,
+      });
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
+
+      fireEvent.change(screen.getByLabelText(PLAIN_USERNAME_LABEL), {
+        target: { value: 'good sandwich' },
+      });
+    });
+
+    it('calls to update the form field', function () {
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+      expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
+        type: 'update-username',
+        username: 'good sandwich',
+      });
+    });
+  });
+
+  describe('when the password input is changed', function () {
+    beforeEach(function () {
+      renderComponent({
+        updateConnectionFormField: updateConnectionFormFieldSpy,
+      });
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
+
+      fireEvent.change(screen.getByLabelText(PLAIN_PASSWORD_LABEL), {
+        target: { value: 'good sandwich' },
+      });
+    });
+
+    it('calls to update the form field', function () {
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+      expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
+        type: 'update-password',
+        password: 'good sandwich',
+      });
+    });
+  });
+
+  it('renders a username error when there is a username error', function () {
+    renderComponent({
+      errors: [
+        {
+          fieldName: 'username',
+          message: 'username error',
+        },
+      ],
+      updateConnectionFormField: updateConnectionFormFieldSpy,
+    });
+
+    expect(screen.getByText('username error')).to.be.visible;
+  });
+
+  it('renders a password error when there is a password error', function () {
+    renderComponent({
+      errors: [
+        {
+          fieldName: 'password',
+          message: 'password error',
+        },
+      ],
+      updateConnectionFormField: updateConnectionFormFieldSpy,
+    });
+
+    expect(screen.getByText('password error')).to.be.visible;
+  });
+});

packages/connect-form/src/components/advanced-options-tabs/authentication-tab/authentication-plain.tsx

@@ -1,9 +1,70 @@
 import React from 'react';
+import { TextInput } from '@mongodb-js/compass-components';
+
+import ConnectionStringUrl from 'mongodb-connection-string-url';
+import { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
+import FormFieldContainer from '../../form-field-container';
+import {
+  ConnectionFormError,
+  errorMessageByFieldName,
+} from '../../../utils/validation';
+import {
+  getConnectionStringPassword,
+  getConnectionStringUsername,
+} from '../../../utils/connection-string-helpers';
+
+export const PLAIN_USERNAME_LABEL = 'Username';
+export const PLAIN_PASSWORD_LABEL = 'Password';
+
+function AuthenticationPlain({
+  connectionStringUrl,
+  updateConnectionFormField,
+  errors,
+}: {
+  connectionStringUrl: ConnectionStringUrl;
+  errors: ConnectionFormError[];
+  updateConnectionFormField: UpdateConnectionFormField;
+}): React.ReactElement {
+  const username = getConnectionStringUsername(connectionStringUrl);
+  const password = getConnectionStringPassword(connectionStringUrl);
+  const usernameError = errorMessageByFieldName(errors, 'username');
+  const passwordError = errorMessageByFieldName(errors, 'password');
 
-function AuthenticationPlain(): React.ReactElement {
   return (
     <>
-      <p>LDAP</p>
+      <FormFieldContainer>
+        <TextInput
+          onChange={({
+            target: { value },
+          }: React.ChangeEvent<HTMLInputElement>) => {
+            updateConnectionFormField({
+              type: 'update-username',
+              username: value,
+            });
+          }}
+          label={PLAIN_USERNAME_LABEL}
+          value={username || ''}
+          errorMessage={usernameError}
+          state={usernameError ? 'error' : undefined}
+        />
+      </FormFieldContainer>
+      <FormFieldContainer>
+        <TextInput
+          onChange={({
+            target: { value },
+          }: React.ChangeEvent<HTMLInputElement>) => {
+            updateConnectionFormField({
+              type: 'update-password',
+              password: value,
+            });
+          }}
+          label={PLAIN_PASSWORD_LABEL}
+          type="password"
+          value={password || ''}
+          errorMessage={passwordError}
+          state={passwordError ? 'error' : undefined}
+        />
+      </FormFieldContainer>
     </>
   );
 }

packages/connect-form/src/components/advanced-options-tabs/authentication-tab/authentication-x509.tsx

@@ -1,9 +1,14 @@
+import { Banner, BannerVariant } from '@mongodb-js/compass-components';
 import React from 'react';
 
 function AuthenticationX509(): React.ReactElement {
   return (
     <>
-      <p>X.509</p>
+      <Banner variant={BannerVariant.Info}>
+        X.509 Authentication type requires a <strong>Client Certificate</strong>{' '}
+        to work. Make sure to enable TLS and add one in the{' '}
+        <strong>TLS/SSL</strong> tab.
+      </Banner>
     </>
   );
 }

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

@@ -430,10 +430,15 @@ export function handleConnectionFormFieldUpdate(
         authMechanismProperties.delete(action.key);
       }
 
-      updatedSearchParams.set(
-        'authMechanismProperties',
-        authMechanismProperties.toString()
-      );
+      const authMechanismPropertiesString = authMechanismProperties.toString();
+      if (authMechanismPropertiesString) {
+        updatedSearchParams.set(
+          'authMechanismProperties',
+          authMechanismPropertiesString
+        );
+      } else {
+        updatedSearchParams.delete('authMechanismProperties');
+      }
 
       return {
         connectionOptions: {

packages/connect-form/src/utils/validation.ts

@@ -9,8 +9,6 @@ export type FieldName =
   | 'hosts'
   | 'isSrv'
   | 'kerberosPrincipal'
-  | 'ldapPassword'
-  | 'ldapUsername'
   | 'password'
   | 'schema'
   | 'proxyHostname'