Merge pull request #5805 from storybooks/5518-fix-story-ordering

Sort storiesHash so grouped keys appear together.

lib/ui/src/core/stories.js

@@ -134,7 +134,8 @@ const initStoriesApi = ({
   });
 
   const setStories = input => {
-    const storiesHash = Object.values(input).reduce((acc, item) => {
+    // This doesn't quite have the right order -- it does not group the top-level keys, see #5518
+    const storiesHashOutOfOrder = Object.values(input).reduce((acc, item) => {
       const { kind, parameters } = item;
       const {
         hierarchyRootSeparator: rootSeparator,
@@ -182,6 +183,22 @@ const initStoriesApi = ({
       return acc;
     }, {});
 
+    // When adding a group, also add all of its children, depth first
+    function addItem(acc, item) {
+      if (!acc[item]) {
+        // If we were already inserted as part of a group, that's great.
+        acc[item.id] = item;
+        const { children } = item;
+        if (children) {
+          children.forEach(id => addItem(acc, storiesHashOutOfOrder[id]));
+        }
+      }
+      return acc;
+    }
+
+    // Now create storiesHash by reordering the above by group
+    const storiesHash = Object.values(storiesHashOutOfOrder).reduce(addItem, {});
+
     const { storyId, viewMode } = store.getState();
 
     if (!storyId || !storiesHash[storyId]) {

lib/ui/src/core/stories.test.js

@@ -144,6 +144,41 @@ describe('stories API', () => {
       });
     });
 
+    // Stories can get out of order for a few reasons -- see reproductions on
+    //   https://github.com/storybooks/storybook/issues/5518
+    it('does the right thing for out of order stories', () => {
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const {
+        api: { setStories },
+      } = initStories({ store, navigate });
+
+      setStories({
+        'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1' },
+        'b--1': { kind: 'b', name: '1', parameters, path: 'b--1', id: 'b--1' },
+        'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2' },
+      });
+
+      const { storiesHash: storedStoriesHash } = store.getState();
+
+      // We need exact key ordering, even if in theory JS doens't guarantee it
+      expect(Object.keys(storedStoriesHash)).toEqual(['a', 'a--1', 'a--2', 'b', 'b--1']);
+      expect(storedStoriesHash.a).toMatchObject({
+        id: 'a',
+        children: ['a--1', 'a--2'],
+        isRoot: false,
+        isComponent: true,
+      });
+
+      expect(storedStoriesHash.b).toMatchObject({
+        id: 'b',
+        children: ['b--1'],
+        isRoot: false,
+        isComponent: true,
+      });
+    });
+
     it('navigates to the first story in the store if there is none selected', () => {
       const navigate = jest.fn();
       const store = { getState: () => ({ viewMode: 'story' }), setState: jest.fn() };