Skip to content

Commit 3c302b9

Browse files
mabaasitmabaasit
authored
chore(deps): update LG packages COMPASS-8611 (#6569)
* deps update * compile * migration * remove renderMode where possible * fix stage operator select * fix tests * fix tests * fix more tests * remove menu item * remove stacked popover component * npm bootstrap * fix label on input * use regex for test assertion * move to function call
1 parent 8945d7d commit 3c302b9

File tree

39 files changed

+1347
-1668
lines changed

39 files changed

+1347
-1668
lines changed

‎package-lock.json‎

Lines changed: 1066 additions & 1260 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -283,9 +283,7 @@ export const GroupWithSubset = ({
283283
<>
284284
<TextInput
285285
type="number"
286-
label="Number of records"
287-
// NOTE: LeafyGreen doesn't support aria-label and only understands "aria-labelledby" and "label".
288-
aria-labelledby=""
286+
aria-label="Number of records"
289287
data-testid="number-of-records-input"
290288
placeholder="Number of records"
291289
className={recordInputStyles}
@@ -339,7 +337,6 @@ export const GroupWithSubset = ({
339337
className={selectStyles}
340338
allowDeselect={false}
341339
aria-label="Select direction"
342-
usePortal={false}
343340
value={formData.sortDirection}
344341
onChange={(value: string) =>
345342
onChangeValue('sortDirection', value as SortDirection)

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,11 @@ export const LookupForm = ({
175175
/>
176176
</div>
177177
<div className={formGroup}>
178-
<Body id="lookup-stage-as-input-label" className={titleStyles}>
178+
<Body
179+
aria-label="Name of the array"
180+
id="lookup-stage-as-input-label"
181+
className={titleStyles}
182+
>
179183
as
180184
</Body>
181185
<div className={inputFieldStyles}>

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,6 @@ const MatchConditionForm = ({
168168
allowDeselect={false}
169169
placeholder={LABELS.operatorSelect}
170170
aria-label={LABELS.operatorSelect}
171-
usePortal={true}
172171
value={condition.operator}
173172
onChange={handleOperatorChange}
174173
>
@@ -197,7 +196,6 @@ const MatchConditionForm = ({
197196
allowDeselect={false}
198197
placeholder={LABELS.typeSelect}
199198
aria-label={LABELS.typeSelect}
200-
usePortal={true}
201199
value={condition.bsonType}
202200
onChange={handleBsonTypeChange}
203201
>

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.spec.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,10 @@ describe('project', function () {
7272
'street',
7373
'city',
7474
]);
75-
const selectedOptions = within(
75+
const comboboxInput = within(
7676
screen.getByTestId('project-form-field')
77-
).getAllByRole('option');
77+
).getByRole('combobox');
78+
const selectedOptions = within(comboboxInput).getAllByRole('option');
7879

7980
expect(selectedOptions).to.have.lengthOf(2);
8081
expect(within(selectedOptions[0]).getByText(/street/i)).to.exist;

‎packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx‎

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -270,55 +270,60 @@ export const FocusModeModalHeader: React.FunctionComponent<
270270
/>
271271
</div>
272272

273-
<Menu
274-
data-testid="add-stage-menu-content"
275-
className={menuStyles}
276-
open={menuOpen}
277-
setOpen={setMenuOpen}
278-
trigger={({ onClick, children }: any) => {
279-
return (
280-
<div className={controlContainerStyles}>
281-
<Button
282-
data-testid="add-stage-menu-button"
283-
size="xsmall"
284-
leftGlyph={
285-
<Icon
286-
title={null}
287-
role="presentation"
288-
glyph="PlusWithCircle"
289-
></Icon>
290-
}
291-
rightGlyph={
292-
<Icon
293-
title={null}
294-
role="presentation"
295-
glyph="CaretDown"
296-
></Icon>
297-
}
298-
onClick={onClick}
299-
>
300-
Add stage
301-
</Button>
302-
{children}
303-
</div>
304-
);
305-
}}
306-
>
307-
<MenuItem
308-
className={menuItemStyles}
309-
onClick={onAddStageAfter}
310-
data-hotkey={formatHotkey(ADD_STAGE_AFTER_HOTKEY)}
311-
>
312-
Add stage after
313-
</MenuItem>
314-
<MenuItem
315-
className={menuItemStyles}
316-
onClick={onAddStageBefore}
317-
data-hotkey={formatHotkey(ADD_STAGE_BEFORE_HOTKEY)}
273+
{/* Menu popover is rendered inside this div and positioned correctly when it opens. */}
274+
<div>
275+
<Menu
276+
data-testid="add-stage-menu-content"
277+
className={menuStyles}
278+
open={menuOpen}
279+
setOpen={setMenuOpen}
280+
trigger={({ onClick, children }: any) => {
281+
return (
282+
<div className={controlContainerStyles}>
283+
<Button
284+
data-testid="add-stage-menu-button"
285+
size="xsmall"
286+
leftGlyph={
287+
<Icon
288+
title={null}
289+
role="presentation"
290+
glyph="PlusWithCircle"
291+
></Icon>
292+
}
293+
rightGlyph={
294+
<Icon
295+
title={null}
296+
role="presentation"
297+
glyph="CaretDown"
298+
></Icon>
299+
}
300+
onClick={onClick}
301+
>
302+
Add stage
303+
</Button>
304+
{children}
305+
</div>
306+
);
307+
}}
318308
>
319-
Add stage before
320-
</MenuItem>
321-
</Menu>
309+
<MenuItem
310+
className={menuItemStyles}
311+
onClick={onAddStageAfter}
312+
data-hotkey={formatHotkey(ADD_STAGE_AFTER_HOTKEY)}
313+
data-text="Add stage after"
314+
>
315+
Add stage after
316+
</MenuItem>
317+
<MenuItem
318+
className={menuItemStyles}
319+
onClick={onAddStageBefore}
320+
data-hotkey={formatHotkey(ADD_STAGE_BEFORE_HOTKEY)}
321+
data-text="Add stage before"
322+
>
323+
Add stage before
324+
</MenuItem>
325+
</Menu>
326+
</div>
322327

323328
{showInsights && insight && <SignalPopover signals={insight} />}
324329
</div>

‎packages/compass-aggregations/src/components/stage-toolbar/option-menu.tsx‎

Lines changed: 58 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useMemo, useState } from 'react';
22
import { connect } from 'react-redux';
33
import {
44
Menu,
@@ -39,6 +39,51 @@ export const OptionMenu = ({
3939
}) => {
4040
const [menuOpen, setMenuOpen] = useState(false);
4141

42+
const menuItems = useMemo(() => {
43+
return [
44+
{
45+
label: 'Add stage after',
46+
onClick: () => {
47+
onAddStageClick(index);
48+
setMenuOpen(false);
49+
},
50+
icon: 'PlusWithCircle',
51+
},
52+
{
53+
label: 'Add stage before',
54+
onClick: () => {
55+
onAddStageClick(index - 1);
56+
setMenuOpen(false);
57+
},
58+
icon: 'PlusWithCircle',
59+
},
60+
{
61+
label: 'Delete stage',
62+
onClick: () => {
63+
onDeleteStageClick(index);
64+
setMenuOpen(false);
65+
},
66+
icon: 'Trash',
67+
},
68+
{
69+
label: 'Expand documents',
70+
onClick: () => {
71+
onExpand(index);
72+
setMenuOpen(false);
73+
},
74+
icon: 'ChevronDown',
75+
},
76+
{
77+
label: 'Collapse documents',
78+
onClick: () => {
79+
onCollapse(index);
80+
setMenuOpen(false);
81+
},
82+
icon: 'ChevronUp',
83+
},
84+
];
85+
}, [index, onAddStageClick, onDeleteStageClick, onExpand, onCollapse]);
86+
4287
return (
4388
<Menu
4489
open={menuOpen}
@@ -60,69 +105,18 @@ export const OptionMenu = ({
60105
);
61106
}}
62107
>
63-
<MenuItem
64-
onClick={() => {
65-
onAddStageClick(index);
66-
setMenuOpen(false);
67-
}}
68-
>
69-
<div className={menuItemStyles}>
70-
<Icon
71-
color={palette.gray.dark2}
72-
glyph="PlusWithCircle"
73-
size="small"
74-
/>
75-
Add stage after
76-
</div>
77-
</MenuItem>
78-
<MenuItem
79-
onClick={() => {
80-
onAddStageClick(index - 1);
81-
setMenuOpen(false);
82-
}}
83-
>
84-
<div className={menuItemStyles}>
85-
<Icon
86-
color={palette.gray.dark2}
87-
glyph="PlusWithCircle"
88-
size="small"
89-
/>
90-
Add stage before
91-
</div>
92-
</MenuItem>
93-
<MenuItem
94-
onClick={() => {
95-
onDeleteStageClick(index);
96-
setMenuOpen(false);
97-
}}
98-
>
99-
<div className={menuItemStyles}>
100-
<Icon color={palette.gray.dark2} glyph="Trash" size="small" />
101-
Delete stage
102-
</div>
103-
</MenuItem>
104-
<MenuItem
105-
onClick={() => {
106-
onExpand(index);
107-
setMenuOpen(false);
108-
}}
109-
>
110-
<div className={menuItemStyles}>
111-
<Icon color={palette.gray.dark2} glyph="ChevronDown" size="small" />
112-
Expand documents
113-
</div>
114-
</MenuItem>
115-
<MenuItem
116-
onClick={() => {
117-
onCollapse(index);
118-
setMenuOpen(false);
119-
}}
120-
>
121-
<div className={menuItemStyles}>
122-
<Icon color={palette.gray.dark2} glyph="ChevronUp" size="small" />
123-
Collapse documents
124-
</div>
125-
</MenuItem>
108+
{menuItems.map((item) => (
109+
<MenuItem
110+
key={item.label}
111+
data-text={item.label}
112+
onClick={item.onClick}
113+
>
114+
<div className={menuItemStyles}>
115+
<Icon color={palette.gray.dark2} glyph={item.icon} size="small" />
116+
{item.label}
117+
</div>
118+
</MenuItem>
119+
))}
126120
</Menu>
127121
);
128122
};

‎packages/compass-aggregations/src/components/stage-toolbar/stage-operator-select.tsx‎

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,11 @@ const comboboxStyles = css({
3434
minHeight: inputHeight,
3535
},
3636
},
37-
});
38-
39-
const comboboxPortalStyles = css({
40-
position: 'fixed',
41-
top: 0,
42-
// -4px to count for the input focus outline.
43-
left: `${comboboxOptionsLeft - 4}px`,
44-
zIndex: 1,
45-
'> div': {
37+
'> :popover-open': {
4638
width: comboxboxOptionsWidth,
4739
whiteSpace: 'normal',
40+
// -4px to count for the input focus outline.
41+
marginLeft: `${comboboxOptionsLeft - 4}px`,
4842
},
4943
});
5044

@@ -74,35 +68,28 @@ export const StageOperatorSelect = ({
7468
},
7569
[onChange, index]
7670
);
77-
const portalRef = React.useRef<HTMLDivElement | null>(null);
78-
7971
return (
80-
<React.Fragment>
81-
<div className={comboboxPortalStyles} ref={portalRef} />
82-
<Combobox
83-
value={selectedStage}
84-
disabled={isDisabled}
85-
aria-label="Select a stage operator"
86-
onChange={onStageOperatorSelected}
87-
size="default"
88-
clearable={false}
89-
data-testid="stage-operator-combobox"
90-
className={comboboxStyles}
91-
portalContainer={portalRef.current}
92-
usePortal
93-
>
94-
{stages.map((stage, index) => (
95-
<ComboboxOption
96-
data-testid={`combobox-option-stage-${stage.name}`}
97-
key={`combobox-option-stage-${index}`}
98-
value={stage.name}
99-
description={
100-
(isAtlasOnly(stage.env) ? 'Atlas only. ' : '') + stage.description
101-
}
102-
/>
103-
))}
104-
</Combobox>
105-
</React.Fragment>
72+
<Combobox
73+
value={selectedStage}
74+
disabled={isDisabled}
75+
aria-label="Select a stage operator"
76+
onChange={onStageOperatorSelected}
77+
size="default"
78+
clearable={false}
79+
data-testid="stage-operator-combobox"
80+
className={comboboxStyles}
81+
>
82+
{stages.map((stage, index) => (
83+
<ComboboxOption
84+
data-testid={`combobox-option-stage-${stage.name}`}
85+
key={`combobox-option-stage-${index}`}
86+
value={stage.name}
87+
description={
88+
(isAtlasOnly(stage.env) ? 'Atlas only. ' : '') + stage.description
89+
}
90+
/>
91+
))}
92+
</Combobox>
10693
);
10794
};
10895

0 commit comments

Comments
 (0)