chore: Move CustomScrollbar to @grafana/ui #14759

public/app/core/components/CustomScrollbar/CustomScrollbar.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import CustomScrollbar from './CustomScrollbar';
-
-describe('CustomScrollbar', () => {
-  it('renders correctly', () => {
-    const tree = renderer
-      .create(
-        <CustomScrollbar>
-          <p>Scrollable content</p>
-        </CustomScrollbar>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

public/app/core/components/CustomScrollbar/CustomScrollbar.tsx

@@ -1,48 +0,0 @@
-import React, { PureComponent } from 'react';
-import Scrollbars from 'react-custom-scrollbars';
-
-interface Props {
-  customClassName?: string;
-  autoHide?: boolean;
-  autoHideTimeout?: number;
-  autoHideDuration?: number;
-  hideTracksWhenNotNeeded?: boolean;
-}
-
-/**
- * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
- */
-class CustomScrollbar extends PureComponent<Props> {
-  static defaultProps: Partial<Props> = {
-    customClassName: 'custom-scrollbars',
-    autoHide: true,
-    autoHideTimeout: 200,
-    autoHideDuration: 200,
-    hideTracksWhenNotNeeded: false,
-  };
-
-  render() {
-    const { customClassName, children, ...scrollProps } = this.props;
-
-    return (
-      <Scrollbars
-        className={customClassName}
-        autoHeight={true}
-        // These autoHeightMin & autoHeightMax options affect firefox and chrome differently.
-        // Before these where set to inhert but that caused problems with cut of legends in firefox
-        autoHeightMin={'0'}
-        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 CustomScrollbar;

public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap

@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CustomScrollbar renders correctly 1`] = `
-<div
-  className="custom-scrollbars"
-  style={
-    Object {
-      "height": "auto",
-      "maxHeight": "100%",
-      "minHeight": "0",
-      "overflow": "hidden",
-      "position": "relative",
-      "width": "100%",
-    }
-  }
->
-  <div
-    className="view"
-    style={
-      Object {
-        "WebkitOverflowScrolling": "touch",
-        "bottom": undefined,
-        "left": undefined,
-        "marginBottom": 0,
-        "marginRight": 0,
-        "maxHeight": "calc(100% + 0px)",
-        "minHeight": "calc(0 + 0px)",
-        "overflow": "scroll",
-        "position": "relative",
-        "right": undefined,
-        "top": undefined,
-      }
-    }
-  >
-    <p>
-      Scrollable content
-    </p>
-  </div>
-  <div
-    className="track-horizontal"
-    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"
-    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>
-`;

public/app/core/components/Select/Select.tsx

@@ -11,7 +11,7 @@ import OptionGroup from './OptionGroup';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import ResetStyles from './ResetStyles';
-import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
+import { CustomScrollbar } from '@grafana/ui';
 
 export interface SelectOptionItem {
   label?: string;

public/app/features/dashboard/dashgrid/EditorTabBody.tsx

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
+import { CustomScrollbar } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelOptionSection } from './PanelOptionSection';
 

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import { TimeSeries } from 'app/core/core';
-import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
+import { CustomScrollbar } from '@grafana/ui';
 import { LegendItem, LEGEND_STATS } from './LegendSeriesItem';
 
 interface LegendProps {