diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js b/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js
index 842142204c4d..88b346947434 100644
--- a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js
+++ b/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js
@@ -1,6 +1,7 @@
 import { Treebeard } from 'storybook-react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
+import deepEqual from 'deep-equal';
 import treeNodeTypes from './tree_node_type';
 import treeDecorators from './tree_decorators';
 import treeStyle from './tree_style';
@@ -46,6 +47,22 @@ class Stories extends React.Component {
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    const { selectedHierarchy: nextSelectedHierarchy = [] } = nextProps;
+    const { selectedHierarchy: currentSelectedHierarchy = [] } = this.props;
+
+    if (!deepEqual(nextSelectedHierarchy, currentSelectedHierarchy)) {
+      const selectedNodes = getSelectedNodes(nextSelectedHierarchy);
+
+      this.setState(prevState => ({
+        nodes: {
+          ...prevState.nodes,
+          ...selectedNodes,
+        },
+      }));
+    }
+  }
+
   onToggle(node, toggled) {
     if (node.story) {
       this.fireOnKindAndStory(node.kind, node.story);
diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js b/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js
index a576674d2342..14aef3420471 100644
--- a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js
+++ b/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js
@@ -151,6 +151,91 @@ describe('manager.ui.components.left_panel.stories', () => {
         'some@namespace': true,
       });
     });
+
+    test('should recalculate selected nodes after selectedHierarchy changes', () => {
+      const data = createHierarchy(
+        [
+          { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+          { kind: 'another.space.20', stories: ['b1', 'b2'] },
+        ],
+        '\\.'
+      );
+      const wrap = mount(
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          selectedHierarchy={[]}
+        />
+      );
+
+      wrap.setProps({ selectedHierarchy: ['another', 'space', '20'] });
+
+      const { nodes } = wrap.state();
+
+      expect(nodes).toEqual({
+        'another@namespace': true,
+        'another@space@namespace': true,
+        'another@space@20@component': true,
+      });
+    });
+
+    test('should add selected nodes to the state after selectedHierarchy changes with a new value', () => {
+      const data = createHierarchy(
+        [
+          { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+          { kind: 'another.space.20', stories: ['b1', 'b2'] },
+        ],
+        '\\.'
+      );
+      const wrap = mount(
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          selectedHierarchy={['another', 'space', '20']}
+        />
+      );
+
+      wrap.setProps({ selectedHierarchy: ['some', 'name', 'item1'] });
+
+      const { nodes } = wrap.state();
+
+      expect(nodes).toEqual({
+        'another@namespace': true,
+        'another@space@namespace': true,
+        'another@space@20@component': true,
+        'some@namespace': true,
+        'some@name@namespace': true,
+        'some@name@item1@component': true,
+      });
+    });
+
+    test('should not call setState when selectedHierarchy prop changes with the same value', () => {
+      const selectedHierarchy = ['another', 'space', '20'];
+      const data = createHierarchy(
+        [
+          { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+          { kind: 'another.space.20', stories: ['b1', 'b2'] },
+        ],
+        '\\.'
+      );
+      const wrap = mount(
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          selectedHierarchy={selectedHierarchy}
+        />
+      );
+
+      const setState = jest.fn();
+      wrap.instance().setState = setState;
+
+      wrap.setProps({ selectedHierarchy });
+
+      expect(setState).not.toHaveBeenCalled();
+    });
   });
 
   describe('events', () => {