From c868ddde3f4ac7f187fb919b5701f8436c945dc2 Mon Sep 17 00:00:00 2001
From: Henrique Costa <henrique.m.costa@tecnico.ulisboa.pt>
Date: Wed, 3 Apr 2024 18:21:59 +0100
Subject: [PATCH] #26642: fix message when title of story ends with "/" and
 render all components in story that were correctly created. Instead of
 displaying the message: "Invalid part '${name}', leading to id === parentId
 ('${id}'), inside title '${title}'", now we have a better message that
 clarifys the error and then all other components created correctly will be
 displayed along side the error message

---
 code/lib/manager-api/src/lib/stories.ts       |  4 +-
 .../manager/src/components/sidebar/Refs.tsx   | 42 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/code/lib/manager-api/src/lib/stories.ts b/code/lib/manager-api/src/lib/stories.ts
index 9d6b1817e677..22a08e89d590 100644
--- a/code/lib/manager-api/src/lib/stories.ts
+++ b/code/lib/manager-api/src/lib/stories.ts
@@ -196,9 +196,7 @@ export const transformStoryIndexToStoriesHash = (
       if (parent === id) {
         throw new Error(
           dedent`
-          Invalid part '${name}', leading to id === parentId ('${id}'), inside title '${title}'
-          
-          Did you create a path that uses the separator char accidentally, such as 'Vue <docs/>' where '/' is a separator char? See https://github.com/storybookjs/storybook/issues/6128
+          Invalid title "${title}" ending in slash: ${id}
           `
         );
       }
diff --git a/code/ui/manager/src/components/sidebar/Refs.tsx b/code/ui/manager/src/components/sidebar/Refs.tsx
index 1cd5c6c7a5a0..bbaa2734f9ef 100644
--- a/code/ui/manager/src/components/sidebar/Refs.tsx
+++ b/code/ui/manager/src/components/sidebar/Refs.tsx
@@ -17,6 +17,8 @@ import type { Highlight, RefType } from './types';
 import { getStateType } from '../../utils/tree';
 import { CollapseIcon } from './components/CollapseIcon';
 
+import type { API_IndexHash } from '@storybook/types';
+
 export interface RefProps {
   isLoading: boolean;
   isBrowsing: boolean;
@@ -128,6 +130,28 @@ export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.
       [api, isMain, refId]
     );
 
+    const filteredIndex = {} as API_IndexHash;
+
+    function getLastWord(str: string) {
+      const words = str.split(' ');
+      return words[words.length - 1];
+    }
+
+    // Iterate through the index data
+    for (const key in index) {
+      // Check if the key starts with id of the error message
+      if (
+        indexError &&
+        indexError.hasOwnProperty('message') &&
+        key.startsWith(getLastWord(indexError.message))
+      ) {
+        // Do not include this item in the filtered index
+        continue;
+      }
+      // Otherwise, include it in the filtered index
+      filteredIndex[key] = index[key];
+    }
+
     return (
       <>
         {isMain || (
@@ -145,7 +169,23 @@ export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.
         {isExpanded && (
           <Wrapper data-title={title} isMain={isMain}>
             {state === 'auth' && <AuthBlock id={refId} loginUrl={loginUrl} />}
-            {state === 'error' && <ErrorBlock error={indexError} />}
+            {state === 'error' && (
+              <>
+                <ErrorBlock error={indexError} />
+                <Tree
+                  status={props.status}
+                  isBrowsing={isBrowsing}
+                  isMain={isMain}
+                  refId={refId}
+                  data={filteredIndex}
+                  docsMode={docsOptions.docsMode}
+                  selectedStoryId={selectedStoryId}
+                  onSelectStoryId={onSelectStoryId}
+                  highlightedRef={highlightedRef}
+                  setHighlightedItemId={setHighlightedItemId}
+                />
+              </>
+            )}
             {state === 'loading' && <LoaderBlock isMain={isMain} />}
             {state === 'empty' && <EmptyBlock isMain={isMain} />}
             {state === 'ready' && (