wrapper for react-custom-scrollbars component

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import Scrollbars from 'react-custom-scrollbars';
+
+interface WithScrollBarProps {
+  customClassName?: string;
+  autoHide?: boolean;
+  autoHideTimeout?: number;
+  autoHideDuration?: number;
+  hideTracksWhenNotNeeded?: boolean;
+}
+
+const withScrollBarDefaultProps: Partial<WithScrollBarProps> = {
+  customClassName: 'custom-scrollbars',
+  autoHide: true,
+  autoHideTimeout: 200,
+  autoHideDuration: 200,
+  hideTracksWhenNotNeeded: false,
+};
+
+/**
+ * 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;
+
+    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 };
+
+      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>
+      );
+    }
+  };
+}

public/sass/components/_scrollbar.scss

@@ -294,3 +294,46 @@
     padding-top: 1px;
   }
 }
+
+// Custom styles for 'react-custom-scrollbars'
+
+.custom-scrollbars {
+  // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
+  // make scroll working it should fit outer container size (scroll appears only when inner container size is
+  // greater than outer one).
+  display: flex;
+  flex-grow: 1;
+
+  .view {
+    display: flex;
+    flex-grow: 1;
+  }
+
+  .track-vertical {
+    border-radius: 3px;
+    width: 6px !important;
+
+    right: 2px;
+    bottom: 2px;
+    top: 2px;
+  }
+
+  .track-horizontal {
+    border-radius: 3px;
+    height: 6px !important;
+
+    right: 2px;
+    bottom: 2px;
+    left: 2px;
+  }
+
+  .thumb-vertical {
+    @include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
+    border-radius: 6px;
+  }
+
+  .thumb-horizontal {
+    @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
+    border-radius: 6px;
+  }
+}