From 98aa4f275c65d555869e9dfe095093b8c1061303 Mon Sep 17 00:00:00 2001
From: Alan Peixinho <alan.peixinho@profusion.mobi>
Date: Wed, 22 Jul 2026 14:25:57 -0300
Subject: [PATCH 1/2] feat: show default platform sort on hardware listing

* Make the hardware table start sorted by platform and keep that column
active via enableSortingRemoval.
* Use TanStack's toggle handler in TableHeader so sorting options are respected, and drop redundant
page-level sorts.

Closes #2004

Signed-off-by: Alan Peixinho <alan.peixinho@profusion.mobi>
---
 .../src/components/Table/TableHeader.tsx      | 16 +-------
 .../TreeListingPage/TreeListingPage.tsx       | 41 ++++---------------
 .../TreeListingPage/treeTableUtils.tsx        |  2 +-
 .../pages/Hardware/HardwareListingPage.tsx    |  3 +-
 .../src/pages/Hardware/HardwareTable.tsx      | 11 +++--
 5 files changed, 17 insertions(+), 56 deletions(-)

diff --git a/dashboard/src/components/Table/TableHeader.tsx b/dashboard/src/components/Table/TableHeader.tsx
index 359486e99..ffe3d8913 100644
--- a/dashboard/src/components/Table/TableHeader.tsx
+++ b/dashboard/src/components/Table/TableHeader.tsx
@@ -6,7 +6,7 @@ import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
 
 import { z } from 'zod';
 
-import { useCallback, type JSX } from 'react';
+import type { JSX } from 'react';
 
 import type { MessagesKey } from '@/locales/messages';
 
