From dbad7c5206bf353ac5537b5b1b011c1e521b714f Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sun, 12 May 2024 21:42:34 +0800
Subject: [PATCH] API: Extend sidebar renderLabel with API access

---
 code/lib/types/src/modules/api-stories.ts                 | 2 +-
 code/lib/types/src/modules/api.ts                         | 6 +++---
 .../src/components/mobile/navigation/MobileNavigation.tsx | 7 ++++---
 code/ui/manager/src/components/sidebar/Tree.tsx           | 8 +++++---
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/code/lib/types/src/modules/api-stories.ts b/code/lib/types/src/modules/api-stories.ts
index 90d45a77d9ac..90a6962c7d1c 100644
--- a/code/lib/types/src/modules/api-stories.ts
+++ b/code/lib/types/src/modules/api-stories.ts
@@ -8,7 +8,7 @@ export interface API_BaseEntry {
   depth: number;
   name: string;
   refId?: string;
-  renderLabel?: (item: API_BaseEntry) => any;
+  renderLabel?: (item: API_BaseEntry, api: any) => any;
 }
 
 export interface API_RootEntry extends API_BaseEntry {
diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts
index 481139e71792..e858314af76d 100644
--- a/code/lib/types/src/modules/api.ts
+++ b/code/lib/types/src/modules/api.ts
@@ -45,7 +45,7 @@ export interface API_Provider<API> {
   renderPreview?: API_IframeRenderer;
   handleAPI(api: API): void;
   getConfig(): {
-    sidebar?: API_SidebarOptions;
+    sidebar?: API_SidebarOptions<API>;
     theme?: ThemeVars;
     StoryMapper?: API_StoryMapper;
     [k: string]: any;
@@ -106,11 +106,11 @@ export interface API_UI {
 export type API_PanelPositions = 'bottom' | 'right';
 export type API_ActiveTabsType = 'sidebar' | 'canvas' | 'addons';
 
-export interface API_SidebarOptions {
+export interface API_SidebarOptions<API = any> {
   showRoots?: boolean;
   filters?: Record<string, API_FilterFunction>;
   collapsedRoots?: string[];
-  renderLabel?: (item: API_HashEntry) => any;
+  renderLabel?: (item: API_HashEntry, api: API) => any;
 }
 
 interface OnClearOptions {
diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
index 9ecee759fb06..ee3b8aa1a00d 100644
--- a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
+++ b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
@@ -19,16 +19,17 @@ interface MobileNavigationProps {
  */
 const useFullStoryName = () => {
   const { index } = useStorybookState();
-  const currentStory = useStorybookApi().getCurrentStoryData();
+  const api = useStorybookApi();
+  const currentStory = api.getCurrentStoryData();
 
   if (!currentStory) return '';
 
-  let fullStoryName = currentStory.renderLabel?.(currentStory) || currentStory.name;
+  let fullStoryName = currentStory.renderLabel?.(currentStory, api) || currentStory.name;
   let node = index[currentStory.id];
 
   while ('parent' in node && node.parent && index[node.parent] && fullStoryName.length < 24) {
     node = index[node.parent];
-    const parentName = node.renderLabel?.(node) || node.name;
+    const parentName = node.renderLabel?.(node, api) || node.name;
     fullStoryName = `${parentName}/${fullStoryName}`;
   }
   return fullStoryName;
diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx
index 42aa27ce694a..caa19f0cab4d 100644
--- a/code/ui/manager/src/components/sidebar/Tree.tsx
+++ b/code/ui/manager/src/components/sidebar/Tree.tsx
@@ -220,7 +220,8 @@ const Node = React.memo<NodeProps>(function Node({
           }}
           {...(item.type === 'docs' && { docsMode })}
         >
-          {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+          {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
+            item.name}
         </LeafNode>
         {isSelected && (
           <SkipToContentLink asChild>
@@ -272,7 +273,7 @@ const Node = React.memo<NodeProps>(function Node({
           aria-expanded={isExpanded}
         >
           <CollapseIcon isExpanded={isExpanded} />
-          {item.renderLabel?.(item) || item.name}
+          {item.renderLabel?.(item, api) || item.name}
         </CollapseButton>
         {isExpanded && (
           <IconButton
@@ -325,7 +326,8 @@ const Node = React.memo<NodeProps>(function Node({
           }
         }}
       >
-        {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+        {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
+          item.name}
       </BranchNode>
     );
   }