From 703761a25ec54b0f5ce83f910ed00b3cb5943d3e Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Mon, 22 Apr 2024 18:03:19 -0400
Subject: [PATCH] fix: renterd file health slab keys

---
 .changeset/fluffy-horses-turn.md                         | 5 +++++
 .../FilesHealthColumn/FilesHealthColumnContents.tsx      | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fluffy-horses-turn.md

diff --git a/.changeset/fluffy-horses-turn.md b/.changeset/fluffy-horses-turn.md
new file mode 100644
index 000000000..960e4cfaf
--- /dev/null
+++ b/.changeset/fluffy-horses-turn.md
@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed an issue where file health slab keys were showing up as repeated and incorrect. Closes https://github.com/SiaFoundation/web/issues/596
diff --git a/apps/renterd/components/Files/Columns/FilesHealthColumn/FilesHealthColumnContents.tsx b/apps/renterd/components/Files/Columns/FilesHealthColumn/FilesHealthColumnContents.tsx
index e3699fedd..ff3736412 100644
--- a/apps/renterd/components/Files/Columns/FilesHealthColumn/FilesHealthColumnContents.tsx
+++ b/apps/renterd/components/Files/Columns/FilesHealthColumn/FilesHealthColumnContents.tsx
@@ -57,7 +57,12 @@ export function FilesHealthColumnContents({
   const slabs = sortBy(
     obj.data.object.slabs?.map((s) => ({
       ...s.slab,
-      key: `${s.offset}${s.length}${s.slab.key}`,
+      // id is for use as a unique React key.
+      // slab key is not necessarily unique. e.g. an object uploaded with tiny
+      // multipart uploads might reference the same slab over and over but at
+      // different offsets and lengths. So we should not assume that they are
+      // always unique.
+      id: `${s.offset}${s.length}${s.slab.key}`,
       isPartialSlab: !!s.slab.shards,
       contractSetShards: s.slab.shards?.length
         ? computeSlabContractSetShards({
@@ -79,7 +84,7 @@ export function FilesHealthColumnContents({
       totalShards={slabs.find((s) => s.shards)?.shards.length}
     >
       {slabs.map((slab) => (
-        <div key={slab.key} className="flex justify-between gap-2">
+        <div key={slab.id} className="flex justify-between gap-2">
           <Text
             size="12"
             color="subtle"