Skip to content

Commit 4b4f01d

Browse files
AnemyAnemy
authored
style(connect-form): Make edit connection string a toggle (#2592)
1 parent 7185a8d commit 4b4f01d

File tree

2 files changed

+97
-63
lines changed

2 files changed

+97
-63
lines changed

‎packages/connect-form/src/connection-string-input.spec.tsx‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { render, screen, fireEvent } from '@testing-library/react';
2+
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
33
import { expect } from 'chai';
44
import sinon from 'sinon';
55

@@ -128,15 +128,8 @@ describe('ConnectionStringInput Component', function () {
128128
});
129129

130130
describe('clicking confirm to edit', function () {
131-
beforeEach(function () {
132-
const button = screen.getByTestId('enableEditConnectionStringButton');
133-
fireEvent(
134-
button,
135-
new MouseEvent('click', {
136-
bubbles: true,
137-
cancelable: true,
138-
})
139-
);
131+
beforeEach(async function () {
132+
screen.getByRole('switch').click();
140133

141134
// Click confirm on the modal that opens.
142135
const confirmButton = screen.getByText('Confirm').closest('button');
@@ -147,6 +140,9 @@ describe('ConnectionStringInput Component', function () {
147140
cancelable: true,
148141
})
149142
);
143+
144+
// Wait for the modal to close.
145+
await waitFor(() => expect(screen.queryByText('Confirm')).to.not.exist);
150146
});
151147

152148
it('should remove the disabled after clicking confirm to edit', function () {
@@ -160,18 +156,31 @@ describe('ConnectionStringInput Component', function () {
160156
'mongodb+srv://turtles:pineapples@localhost/'
161157
);
162158
});
159+
160+
describe('clicking on edit connection string toggle again', function () {
161+
beforeEach(function () {
162+
// Wait for the modal to close.
163+
const toggle = screen.getByRole('switch');
164+
toggle.click();
165+
});
166+
167+
it('should add disabled on the textbox', function () {
168+
const textArea = screen.getByRole('textbox');
169+
expect(textArea).to.match('[disabled]');
170+
});
171+
172+
it('should show the censored connection string', function () {
173+
const textArea = screen.getByRole('textbox');
174+
expect(textArea).to.have.text(
175+
'mongodb+srv://turtles:*****@localhost/'
176+
);
177+
});
178+
});
163179
});
164180

165181
describe('clicking cancel on confirmation to edit', function () {
166182
beforeEach(function () {
167-
const button = screen.getByTestId('enableEditConnectionStringButton');
168-
fireEvent(
169-
button,
170-
new MouseEvent('click', {
171-
bubbles: true,
172-
cancelable: true,
173-
})
174-
);
183+
screen.getByRole('switch').click();
175184

176185
// Click cancel on the modal that opens.
177186
const cancelButton = screen.getByText('Cancel').closest('button');

‎packages/connect-form/src/connection-string-input.tsx‎

Lines changed: 70 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,57 @@
1-
import { css, cx } from '@emotion/css';
1+
import { css } from '@emotion/css';
22
import React, { ChangeEvent, Fragment, useRef, useReducer } from 'react';
33
import {
44
Icon,
55
IconButton,
66
Label,
77
TextArea,
8+
Toggle,
89
spacing,
910
} from '@mongodb-js/compass-components';
1011
import ConfirmEditConnectionString from './confirm-edit-connection-string';
1112
import ConnectionStringUrl from 'mongodb-connection-string-url';
1213

13-
const labelStyles = css({
14+
const uriLabelStyles = css({
1415
padding: 0,
1516
margin: 0,
16-
marginTop: spacing[3],
17+
flexGrow: 1,
1718
});
1819

1920
const infoButtonStyles = css({
2021
verticalAlign: 'middle',
2122
marginTop: -spacing[1],
2223
});
2324

24-
const connectionStringEditDisabled = css({
25-
textarea: {
26-
paddingRight: spacing[5],
27-
},
28-
});
29-
3025
const textAreaContainerStyle = css({
3126
position: 'relative',
3227
});
3328

34-
const editConnectionStringStyles = css({
35-
position: 'absolute',
36-
right: spacing[1],
37-
top: spacing[1],
38-
});
39-
4029
const connectionStringStyles = css({
4130
textarea: {
4231
minHeight: spacing[7],
4332
resize: 'vertical',
4433
},
4534
});
4635

36+
const editToggleStyles = css({
37+
height: 14,
38+
width: 26,
39+
margin: spacing[1],
40+
marginRight: 0,
41+
});
42+
43+
const editToggleLabelStyles = css({
44+
'&:hover': {
45+
cursor: 'pointer',
46+
},
47+
});
48+
49+
const textAreaLabelContainerStyles = css({
50+
marginTop: spacing[3],
51+
display: 'flex',
52+
flexDirection: 'row',
53+
});
54+
4755
const connectionStringInputId = 'connectionString';
4856

4957
type State = {
@@ -54,7 +62,8 @@ type State = {
5462
type Action =
5563
| { type: 'enable-editing-connection-string' }
5664
| { type: 'show-edit-connection-string-confirmation' }
57-
| { type: 'hide-edit-connection-string-confirmation' };
65+
| { type: 'hide-edit-connection-string-confirmation' }
66+
| { type: 'hide-connection-string' };
5867

5968
function reducer(state: State, action: Action): State {
6069
switch (action.type) {
@@ -69,6 +78,12 @@ function reducer(state: State, action: Action): State {
6978
...state,
7079
showConfirmEditConnectionStringPrompt: true,
7180
};
81+
case 'hide-connection-string':
82+
return {
83+
...state,
84+
showConfirmEditConnectionStringPrompt: false,
85+
enableEditingConnectionString: false,
86+
};
7287
case 'hide-edit-connection-string-confirmation':
7388
return {
7489
...state,
@@ -129,48 +144,58 @@ function ConnectStringInput({
129144

130145
return (
131146
<Fragment>
132-
<Label className={labelStyles} htmlFor={connectionStringInputId}>
133-
Connection String
134-
<IconButton
135-
className={infoButtonStyles}
136-
aria-label="Connection String Documentation"
137-
data-testid="connectionStringDocsButton"
138-
href="https://docs.mongodb.com/manual/reference/connection-string/"
139-
target="_blank"
147+
<div className={textAreaLabelContainerStyles}>
148+
<Label className={uriLabelStyles} htmlFor={connectionStringInputId}>
149+
Connection String
150+
<IconButton
151+
className={infoButtonStyles}
152+
aria-label="Connection String Documentation"
153+
data-testid="connectionStringDocsButton"
154+
href="https://docs.mongodb.com/manual/reference/connection-string/"
155+
target="_blank"
156+
>
157+
<Icon glyph="InfoWithCircle" size="small" />
158+
</IconButton>
159+
</Label>
160+
<label
161+
className={editToggleLabelStyles}
162+
id="edit-connection-string-label"
163+
htmlFor="toggle-edit-connection-string"
140164
>
141-
<Icon glyph="InfoWithCircle" size="small" />
142-
</IconButton>
143-
</Label>
165+
Edit Connection String
166+
</label>
167+
<Toggle
168+
className={editToggleStyles}
169+
id="toggle-edit-connection-string"
170+
aria-labelledby="edit-connection-string-label"
171+
size="xsmall"
172+
checked={enableEditingConnectionString}
173+
onClick={() => {
174+
if (enableEditingConnectionString) {
175+
dispatch({
176+
type: 'hide-connection-string',
177+
});
178+
return;
179+
}
180+
dispatch({
181+
type: 'show-edit-connection-string-confirmation',
182+
});
183+
}}
184+
/>
185+
</div>
144186
<div className={textAreaContainerStyle}>
145187
<TextArea
146188
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
147189
setConnectionString(event.target.value);
148190
}}
149191
value={displayedConnectionString}
150-
className={cx(
151-
connectionStringStyles,
152-
enableEditingConnectionString ? null : connectionStringEditDisabled
153-
)}
192+
className={connectionStringStyles}
154193
disabled={!enableEditingConnectionString}
155194
id={connectionStringInputId}
156195
ref={textAreaEl}
157196
aria-labelledby="Connection String"
158197
placeholder="e.g mongodb+srv://username:[email protected]/admin"
159198
/>
160-
{!enableEditingConnectionString && (
161-
<IconButton
162-
className={editConnectionStringStyles}
163-
aria-label="Edit Connection String"
164-
data-testid="enableEditConnectionStringButton"
165-
onClick={() =>
166-
dispatch({
167-
type: 'show-edit-connection-string-confirmation',
168-
})
169-
}
170-
>
171-
<Icon glyph="Edit" size="small" />
172-
</IconButton>
173-
)}
174199
<ConfirmEditConnectionString
175200
open={showConfirmEditConnectionStringPrompt}
176201
onCancel={() =>

0 commit comments

Comments
 (0)