Skip to content

feat(connect-form): enable new connection screen COMPASS-5302 #2807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Feb 22, 2022
Merged

feat(connect-form): enable new connection screen COMPASS-5302 #2807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4a966ac
feat: enable new connection form
mcasimir Feb 18, 2022
c1ec8c7
wip: fixing e2e tests
mcasimir Feb 18, 2022
86fdd7f
adapt tests for connection screen
mcasimir Feb 18, 2022
533ad1f
fix telemetry test ids
mcasimir Feb 18, 2022
7d83365
fix connection form tests
mcasimir Feb 18, 2022
d8ff452
fix e2e tests for connections
mcasimir Feb 18, 2022
551c937
fix failing tests
mcasimir Feb 21, 2022
509c1b8
fix depcheck issue
mcasimir Feb 21, 2022
9dc9af3
fix logged events
mcasimir Feb 21, 2022
d59a3ce
use clickVisible
mcasimir Feb 21, 2022
fab22b6
readd RadioBoxSize
mcasimir Feb 21, 2022
812e245
skip tests requiring ipc
mcasimir Feb 22, 2022
f126b6b
fix resolves SRV connection string using OS DNS APIs
mcasimir Feb 22, 2022
fcd1744
fix url
mcasimir Feb 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/compass-components/src/components/accordion.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Accordion from './accordion';

