Skip to content

Commit 6149f3d

Browse files
snioksniok
authored
Merge pull request #3993 from sniok/fix-default-table-sorting
frontend: ResourceTable: Correctly use age as a default sorting column
2 parents 71b11a9 + 2d8eca1 commit 6149f3d

File tree

48 files changed

+420
-462
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+420
-462
lines changed

‎frontend/src/components/advancedSearch/__snapshots__/ResourceSearch.Default.stories.storyshot‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -223,11 +223,12 @@
223223
</div>
224224
</th>
225225
<th
226-
aria-sort="none"
226+
aria-sort="ascending"
227227
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-pksupb-MuiTableCell-root"
228228
colspan="1"
229229
data-can-sort="true"
230230
data-index="-1"
231+
data-sort="asc"
231232
scope="col"
232233
>
233234
<div
@@ -242,26 +243,25 @@
242243
Name
243244
</div>
244245
<span
245-
aria-label="Sort by Name ascending"
246+
aria-label="Sorted by Name ascending"
246247
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
247248
data-mui-internal-clone-element="true"
248249
>
249250
<span
250-
aria-label="Sort by Name ascending"
251-
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-542clt-MuiButtonBase-root-MuiTableSortLabel-root"
251+
aria-label="Sorted by Name ascending"
252+
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-kfi25q-MuiButtonBase-root-MuiTableSortLabel-root"
252253
role="button"
253254
tabindex="0"
254255
>
255256
<svg
256257
aria-hidden="true"
257258
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
258-
data-testid="SyncAltIcon"
259+
data-testid="ArrowDownwardIcon"
259260
focusable="false"
260-
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
261261
viewBox="0 0 24 24"
262262
>
263263
<path
264-
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
264+
d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
265265
/>
266266
</svg>
267267
</span>

‎frontend/src/components/common/Resource/ResourceTable.tsx‎

Lines changed: 11 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -115,16 +115,9 @@ export type ColumnType = 'age' | 'name' | 'namespace' | 'type' | 'kind' | 'clust
115115

116116
/**
117117
* Default column ID to use for sorting when no explicit default is provided.
118-
* This provides a consistent fallback behavior across all resource tables.
119118
*/
120119
const DEFAULT_SORT_COLUMN_ID = 'age';
121120

122-
/**
123-
* Column IDs that are preferred for default sorting, in order of preference.
124-
* The first available column from this list will be used as the default sort column.
125-
*/
126-
const PREFERRED_SORT_COLUMNS = ['age', 'name'] as const;
127-
128121
/**
129122
* Maximum length for generated table IDs to avoid overly long localStorage keys.
130123
*/
@@ -371,14 +364,21 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
371364

372365
const [sorting, setSorting] = useLocalStorageState<MRT_SortingState>(
373366
`table_sorting.${tableId}`,
374-
[]
367+
// Initial sorting state
368+
defaultSortingColumn
369+
? // If default sorting column is provided, use that
370+
[defaultSortingColumn]
371+
: // Otherwise fallback to age column, if it exists
372+
columns.find(it => typeof it === 'string' && it === DEFAULT_SORT_COLUMN_ID)
373+
? [{ id: DEFAULT_SORT_COLUMN_ID, desc: false }]
374+
: []
375375
);
376376

377377
const [tableSettings] = useState<{ id: string; show: boolean }[]>(
378378
!!id ? loadTableSettings(id) : []
379379
);
380380

