scrollbar refactor: replace HOC by component with children

public/app/core/components/ScrollBar/withScrollBar.test.tsx → public/app/core/components/ScrollBar/GrafanaScrollbar.test.tsx

 import React from 'react';
 import renderer from 'react-test-renderer';
-import withScrollBar from './withScrollBar';
+import GrafanaScrollbar from './GrafanaScrollbar';
 
-class TestComponent extends React.Component {
-  render() {
-    return <div className="my-component" />;
-  }
-}
-
-describe('withScrollBar', () => {
+describe('GrafanaScrollbar', () => {
   it('renders correctly', () => {
-    const TestComponentWithScroll = withScrollBar(TestComponent);
     const tree = renderer
       .create(
-        <TestComponentWithScroll>
+        <GrafanaScrollbar>
           <p>Scrollable content</p>
-        </TestComponentWithScroll>
+        </GrafanaScrollbar>
       )
       .toJSON();
     expect(tree).toMatchSnapshot();

public/app/core/components/ScrollBar/withScrollBar.tsx → public/app/core/components/ScrollBar/GrafanaScrollbar.tsx

 import React from 'react';
 import Scrollbars from 'react-custom-scrollbars';
 
-interface WithScrollBarProps {
+interface GrafanaScrollBarProps {
   customClassName?: string;
   autoHide?: boolean;
   autoHideTimeout?: number;
@@ -9,7 +9,7 @@ interface WithScrollBarProps {
   hideTracksWhenNotNeeded?: boolean;
 }
 
-const withScrollBarDefaultProps: Partial<WithScrollBarProps> = {
+const grafanaScrollBarDefaultProps: Partial<GrafanaScrollBarProps> = {
   customClassName: 'custom-scrollbars',
   autoHide: true,
   autoHideTimeout: 200,
@@ -20,34 +20,29 @@ const withScrollBarDefaultProps: Partial<WithScrollBarProps> = {
 /**
  * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
  */
-export default function withScrollBar<P extends object>(WrappedComponent: React.ComponentType<P>) {
-  return class extends React.Component<P & WithScrollBarProps> {
-    static defaultProps = withScrollBarDefaultProps;
+class GrafanaScrollbar extends React.Component<GrafanaScrollBarProps> {
+  static defaultProps = grafanaScrollBarDefaultProps;
 
-    render() {
-      // Use type casting here in order to get rest of the props working. See more
-      // https://github.com/Microsoft/TypeScript/issues/14409
-      // https://github.com/Microsoft/TypeScript/pull/13288
-      const { autoHide, autoHideTimeout, autoHideDuration, hideTracksWhenNotNeeded, customClassName, ...props } = this
-        .props as WithScrollBarProps;
-      const scrollProps = { autoHide, autoHideTimeout, autoHideDuration, hideTracksWhenNotNeeded };
+  render() {
+    const { customClassName, children, ...scrollProps } = this.props;
 
-      return (
-        <Scrollbars
-          className={customClassName}
-          autoHeight={true}
-          autoHeightMin={'100%'}
-          autoHeightMax={'100%'}
-          renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
-          renderTrackVertical={props => <div {...props} className="track-vertical" />}
-          renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
-          renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
-          renderView={props => <div {...props} className="view" />}
-          {...scrollProps}
-        >
-          <WrappedComponent {...props} />
-        </Scrollbars>
-      );
-    }
-  };
+    return (
+      <Scrollbars
+        className={customClassName}
+        autoHeight={true}
+        autoHeightMin={'100%'}
+        autoHeightMax={'100%'}
+        renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
+        renderTrackVertical={props => <div {...props} className="track-vertical" />}
+        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
+        renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
+        renderView={props => <div {...props} className="view" />}
+        {...scrollProps}
+      >
+        {children}
+      </Scrollbars>
+    );
+  }
 }
+
+export default GrafanaScrollbar;

public/app/core/components/ScrollBar/__snapshots__/withScrollBar.test.tsx.snap → public/app/core/components/ScrollBar/__snapshots__/GrafanaScrollbar.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`withScrollBar renders correctly 1`] = `
+exports[`GrafanaScrollbar renders correctly 1`] = `
 <div
   className="custom-scrollbars"
   style={
@@ -32,9 +32,9 @@ exports[`withScrollBar renders correctly 1`] = `
       }
     }
   >
-    <div
-      className="my-component"
-    />
+    <p>
+      Scrollable content
+    </p>
   </div>
   <div
     className="track-horizontal"