refactor stories panel

lib/ui/src/modules/ui/components/stories_panel/index.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import pick from 'lodash-es/pick';
 import Header from './header';
-import SubHeader from './sub_header';
 import Stories from './stories_tree';
 import TextFilter from './text_filter';
 
@@ -31,15 +30,23 @@ function hierarchyContainsStories(storiesHierarchy) {
 
 // eslint-disable-next-line react/prefer-stateless-function
 class StoriesPanel extends Component {
+  renderStories() {
+    const { storiesHierarchies } = this.props;
+
+    return storiesHierarchies.map(
+      hierarchy =>
+        hierarchyContainsStories(hierarchy) && (
+          <Stories
+            key={hierarchy.name}
+            {...pick(this.props, storyProps)}
+            storiesHierarchy={hierarchy}
+          />
+        )
+    );
+  }
+
   render() {
-    const {
-      name,
-      onStoryFilter,
-      openShortcutsHelp,
-      storiesHierarchies,
-      storyFilter,
-      url,
-    } = this.props;
+    const { name, onStoryFilter, openShortcutsHelp, storyFilter, url } = this.props;
 
     return (
       <div style={mainStyle}>
@@ -49,17 +56,7 @@ class StoriesPanel extends Component {
           onClear={() => onStoryFilter('')}
           onChange={text => onStoryFilter(text)}
         />
-        <div style={scrollStyle}>
-          {storiesHierarchies.map(
-            hierarchy =>
-              hierarchyContainsStories(hierarchy) && (
-                <div key={hierarchy.name}>
-                  {hierarchy.name && <SubHeader>{hierarchy.name}</SubHeader>}
-                  <Stories {...pick(this.props, storyProps)} storiesHierarchy={hierarchy} />
-                </div>
-              )
-          )}
-        </div>
+        <div style={scrollStyle}>{this.renderStories()}</div>
       </div>
     );
   }

lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js

@@ -2,6 +2,7 @@ import { Treebeard } from 'react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
 import deepEqual from 'deep-equal';
+import TreeHeader from './tree_header';
 import treeNodeTypes from './tree_node_type';
 import treeDecorators from './tree_decorators';
 import treeStyle from './tree_style';
@@ -158,13 +159,16 @@ class Stories extends React.Component {
     data.root = true;
 
     return (
-      <Treebeard
-        style={treeStyle}
-        data={data}
-        onToggle={this.onToggle}
-        animations={sidebarAnimations ? undefined : false}
-        decorators={treeDecorators}
-      />
+      <div>
+        {storiesHierarchy.name && <TreeHeader>{storiesHierarchy.name}</TreeHeader>}
+        <Treebeard
+          style={treeStyle}
+          data={data}
+          onToggle={this.onToggle}
+          animations={sidebarAnimations ? undefined : false}
+          decorators={treeDecorators}
+        />
+      </div>
     );
   }
 }

lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js

@@ -16,10 +16,10 @@ const headingStyle = {
   overflow: 'hidden',
 };
 
-const SubHeader = ({ children }) => <h4 style={headingStyle}>{children}</h4>;
+const TreeHeader = ({ children }) => <h4 style={headingStyle}>{children}</h4>;
 
-SubHeader.propTypes = {
+TreeHeader.propTypes = {
   children: PropTypes.string.isRequired,
 };
 
-export default SubHeader;
+export default TreeHeader;