feat: Use stable key for the selected trees on hardware details page.

  * Use a hash key from git_url, tree_name and branch to be sure we can
    select trees, without need of compatible ordering between frontend
    and backend.

  Closes #1909

Signed-off-by: Alan Peixinho <alan.peixinho@profusion.mobi>

Author: alanpeixinho

dashboard/src/pages/hardwareDetails/HardwareDetails.tsx

@@ -184,6 +184,38 @@ function HardwareDetails(): JSX.Element {
       treeIndexesLength: treeIndexesLength,
     });
 
+  const hasLegacyNumericTreeKeys =
+    treeIndexes?.some(k => /^\d+$/.test(k)) ||
+    Object.keys(treeCommits).some(k => /^\d+$/.test(k));
+
+  useEffect(() => {
+    const trees = summaryResponse.data?.common.trees;
+    if (!trees || !hasLegacyNumericTreeKeys) {
+      return;
+    }
+
+    const mapKey = (k: string): string =>
+      /^\d+$/.test(k) ? trees[Number(k)]?.index ?? k : k;
+
+    navigate({
+      replace: true,
+      search: prev => ({
+        ...prev,
+        treeIndexes: treeIndexes ? [...new Set(treeIndexes.map(mapKey))] : null,
+        treeCommits: Object.fromEntries(
+          Object.entries(treeCommits).map(([k, v]) => [mapKey(k), v]),
+        ),
+      }),
+      state: s => s,
+    });
+  }, [
+    navigate,
+    summaryResponse.data,
+    treeCommits,
+    treeIndexes,
+    hasLegacyNumericTreeKeys,
+  ]);
+
   const hardwareStatusHistoryState = useRouterState({
     select: s => s.location.state.hardwareStatusCount,
   });
@@ -474,7 +506,7 @@ function HardwareDetails(): JSX.Element {
             </p>
           </div>
           <div className="mt-5">
-            {!!treeData && (
+            {!!treeData && !hasLegacyNumericTreeKeys && (
               <>
                 <HardwareHeader
                   treeItems={treeData}

dashboard/src/pages/hardwareDetails/HardwareDetailsHeaderTable.tsx

@@ -329,19 +329,19 @@ const getColumns = (
 
 const getInitialRowSelection = (
   selectedIndexes: string[] | null,
-  treeItems: PreparedTrees[],
+  treeItemIndexes: string[],
 ): Record<string, boolean> => {
   if (selectedIndexes === null) {
-    return Object.fromEntries(treeItems.map(item => [item.index, true]));
+    return Object.fromEntries(treeItemIndexes.map(index => [index, true]));
   }
 
   if (selectedIndexes.length === 0) {
-    return Object.fromEntries(treeItems.map(item => [item.index, false]));
+    return Object.fromEntries(treeItemIndexes.map(index => [index, false]));
   }
 
   const selectedSet = new Set(selectedIndexes);
   return Object.fromEntries(
-    treeItems.map(item => [item.index, selectedSet.has(item.index)]),
+    treeItemIndexes.map(index => [index, selectedSet.has(index)]),
   );
 };
 
@@ -368,8 +368,14 @@ export function HardwareHeader({
     'hardwareDetailsTrees',
   );
 
+  const treeItemIds = treeItems.map(item => item.index).join('|');
+  const treeItemIndexes = useMemo(
+    () => (treeItemIds ? treeItemIds.split('|') : []),
+    [treeItemIds],
+  );
+
   const [rowSelection, setRowSelection] = useState(() =>
-    getInitialRowSelection(selectedIndexes, treeItems),
+    getInitialRowSelection(selectedIndexes, treeItemIndexes),
   );
 
   const rowSelectionDebounced = useDebounce(rowSelection, DEBOUNCE_INTERVAL);
@@ -380,8 +386,8 @@ export function HardwareHeader({
   }, [rowSelectionDebounced, updateTreeFilters, treeItems.length]);
 
   useEffect(() => {
-    setRowSelection(getInitialRowSelection(selectedIndexes, treeItems));
-  }, [selectedIndexes, treeItems]);
+    setRowSelection(getInitialRowSelection(selectedIndexes, treeItemIndexes));
+  }, [selectedIndexes, treeItemIndexes]);
 
   const columns = useMemo(
     () => getColumns(setTreeIndexesLength),

dashboard/src/routes/_main/hardware/$hardwareId/route.tsx

@@ -29,7 +29,11 @@ const defaultValues = {
 const hardwareDetailsSearchSchema = z.object({
   origin: zOrigin,
   currentPageTab: zPossibleTabValidator,
-  treeIndexes: z.array(z.string()).nullable().default(null),
+  treeIndexes: z
+    .array(z.union([z.string(), z.number()]))
+    .transform(values => values.map(String))
+    .nullable()
+    .default(null),
   treeCommits: zTreeCommits,
   tableFilter: zTableFilterInfoValidator,
   diffFilter: zDiffFilter,