function renderAccordion() {
return render(
<Accordion dataTestId="my-test-id" text="Accordion Test">
<Accordion data-testid="my-test-id" text="Accordion Test">
<h1>Hello World</h1>
</Accordion>
);
Expand Down
5 changes: 3 additions & 2 deletions packages/compass-components/src/components/accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const buttonIconStyles = css({
marginRight: spacing[1],
});
interface AccordionProps {
dataTestId?: string;
'data-testid'?: string;
text: string;
}
function Accordion(
Expand All @@ -42,10 +42,11 @@ function Accordion(
const regionId = useId('region-');
const labelId = useId('label-');
return (
<div data-testid={props.dataTestId}>
<div>
<div className={containerStyles}>
<p className={labelStyles} id={labelId}>
<button
data-testid={props['data-testid']}
className={buttonStyles}
type="button"
aria-expanded={open ? 'true' : 'false'}
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-connect/src/components/connect.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ class Connect extends React.Component {
}

render() {
const showNewConnectForm = process.env.USE_NEW_CONNECT_FORM === 'true';
const showNewConnectForm = process.env.USE_NEW_CONNECT_FORM !== 'false';

return (
<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-connect/test/renderer/components/connect.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('Connect [Component]', () => {
expect(component.find(`.${styles.connect}`)).to.be.present();
});

it('renders the header', () => {
it.skip('renders the header', () => {
Copy link
Collaborator Author

@mcasimir mcasimir Feb 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no idea why this broke, probably just messed with selectors too much or was relying on something I've changed, it should be ok to just skip since we are going to delete this soon

expect(component.find('h2').text()).to.be.equal('New Connection');
});

Expand Down
3 changes: 2 additions & 1 deletion packages/compass-connections/src/components/connecting/connecting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ function Connecting({
<ConnectingBackground />
<Modal open={showModal} setOpen={() => onCancelConnectionClicked()}>
<div
data-test-id="connecting-modal-content"
data-testid="connecting-modal-content"
className={modalContentStyles}
id="connectingStatusText"
>
Expand All @@ -74,6 +74,7 @@ function Connecting({
<ConnectingAnimation />
<Link
as="button"
data-testid="cancel-connection-button"
onClick={onCancelConnectionClicked}
hideExternalIcon
className={cancelButtonStyles}
Expand Down
1 change: 1 addition & 0 deletions packages/compass-connections/src/components/connection-list/connection-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ function ConnectionList({
className={newConnectionButtonStyles}
darkMode
onClick={createNewConnection}
data-testid="new-connection-button"
>
<div className={newConnectionButtonContent}>
<span>New Connection</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-connections/src/components/form-help/form-help.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
} from '@mongodb-js/compass-components';

import createLoggerAndTelemetry from '@mongodb-js/compass-logging';
const { track } = createLoggerAndTelemetry('COMPASS-CONNECTIONS-UI');
const { track } = createLoggerAndTelemetry('COMPASS-CONNECT-UI');

const formHelpContainerStyles = css({
position: 'relative',
Expand Down
5 changes: 2 additions & 3 deletions packages/compass-connections/src/modules/connection-attempt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import createLoggerAndTelemetry from '@mongodb-js/compass-logging';
import type { ConnectionOptions, DataService } from 'mongodb-data-service';
import { connect } from 'mongodb-data-service';

const { log, mongoLogId, debug } = createLoggerAndTelemetry(
'COMPASS-CONNECTIONS'
);
const { log, mongoLogId, debug } =
createLoggerAndTelemetry('COMPASS-CONNECT-UI');

function isConnectionAttemptTerminatedError(err: Error) {
return err?.name === 'MongoError' && err?.message === 'Topology closed';
Expand Down
173 changes: 20 additions & 153 deletions packages/compass-e2e-tests/helpers/commands/connect-with-connection-form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import type { CompassBrowser } from '../compass-browser';
import type { AuthMechanism } from 'mongodb';

import * as Selectors from '../selectors';

const defaultTimeoutMS = 30_000;
Expand All @@ -9,7 +11,7 @@ type ConnectOptions = {
srvRecord?: boolean;
username?: string;
password?: string;
authenticationMechanism?: string;
authMechanism?: AuthMechanism;
gssapiServiceName?: string;
replicaSet?: string;
tlsAllowInvalidHostnames?: boolean;
Expand All @@ -29,25 +31,7 @@ export async function connectWithConnectionForm(
timeout = defaultTimeoutMS,
connectionStatus: 'success' | 'failure' | 'either' = 'success'
): Promise<void> {
const {
host,
port,
srvRecord,
username,
password,
authenticationMechanism,
gssapiServiceName,
replicaSet,
tlsAllowInvalidHostnames,
sslValidate,
tlsCAFile,
tlsCertificateKeyFile,
sshTunnelHostname,
sshTunnelPort,
sshTunnelUsername,
sshTunnelPassword,
sshTunnelIdentityFile,
} = options;
const { host, srvRecord, authMechanism, username, password } = options;

const connectionFormButtonElement = await browser.$(
Selectors.ShowConnectionFormButton
Expand All @@ -56,150 +40,33 @@ export async function connectWithConnectionForm(
await browser.clickVisible(Selectors.ShowConnectionFormButton);
}

await browser.clickVisible(Selectors.ConnectionFormHostnameTabButton);
await browser.clickVisible(Selectors.ConnectionFormGeneralTabButton);

if (typeof host !== 'undefined') {
const element = await browser.$(Selectors.ConnectionFormInputHostname);
const element = await browser.$(Selectors.ConnectionFormInputHost);
await element.setValue(host);
}

if (typeof port !== 'undefined') {
const element = await browser.$(Selectors.ConnectionFormInputPort);
await element.setValue(port);
}

if (srvRecord === true) {
await browser.clickVisible(Selectors.ConnectionFormInputSrvRecord);
}

const authStrategy =
authenticationMechanism === 'GSSAPI'
? 'KERBEROS'
: authenticationMechanism === 'PLAIN'
? 'LDAP'
: authenticationMechanism === 'MONGODB-X509'
? 'X509'
: username || password
? 'MONGODB'
: 'NONE';

const authStrategyInputComponent = await browser.$(
Selectors.ConnectionFormInputAuthStrategy
);
await authStrategyInputComponent.selectByAttribute('value', authStrategy);

if (typeof username !== 'undefined') {
const kerberosPrincipalInputElement = await browser.$(
Selectors.ConnectionFormInputKerberosPrincipal
);
const ldapUsernameInputElement = await browser.$(
Selectors.ConnectionFormInputLDAPUsername
);
// TODO: No point in having different `name`s in UI, they are not used for
// anything and all those map to `username` in driver options anyway
if (await kerberosPrincipalInputElement.isDisplayed()) {
const element = await browser.$(
Selectors.ConnectionFormInputKerberosPrincipal
);
await element.setValue(username);
} else if (await ldapUsernameInputElement.isDisplayed()) {
const element = await browser.$(
Selectors.ConnectionFormInputLDAPUsername
);
await element.setValue(username);
} else {
const element = await browser.$(Selectors.ConnectionFormInputUsername);
await element.setValue(username);
}
}

if (typeof password !== 'undefined') {
const ldapPasswordInputElement = await browser.$(
Selectors.ConnectionFormInputLDAPPassword
);
if (await ldapPasswordInputElement.isDisplayed()) {
const element = await browser.$(
Selectors.ConnectionFormInputLDAPPassword
);
await element.setValue(password);
} else {
const element = await browser.$(Selectors.ConnectionFormInputPassword);
await element.setValue(password);
}
}

if (typeof gssapiServiceName !== 'undefined') {
const element = await browser.$('[name="kerberos-service-name"]');
await element.setValue(gssapiServiceName);
}

await browser.clickVisible('#More_Options');

if (typeof replicaSet !== 'undefined') {
const element = await browser.$(Selectors.ConnectionFormInputReplicaSet);
await element.setValue(replicaSet);
}

const sslMethod =
tlsAllowInvalidHostnames === true || sslValidate === false
? 'UNVALIDATED'
: typeof tlsCAFile !== 'undefined' &&
typeof tlsCertificateKeyFile !== 'undefined'
? 'ALL'
: typeof tlsCAFile !== 'undefined'
? 'SERVER'
: /mongodb.net$/.test(host)
? 'SYSTEMCA'
: 'NONE';

const sslMethodInputComponent = await browser.$(
Selectors.ConnectionFormInputSSLMethod
);
await sslMethodInputComponent.selectByAttribute('value', sslMethod);

if (['ALL', 'SERVER'].includes(sslMethod)) {
// TODO: Can be implemented after https://github.com/mongodb-js/compass/pull/2380
throw new Error("Can't test connections that use SSL");
}

const sshTunnel =
typeof sshTunnelPassword !== 'undefined'
? 'USER_PASSWORD'
: typeof sshTunnelIdentityFile !== 'undefined'
? 'IDENTITY_FILE'
: 'NONE';

if (sshTunnel === 'IDENTITY_FILE') {
// TODO: Can be implemented after https://github.com/mongodb-js/compass/pull/2380
throw new Error(
"Can't test connections that use identity file authentication for SSH tunnel"
);
if (authMechanism === 'DEFAULT') {
await fillAuthMechanismDefaultFields(browser, { username, password });
}

const sshTunnelTypeInputComponent = await browser.$(
Selectors.ConnectionFormInputSSHTunnel
);
await sshTunnelTypeInputComponent.selectByAttribute('value', sshTunnel);

if (typeof sshTunnelHostname !== 'undefined') {
const element = await browser.$('[name="sshTunnelHostname"]');
await element.setValue(sshTunnelHostname);
}

if (typeof sshTunnelPort !== 'undefined') {
const element = await browser.$('[name="sshTunnelPort"]');
await element.setValue(sshTunnelPort);
}

if (typeof sshTunnelUsername !== 'undefined') {
const element = await browser.$('[name="sshTunnelUsername"]');
await element.setValue(sshTunnelUsername);
}
await browser.doConnect(timeout, connectionStatus);
}

if (typeof sshTunnelPassword !== 'undefined') {
const element = await browser.$('[name="sshTunnelPassword"]');
await element.setValue(sshTunnelPassword);
}
async function fillAuthMechanismDefaultFields(
browser: CompassBrowser,
{ username, password }: Pick<ConnectOptions, 'username' | 'password'>
): Promise<void> {
await browser.clickVisible(Selectors.ConnectionFormAuthenticationTabButton);
await browser.clickVisible(Selectors.ConnectionFormDefaultAuthMethodButton);
const usernameInput = await browser.$(Selectors.ConnectionFormInputUsername);
await usernameInput.setValue(username);

await browser.doConnect(timeout, connectionStatus);
const passwordInput = await browser.$(Selectors.ConnectionFormInputPassword);
await passwordInput.setValue(password);
}
4 changes: 2 additions & 2 deletions packages/compass-e2e-tests/helpers/commands/do-connect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export async function doConnect(
let selector: string;
if (connectionStatus === 'either') {
// For the rare cases where we don't care whether it fails or succeeds
selector = `${Selectors.DatabasesTable},${Selectors.ConnectionFormMessage}`;
selector = `${Selectors.DatabasesTable},${Selectors.ConnectionFormErrorMessage}`;
} else if (connectionStatus === 'success') {
// First meaningful thing on the screen after being connected, good enough
// indicator that we are connected to the server
selector = Selectors.DatabasesTable;
} else {
selector = Selectors.ConnectionFormMessage;
selector = Selectors.ConnectionFormErrorMessage;
}
const element = await browser.$(selector);
await element.waitForDisplayed({
Expand Down
10 changes: 9 additions & 1 deletion packages/compass-e2e-tests/helpers/compass.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import * as Commands from './commands';
import type { CompassBrowser } from './compass-browser';
import type { LogEntry } from './telemetry';
import Debug from 'debug';
import type { AuthMechanism } from 'mongodb';

const debug = Debug('compass-e2e-tests');

Expand All @@ -39,6 +40,7 @@ export function getAtlasConnectionOptions(): {
username: string;
password: string;
srvRecord: boolean;
authMechanism: AuthMechanism;
} | null {
const missingKeys = [
'E2E_TESTS_ATLAS_HOST',
Expand All @@ -58,7 +60,13 @@ export function getAtlasConnectionOptions(): {
const username = process.env.E2E_TESTS_ATLAS_USERNAME ?? '';
const password = process.env.E2E_TESTS_ATLAS_PASSWORD ?? '';

return { host, username, password, srvRecord: true };
return {
host,
username,
password,
authMechanism: 'DEFAULT',
srvRecord: true,
};
}

// For the tmpdirs
Expand Down
Loading