From 0b284391f68171bdab25ee9e4b5bcd006a085765 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 1 Mar 2019 22:43:53 +0800
Subject: [PATCH] Merge pull request #5805 from
 storybooks/5518-fix-story-ordering

Sort storiesHash so grouped keys appear together.
---
 lib/ui/src/core/stories.js      | 19 +++++++++++++++++-
 lib/ui/src/core/stories.test.js | 35 +++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/lib/ui/src/core/stories.js b/lib/ui/src/core/stories.js
index 8eb896bf6df..0ca4f0d4b5d 100644
--- a/lib/ui/src/core/stories.js
+++ b/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]) {
diff --git a/lib/ui/src/core/stories.test.js b/lib/ui/src/core/stories.test.js
index a625c425381..c16c703ec72 100644
--- a/lib/ui/src/core/stories.test.js
+++ b/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() };