Merge pull request #11660 from storybookjs/11571-fix-prefix-redirect-2

Core: Fix existing behavior with story prefixes

lib/client-api/src/story_store.test.ts

@@ -748,6 +748,17 @@ describe('preview.story_store', () => {
         expect(store.getSelection()).toEqual({ storyId: 'g2-a--1', viewMode: 'story' });
       });
 
+      // Making sure the fix #11571 doesn't break this
+      it('selects the first story if there are two stories in the group of different lengths', () => {
+        const store = new StoryStore({ channel });
+        store.setSelectionSpecifier({ storySpecifier: 'a', viewMode: 'story' });
+        addStoryToStore(store, 'a', 'long-long-long', () => 0);
+        addStoryToStore(store, 'a', 'short', () => 0);
+        store.finishConfiguring();
+
+        expect(store.getSelection()).toEqual({ storyId: 'a--long-long-long', viewMode: 'story' });
+      });
+
       it('selects nothing if the component or group does not exist', () => {
         const store = new StoryStore({ channel });
         store.setSelectionSpecifier({ storySpecifier: 'c', viewMode: 'story' });

lib/client-api/src/story_store.ts

@@ -220,9 +220,12 @@ export default class StoryStore {
         // '*' means select the first story. If there is none, we have no selection.
         [foundStory] = stories;
       } else if (typeof storySpecifier === 'string') {
-        // Find the story with the shortest id that matches the specifier (see #11571)
-        const foundStories = Object.values(stories).filter((s) => s.id.startsWith(storySpecifier));
-        [foundStory] = foundStories.sort((a, b) => a.id.length - b.id.length);
+        // Find the story with the exact id that matches the specifier (see #11571)
+        foundStory = Object.values(stories).find((s) => s.id === storySpecifier);
+        if (!foundStory) {
+          // Fallback to the first story that starts with the specifier
+          foundStory = Object.values(stories).find((s) => s.id.startsWith(storySpecifier));
+        }
       } else {
         // Try and find a story matching the name/kind, setting no selection if they don't exist.
         const { name, kind } = storySpecifier;