Skip to content

Commit e90ed3b

Browse files
lerouxblerouxb
authored
chore: Move all Row & Cell handling into IndexesTable COMPASS-7199 (#4826)
* wip * return the mapped fields.. * onSortTable, not onSortable * no need to export the styles * Column generic
1 parent e0755c1 commit e90ed3b

File tree

2 files changed

+174
-119
lines changed

2 files changed

+174
-119
lines changed

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

Lines changed: 110 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
import React, { useRef, useEffect } from 'react';
1+
import React, { useMemo, useRef, useEffect } from 'react';
22
import {
33
css,
4+
cx,
45
Table,
6+
TableHeader,
7+
Row,
8+
Cell,
59
spacing,
610
palette,
711
KeylineCard,
812
useDOMRect,
913
} from '@mongodb-js/compass-components';
1014

15+
type SortDirection = 'asc' | 'desc';
16+
1117
// When row is hovered, we show the delete button
12-
export const rowStyles = css({
18+
const rowStyles = css({
1319
':hover': {
1420
'.index-actions-cell': {
1521
button: {
@@ -20,7 +26,7 @@ export const rowStyles = css({
2026
});
2127

2228
// When row is not hovered, we hide the delete button
23-
export const indexActionsCellStyles = css({
29+
const indexActionsCellStyles = css({
2430
button: {
2531
opacity: 0,
2632
'&:focus': {
@@ -30,19 +36,19 @@ export const indexActionsCellStyles = css({
3036
minWidth: spacing[5],
3137
});
3238

33-
export const tableHeaderStyles = css({
39+
const tableHeaderStyles = css({
3440
borderWidth: 0,
3541
borderBottomWidth: 3,
3642
'> div': {
3743
justifyContent: 'space-between',
3844
},
3945
});
4046

41-
export const cellStyles = css({
47+
const cellStyles = css({
4248
verticalAlign: 'middle',
4349
});
4450

45-
export const nestedRowCellStyles = css({
51+
const nestedRowCellStyles = css({
4652
padding: 0,
4753
});
4854

@@ -65,21 +71,35 @@ const spaceProviderStyles = css({
6571
overflow: 'hidden',
6672
});
6773

68-
export type IndexesTableProps<Shape> = {
74+
type IndexInfo = {
75+
key: string;
76+
'data-testid': string;
77+
fields: {
78+
key?: string;
79+
'data-testid': string;
80+
children: React.ReactNode;
81+
}[];
82+
actions?: React.ReactNode;
83+
details?: React.ReactNode;
84+
};
85+
86+
export type IndexesTableProps<Column extends string> = {
6987
['data-testid']: string;
7088
['aria-label']: string;
71-
columns: JSX.Element[];
72-
children: (args: { datum: Shape; index: number }) => JSX.Element;
73-
data: Shape[];
89+
columns: readonly Column[];
90+
data: IndexInfo[];
91+
canModifyIndex?: boolean;
92+
onSortTable: (column: Column, direction: SortDirection) => void;
7493
};
7594

76-
export function IndexesTable<Shape>({
95+
export function IndexesTable<Column extends string>({
7796
['data-testid']: dataTestId,
7897
['aria-label']: ariaLabel,
79-
columns,
80-
children,
98+
columns: sortColumns,
99+
canModifyIndex,
81100
data,
82-
}: IndexesTableProps<Shape>) {
101+
onSortTable,
102+
}: IndexesTableProps<Column>) {
83103
const cardRef = useRef<HTMLDivElement>(null);
84104
const [rectProps, { height: availableHeightInContainer }] = useDOMRect();
85105

@@ -118,21 +138,94 @@ export function IndexesTable<Shape>({
118138
}
119139
}, [availableHeightInContainer]);
120140

141+
const columns = useMemo(() => {
142+
const _columns = sortColumns.map((name) => {
143+
return (
144+
<TableHeader
145+
data-testid={`index-header-${name}`}
146+
label={name}
147+
key={name}
148+
className={tableHeaderStyles}
149+
handleSort={(direction: SortDirection) => {
150+
onSortTable(name, direction);
151+
}}
152+
/>
153+
);
154+
});
155+
// Actions column
156+
if (canModifyIndex) {
157+
_columns.push(<TableHeader label={''} className={tableHeaderStyles} />);
158+
}
159+
return _columns;
160+
}, [canModifyIndex, onSortTable, sortColumns]);
161+
121162
return (
122163
<div className={spaceProviderStyles} {...rectProps}>
123164
<KeylineCard
124165
ref={cardRef}
125166
data-testid={dataTestId}
126167
className={cardStyles}
127168
>
128-
<Table<Shape>
169+
<Table
129170
className={tableStyles}
130-
data={data}
131171
columns={columns}
172+
data={data}
132173
data-testid={`${dataTestId}-list`}
133174
aria-label={`${ariaLabel} List Table`}
134175
>
135-
{children}
176+
{({ datum: info, index }) => {
177+
return (
178+
<Row
179+
key={info.key}
180+
data-testid={info['data-testid']}
181+
className={rowStyles}
182+
>
183+
{info.fields.map((field) => {
184+
return (
185+
<Cell
186+
key={field.key ?? `${info.key}-${index}`}
187+
data-testid={field['data-testid']}
188+
className={cellStyles}
189+
>
190+
{field.children}
191+
</Cell>
192+
);
193+
})}
194+
{/* Index actions column is conditional */}
195+
{canModifyIndex && (
196+
<Cell
197+
data-testid="index-actions-field"
198+
className={cellStyles}
199+
>
200+
{info.actions && (
201+
<div
202+
className={cx(
203+
indexActionsCellStyles,
204+
'index-actions-cell'
205+
)}
206+
>
207+
{info.actions}
208+
</div>
209+
)}
210+
</Cell>
211+
)}
212+
{info.details && (
213+
<Row>
214+
<Cell
215+
className={cx(nestedRowCellStyles, cellStyles)}
216+
colSpan={
217+
canModifyIndex
218+
? info.fields.length + 1
219+
: info.fields.length
220+
}
221+
>
222+
{info.details}
223+
</Cell>
224+
</Row>
225+
)}
226+
</Row>
227+
);
228+
}}
136229
</Table>
137230
</KeylineCard>
138231
</div>

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

Lines changed: 64 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,14 @@
1-
import React, { useMemo } from 'react';
1+
import React from 'react';
22

3-
import {
4-
TableHeader,
5-
Row,
6-
Cell,
7-
cx,
8-
IndexKeysBadge,
9-
} from '@mongodb-js/compass-components';
3+
import { IndexKeysBadge } from '@mongodb-js/compass-components';
104

115
import TypeField from './type-field';
126
import SizeField from './size-field';
137
import UsageField from './usage-field';
148
import PropertyField from './property-field';
159
import IndexActions from './index-actions';
1610

17-
import {
18-
rowStyles,
19-
indexActionsCellStyles,
20-
tableHeaderStyles,
21-
cellStyles,
22-
nestedRowCellStyles,
23-
IndexesTable,
24-
} from '../indexes-table';
11+
import { IndexesTable } from '../indexes-table';
2512

2613
import type {
2714
IndexDefinition,
@@ -50,96 +37,71 @@ export const RegularIndexesTable: React.FunctionComponent<
5037
onUnhideIndex,
5138
onSortTable,
5239
}) => {
53-
const columns = useMemo(() => {
54-
const sortColumns: SortColumn[] = [
55-
'Name and Definition',
56-
'Type',
57-
'Size',
58-
'Usage',
59-
'Properties',
60-
];
61-
const _columns = sortColumns.map((name) => {
62-
return (
63-
<TableHeader
64-
data-testid={`index-header-${name}`}
65-
label={name}
66-
key={name}
67-
className={tableHeaderStyles}
68-
handleSort={(direction: SortDirection) => {
69-
onSortTable(name, direction);
70-
}}
71-
/>
72-
);
73-
});
74-
// Actions column
75-
if (canModifyIndex) {
76-
_columns.push(<TableHeader label={''} className={tableHeaderStyles} />);
77-
}
78-
return _columns;
79-
}, [canModifyIndex, onSortTable]);
40+
const columns = [
41+
'Name and Definition',
42+
'Type',
43+
'Size',
44+
'Usage',
45+
'Properties',
46+
] as const;
47+
48+
const data = indexes.map((index) => {
49+
return {
50+
key: index.name,
51+
'data-testid': `index-row-${index.name}`,
52+
fields: [
53+
{
54+
'data-testid': 'index-name-field',
55+
children: index.name,
56+
},
57+
{
58+
'data-testid': 'index-type-field',
59+
children: <TypeField type={index.type} extra={index.extra} />,
60+
},
61+
{
62+
'data-testid': 'index-size-field',
63+
children: (
64+
<SizeField size={index.size} relativeSize={index.relativeSize} />
65+
),
66+
},
67+
{
68+
'data-testid': 'index-usage-field',
69+
children: (
70+
<UsageField usage={index.usageCount} since={index.usageSince} />
71+
),
72+
},
73+
{
74+
'data-testid': 'index-property-field',
75+
children: (
76+
<PropertyField
77+
cardinality={index.cardinality}
78+
extra={index.extra}
79+
properties={index.properties}
80+
/>
81+
),
82+
},
83+
],
84+
actions: index.name !== '_id_' && index.extra.status !== 'inprogress' && (
85+
<IndexActions
86+
index={index}
87+
serverVersion={serverVersion}
88+
onDeleteIndex={onDeleteIndex}
89+
onHideIndex={onHideIndex}
90+
onUnhideIndex={onUnhideIndex}
91+
></IndexActions>
92+
),
93+
details: <IndexKeysBadge keys={index.fields} />,
94+
};
95+
});
8096

8197
return (
82-
<IndexesTable<IndexDefinition>
98+
<IndexesTable
8399
data-testid="indexes"
84100
aria-label="Indexes"
101+
canModifyIndex={canModifyIndex}
85102
columns={columns}
86-
data={indexes}
87-
>
88-
{({ datum: index }) => {
89-
return (
90-
<Row
91-
key={index.name}
92-
data-testid={`index-row-${index.name}`}
93-
className={rowStyles}
94-
>
95-
<Cell data-testid="index-name-field" className={cellStyles}>
96-
{index.name}
97-
</Cell>
98-
<Cell data-testid="index-type-field" className={cellStyles}>
99-
<TypeField type={index.type} extra={index.extra} />
100-
</Cell>
101-
<Cell data-testid="index-size-field" className={cellStyles}>
102-
<SizeField size={index.size} relativeSize={index.relativeSize} />
103-
</Cell>
104-
<Cell data-testid="index-usage-field" className={cellStyles}>
105-
<UsageField usage={index.usageCount} since={index.usageSince} />
106-
</Cell>
107-
<Cell data-testid="index-property-field" className={cellStyles}>
108-
<PropertyField
109-
cardinality={index.cardinality}
110-
extra={index.extra}
111-
properties={index.properties}
112-
/>
113-
</Cell>
114-
{/* Index actions column is conditional */}
115-
{canModifyIndex && (
116-
<Cell data-testid="index-actions-field" className={cellStyles}>
117-
{index.name !== '_id_' && index.extra.status !== 'inprogress' && (
118-
<div
119-
className={cx(indexActionsCellStyles, 'index-actions-cell')}
120-
>
121-
<IndexActions
122-
index={index}
123-
serverVersion={serverVersion}
124-
onDeleteIndex={onDeleteIndex}
125-
onHideIndex={onHideIndex}
126-
onUnhideIndex={onUnhideIndex}
127-
></IndexActions>
128-
</div>
129-
)}
130-
</Cell>
131-
)}
132-
<Row>
133-
<Cell
134-
className={cx(nestedRowCellStyles, cellStyles)}
135-
colSpan={canModifyIndex ? 6 : 5}
136-
>
137-
<IndexKeysBadge keys={index.fields} />
138-
</Cell>
139-
</Row>
140-
</Row>
141-
);
142-
}}
143-
</IndexesTable>
103+
data={data}
104+
onSortTable={(column, direction) => onSortTable(column, direction)}
105+
/>
144106
);
145107
};

0 commit comments

Comments
 (0)