@@ -39,24 +39,12 @@ export const TableHeader = <T,>({
   intlKey,
   tooltipId,
 }: ITableHeader<T>): JSX.Element => {
-  const headerSort = useCallback(() => {
-    if (sortable) {
-      if (column.getIsSorted() === 'asc') {
-        column.toggleSorting(true);
-      } else if (column.getIsSorted() === 'desc') {
-        column.clearSorting();
-      } else {
-        column.toggleSorting(false);
-      }
-    }
-  }, [column, sortable]);
-
   return (
     <span className="flex">
       <Button
         variant="ghost"
         className="justify-start px-2"
-        onClick={headerSort}
+        onClick={sortable ? column.getToggleSortingHandler() : undefined}
       >
         <FormattedMessage key={intlKey} id={intlKey} />
 
diff --git a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
index 0c9f0d148..83197702b 100644
--- a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
+++ b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
@@ -30,39 +30,14 @@ const TreeListingPage = ({
       return [];
     }
 
-    return data
-      .filter(tree => {
-        return (
-          matchesRegexOrIncludes(tree.git_commit_hash, inputFilter) ||
-          matchesRegexOrIncludes(tree.git_repository_branch, inputFilter) ||
-          matchesRegexOrIncludes(tree.git_repository_url, inputFilter) ||
-          matchesRegexOrIncludes(tree.tree_name, inputFilter)
-        );
-      })
-      .sort((a, b) => {
-        const currentATreeName = a.tree_name ?? '';
-        const currentBTreeName = b.tree_name ?? '';
-        const treeNameComparison =
-          currentATreeName.localeCompare(currentBTreeName);
-
-        if (treeNameComparison !== 0) {
-          return treeNameComparison;
-        }
-
-        const currentABranch = a.git_repository_branch ?? '';
-        const currentBBranch = b.git_repository_branch ?? '';
-        const branchComparison = currentABranch.localeCompare(currentBBranch);
-        if (branchComparison !== 0) {
-          return branchComparison;
-        }
-
-        if (a.start_time === undefined || b.start_time === undefined) {
-          return 0;
-        }
-        return (
-          new Date(b.start_time).getTime() - new Date(a.start_time).getTime()
-        );
-      });
+    return data.filter(tree => {
+      return (
+        matchesRegexOrIncludes(tree.git_commit_hash, inputFilter) ||
+        matchesRegexOrIncludes(tree.git_repository_branch, inputFilter) ||
+        matchesRegexOrIncludes(tree.git_repository_url, inputFilter) ||
+        matchesRegexOrIncludes(tree.tree_name, inputFilter)
+      );
+    });
   }, [data, inputFilter]);
 
   const kcidevComponent = useMemo(
diff --git a/dashboard/src/components/TreeListingPage/treeTableUtils.tsx b/dashboard/src/components/TreeListingPage/treeTableUtils.tsx
index 820d2cc71..1542403e0 100644
--- a/dashboard/src/components/TreeListingPage/treeTableUtils.tsx
+++ b/dashboard/src/components/TreeListingPage/treeTableUtils.tsx
@@ -88,7 +88,7 @@ export const commonTreeTableColumns: ColumnDef<TreeListingItem>[] = [
 export const sortTreesWithPinnedFirst = <T extends TreeListingItem>(
   treeTableRows: T[],
 ): T[] => {
-  return treeTableRows.sort((a, b) => {
+  return [...treeTableRows].sort((a, b) => {
     const aKey = makeTreeIdentifierKey({
       treeName: valueOrEmpty(a.tree_name),
       gitRepositoryBranch: valueOrEmpty(a.git_repository_branch),
diff --git a/dashboard/src/pages/Hardware/HardwareListingPage.tsx b/dashboard/src/pages/Hardware/HardwareListingPage.tsx
index 6c147d200..f5dd5af79 100644
--- a/dashboard/src/pages/Hardware/HardwareListingPage.tsx
+++ b/dashboard/src/pages/Hardware/HardwareListingPage.tsx
@@ -188,8 +188,7 @@ const HardwareListingPage = ({
           test_status_summary: hardware.test_status_summary,
           boot_status_summary: hardware.boot_status_summary,
         };
-      })
-      .sort((a, b) => a.platform.localeCompare(b.platform));
+      });
   }, [activeListing.data, activeListing.error, inputFilter]);
 
   const selectedRevision =
diff --git a/dashboard/src/pages/Hardware/HardwareTable.tsx b/dashboard/src/pages/Hardware/HardwareTable.tsx
index bf01e877e..2e9d950e7 100644
--- a/dashboard/src/pages/Hardware/HardwareTable.tsx
+++ b/dashboard/src/pages/Hardware/HardwareTable.tsx
@@ -397,17 +397,15 @@ export function HardwareTable({
   const { listingSize, intervalInDays } = useSearch({ strict: false });
   const navigate = useNavigate({ from: navigateFrom });
 
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: 'platform', desc: false },
+  ]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const { pagination, paginationUpdater } = usePaginationState(
     'hardwareListing',
     listingSize,
   );
 
-  const data = useMemo(() => {
-    return treeTableRows;
-  }, [treeTableRows]);
-
   const columns = useMemo(
     () =>
       getColumns(startTimestampInSeconds, endTimestampInSeconds, navigateFrom),
@@ -415,8 +413,9 @@ export function HardwareTable({
   );
 
   const table = useReactTable({
-    data,
+    data: treeTableRows,
     columns,
+    enableSortingRemoval: false,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),

From 6e39e3d8875451790001faabdbf95e09de723f16 Mon Sep 17 00:00:00 2001
From: Alan Peixinho <alan.peixinho@profusion.mobi>
Date: Wed, 29 Jul 2026 15:41:50 -0300
Subject: [PATCH 2/2] feat: default sort on builds, boots, and tests tables

Show an active default column sort (config/path/path_group) and keep
sorting toggles from clearing, matching the hardware listing behavior.

Signed-off-by: Alan Peixinho <alan.peixinho@profusion.mobi>
---
 dashboard/src/components/BootsTable/BootsTable.tsx           | 5 ++++-
 dashboard/src/components/BuildsTable/BuildsTable.tsx         | 5 ++++-
 dashboard/src/components/TestsTable/IndividualTestsTable.tsx | 5 ++++-
 dashboard/src/components/TestsTable/TestsTable.tsx           | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/components/BootsTable/BootsTable.tsx b/dashboard/src/components/BootsTable/BootsTable.tsx
index ffd0d4c3f..d60b5d312 100644
--- a/dashboard/src/components/BootsTable/BootsTable.tsx
+++ b/dashboard/src/components/BootsTable/BootsTable.tsx
@@ -143,7 +143,9 @@ export function BootsTable({
   updatePathFilter,
   currentPathFilter,
 }: IBootsTable): JSX.Element {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: 'path', desc: false },
+  ]);
   const { pagination, paginationUpdater } = usePaginationState(tableKey);
   const [globalFilter, setGlobalFilter] = useState<string | undefined>(
     currentPathFilter,
@@ -183,6 +185,7 @@ export function BootsTable({
   const table = useReactTable({
     data: testsData,
     columns,
+    enableSortingRemoval: false,
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
diff --git a/dashboard/src/components/BuildsTable/BuildsTable.tsx b/dashboard/src/components/BuildsTable/BuildsTable.tsx
index f9426b0eb..6e9725d11 100644
--- a/dashboard/src/components/BuildsTable/BuildsTable.tsx
+++ b/dashboard/src/components/BuildsTable/BuildsTable.tsx
@@ -59,7 +59,9 @@ export function BuildsTable({
   onClickFilter,
   getRowLink,
 }: IBuildsTable): JSX.Element {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: 'config', desc: false },
+  ]);
   const { pagination, paginationUpdater } = usePaginationState(tableKey);
 
   const intl = useIntl();
@@ -87,6 +89,7 @@ export function BuildsTable({
   const table = useReactTable({
     data: rawData,
     columns,
+    enableSortingRemoval: false,
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
diff --git a/dashboard/src/components/TestsTable/IndividualTestsTable.tsx b/dashboard/src/components/TestsTable/IndividualTestsTable.tsx
index 4831b4c43..0b4bdca9f 100644
--- a/dashboard/src/components/TestsTable/IndividualTestsTable.tsx
+++ b/dashboard/src/components/TestsTable/IndividualTestsTable.tsx
@@ -37,11 +37,14 @@ export function IndividualTestsTable({
   columns,
   getRowLink,
 }: IIndividualTestsTable): JSX.Element {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: 'path', desc: false },
+  ]);
 
   const table = useReactTable({
     data,
     columns,
+    enableSortingRemoval: false,
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
diff --git a/dashboard/src/components/TestsTable/TestsTable.tsx b/dashboard/src/components/TestsTable/TestsTable.tsx
index a8569e878..27f56aa1f 100644
--- a/dashboard/src/components/TestsTable/TestsTable.tsx
+++ b/dashboard/src/components/TestsTable/TestsTable.tsx
@@ -71,7 +71,9 @@ export function TestsTable({
   updatePathFilter,
   currentPathFilter,
 }: ITestsTable): JSX.Element {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: 'path_group', desc: false },
+  ]);
   const [expanded, setExpanded] = useState<ExpandedState>({});
   const pathFilter = currentPathFilter?.trim();
 
@@ -105,6 +107,7 @@ export function TestsTable({
   const table = useReactTable({
     data,
     columns,
+    enableSortingRemoval: false,
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),