Skip to content

Commit ef0966b

Browse files
gribnoysupgribnoysup
authored
chore(data-modeling): replace select with combobox so that users can search the options; sort connections by status COMPASS-9410 (#6967)
* chore(data-modeling): replace select with combobox so that users can search the options; sort connections by status * fix(data-modeling): update database combobox selector * fix(e2e): update select option helper to be able to handle combobox
1 parent e09fe66 commit ef0966b

File tree

3 files changed

+75
-31
lines changed

3 files changed

+75
-31
lines changed

‎packages/compass-data-modeling/src/components/new-diagram-form.spec.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ import { changeName, createNewDiagram } from '../store/generate-diagram-wizard';
1111
import { renderWithStore } from '../../test/setup-store';
1212
import type { DataModelingStore } from '../../test/setup-store';
1313

14+
function getComboboxByTestId(testId: string) {
15+
return within(screen.getByTestId(testId)).getByRole('combobox');
16+
}
17+
1418
describe('NewDiagramForm', function () {
1519
context('enter-name step', function () {
1620
let store: DataModelingStore;
@@ -87,7 +91,7 @@ describe('NewDiagramForm', function () {
8791
);
8892
}
8993

90-
userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
94+
userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
9195
expect(screen.getByText('Conn1')).to.exist;
9296
expect(screen.getByText('Conn2')).to.exist;
9397

@@ -143,7 +147,7 @@ describe('NewDiagramForm', function () {
143147
);
144148
}
145149

146-
userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
150+
userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
147151
userEvent.click(screen.getByText('Conn2'));
148152
userEvent.click(
149153
screen.getByRole('button', {
@@ -176,7 +180,7 @@ describe('NewDiagramForm', function () {
176180

177181
{
178182
// Navigate to select db
179-
userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
183+
userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
180184
userEvent.click(screen.getByText('Conn2'));
181185
userEvent.click(
182186
screen.getByRole('button', {
@@ -190,7 +194,7 @@ describe('NewDiagramForm', function () {
190194
});
191195
}
192196

193-
userEvent.click(screen.getByTestId('new-diagram-database-selector'));
197+
userEvent.click(getComboboxByTestId('new-diagram-database-selector'));
194198
expect(screen.getByText('berlin')).to.exist;
195199
expect(screen.getByText('sample_airbnb')).to.exist;
196200

@@ -253,7 +257,7 @@ describe('NewDiagramForm', function () {
253257
);
254258
}
255259

256-
userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
260+
userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
257261
userEvent.click(screen.getByText('Conn2'));
258262
userEvent.click(
259263
screen.getByRole('button', {
@@ -293,7 +297,7 @@ describe('NewDiagramForm', function () {
293297

294298
{
295299
// Navigate to select db
296-
userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
300+
userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
297301
userEvent.click(screen.getByText('Conn2'));
298302
userEvent.click(
299303
screen.getByRole('button', {
@@ -309,7 +313,7 @@ describe('NewDiagramForm', function () {
309313

310314
{
311315
// Navigate to select colls
312-
userEvent.click(screen.getByTestId('new-diagram-database-selector'));
316+
userEvent.click(getComboboxByTestId('new-diagram-database-selector'));
313317
userEvent.click(screen.getByText('sample_airbnb'));
314318
userEvent.click(
315319
screen.getByRole('button', {
@@ -389,7 +393,7 @@ describe('NewDiagramForm', function () {
389393

390394
{
391395
// Navigate to databases list
392-
userEvent.click(screen.getByTestId('new-diagram-connection-selector'));
396+
userEvent.click(getComboboxByTestId('new-diagram-connection-selector'));
393397
userEvent.click(screen.getByText('Conn2'));
394398
userEvent.click(
395399
screen.getByRole('button', {
@@ -405,7 +409,7 @@ describe('NewDiagramForm', function () {
405409

406410
{
407411
// Navigate to collections
408-
userEvent.click(screen.getByTestId('new-diagram-database-selector'));
412+
userEvent.click(getComboboxByTestId('new-diagram-database-selector'));
409413
userEvent.click(screen.getByText('sample_airbnb'));
410414
userEvent.click(
411415
screen.getByRole('button', {

‎packages/compass-data-modeling/src/components/new-diagram-form.tsx‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@ import {
2727
ModalBody,
2828
ModalFooter,
2929
ModalHeader,
30-
Option,
31-
Select,
3230
SelectList,
3331
spacing,
3432
SpinLoader,
3533
Body,
3634
TextInput,
3735
SearchInput,
36+
Combobox,
37+
ComboboxOption,
3838
} from '@mongodb-js/compass-components';
3939

4040
const footerStyles = css({
@@ -238,6 +238,18 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
238238
onCollectionsSelectionConfirm,
239239
}) => {
240240
const connections = useConnectionsList();
241+
const [activeConnections, otherConnections] = useMemo(() => {
242+
const active = [];
243+
const other = [];
244+
for (const connection of connections) {
245+
if (connection.status === 'connected') {
246+
active.push(connection);
247+
} else {
248+
other.push(connection);
249+
}
250+
}
251+
return [active, other];
252+
}, [connections]);
241253
const {
242254
title,
243255
description,
@@ -333,22 +345,40 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
333345
case 'select-connection':
334346
return (
335347
<FormFieldContainer className={formContainerStyles}>
336-
<Select
348+
<Combobox
337349
label=""
338350
aria-label="Select connection"
339351
value={selectedConnectionId ?? ''}
340352
data-testid="new-diagram-connection-selector"
341-
onChange={onConnectionSelect}
353+
onChange={(connectionId) => {
354+
if (connectionId) {
355+
onConnectionSelect(connectionId);
356+
}
357+
}}
358+
clearable={false}
359+
multiselect={false}
342360
disabled={connections.length === 0}
343361
>
344-
{connections.map((connection) => {
362+
{activeConnections.map((connection) => {
363+
return (
364+
<ComboboxOption
365+
key={connection.info.id}
366+
value={connection.info.id}
367+
displayName={connection.title}
368+
description="Active"
369+
></ComboboxOption>
370+
);
371+
})}
372+
{otherConnections.map((connection) => {
345373
return (
346-
<Option key={connection.info.id} value={connection.info.id}>
347-
{connection.title}
348-
</Option>
374+
<ComboboxOption
375+
key={connection.info.id}
376+
value={connection.info.id}
377+
displayName={connection.title}
378+
></ComboboxOption>
349379
);
350380
})}
351-
</Select>
381+
</Combobox>
352382
{connections.length === 0 && (
353383
<Banner variant="warning">
354384
You do not have any connections, create a new connection first
@@ -359,21 +389,23 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
359389
case 'select-database':
360390
return (
361391
<FormFieldContainer>
362-
<Select
392+
<Combobox
363393
label=""
364394
aria-label="Select database"
365395
value={selectedDatabase ?? ''}
366396
data-testid="new-diagram-database-selector"
367-
onChange={onDatabaseSelect}
397+
onChange={(databaseName) => {
398+
if (databaseName) {
399+
onDatabaseSelect(databaseName);
400+
}
401+
}}
402+
clearable={false}
403+
multiselect={false}
368404
>
369405
{databases.map((db) => {
370-
return (
371-
<Option key={db} value={db}>
372-
{db}
373-
</Option>
374-
);
406+
return <ComboboxOption key={db} value={db}></ComboboxOption>;
375407
})}
376-
</Select>
408+
</Combobox>
377409
</FormFieldContainer>
378410
);
379411
case 'select-collections':
@@ -386,15 +418,17 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
386418
);
387419
}
388420
}, [
421+
activeConnections,
389422
collections,
390-
connections,
423+
connections.length,
391424
currentStep,
392425
databases,
393426
diagramName,
394427
onCollectionsSelect,
395428
onConnectionSelect,
396429
onDatabaseSelect,
397430
onNameChange,
431+
otherConnections,
398432
selectedCollections,
399433
selectedConnectionId,
400434
selectedDatabase,

‎packages/compass-e2e-tests/helpers/commands/select-option.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,19 @@ export async function selectOption(
88
optionText: string
99
): Promise<void> {
1010
// click the field's button
11-
const selectButton = browser.$(selector);
11+
const selectButton = browser.$(`${selector}`);
1212
await selectButton.waitForDisplayed();
1313
await selectButton.click();
1414

15-
const controlledMenuId: string = await selectButton.getAttribute(
16-
'aria-controls'
17-
);
15+
let controlledMenuId = await selectButton.getAttribute('aria-controls');
16+
// In leafygreen combobox we usually not immediately targeting the element
17+
// that controls the listbox, so if we haven't find it, try to look in the
18+
// element we selected
19+
if (!controlledMenuId) {
20+
controlledMenuId = await selectButton
21+
.$('[aria-controls]')
22+
.getAttribute('aria-controls');
23+
}
1824
// wait for the list to pop up
1925
const selectList = browser.$(`[id="${controlledMenuId}"][role="listbox"]`);
2026
await selectList.waitForDisplayed();

0 commit comments

Comments
 (0)