feat(connect-form): Add new form kerberos options COMPASS-5500 (#2794)

* wip: canonicalize hostname select

* fix name attribute

* add test for canonicalize hostname

* use test ids instead of labels

* add tests for password input

* cleanup

* undo select bump

* default to none

* fix test

Author: mcasimir

packages/compass-components/src/index.ts

@@ -46,7 +46,11 @@ export { default as Modal } from '@leafygreen-ui/modal';
 export { uiColors } from '@leafygreen-ui/palette';
 export * as compassUIColors from './compass-ui-colors';
 export { default as Portal } from '@leafygreen-ui/portal';
-export { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
+export {
+  RadioBox,
+  RadioBoxGroup,
+  Size as RadioBoxSize,
+} from '@leafygreen-ui/radio-box-group';
 export { Radio, RadioGroup } from '@leafygreen-ui/radio-group';
 export {
   Select,

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

@@ -167,7 +167,6 @@ function AuthenticationDefault({
         <RadioBoxGroup
           onChange={onAuthMechanismSelected}
           id="authentication-mechanism-radio-box-group"
-          size="default"
           value={selectedAuthTab.value}
         >
           {defaultAuthMechanismOptions.map(({ title, value }) => {
@@ -177,7 +176,6 @@ function AuthenticationDefault({
                 checked={selectedAuthTab.value === value}
                 value={value}
                 key={value}
-                size="default"
               >
                 {title}
               </RadioBox>

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

@@ -1,15 +1,10 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import ConnectionStringUrl from 'mongodb-connection-string-url';
 
-import AuthenticationGssapi, {
-  GSSAPI_CANONICALIZE_HOST_NAME_LABEL,
-  GSSAPI_PRINCIPAL_NAME_LABEL,
-  GSSAPI_SERVICE_NAME_LABEL,
-  GSSAPI_SERVICE_REALM_LABEL,
-} from './authentication-gssapi';
+import AuthenticationGssapi from './authentication-gssapi';
 import type { ConnectionFormError } from '../../../utils/validation';
 import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
 
@@ -32,6 +27,8 @@ function renderComponent({
 }
 
 describe('AuthenticationGssapi Component', function () {
+  afterEach(cleanup);
+
   let updateConnectionFormFieldSpy: sinon.SinonSpy;
   beforeEach(function () {
     updateConnectionFormFieldSpy = sinon.spy();
@@ -44,7 +41,7 @@ describe('AuthenticationGssapi Component', function () {
       });
       expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
 
-      fireEvent.change(screen.getByLabelText(GSSAPI_PRINCIPAL_NAME_LABEL), {
+      fireEvent.change(screen.getByTestId('gssapi-principal-input'), {
         target: { value: 'good sandwich' },
       });
     });
@@ -65,7 +62,7 @@ describe('AuthenticationGssapi Component', function () {
       });
       expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
 
-      fireEvent.change(screen.getByLabelText(GSSAPI_SERVICE_NAME_LABEL), {
+      fireEvent.change(screen.getByTestId('gssapi-service-name-input'), {
         target: { value: 'good sandwich' },
       });
     });
@@ -87,7 +84,7 @@ describe('AuthenticationGssapi Component', function () {
       });
       expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
 
-      fireEvent.change(screen.getByLabelText(GSSAPI_SERVICE_REALM_LABEL), {
+      fireEvent.change(screen.getByTestId('gssapi-service-realm-input'), {
         target: { value: 'good sandwich' },
       });
     });
@@ -102,25 +99,136 @@ describe('AuthenticationGssapi Component', function () {
     });
   });
 
-  describe('when the canoncalize hostname is changed', function () {
+  describe('when canoncalize hostname is empty', function () {
     beforeEach(function () {
       renderComponent({
         updateConnectionFormField: updateConnectionFormFieldSpy,
       });
 
       expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
-      const checkbox = screen.getByLabelText(
-        GSSAPI_CANONICALIZE_HOST_NAME_LABEL
+    });
+
+    it('selects None', function () {
+      const radio = screen
+        .getByTestId('gssapi-canonicalize-host-name-none')
+        .closest('input');
+
+      expect(radio.checked).to.be.true;
+    });
+
+    it('updates the form field with CANONICALIZE_HOST_NAME forward', function () {
+      const button = screen.getByTestId(
+        'gssapi-canonicalize-host-name-forward'
       );
-      fireEvent.click(checkbox);
+      fireEvent.click(button);
+
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+      expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
+        key: 'CANONICALIZE_HOST_NAME',
+        type: 'update-auth-mechanism-property',
+        value: 'forward',
+      });
     });
 
-    it('calls to update the form field', function () {
+    it('updates the form field with CANONICALIZE_HOST_NAME forwardAndReverse', function () {
+      const button = screen.getByTestId(
+        'gssapi-canonicalize-host-name-forwardAndReverse'
+      );
+      fireEvent.click(button);
+
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+      expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
+        key: 'CANONICALIZE_HOST_NAME',
+        type: 'update-auth-mechanism-property',
+        value: 'forwardAndReverse',
+      });
+    });
+  });
+
+  describe('when canoncalize hostname is set', function () {
+    beforeEach(function () {
+      renderComponent({
+        updateConnectionFormField: updateConnectionFormFieldSpy,
+        connectionStringUrl: new ConnectionStringUrl(
+          'mongodb://localhost:27017/?authMechanism=GSSAPI&authSource=%24external&authMechanismProperties=CANONICALIZE_HOST_NAME%3Aforward'
+        ),
+      });
+
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
+    });
+
+    it('resets CANONICALIZE_HOST_NAME when None is selected', function () {
+      const button = screen.getByTestId('gssapi-canonicalize-host-name-none');
+      fireEvent.click(button);
+
       expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
       expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
         key: 'CANONICALIZE_HOST_NAME',
         type: 'update-auth-mechanism-property',
-        value: 'true',
+        value: '',
+      });
+    });
+  });
+
+  describe('when password is not in the connection string', function () {
+    beforeEach(function () {
+      renderComponent({
+        updateConnectionFormField: updateConnectionFormFieldSpy,
+      });
+
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
+    });
+
+    it('allows to edit the password when enter password directly is enabled', function () {
+      expect(screen.queryByTestId('gssapi-password-input')).to.not.exist;
+      const checkbox = screen.getByTestId('gssapi-password-checkbox');
+      expect(checkbox.closest('input').checked).to.be.false;
+
+      fireEvent.click(checkbox);
+
+      const passwordInput = screen.getByTestId('gssapi-password-input');
+
+      fireEvent.change(passwordInput, {
+        target: { value: 'some-password' },
+      });
+
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+      expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
+        type: 'update-password',
+        password: 'some-password',
+      });
+    });
+  });
+
+  describe('when password is in the connection string', function () {
+    beforeEach(function () {
+      renderComponent({
+        connectionStringUrl: new ConnectionStringUrl(
+          'mongodb://user:password@localhost:27017'
+        ),
+        updateConnectionFormField: updateConnectionFormFieldSpy,
+      });
+
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
+    });
+
+    it('enables the checkbox and shows the password input', function () {
+      const checkbox = screen.getByTestId('gssapi-password-checkbox');
+      expect(checkbox.closest('input').checked).to.be.true;
+      const passwordInput = screen.queryByTestId('gssapi-password-input');
+      expect(passwordInput).to.exist;
+      expect(passwordInput.closest('input').value).to.equal('password');
+    });
+
+    it('resets the password when the checkbox is unchecked', function () {
+      const checkbox = screen.getByTestId('gssapi-password-checkbox');
+      expect(checkbox.closest('input').checked).to.be.true;
+      fireEvent.click(checkbox);
+
+      expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+      expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
+        type: 'update-password',
+        password: '',
       });
     });
   });
@@ -129,6 +237,7 @@ describe('AuthenticationGssapi Component', function () {
     renderComponent({
       errors: [
         {
+          fieldTab: 'authentication',
           fieldName: 'kerberosPrincipal',
           message: 'kerberosPrincipal error',
         },