graph legend: use refactored version of scrollbar, #13175

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import toJson from 'enzyme-to-json';
-import GrafanaScrollbar from './GrafanaScrollbar';
-
-describe('GrafanaScrollbar', () => {
-  it('renders correctly', () => {
-    const tree = mount(
-      <GrafanaScrollbar>
-        <p>Scrollable content</p>
-      </GrafanaScrollbar>
-    );
-    expect(toJson(tree)).toMatchSnapshot();
-  });
-});

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import Scrollbars from 'react-custom-scrollbars';
-
-interface GrafanaScrollBarProps {
-  customClassName?: string;
-  autoHide?: boolean;
-  autoHideTimeout?: number;
-  autoHideDuration?: number;
-  hideTracksWhenNotNeeded?: boolean;
-}
-
-const grafanaScrollBarDefaultProps: Partial<GrafanaScrollBarProps> = {
-  customClassName: 'custom-scrollbars',
-  autoHide: true,
-  autoHideTimeout: 200,
-  autoHideDuration: 200,
-  hideTracksWhenNotNeeded: false,
-};
-
-/**
- * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
- */
-class GrafanaScrollbar extends React.Component<GrafanaScrollBarProps> {
-  static defaultProps = grafanaScrollBarDefaultProps;
-
-  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}
-      >
-        {children}
-      </Scrollbars>
-    );
-  }
-}
-
-export default GrafanaScrollbar;

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

@@ -1,116 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GrafanaScrollbar renders correctly 1`] = `
-<GrafanaScrollbar
-  autoHide={true}
-  autoHideDuration={200}
-  autoHideTimeout={200}
-  customClassName="custom-scrollbars"
-  hideTracksWhenNotNeeded={false}
->
-  <Scrollbars
-    autoHeight={true}
-    autoHeightMax="100%"
-    autoHeightMin="100%"
-    autoHide={true}
-    autoHideDuration={200}
-    autoHideTimeout={200}
-    className="custom-scrollbars"
-    hideTracksWhenNotNeeded={false}
-    renderThumbHorizontal={[Function]}
-    renderThumbVertical={[Function]}
-    renderTrackHorizontal={[Function]}
-    renderTrackVertical={[Function]}
-    renderView={[Function]}
-    tagName="div"
-    thumbMinSize={30}
-    universal={false}
-  >
-    <div
-      className="custom-scrollbars"
-      style={
-        Object {
-          "height": "auto",
-          "maxHeight": "100%",
-          "minHeight": "100%",
-          "overflow": "hidden",
-          "position": "relative",
-          "width": "100%",
-        }
-      }
-    >
-      <div
-        className="view"
-        key="view"
-        style={
-          Object {
-            "WebkitOverflowScrolling": "touch",
-            "bottom": undefined,
-            "left": undefined,
-            "marginBottom": 0,
-            "marginRight": 0,
-            "maxHeight": "calc(100% + 0px)",
-            "minHeight": "calc(100% + 0px)",
-            "overflow": "scroll",
-            "position": "relative",
-            "right": undefined,
-            "top": undefined,
-          }
-        }
-      >
-        <p>
-          Scrollable content
-        </p>
-      </div>
-      <div
-        className="track-horizontal"
-        key="trackHorizontal"
-        style={
-          Object {
-            "display": "none",
-            "height": 6,
-            "opacity": 0,
-            "position": "absolute",
-            "transition": "opacity 200ms",
-          }
-        }
-      >
-        <div
-          className="thumb-horizontal"
-          style={
-            Object {
-              "display": "block",
-              "height": "100%",
-              "position": "relative",
-            }
-          }
-        />
-      </div>
-      <div
-        className="track-vertical"
-        key="trackVertical"
-        style={
-          Object {
-            "display": "none",
-            "opacity": 0,
-            "position": "absolute",
-            "transition": "opacity 200ms",
-            "width": 6,
-          }
-        }
-      >
-        <div
-          className="thumb-vertical"
-          style={
-            Object {
-              "display": "block",
-              "position": "relative",
-              "width": "100%",
-            }
-          }
-        />
-      </div>
-    </div>
-  </Scrollbars>
-</GrafanaScrollbar>
-`;

public/app/plugins/panel/graph/Legend.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import { TimeSeries } from 'app/core/core';
-import GrafanaScrollbar from 'app/core/components/ScrollBar/GrafanaScrollbar';
+import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
 
 const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
 
@@ -193,7 +193,7 @@ function LegendValue(props: LegendValueProps) {
   return <div className={`graph-legend-value ${valueName}`}>{value}</div>;
 }
 
-function renderLegendValues(props: LegendSeriesItemProps, series, asTable = false): React.ReactElement<any>[] {
+function renderLegendValues(props: LegendSeriesItemProps, series, asTable = false) {
   const legendValueItems = [];
   for (const valueName of LEGEND_STATS) {
     if (props[valueName]) {
@@ -312,9 +312,9 @@ function getOptionSeriesCSSClasses(series, hiddenSeries) {
 export class Legend extends React.Component<GraphLegendProps, GraphLegendState> {
   render() {
     return (
-      <GrafanaScrollbar>
+      <CustomScrollbar>
         <GraphLegend {...this.props} />
-      </GrafanaScrollbar>
+      </CustomScrollbar>
     );
   }
 }