>
+ ) => void;
beforeEach(function () {
- const connectionStringUrl = new ConnectionStringUrl(
+ testUrl = new ConnectionStringUrl(
'mongodb+srv://0ranges:p!neapp1es@localhost/?ssl=true'
);
- render(
+ const component = render(
);
+ rerender = component.rerender;
});
it('should render the TLS/SSL `On` radio box selected', function () {
@@ -32,6 +37,11 @@ describe('SchemaInput', function () {
expect(tlsOnRadioBox.getAttribute('aria-checked')).to.equal('true');
});
+ it('should render the client cert and CA file labels', function () {
+ expect(screen.getByText('Certificate Authority (.pem)')).to.be.visible;
+ expect(screen.getByText('Client Certificate (.pem)')).to.be.visible;
+ });
+
it('should render TLS/SSL `Default` and `Off` radio boxes not selected', function () {
const tlsDefaultRadioBox = screen.getAllByRole(
'radio'
@@ -46,6 +56,14 @@ describe('SchemaInput', function () {
expect(tlsOffRadioBox.getAttribute('aria-checked')).to.equal('false');
});
+ it('should render all of the checkboxes unchecked', function () {
+ const checkboxes: HTMLInputElement[] = screen.getAllByRole('checkbox');
+ expect(checkboxes.length).to.equal(3);
+ expect(checkboxes.find((checkbox) => checkbox.checked)).to.equal(
+ undefined
+ );
+ });
+
describe('when TLS/SSL default is clicked', function () {
beforeEach(function () {
const tlsDefaultRadioBox = screen.getAllByRole('radio')[0];
@@ -86,6 +104,192 @@ describe('SchemaInput', function () {
expect(updateConnectionFormFieldSpy.callCount).to.equal(0);
});
});
+
+ describe('when a tlsCAFile is chosen', function () {
+ beforeEach(async function () {
+ const fileInput = screen.getByTestId('tlsCAFile-input');
+
+ await waitFor(() =>
+ fireEvent.change(fileInput, {
+ target: {
+ files: [
+ {
+ path: 'new/caFile/path',
+ },
+ ],
+ },
+ })
+ );
+ });
+
+ it('should call to update the tlsCAFile with the chosen file', function () {
+ expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+ expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
+ type: 'update-search-param',
+ currentKey: 'tlsCAFile',
+ value: 'new/caFile/path',
+ });
+ });
+ });
+
+ describe('when a tlsCertificateKeyFile is chosen', function () {
+ beforeEach(async function () {
+ const fileInput = screen.getByTestId('tlsCertificateKeyFile-input');
+
+ await waitFor(() =>
+ fireEvent.change(fileInput, {
+ target: {
+ files: [
+ {
+ path: 'new/caFile/path',
+ },
+ ],
+ },
+ })
+ );
+ });
+
+ it('should call to update the tlsCertificateKeyFile with the chosen file', function () {
+ expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+ expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({
+ type: 'update-search-param',
+ currentKey: 'tlsCertificateKeyFile',
+ value: 'new/caFile/path',
+ });
+ });
+ });
+
+ describe('when tlsCAFile exists', function () {
+ beforeEach(function () {
+ testUrl.searchParams.set('tlsCAFile', 'pineapples');
+ rerender(
+
+ );
+ });
+
+ it('should render the filepath', function () {
+ expect(screen.getAllByText('pineapples').length).to.equal(2);
+ });
+ });
+
+ describe('when tlsCertificateKeyFile exists', function () {
+ beforeEach(function () {
+ testUrl.searchParams.set('tlsCertificateKeyFile', 'a_great_file_path');
+ rerender(
+
+ );
+ });
+
+ it('should render the filepath', function () {
+ expect(screen.getAllByText('a_great_file_path').length).to.equal(2);
+ });
+ });
+
+ describe('when tlsCertificateKeyFilePassword exists', function () {
+ beforeEach(function () {
+ testUrl.searchParams.set(
+ 'tlsCertificateKeyFilePassword',
+ 'tlsClientPassword'
+ );
+ rerender(
+
+ );
+ });
+
+ it('should render the password', function () {
+ expect(
+ screen
+ .getByTestId('tlsCertificateKeyFilePassword-input')
+ .getAttribute('type')
+ ).to.equal('password');
+ expect(screen.getByTestId('tlsCertificateKeyFilePassword-input')).to.be
+ .visible;
+ expect(
+ screen
+ .getByTestId('tlsCertificateKeyFilePassword-input')
+ .getAttribute('value')
+ ).to.equal('tlsClientPassword');
+ });
+ });
+
+ // eslint-disable-next-line mocha/no-setup-in-describe
+ [
+ 'tlsInsecure',
+ 'tlsAllowInvalidHostnames',
+ 'tlsAllowInvalidCertificates',
+ ].forEach((connectionStringTlsParam) => {
+ describe('with ', function () {
+ it('should render the checkbox not checked', function () {
+ const checkbox: HTMLInputElement = screen.getByTestId(
+ `${connectionStringTlsParam}-input`
+ );
+ expect(checkbox.checked).to.equal(false);
+ });
+
+ describe(`when ${connectionStringTlsParam} is clicked`, function () {
+ beforeEach(function () {
+ const checkboxLabel = screen.getByText(connectionStringTlsParam);
+ fireEvent.click(checkboxLabel);
+ });
+
+ it('should call to update the connection configuration to set the param to true', function () {
+ expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+ expect(
+ updateConnectionFormFieldSpy.firstCall.args[0]
+ ).to.deep.equal({
+ type: 'update-search-param',
+ currentKey: connectionStringTlsParam,
+ value: true,
+ });
+ });
+ });
+
+ describe(`when ${connectionStringTlsParam} is true`, function () {
+ beforeEach(function () {
+ testUrl.searchParams.set(connectionStringTlsParam, 'true');
+ rerender(
+
+ );
+ });
+
+ it('should render the checkbox checked', function () {
+ const checkbox: HTMLInputElement = screen.getByTestId(
+ `${connectionStringTlsParam}-input`
+ );
+ expect(checkbox.checked).to.equal(true);
+ });
+
+ describe(`when ${connectionStringTlsParam} is clicked`, function () {
+ beforeEach(function () {
+ const checkboxLabel = screen.getByText(connectionStringTlsParam);
+ fireEvent.click(checkboxLabel);
+ });
+
+ it('should call to update the connection configuration to set the param to false', function () {
+ expect(updateConnectionFormFieldSpy.callCount).to.equal(1);
+ expect(
+ updateConnectionFormFieldSpy.firstCall.args[0]
+ ).to.deep.equal({
+ type: 'delete-search-param',
+ key: connectionStringTlsParam,
+ });
+ });
+ });
+ });
+ });
+ });
});
describe('with ssl=false', function () {
@@ -107,6 +311,13 @@ describe('SchemaInput', function () {
expect(tlsOnRadioBox.getAttribute('aria-checked')).to.equal('true');
});
+ it('should render all of the checkboxes disabled', function () {
+ const checkboxes: HTMLInputElement[] = screen.getAllByRole('checkbox');
+ expect(checkboxes.find((checkbox) => !checkbox.disabled)).to.equal(
+ undefined
+ );
+ });
+
describe('when TLS/SSL off is clicked', function () {
beforeEach(function () {
const standardSchemaRadioBox = screen.getAllByRole('radio')[2];
diff --git a/packages/connect-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx b/packages/connect-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx
index ee037314375..86762310773 100644
--- a/packages/connect-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx
+++ b/packages/connect-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx
@@ -1,23 +1,40 @@
import React, { useCallback } from 'react';
import {
+ Checkbox,
Description,
+ Icon,
+ IconButton,
Label,
RadioBox,
RadioBoxGroup,
spacing,
+ uiColors,
css,
+ cx,
} from '@mongodb-js/compass-components';
import ConnectionStringUrl from 'mongodb-connection-string-url';
import type { MongoClientOptions } from 'mongodb';
import { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
import FormFieldContainer from '../../form-field-container';
+import TLSClientCertificate from './tls-client-certificate';
+import TLSCertificateAuthority from './tls-certificate-authority';
import { TLS_OPTIONS } from '../../../utils/tls-options';
-const descriptionStyles = css({
+const tlsDescriptionStyles = css({
marginTop: spacing[1],
});
+const infoButtonStyles = css({
+ verticalAlign: 'middle',
+ marginTop: -spacing[2],
+ marginBottom: -spacing[2],
+});
+
+const disabledCheckboxDescriptionStyles = css({
+ color: uiColors.gray.light1,
+});
+
const TLS_TYPES: {
value: TLS_OPTIONS;
label: string;
@@ -96,11 +113,67 @@ function TLSTab({
[updateConnectionFormField]
);
+ const tlsOptionFields: {
+ name: keyof MongoClientOptions;
+ description: string;
+ checked: boolean;
+ }[] = [
+ {
+ name: 'tlsInsecure',
+ description:
+ 'This includes tlsAllowInvalidHostnames and tlsAllowInvalidCertificates. This is not recommended as disabling certificate validation creates a vulnerability.',
+ checked: connectionStringUrl.searchParams.get('tlsInsecure') === 'true',
+ },
+ {
+ name: 'tlsAllowInvalidHostnames',
+ description:
+ 'This disables the validation of the hostnames in the certificate presented by the mongod/mongos instance.',
+ checked:
+ connectionStringUrl.searchParams.get('tlsAllowInvalidHostnames') ===
+ 'true',
+ },
+ {
+ name: 'tlsAllowInvalidCertificates',
+ description:
+ 'This disables validating the server certificates. This is not recommended as it creates a vulnerability to expired mongod and mongos certificates as well as to foreign processes posing as valid mongod or mongos instances.',
+ checked:
+ connectionStringUrl.searchParams.get('tlsAllowInvalidCertificates') ===
+ 'true',
+ },
+ ];
+
+ const tlsOptionsDisabled = tlsOption !== 'ON';
+
+ const handleFieldChanged = useCallback(
+ (key: keyof MongoClientOptions, value: unknown) => {
+ if (!value) {
+ return updateConnectionFormField({
+ type: 'delete-search-param',
+ key,
+ });
+ }
+ return updateConnectionFormField({
+ type: 'update-search-param',
+ currentKey: key,
+ value,
+ });
+ },
+ [updateConnectionFormField]
+ );
+
return (
{TLS_TYPES.map((tlsType) => (
@@ -109,11 +182,54 @@ function TLSTab({
))}
-
+
{TLS_TYPES.find((tlsType) => tlsType.value === tlsOption)
?.description || ''}
+ {
+ handleFieldChanged('tlsCAFile', newCertificatePath);
+ }}
+ />
+ {
+ handleFieldChanged('tlsCertificateKeyFile', newCertificatePath);
+ }}
+ updateTLSClientCertificatePassword={(
+ newCertificatePath: string | null
+ ) => {
+ handleFieldChanged(
+ 'tlsCertificateKeyFilePassword',
+ newCertificatePath
+ );
+ }}
+ />
+ {tlsOptionFields.map((tlsOptionField) => (
+
+ ) => {
+ handleFieldChanged(tlsOptionField.name, event.target.checked);
+ }}
+ data-testid={`${tlsOptionField.name}-input`}
+ label={tlsOptionField.name}
+ disabled={tlsOptionsDisabled}
+ checked={tlsOptionField.checked}
+ bold={false}
+ />
+
+ {tlsOptionField.description}
+
+
+ ))}
);
}
diff --git a/packages/connect-form/src/components/connect-form.tsx b/packages/connect-form/src/components/connect-form.tsx
index 2af20715224..3d0f9b728cc 100644
--- a/packages/connect-form/src/components/connect-form.tsx
+++ b/packages/connect-form/src/components/connect-form.tsx
@@ -21,9 +21,7 @@ const formContainerStyles = css({
margin: 0,
padding: 0,
height: 'fit-content',
- flexGrow: 1,
- minWidth: 650,
- maxWidth: 760,
+ width: 700,
position: 'relative',
display: 'inline-block',
});
diff --git a/packages/connect-form/src/components/form-field-container.tsx b/packages/connect-form/src/components/form-field-container.tsx
index 76426938e5b..e333f0563bc 100644
--- a/packages/connect-form/src/components/form-field-container.tsx
+++ b/packages/connect-form/src/components/form-field-container.tsx
@@ -1,4 +1,4 @@
-import { spacing, css } from '@mongodb-js/compass-components';
+import { spacing, css, cx } from '@mongodb-js/compass-components';
import React from 'react';
const formFieldContainerStyles = css({
@@ -6,11 +6,15 @@ const formFieldContainerStyles = css({
});
function FormFieldContainer({
+ className = '',
children,
}: {
+ className?: string;
children: React.ReactNode;
}): React.ReactElement {
- return {children}
;
+ return (
+ {children}
+ );
}
export default FormFieldContainer;