Skip to content

Commit 3b3475e

Browse files
github-actions[bot]github-actions[bot]
committed
Merge remote-tracking branch 'origin/main' into beta-releases
2 parents 2bd9d82 + 2aeed61 commit 3b3475e

File tree

20 files changed

+257
-123
lines changed

20 files changed

+257
-123
lines changed

‎THIRD-PARTY-NOTICES.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
The following third-party software is used by and included in **Mongodb Compass**.
2-
This document was automatically generated on Fri Sep 08 2023.
2+
This document was automatically generated on Sun Sep 10 2023.
33

44
## List of dependencies
55

‎packages/compass-components/src/components/index-icon.tsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,29 @@ import Icon from '@leafygreen-ui/icon';
33

44
type IndexDirection = number | unknown;
55

6-
const IndexIcon = ({ direction }: { direction: IndexDirection }) => {
6+
const IndexIcon = ({
7+
className,
8+
direction,
9+
}: {
10+
className?: string;
11+
direction: IndexDirection;
12+
}) => {
713
return direction === 1 ? (
8-
<Icon glyph="ArrowUp" size="small" aria-label="Ascending index" />
14+
<Icon
15+
className={className}
16+
glyph="ArrowUp"
17+
size="small"
18+
aria-label="Ascending index"
19+
/>
920
) : direction === -1 ? (
10-
<Icon glyph="ArrowDown" size="small" aria-label="Descending index" />
21+
<Icon
22+
className={className}
23+
glyph="ArrowDown"
24+
size="small"
25+
aria-label="Descending index"
26+
/>
1127
) : (
12-
<span>({String(direction)})</span>
28+
<span className={className}>({String(direction)})</span>
1329
);
1430
};
1531

‎packages/compass-explain-plan/src/components/explain-plan-side-summary.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
useDarkMode,
1111
cx,
1212
IndexBadge,
13+
IndexIcon,
1314
Icon,
1415
SignalPopover,
1516
PerformanceSignals,
@@ -47,7 +48,7 @@ const ExplainPlanSummaryStat = <T extends string | boolean | number>({
4748
value?: T;
4849
formatter?: (val: T) => string;
4950
label: ReactNode;
50-
definition: string;
51+
definition: React.ReactNode;
5152
['data-testid']?: string;
5253
}): ReactElement | null => {
5354
return React.createElement(
@@ -126,6 +127,10 @@ const indexesSummaryStyles = css({
126127
gap: spacing[2],
127128
});
128129

130+
const indexIconDescriptionStyles = css({
131+
verticalAlign: 'text-top',
132+
});
133+
129134
export const ExplainPlanSummary: React.FunctionComponent<
130135
ExplainPlanSummaryProps
131136
> = ({
@@ -258,7 +263,21 @@ export const ExplainPlanSummary: React.FunctionComponent<
258263
<ExplainPlanSummaryStat
259264
as="div"
260265
label={indexMessageText}
261-
definition="The index(es) used to fulfill the query. A value of 1 indicates an ascending index, and a value of -1 indicates a descending index."
266+
definition={
267+
<>
268+
The index(es) used to fulfill the query. A value of{' '}
269+
<IndexIcon
270+
className={indexIconDescriptionStyles}
271+
direction={1}
272+
/>{' '}
273+
indicates an ascending index, and a value of{' '}
274+
<IndexIcon
275+
className={indexIconDescriptionStyles}
276+
direction={-1}
277+
/>{' '}
278+
indicates a descending index.
279+
</>
280+
}
262281
></ExplainPlanSummaryStat>
263282
{indexKeys.map(([field, value]) => {
264283
return (

‎packages/compass-indexes/src/components/indexes-table/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './indexes-table';

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

Lines changed: 101 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
import React, { useMemo, useRef, useEffect } from 'react';
22
import {
33
css,
4+
cx,
45
Table,
56
TableHeader,
67
Row,
78
Cell,
8-
cx,
99
spacing,
1010
palette,
11-
IndexKeysBadge,
1211
KeylineCard,
1312
useDOMRect,
1413
} from '@mongodb-js/compass-components';
1514

16-
import TypeField from './type-field';
17-
import SizeField from './size-field';
18-
import UsageField from './usage-field';
19-
import PropertyField from './property-field';
20-
import type {
21-
IndexDefinition,
22-
SortColumn,
23-
SortDirection,
24-
} from '../../modules/regular-indexes';
25-
import IndexActions from './index-actions';
15+
type SortDirection = 'asc' | 'desc';
2616

2717
// When row is hovered, we show the delete button
2818
const rowStyles = css({
@@ -81,54 +71,37 @@ const spaceProviderStyles = css({
8171
overflow: 'hidden',
8272
});
8373

84-
type IndexesTableProps = {
85-
indexes: IndexDefinition[];
86-
canModifyIndex: boolean;
87-
serverVersion: string;
88-
onSortTable: (column: SortColumn, direction: SortDirection) => void;
89-
onDeleteIndex: (index: IndexDefinition) => void;
90-
onHideIndex: (name: string) => void;
91-
onUnhideIndex: (name: string) => void;
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> = {
87+
['data-testid']: string;
88+
['aria-label']: string;
89+
columns: readonly Column[];
90+
data: IndexInfo[];
91+
canModifyIndex?: boolean;
92+
onSortTable: (column: Column, direction: SortDirection) => void;
9293
};
9394

94-
export const IndexesTable: React.FunctionComponent<IndexesTableProps> = ({
95-
indexes,
95+
export function IndexesTable<Column extends string>({
96+
['data-testid']: dataTestId,
97+
['aria-label']: ariaLabel,
98+
columns: sortColumns,
9699
canModifyIndex,
97-
serverVersion,
100+
data,
98101
onSortTable,
99-
onDeleteIndex,
100-
onHideIndex,
101-
onUnhideIndex,
102-
}) => {
102+
}: IndexesTableProps<Column>) {
103103
const cardRef = useRef<HTMLDivElement>(null);
104104
const [rectProps, { height: availableHeightInContainer }] = useDOMRect();
105-
const columns = useMemo(() => {
106-
const sortColumns: SortColumn[] = [
107-
'Name and Definition',
108-
'Type',
109-
'Size',
110-
'Usage',
111-
'Properties',
112-
];
113-
const _columns = sortColumns.map((name) => {
114-
return (
115-
<TableHeader
116-
data-testid={`index-header-${name}`}
117-
label={name}
118-
key={name}
119-
className={tableHeaderStyles}
120-
handleSort={(direction) => {
121-
onSortTable(name, direction);
122-
}}
123-
/>
124-
);
125-
});
126-
// Actions column
127-
if (canModifyIndex) {
128-
_columns.push(<TableHeader label={''} className={tableHeaderStyles} />);
129-
}
130-
return _columns;
131-
}, [canModifyIndex, onSortTable]);
132105

133106
useEffect(() => {
134107
/**
@@ -165,78 +138,96 @@ export const IndexesTable: React.FunctionComponent<IndexesTableProps> = ({
165138
}
166139
}, [availableHeightInContainer]);
167140

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+
168162
return (
169163
<div className={spaceProviderStyles} {...rectProps}>
170-
<KeylineCard ref={cardRef} data-testid="indexes" className={cardStyles}>
164+
<KeylineCard
165+
ref={cardRef}
166+
data-testid={dataTestId}
167+
className={cardStyles}
168+
>
171169
<Table
172170
className={tableStyles}
173-
data={indexes}
174171
columns={columns}
175-
data-testid="indexes-list"
176-
aria-label="Indexes List Table"
172+
data={data}
173+
data-testid={`${dataTestId}-list`}
174+
aria-label={`${ariaLabel} List Table`}
177175
>
178-
{({ datum: index }) => (
179-
<Row
180-
key={index.name}
181-
data-testid={`index-row-${index.name}`}
182-
className={rowStyles}
183-
>
184-
<Cell data-testid="index-name-field" className={cellStyles}>
185-
{index.name}
186-
</Cell>
187-
<Cell data-testid="index-type-field" className={cellStyles}>
188-
<TypeField type={index.type} extra={index.extra} />
189-
</Cell>
190-
<Cell data-testid="index-size-field" className={cellStyles}>
191-
<SizeField
192-
size={index.size}
193-
relativeSize={index.relativeSize}
194-
/>
195-
</Cell>
196-
<Cell data-testid="index-usage-field" className={cellStyles}>
197-
<UsageField usage={index.usageCount} since={index.usageSince} />
198-
</Cell>
199-
<Cell data-testid="index-property-field" className={cellStyles}>
200-
<PropertyField
201-
cardinality={index.cardinality}
202-
extra={index.extra}
203-
properties={index.properties}
204-
/>
205-
</Cell>
206-
{/* Index actions column is conditional */}
207-
{canModifyIndex && (
208-
<Cell data-testid="index-actions-field" className={cellStyles}>
209-
{index.name !== '_id_' &&
210-
index.extra.status !== 'inprogress' && (
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 && (
211201
<div
212202
className={cx(
213203
indexActionsCellStyles,
214204
'index-actions-cell'
215205
)}
216206
>
217-
<IndexActions
218-
index={index}
219-
serverVersion={serverVersion}
220-
onDeleteIndex={onDeleteIndex}
221-
onHideIndex={onHideIndex}
222-
onUnhideIndex={onUnhideIndex}
223-
></IndexActions>
207+
{info.actions}
224208
</div>
225209
)}
226-
</Cell>
227-
)}
228-
<Row>
229-
<Cell
230-
className={cx(nestedRowCellStyles, cellStyles)}
231-
colSpan={canModifyIndex ? 6 : 5}
232-
>
233-
<IndexKeysBadge keys={index.fields} />
234-
</Cell>
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+
)}
235226
</Row>
236-
</Row>
237-
)}
227+
);
228+
}}
238229
</Table>
239230
</KeylineCard>
240231
</div>
241232
);
242-
};
233+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type {
1919

2020
import type { IndexView } from '../indexes-toolbar/indexes-toolbar';
2121
import { IndexesToolbar } from '../indexes-toolbar/indexes-toolbar';
22-
import { IndexesTable } from '../indexes-table/indexes-table';
22+
import { RegularIndexesTable } from '../regular-indexes-table/regular-indexes-table';
2323
import type { RootState } from '../../modules';
2424
import { SearchIndexesStatuses } from '../../modules/search-indexes';
2525

@@ -99,7 +99,7 @@ export const Indexes: React.FunctionComponent<IndexesProps> = ({
9999
{!isReadonlyView &&
100100
!error &&
101101
currentIndexesView === 'regular-indexes' && (
102-
<IndexesTable
102+
<RegularIndexesTable
103103
indexes={indexes}
104104
serverVersion={serverVersion}
105105
canModifyIndex={isWritable && !readOnly}

packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.spec.tsx renamed to packages/compass-indexes/src/components/regular-indexes-table/badge-with-icon-link.spec.tsx

File renamed without changes.

packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.tsx renamed to packages/compass-indexes/src/components/regular-indexes-table/badge-with-icon-link.tsx

File renamed without changes.

packages/compass-indexes/src/components/indexes-table/index-actions.spec.tsx renamed to packages/compass-indexes/src/components/regular-indexes-table/index-actions.spec.tsx

File renamed without changes.

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

File renamed without changes.

0 commit comments

Comments
 (0)