feat: sync table sort state to the URL

dashboard/src/components/BootsTable/BootsTable.tsx

@@ -1,4 +1,4 @@
-import type { ColumnDef, SortingState } from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
 import {
   flexRender,
   getCoreRowModel,
@@ -33,6 +33,7 @@ import { useTestIssues } from '@/api/testDetails';
 import { useLogData } from '@/hooks/useLogData';
 import WrapperTableWithLogSheet from '@/pages/TreeDetails/Tabs/WrapperTableWithLogSheet';
 import { usePaginationState } from '@/hooks/usePaginationState';
+import { useSortingState } from '@/hooks/useSortingState';
 
 import type { TableKeys } from '@/utils/constants/tables';
 
@@ -143,7 +144,7 @@ export function BootsTable({
   updatePathFilter,
   currentPathFilter,
 }: IBootsTable): JSX.Element {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const { sorting, handleSortingChange } = useSortingState();
   const { pagination, paginationUpdater } = usePaginationState(tableKey);
   const [globalFilter, setGlobalFilter] = useState<string | undefined>(
     currentPathFilter,
@@ -183,7 +184,7 @@ export function BootsTable({
   const table = useReactTable({
     data: testsData,
     columns,
-    onSortingChange: setSorting,
+    onSortingChange: handleSortingChange,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: paginationUpdater,

dashboard/src/components/BuildsTable/BuildsTable.tsx

@@ -1,4 +1,4 @@
-import type { ColumnDef, SortingState } from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
 import {
   flexRender,
   getCoreRowModel,
@@ -26,6 +26,7 @@ import {
 import WrapperTableWithLogSheet from '@/pages/TreeDetails/Tabs/WrapperTableWithLogSheet';
 
 import { usePaginationState } from '@/hooks/usePaginationState';
+import { useSortingState } from '@/hooks/useSortingState';
 
 import type { TableKeys } from '@/utils/constants/tables';
 
@@ -49,6 +50,7 @@ export interface IBuildsTable {
   filter: PossibleTableFilters;
   onClickFilter: (filter: PossibleTableFilters) => void;
   getRowLink: (buildId: string) => LinkProps;
+  sortKey?: string;
 }
 
 export function BuildsTable({
@@ -58,8 +60,9 @@ export function BuildsTable({
   filter,
   onClickFilter,
   getRowLink,
+  sortKey,
 }: IBuildsTable): JSX.Element {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const { sorting, handleSortingChange } = useSortingState({ sortKey });
   const { pagination, paginationUpdater } = usePaginationState(tableKey);
 
   const intl = useIntl();
@@ -87,7 +90,7 @@ export function BuildsTable({
   const table = useReactTable({
     data: rawData,
     columns,
-    onSortingChange: setSorting,
+    onSortingChange: handleSortingChange,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: paginationUpdater,

dashboard/src/components/IssueDetails/IssueDetailsBuildSection.tsx

@@ -80,6 +80,7 @@ export const IssueDetailsBuildSection = ({
             getRowLink={getTableRowLink}
             onClickFilter={onClickFilter}
             columns={columns}
+            sortKey="buildsTable"
           />
         </div>
       ) : (

dashboard/src/components/IssueDetails/IssueDetailsTestSection.tsx

@@ -72,6 +72,7 @@ export const IssueDetailsTestSection = ({
             filter={testTableFilter}
             getRowLink={getTableRowLink}
             innerColumns={innerColumns}
+            sortKey="testsTable"
           />
         </div>
       ) : (

dashboard/src/components/IssueTable/IssueTable.tsx

@@ -30,6 +30,7 @@ import type {
 } from '@/types/issueListing';
 import { TableHeader } from '@/components/Table/TableHeader';
 import { usePaginationState } from '@/hooks/usePaginationState';
+import { useSortingState } from '@/hooks/useSortingState';
 import { PaginationInfo } from '@/components/Table/PaginationInfo';
 import {
   TableBody,
@@ -63,7 +64,7 @@ const getLinkProps = (
       to: '/tree/$treeId',
       params: { treeId: row.original.git_commit_hash },
       state: s => s,
-      search: previousSearch => ({
+      search: ({ tableSort: _tableSort, ...previousSearch }) => ({
         ...previousSearch,
         origin: row.original.origin,
         treeInfo: {
@@ -188,6 +189,8 @@ interface IIssueTable {
   isLoading?: boolean;
 }
 
+const DEFAULT_ISSUE_SORTING: SortingState = [{ id: 'first_seen', desc: true }];
+
 export const IssueTable = ({
   issueListing,
   status,
@@ -198,9 +201,9 @@ export const IssueTable = ({
   const { listingSize } = useSearch({ from: '/_main/issues' });
   const navigate = useNavigate({ from: '/issues' });
 
-  const [sorting, setSorting] = useState<SortingState>([
-    { id: 'first_seen', desc: true },
-  ]);
+  const { sorting, handleSortingChange } = useSortingState({
+    defaultSorting: DEFAULT_ISSUE_SORTING,
+  });
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
     culprit: false,
   });
@@ -224,7 +227,7 @@ export const IssueTable = ({
   const table = useReactTable({
     data: issueTableRows,
     columns,
-    onSortingChange: setSorting,
+    onSortingChange: handleSortingChange,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: paginationUpdater,

dashboard/src/components/TestsTable/TestsTable.tsx

@@ -1,9 +1,4 @@
-import type {
-  ColumnDef,
-  ExpandedState,
-  Row,
-  SortingState,
-} from '@tanstack/react-table';
+import type { ColumnDef, ExpandedState, Row } from '@tanstack/react-table';
 import {
   flexRender,
   getCoreRowModel,
@@ -54,6 +49,8 @@ import { useTestIssues } from '@/api/testDetails';
 import { useLogData } from '@/hooks/useLogData';
 import WrapperTableWithLogSheet from '@/pages/TreeDetails/Tabs/WrapperTableWithLogSheet';
 
+import { useSortingState } from '@/hooks/useSortingState';
+
 import {
   adaptColumnsForUnifiedTable,
   defaultInnerColumns,
@@ -85,6 +82,7 @@ export interface ITestsTable {
   getRowLink: (testId: TestHistory['id']) => LinkProps;
   updatePathFilter?: (pathFilter: string) => void;
   currentPathFilter?: string;
+  sortKey?: string;
 }
 
 export function TestsTable({
@@ -95,8 +93,9 @@ export function TestsTable({
   getRowLink,
   updatePathFilter,
   currentPathFilter,
+  sortKey,
 }: ITestsTable): JSX.Element {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const { sorting, handleSortingChange } = useSortingState({ sortKey });
   const [expanded, setExpanded] = useState<ExpandedState>({});
   const [groupingMode, setGroupingMode] =
     useState<TableGroupingMode>('grouped');
@@ -162,7 +161,7 @@ export function TestsTable({
   const table = useReactTable({
     data,
     columns,
-    onSortingChange: setSorting,
+    onSortingChange: handleSortingChange,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getSubRows: row => row.subRows,

dashboard/src/components/TreeListingPage/TreeTable.tsx

@@ -1,9 +1,4 @@
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  Row,
-  SortingState,
-} from '@tanstack/react-table';
+import type { ColumnDef, ColumnFiltersState, Row } from '@tanstack/react-table';
 import {
   flexRender,
   getCoreRowModel,
@@ -30,6 +25,7 @@ import { formattedBreakLineValue } from '@/locales/messages';
 import { zPossibleTabValidator } from '@/types/tree/TreeDetails';
 
 import { usePaginationState } from '@/hooks/usePaginationState';
+import { useSortingState } from '@/hooks/useSortingState';
 
 import BaseTable, { TableHead } from '@/components/Table/BaseTable';
 import { TableBody, TableCell, TableRow } from '@/components/ui/table';
@@ -272,7 +268,7 @@ export function TreeTable({
   });
   const navigate = useNavigate({ from: urlFromMap.navigate });
 
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const { sorting, handleSortingChange } = useSortingState();
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const { pagination, paginationUpdater } = usePaginationState(
     'treeListing',
@@ -288,7 +284,7 @@ export function TreeTable({
   const table = useReactTable({
     data: orderedData,
     columns,
-    onSortingChange: setSorting,
+    onSortingChange: handleSortingChange,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),

dashboard/src/hooks/useSortingState.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest';
+
+import type { SortingState } from '@tanstack/react-table';
+
+import { TABLE_SORT_UNSORTED } from '@/types/general';
+
+import {
+  getTableSortValue,
+  searchValueToSorting,
+  sortingToSearchValue,
+  updateTableSortParam,
+} from './useSortingState';
+
+describe('sortingToSearchValue', () => {
+  it('encodes unsorted as none', () => {
+    expect(sortingToSearchValue([])).toBe(TABLE_SORT_UNSORTED);
+  });
+
+  it('encodes ascending and descending sorts', () => {
+    expect(sortingToSearchValue([{ id: 'status', desc: false }])).toBe(
+      'status',
+    );
+    expect(sortingToSearchValue([{ id: 'status', desc: true }])).toBe(
+      '-status',
+    );
+  });
+});
+
+describe('searchValueToSorting', () => {
+  const defaultSorting: SortingState = [{ id: 'first_seen', desc: true }];
+
+  it('returns default when value is absent', () => {
+    expect(searchValueToSorting(undefined, defaultSorting)).toEqual(
+      defaultSorting,
+    );
+  });
+
+  it('parses none as unsorted', () => {
+    expect(searchValueToSorting(TABLE_SORT_UNSORTED, defaultSorting)).toEqual(
+      [],
+    );
+  });
+
+  it('parses ascending and descending values', () => {
+    expect(searchValueToSorting('status', [])).toEqual([
+      { id: 'status', desc: false },
+    ]);
+    expect(searchValueToSorting('-status', [])).toEqual([
+      { id: 'status', desc: true },
+    ]);
+  });
+});
+
+describe('getTableSortValue', () => {
+  it('reads a flat string when no sortKey is set', () => {
+    expect(getTableSortValue('-status')).toBe('-status');
+    expect(getTableSortValue({ buildsTable: 'path' })).toBeUndefined();
+  });
+
+  it('reads a keyed value when sortKey is set', () => {
+    expect(getTableSortValue({ buildsTable: 'path' }, 'buildsTable')).toBe(
+      'path',
+    );
+    expect(getTableSortValue('-status', 'buildsTable')).toBeUndefined();
+  });
+});
+
+describe('updateTableSortParam', () => {
+  it('stores a flat string without a sortKey', () => {
+    expect(updateTableSortParam(undefined, undefined, '-status')).toBe(
+      '-status',
+    );
+    expect(updateTableSortParam('-status', undefined, undefined)).toBe(
+      undefined,
+    );
+  });
+
+  it('stores keyed values when sortKey is set', () => {
+    expect(updateTableSortParam(undefined, 'buildsTable', 'path')).toEqual({
+      buildsTable: 'path',
+    });
+    expect(
+      updateTableSortParam({ buildsTable: 'path' }, 'testsTable', '-startTime'),
+    ).toEqual({
+      buildsTable: 'path',
+      testsTable: '-startTime',
+    });
+    expect(
+      updateTableSortParam({ buildsTable: 'path' }, 'buildsTable', undefined),
+    ).toBeUndefined();
+  });
+});