381-
const [allColumns, sort] = useMemo(() => {
381+
const [allColumns] = useMemo(() => {
382382
let processedColumns = columns;
383383

384384
if (!noProcessing) {
@@ -514,46 +514,7 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
514514
TableColumn<RowItem> & { gridTemplate?: string | number }
515515
>;
516516

517-
let sort = undefined;
518-
519-
// Use current sorting state first (if it exists)
520-
if (sorting && sorting.length > 0) {
521-
sort = sorting[0];
522-
} else {
523-
// If no persisted sorting, fall back to default
524-
if (defaultSortingColumn) {
525-
// Use explicitly provided default
526-
sort = {
527-
id: defaultSortingColumn.id,
528-
desc: defaultSortingColumn.desc,
529-
};
530-
} else {
531-
// Fall back to preferred columns in order, or first sortable column
532-
let fallbackColumn = null;
533-
534-
// Try preferred columns in order
535-
for (const preferredId of PREFERRED_SORT_COLUMNS) {
536-
fallbackColumn = allColumns.find(
537-
col => col.id === preferredId && col.enableSorting !== false
538-
);
539-
if (fallbackColumn) break;
540-
}
541-
542-
// If no preferred column found, use first sortable column
543-
if (!fallbackColumn) {
544-
fallbackColumn = allColumns.find(col => col.enableSorting !== false);
545-
}
546-
547-
if (fallbackColumn) {
548-
sort = {
549-
id: fallbackColumn.id!,
550-
desc: fallbackColumn.id === DEFAULT_SORT_COLUMN_ID, // Age column defaults to desc (newest first)
551-
};
552-
}
553-
}
554-
}
555-
556-
return [allColumns, sort];
517+
return [allColumns];
557518
}, [
558519
columns,
559520
hideColumns,
@@ -646,16 +607,13 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
646607
});
647608
}
648609

649-
const initialState: ComponentProps<typeof Table<RowItem>>['initialState'] = {
650-
sorting: sort ? [sort] : undefined,
651-
};
610+
const initialState: ComponentProps<typeof Table<RowItem>>['initialState'] = {};
652611

653612
if (defaultGlobalFilter) {
654613
initialState.globalFilter = defaultGlobalFilter;
655614
initialState.showGlobalFilter = true;
656615
}
657616

658-
// Create a type-safe sorting handler that's compatible with MRT's OnChangeFn type
659617
const handleSortingChange = useCallback(
660618
(updaterOrValue: MRT_SortingState | ((old: MRT_SortingState) => MRT_SortingState)) => {
661619
setSorting(old => {

‎frontend/src/components/common/Resource/__snapshots__/ResourceListView.OneHiddenColumn.stories.storyshot‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -319,11 +319,12 @@
319319
</div>
320320
</th>
321321
<th
322-
aria-sort="none"
322+
aria-sort="ascending"
323323
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-7mz8xn-MuiTableCell-root"
324324
colspan="1"
325325
data-can-sort="true"
326326
data-index="-1"
327+
data-sort="asc"
327328
scope="col"
328329
>
329330
<div
@@ -338,26 +339,25 @@
338339
Age
339340
</div>
340341
<span
341-
aria-label="Sort by Age descending"
342+
aria-label="Sorted by Age ascending"
342343
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
343344
data-mui-internal-clone-element="true"
344345
>
345346
<span
346-
aria-label="Sort by Age descending"
347-
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-542clt-MuiButtonBase-root-MuiTableSortLabel-root"
347+
aria-label="Sorted by Age ascending"
348+
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-kfi25q-MuiButtonBase-root-MuiTableSortLabel-root"
348349
role="button"
349350
tabindex="0"
350351
>
351352
<svg
352353
aria-hidden="true"
353354
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
354-
data-testid="SyncAltIcon"
355+
data-testid="ArrowDownwardIcon"
355356
focusable="false"
356-
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
357357
viewBox="0 0 24 24"
358358
>
359359
<path
360-
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
360+
d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
361361
/>
362362
</svg>
363363
</span>

‎frontend/src/components/common/Resource/__snapshots__/ResourceTable.NameSearch.stories.storyshot‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -244,11 +244,12 @@
244244
</div>
245245
</th>
246246
<th
247-
aria-sort="none"
247+
aria-sort="ascending"
248248
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-7mz8xn-MuiTableCell-root"
249249
colspan="1"
250250
data-can-sort="true"
251251
data-index="-1"
252+
data-sort="asc"
252253
scope="col"
253254
>
254255
<div
@@ -263,26 +264,25 @@
263264
Age
264265
</div>
265266
<span
266-
aria-label="Sort by Age descending"
267+
aria-label="Sorted by Age ascending"
267268
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
268269
data-mui-internal-clone-element="true"
269270
>
270271
<span
271-
aria-label="Sort by Age descending"
272-
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-542clt-MuiButtonBase-root-MuiTableSortLabel-root"
272+
aria-label="Sorted by Age ascending"
273+
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-kfi25q-MuiButtonBase-root-MuiTableSortLabel-root"
273274
role="button"
274275
tabindex="0"
275276
>
276277
<svg
277278
aria-hidden="true"
278279
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
279-
data-testid="SyncAltIcon"
280+
data-testid="ArrowDownwardIcon"
280281
focusable="false"
281-
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
282282
viewBox="0 0 24 24"
283283
>
284284
<path
285-
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
285+
d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
286286
/>
287287
</svg>
288288
</span>

‎frontend/src/components/common/Resource/__snapshots__/ResourceTable.NoFilter.stories.storyshot‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -244,11 +244,12 @@
244244
</div>
245245
</th>
246246
<th
247-
aria-sort="none"
247+
aria-sort="ascending"
248248
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-7mz8xn-MuiTableCell-root"
249249
colspan="1"
250250
data-can-sort="true"
251251
data-index="-1"
252+
data-sort="asc"
252253
scope="col"
253254
>
254255
<div
@@ -263,26 +264,25 @@
263264
Age
264265
</div>
265266
<span
266-
aria-label="Sort by Age descending"
267+
aria-label="Sorted by Age ascending"
267268
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
268269
data-mui-internal-clone-element="true"
269270
>
270271
<span
271-
aria-label="Sort by Age descending"
272-
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-542clt-MuiButtonBase-root-MuiTableSortLabel-root"
272+
aria-label="Sorted by Age ascending"
273+
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-kfi25q-MuiButtonBase-root-MuiTableSortLabel-root"
273274
role="button"
274275
tabindex="0"
275276
>
276277
<svg
277278
aria-hidden="true"
278279
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
279-
data-testid="SyncAltIcon"
280+
data-testid="ArrowDownwardIcon"
280281
focusable="false"
281-
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
282282
viewBox="0 0 24 24"
283283
>
284284
<path
285-
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
285+
d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
286286
/>
287287
</svg>
288288
</span>

‎frontend/src/components/common/Resource/__snapshots__/ResourceTable.WithHiddenCols.stories.storyshot‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -189,11 +189,12 @@
189189
</div>
190190
</th>
191191
<th
192-
aria-sort="none"
192+
aria-sort="ascending"
193193
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-7mz8xn-MuiTableCell-root"
194194
colspan="1"
195195
data-can-sort="true"
196196
data-index="-1"
197+
data-sort="asc"
197198
scope="col"
198199
>
199200
<div
@@ -208,26 +209,25 @@
208209
Age
209210
</div>
210211
<span
211-
aria-label="Sort by Age descending"
212+
aria-label="Sorted by Age ascending"
212213
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
213214
data-mui-internal-clone-element="true"
214215
>
215216
<span
216-
aria-label="Sort by Age descending"
217-
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-542clt-MuiButtonBase-root-MuiTableSortLabel-root"
217+
aria-label="Sorted by Age ascending"
218+
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-kfi25q-MuiButtonBase-root-MuiTableSortLabel-root"
218219
role="button"
219220
tabindex="0"
220221
>
221222
<svg
222223
aria-hidden="true"
223224
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
224-
data-testid="SyncAltIcon"
225+
data-testid="ArrowDownwardIcon"
225226
focusable="false"
226-
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
227227
viewBox="0 0 24 24"
228228
>
229229
<path
230-
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
230+
d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
231231
/>
232232
</svg>
233233
</span>

‎frontend/src/components/configmap/__snapshots__/List.Items.stories.storyshot‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -475,11 +475,12 @@
475475
</div>
476476
</th>
477477
<th
478-
aria-sort="none"
478+
aria-sort="ascending"
479479
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-7mz8xn-MuiTableCell-root"
480480
colspan="1"
481481
data-can-sort="true"
482482
data-index="-1"
483+
data-sort="asc"
483484
scope="col"
484485
>
485486
<div
@@ -494,26 +495,25 @@
494495
Age
495496
</div>
496497
<span
497-
aria-label="Sort by Age descending"
498+
aria-label="Sorted by Age ascending"
498499
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
499500
data-mui-internal-clone-element="true"
500501
>
501502
<span
502-
aria-label="Sort by Age descending"
503-
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-542clt-MuiButtonBase-root-MuiTableSortLabel-root"
503+
aria-label="Sorted by Age ascending"
504+
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-kfi25q-MuiButtonBase-root-MuiTableSortLabel-root"
504505
role="button"
505506
tabindex="0"
506507
>
507508
<svg
508509
aria-hidden="true"
509510
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
510-
data-testid="SyncAltIcon"
511+
data-testid="ArrowDownwardIcon"
511512
focusable="false"
512-
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
513513
viewBox="0 0 24 24"
514514
>
515515
<path
516-
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
516+
d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
517517
/>
518518
</svg>
519519
</span>

0 commit comments

Comments
 (0)