converting LeftPanel to a React.Component to resolve issue with React…

… Fiber (storybookjs#1539)

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Component } from 'react';
 import pick from 'lodash.pick';
 import Header from './header';
 import Stories from './stories_tree';
@@ -23,18 +23,33 @@ const storyProps = [
   'onSelectStory',
 ];
 
-const LeftPanel = props =>
-  <div style={mainStyle}>
-    <Header name={props.name} url={props.url} openShortcutsHelp={props.openShortcutsHelp} />
-    <TextFilter
-      text={props.storyFilter}
-      onClear={() => props.onStoryFilter('')}
-      onChange={text => props.onStoryFilter(text)}
-    />
-    <div style={scrollStyle}>
-      {props.storiesHierarchy ? <Stories {...pick(props, storyProps)} /> : null}
-    </div>
-  </div>;
+// eslint-disable-next-line react/prefer-stateless-function
+class LeftPanel extends Component {
+  render() {
+    const {
+      name,
+      onStoryFilter,
+      openShortcutsHelp,
+      storiesHierarchy,
+      storyFilter,
+      url,
+    } = this.props;
+
+    return (
+      <div style={mainStyle}>
+        <Header name={name} url={url} openShortcutsHelp={openShortcutsHelp} />
+        <TextFilter
+          text={storyFilter}
+          onClear={() => onStoryFilter('')}
+          onChange={text => onStoryFilter(text)}
+        />
+        <div style={scrollStyle}>
+          {storiesHierarchy ? <Stories {...pick(this.props, storyProps)} /> : null}
+        </div>
+      </div>
+    );
+  }
+}
 
 LeftPanel.defaultProps = {
   storiesHierarchy: null,