From 63c8287207018c60be9b26099d66b05477906728 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 8 Mar 2021 21:07:05 +0100
Subject: [PATCH] Fix React unique key warning when using renderLabel

---
 lib/api/src/lib/stories.ts             | 23 ++++++++++-------------
 lib/ui/src/components/sidebar/Tree.tsx |  6 +++---
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts
index 3983d06525f8..d567380dfd02 100644
--- a/lib/api/src/lib/stories.ts
+++ b/lib/api/src/lib/stories.ts
@@ -20,7 +20,7 @@ export interface Root {
   isComponent: false;
   isRoot: true;
   isLeaf: false;
-  label?: React.ReactNode;
+  renderLabel?: (item: Root) => React.ReactNode;
   startCollapsed?: boolean;
 }
 
@@ -34,7 +34,7 @@ export interface Group {
   isComponent: boolean;
   isRoot: false;
   isLeaf: false;
-  label?: React.ReactNode;
+  renderLabel?: (item: Group) => React.ReactNode;
   // MDX docs-only stories are "Group" type
   parameters?: {
     docsOnly?: boolean;
@@ -53,7 +53,7 @@ export interface Story {
   isComponent: boolean;
   isRoot: false;
   isLeaf: true;
-  label?: React.ReactNode;
+  renderLabel?: (item: Story) => React.ReactNode;
   parameters?: {
     fileName: string;
     options: {
@@ -186,7 +186,7 @@ export const transformStoriesRawToStoriesHash = (
       }
 
       if (root.length && index === 0) {
-        const rootElement: Root = {
+        list.push({
           id,
           name,
           depth: index,
@@ -194,11 +194,11 @@ export const transformStoriesRawToStoriesHash = (
           isComponent: false,
           isLeaf: false,
           isRoot: true,
+          renderLabel,
           startCollapsed: collapsedRoots.includes(id),
-        };
-        list.push({ ...rootElement, label: renderLabel?.(rootElement) });
+        });
       } else {
-        const groupElement: Group = {
+        list.push({
           id,
           name,
           parent,
@@ -207,14 +207,11 @@ export const transformStoriesRawToStoriesHash = (
           isComponent: false,
           isLeaf: false,
           isRoot: false,
+          renderLabel,
           parameters: {
             docsOnly: parameters?.docsOnly,
             viewMode: parameters?.viewMode,
           },
-        };
-        list.push({
-          ...groupElement,
-          label: renderLabel?.(groupElement),
         });
       }
 
@@ -233,15 +230,15 @@ export const transformStoriesRawToStoriesHash = (
       });
     });
 
-    const story: Story = {
+    acc[item.id] = {
       ...item,
       depth: rootAndGroups.length,
       parent: rootAndGroups[rootAndGroups.length - 1].id,
       isLeaf: true,
       isComponent: false,
       isRoot: false,
+      renderLabel,
     };
-    acc[item.id] = { ...story, label: renderLabel?.(story) };
 
     return acc;
   }, {} as StoriesHash);
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index 616724ccbec4..242a8ab17898 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -137,7 +137,7 @@ const Node = React.memo<NodeProps>(
             onSelectStoryId(item.id);
           }}
         >
-          {item.label || item.name}
+          {item.renderLabel?.(item) || item.name}
         </LeafNode>
       );
     }
@@ -162,7 +162,7 @@ const Node = React.memo<NodeProps>(
             }}
           >
             <CollapseIcon isExpanded={isExpanded} />
-            {item.label || item.name}
+            {item.renderLabel?.(item) || item.name}
           </CollapseButton>
           {isExpanded && (
             <Action
@@ -205,7 +205,7 @@ const Node = React.memo<NodeProps>(
           if (item.isComponent && !isExpanded) onSelectStoryId(item.id);
         }}
       >
-        {item.label || item.name}
+        {item.renderLabel?.(item) || item.name}
       </BranchNode>
     );
   }