wrapper for react-custom-scrollbars component

package.json

@@ -15,6 +15,7 @@
     "@types/jest": "^21.1.4",
     "@types/node": "^8.0.31",
     "@types/react": "^16.0.25",
+    "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-dom": "^16.0.3",
     "angular-mocks": "1.6.6",
     "autoprefixer": "^6.4.0",
@@ -154,6 +155,7 @@
     "prop-types": "^15.6.0",
     "rc-cascader": "^0.14.0",
     "react": "^16.2.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.2.0",
     "react-grid-layout": "0.16.6",
     "react-highlight-words": "^0.10.0",

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;
+  }
+}

yarn.lock

@@ -473,6 +473,10 @@ add-dom-event-listener@1.x:
   dependencies:
     object-assign "4.x"
 
+add-px-to-style@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
+
 agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.0.tgz#9838b5c3392b962bad031e6a4c5e1024abec45ce"
@@ -3406,6 +3410,14 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-css@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
+  dependencies:
+    add-px-to-style "1.0.0"
+    prefix-style "2.0.1"
+    to-camel-case "1.0.0"
+
 dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@@ -9137,6 +9149,10 @@ prebuild-install@^2.3.0:
     tunnel-agent "^0.6.0"
     which-pm-runs "^1.0.0"
 
+prefix-style@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9388,7 +9404,7 @@ qw@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/qw/-/qw-1.0.1.tgz#efbfdc740f9ad054304426acb183412cc8b996d4"
 
-raf@^3.4.0:
+raf@^3.1.0, raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
   dependencies:
@@ -9496,6 +9512,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-custom-scrollbars@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
+  dependencies:
+    dom-css "^2.0.0"
+    prop-types "^15.5.10"
+    raf "^3.1.0"
+
 react-dom@^16.2.0:
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
@@ -11335,10 +11359,20 @@ to-buffer@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
 
+to-camel-case@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
+  dependencies:
+    to-space-case "^1.0.0"
+
 to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+to-no-case@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
+
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -11361,6 +11395,12 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+to-space-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
+  dependencies:
+    to-no-case "^1.0.0"
+
 toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"