Skip to content

Commit e582b1b

Browse files
kraenhansenkraenhansen
authored
chore(components): Upgrade LeafyGreen packages COMPASS-8870 (#6661)
* Upgrade @leafygreen-ui packages * Update IndexesTable * Update ShardZonesTable * Use more performant extended row model * Fix table height * Fix table expansion * Fix actions on indexes table * Disable truncate to ensure actions always show * Upgrade @leafygreen-ui/table * Expand the search index row only if not already expanded * Update index badge vertical alignment
1 parent f0c11ed commit e582b1b

File tree

9 files changed

+1157
-1221
lines changed

9 files changed

+1157
-1221
lines changed

‎package-lock.json

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

‎packages/compass-components/package.json

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -34,44 +34,44 @@
3434
"@dnd-kit/core": "^6.0.7",
3535
"@dnd-kit/sortable": "^7.0.2",
3636
"@dnd-kit/utilities": "^3.2.1",
37-
"@leafygreen-ui/badge": "^8.1.3",
38-
"@leafygreen-ui/banner": "^8.0.1",
39-
"@leafygreen-ui/button": "^21.3.0",
40-
"@leafygreen-ui/card": "^11.0.0",
41-
"@leafygreen-ui/checkbox": "^13.1.2",
42-
"@leafygreen-ui/code": "^15.0.0",
43-
"@leafygreen-ui/combobox": "^10.0.0",
44-
"@leafygreen-ui/confirmation-modal": "^5.2.1",
45-
"@leafygreen-ui/emotion": "^4.0.8",
46-
"@leafygreen-ui/guide-cue": "^6.0.0",
47-
"@leafygreen-ui/hooks": "^8.3.0",
48-
"@leafygreen-ui/icon": "^12.8.0",
49-
"@leafygreen-ui/icon-button": "^15.0.23",
50-
"@leafygreen-ui/info-sprinkle": "^3.0.0",
51-
"@leafygreen-ui/leafygreen-provider": "^3.2.0",
52-
"@leafygreen-ui/logo": "^9.2.0",
53-
"@leafygreen-ui/marketing-modal": "^4.2.3",
54-
"@leafygreen-ui/menu": "^27.0.0",
55-
"@leafygreen-ui/modal": "^16.1.0",
56-
"@leafygreen-ui/palette": "^4.1.1",
57-
"@leafygreen-ui/pipeline": "^6.0.0",
58-
"@leafygreen-ui/polymorphic": "^2.0.2",
59-
"@leafygreen-ui/popover": "^12.0.0",
60-
"@leafygreen-ui/portal": "^5.1.1",
61-
"@leafygreen-ui/radio-box-group": "^13.0.2",
62-
"@leafygreen-ui/radio-group": "^11.0.3",
63-
"@leafygreen-ui/search-input": "^4.0.0",
64-
"@leafygreen-ui/segmented-control": "^9.0.0",
65-
"@leafygreen-ui/select": "^13.0.0",
66-
"@leafygreen-ui/table": "^12.7.0",
67-
"@leafygreen-ui/tabs": "^13.1.1",
68-
"@leafygreen-ui/text-area": "^9.1.2",
69-
"@leafygreen-ui/text-input": "^13.1.2",
70-
"@leafygreen-ui/toast": "^6.1.28",
71-
"@leafygreen-ui/toggle": "^10.1.2",
72-
"@leafygreen-ui/tokens": "^2.11.0",
73-
"@leafygreen-ui/tooltip": "^12.0.0",
74-
"@leafygreen-ui/typography": "^19.3.0",
37+
"@leafygreen-ui/badge": "^9.0.2",
38+
"@leafygreen-ui/banner": "^9.0.2",
39+
"@leafygreen-ui/button": "^22.0.2",
40+
"@leafygreen-ui/card": "^12.0.2",
41+
"@leafygreen-ui/checkbox": "^14.0.2",
42+
"@leafygreen-ui/code": "^16.0.2",
43+
"@leafygreen-ui/combobox": "^11.0.2",
44+
"@leafygreen-ui/confirmation-modal": "^6.0.2",
45+
"@leafygreen-ui/emotion": "^4.0.9",
46+
"@leafygreen-ui/guide-cue": "^7.0.2",
47+
"@leafygreen-ui/hooks": "^8.3.4",
48+
"@leafygreen-ui/icon": "^13.1.2",
49+
"@leafygreen-ui/icon-button": "^16.0.2",
50+
"@leafygreen-ui/info-sprinkle": "^4.0.2",
51+
"@leafygreen-ui/leafygreen-provider": "^4.0.2",
52+
"@leafygreen-ui/logo": "^10.0.2",
53+
"@leafygreen-ui/marketing-modal": "^5.0.2",
54+
"@leafygreen-ui/menu": "^28.0.2",
55+
"@leafygreen-ui/modal": "^17.0.2",
56+
"@leafygreen-ui/palette": "^4.1.3",
57+
"@leafygreen-ui/pipeline": "^7.0.2",
58+
"@leafygreen-ui/polymorphic": "^2.0.5",
59+
"@leafygreen-ui/popover": "^13.0.2",
60+
"@leafygreen-ui/portal": "^6.0.2",
61+
"@leafygreen-ui/radio-box-group": "^14.0.2",
62+
"@leafygreen-ui/radio-group": "^12.0.2",
63+
"@leafygreen-ui/search-input": "^5.0.2",
64+
"@leafygreen-ui/segmented-control": "^10.0.2",
65+
"@leafygreen-ui/select": "^14.0.2",
66+
"@leafygreen-ui/table": "^13.0.1",
67+
"@leafygreen-ui/tabs": "^14.0.2",
68+
"@leafygreen-ui/text-area": "^10.0.2",
69+
"@leafygreen-ui/text-input": "^14.0.2",
70+
"@leafygreen-ui/toast": "^7.0.2",
71+
"@leafygreen-ui/toggle": "^11.0.2",
72+
"@leafygreen-ui/tokens": "^2.11.3",
73+
"@leafygreen-ui/tooltip": "^13.0.2",
74+
"@leafygreen-ui/typography": "^20.0.2",
7575
"@react-aria/interactions": "^3.9.1",
7676
"@react-aria/utils": "^3.13.1",
7777
"@react-aria/visually-hidden": "^3.3.1",

‎packages/compass-components/src/components/index-keys-badge.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import { Variant as BadgeVariant } from '@leafygreen-ui/badge';
77

88
const keyListStyles = css({
99
display: 'inline-flex',
10-
gap: spacing[1],
11-
marginBottom: spacing[2],
12-
padding: `0px ${spacing[6]}px`,
10+
gap: spacing[100],
11+
marginTop: spacing[200],
12+
marginBottom: spacing[200],
13+
paddingLeft: spacing[1600],
14+
paddingRight: spacing[1600],
1315
});
1416

1517
const badgeStyles = css({

‎packages/compass-components/src/components/leafygreen.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ import {
4949
TableBody,
5050
flexRender,
5151
useLeafyGreenTable,
52+
getExpandedRowModel,
5253
getFilteredRowModel,
5354
} from '@leafygreen-ui/table';
5455
import type { Row as LgTableRowType } from '@tanstack/table-core'; // TODO(COMPASS-8437): import from LG
@@ -169,6 +170,7 @@ export {
169170
InfoSprinkle,
170171
flexRender,
171172
useLeafyGreenTable,
173+
getExpandedRowModel,
172174
getFilteredRowModel,
173175
type LgTableRowType,
174176
Combobox,

‎packages/compass-e2e-tests/helpers/selectors.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1071,7 +1071,7 @@ export const SearchIndexConfirmButton =
10711071
export const searchIndexRow = (name: string) =>
10721072
`[data-testid="search-indexes-row-${name}"]`;
10731073
export const searchIndexExpandButton = (name: string) =>
1074-
`${searchIndexRow(name)} button:first-child`;
1074+
`${searchIndexRow(name)} button[aria-label="Expand row"]`;
10751075
export const searchIndexAggregateButton = (name: string) =>
10761076
`${searchIndexRow(
10771077
name

‎packages/compass-e2e-tests/tests/search-indexes.test.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,12 @@ async function verifyIndexDetails(
129129
const indexRow = browser.$(indexRowSelector);
130130
await indexRow.waitForDisplayed({ timeout: WAIT_TIMEOUT });
131131
await browser.hover(indexRowSelector);
132-
await browser.clickVisible(Selectors.searchIndexExpandButton(indexName));
132+
133+
// Expand the row if it's not already expanded
134+
const expandButton = browser.$(Selectors.searchIndexExpandButton(indexName));
135+
if (await expandButton.isDisplayed()) {
136+
await expandButton.click();
137+
}
133138

134139
await browser.waitUntil(async () => {
135140
const text = await browser

‎packages/compass-global-writes/src/components/shard-zones-table.tsx

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
type HeaderGroup,
1616
SearchInput,
1717
type LGTableDataType,
18+
getExpandedRowModel,
1819
getFilteredRowModel,
1920
type LgTableRowType,
2021
} from '@mongodb-js/compass-components';
@@ -23,6 +24,7 @@ import { ShardZonesDescription } from './shard-zones-description';
2324

2425
const containerStyles = css({
2526
height: '400px',
27+
overflow: 'auto',
2628
});
2729

2830
interface ShardZoneRow {
@@ -86,7 +88,6 @@ export function ShardZonesTable({
8688
}: {
8789
shardZones: ShardZoneData[];
8890
}) {
89-
const tableContainerRef = useRef<HTMLDivElement>(null);
9091
const [searchText, setSearchText] = useState<string>('');
9192
const [expanded, setExpanded] = useState<true | Record<string, boolean>>({});
9293

@@ -96,17 +97,18 @@ export function ShardZonesTable({
9697
);
9798

9899
const table = useLeafyGreenTable({
99-
containerRef: tableContainerRef,
100100
data,
101101
columns,
102102
state: {
103103
globalFilter: searchText,
104-
expanded,
104+
// Expand all matching rows when filtering
105+
expanded: searchText !== '' ? true : expanded,
105106
},
106107
onGlobalFilterChange: setSearchText,
107108
onExpandedChange: setExpanded,
108109
enableGlobalFilter: true,
109110
getFilteredRowModel: getFilteredRowModel(),
111+
getExpandedRowModel: getExpandedRowModel(),
110112
getIsRowExpanded: (row) => {
111113
return (
112114
(searchText && hasFilteredChildren(row)) ||
@@ -139,12 +141,7 @@ export function ShardZonesTable({
139141
aria-label="Search for a location"
140142
placeholder="Search for a location"
141143
/>
142-
<Table
143-
className={containerStyles}
144-
title="Zone Mapping"
145-
table={table}
146-
ref={tableContainerRef}
147-
>
144+
<Table className={containerStyles} title="Zone Mapping" table={table}>
148145
<TableHead isSticky>
149146
{table
150147
.getHeaderGroups()
@@ -168,25 +165,11 @@ export function ShardZonesTable({
168165
<Row key={row.id} row={row}>
169166
{row.getVisibleCells().map((cell) => {
170167
return (
171-
<Cell key={cell.id}>
168+
<Cell key={cell.id} cell={cell}>
172169
{flexRender(cell.column.columnDef.cell, cell.getContext())}
173170
</Cell>
174171
);
175172
})}
176-
{row.subRows.map((subRow) => (
177-
<Row key={subRow.id} row={subRow}>
178-
{subRow.getVisibleCells().map((cell) => {
179-
return (
180-
<Cell key={cell.id}>
181-
{flexRender(
182-
cell.column.columnDef.cell,
183-
cell.getContext()
184-
)}
185-
</Cell>
186-
);
187-
})}
188-
</Row>
189-
))}
190173
</Row>
191174
))}
192175
</TableBody>

‎packages/compass-indexes/src/components/indexes-table/indexes-table.tsx

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,13 @@ const rowStyles = css({
5454

5555
// When row is not hovered, we hide the delete button
5656
const indexActionsCellStyles = css({
57-
display: 'flex',
58-
justifyContent: 'flex-end',
5957
button: {
6058
opacity: 0,
6159
'&:focus': {
6260
opacity: 1,
6361
},
6462
},
65-
minWidth: spacing[5],
63+
minWidth: spacing[800],
6664
});
6765

6866
const tableHeadStyles = css({
@@ -99,13 +97,11 @@ export function IndexesTable<T>({
9997
`${id}-sorting-state`,
10098
[]
10199
);
102-
const tableContainerRef = React.useRef<HTMLDivElement>(null);
103100
const table = useLeafyGreenTable<T>({
104-
containerRef: tableContainerRef,
105101
data,
106102
columns,
107-
enableExpanding: true,
108103
enableSortingRemoval: false,
104+
withPagination: false,
109105
state: { sorting },
110106
onSortingChange: setSorting,
111107
});
@@ -120,7 +116,7 @@ export function IndexesTable<T>({
120116
className={tableStyles}
121117
data-testid={`${dataTestId}-list`}
122118
table={table}
123-
ref={tableContainerRef}
119+
shouldTruncate={false}
124120
>
125121
<TableHead
126122
isSticky
@@ -147,26 +143,30 @@ export function IndexesTable<T>({
147143
))}
148144
</TableHead>
149145
<TableBody>
150-
{rows.map((row: LeafyGreenTableRow<T>) => {
151-
return (
146+
{rows.map((row: LeafyGreenTableRow<T>) =>
147+
row.isExpandedContent ? (
148+
<ExpandedContent key={row.id} row={row} />
149+
) : (
152150
<Row
153-
className={rowStyles}
154151
key={row.id}
155152
row={row}
153+
className={rowStyles}
156154
data-testid={`${dataTestId}-row-${
157155
(row.original as { name?: string }).name ?? row.id
158156
}`}
159157
>
160158
{row.getVisibleCells().map((cell: LeafyGreenTableCell<T>) => {
159+
const isActionsCell = cell.column.id === 'actions';
161160
return (
162161
<Cell
163-
className={cx(
164-
cell.column.id === 'actions' && indexActionsCellStyles,
165-
cell.column.id === 'actions' &&
166-
indexActionsCellClassName
167-
)}
168-
data-testid={`${dataTestId}-${cell.column.id}-field`}
169162
key={cell.id}
163+
id={cell.id}
164+
cell={cell}
165+
className={cx({
166+
[indexActionsCellClassName]: isActionsCell,
167+
[indexActionsCellStyles]: isActionsCell,
168+
})}
169+
data-testid={`${dataTestId}-${cell.column.id}-field`}
170170
>
171171
{flexRender(
172172
cell.column.columnDef.cell,
@@ -175,13 +175,9 @@ export function IndexesTable<T>({
175175
</Cell>
176176
);
177177
})}
178-
179-
{row.original.renderExpandedContent && (
180-
<ExpandedContent row={row} />
181-
)}
182178
</Row>
183-
);
184-
})}
179+
)
180+
)}
185181
</TableBody>
186182
</Table>
187183
</div>

‎packages/compass-indexes/src/components/regular-indexes-table/regular-index-actions.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import semver from 'semver';
22
import React, { useCallback, useMemo } from 'react';
33
import type { GroupedItemAction } from '@mongodb-js/compass-components';
4-
import { ItemActionGroup } from '@mongodb-js/compass-components';
4+
import { css, ItemActionGroup } from '@mongodb-js/compass-components';
5+
6+
const styles = css({
7+
// Align actions with the end of the table
8+
justifyContent: 'flex-end',
9+
});
510

611
type Index = {
712
name: string;
@@ -83,9 +88,10 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
8388
return (
8489
<ItemActionGroup<IndexAction>
8590
data-testid="index-actions"
91+
className={styles}
8692
actions={indexActions}
8793
onAction={onAction}
88-
></ItemActionGroup>
94+
/>
8995
);
9096
};
9197

0 commit comments

Comments
 (0)