From 136119db494a4436de62f01a3661fb102f294c26 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Fri, 22 Jan 2021 16:02:34 +0100
Subject: [PATCH] updated changes

---
 .../CustomScrollbar/CustomScrollbar.tsx       | 47 +++++++++----------
 public/app/core/components/Page/Page.tsx      |  2 +-
 .../dashboard/containers/DashboardPage.tsx    |  2 +-
 public/app/features/explore/Wrapper.tsx       |  2 +-
 4 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index 74f426ba983..4405182dbda 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -53,8 +53,6 @@ const getStyles = (page?: boolean) => {
   };
 };
 
-const styles = getStyles();
-
 interface Props {
   className?: string;
   autoHide?: boolean;
@@ -123,39 +121,35 @@ export class CustomScrollbar extends Component<Props> {
     this.updateScroll();
   }
 
-  renderTrack = (track: 'track-vertical' | 'track-horizontal', hideTrack: boolean | undefined, passedProps: any) => {
+  renderTrack = (styles: any, hideTrack: boolean | undefined, passedProps: any) => {
     if (passedProps.style && hideTrack) {
       passedProps.style.display = 'none';
     }
 
-    return (
-      <div {...passedProps} className={track === 'track-vertical' ? styles.trackVertical : styles.trackHorizontal} />
-    );
+    return <div {...passedProps} className={styles.trackVertical | styles.trackHorizontal} />;
   };
 
-  renderThumb = (thumb: 'thumb-vertical' | 'thumb-horizontal', passedProps: any) => {
-    return (
-      <div {...passedProps} className={thumb === 'thumb-vertical' ? styles.thumbVertical : styles.thumbHorizontal} />
-    );
+  // renderThumb = (thumb: styles.thumbVertical | styles.thumbHorizontal, passedProps: any) => {
+  //   return <div {...passedProps} className={thumb} />;
+  // };
+
+  renderTrackHorizontal = (passedProps: any, styles: any) => {
+    return this.renderTrack(styles.trackHorizontal, this.props.hideHorizontalTrack, passedProps);
   };
 
-  renderTrackHorizontal = (passedProps: any) => {
-    return this.renderTrack('track-horizontal', this.props.hideHorizontalTrack, passedProps);
+  renderTrackVertical = (passedProps: any, styles: any) => {
+    return this.renderTrack(styles.trackVertical, this.props.hideVerticalTrack, passedProps);
   };
 
-  renderTrackVertical = (passedProps: any) => {
-    return this.renderTrack('track-vertical', this.props.hideVerticalTrack, passedProps);
+  renderThumbHorizontal = (passedProps: any, styles: any) => {
+    return <div {...passedProps} className={styles.thumbHorizontal} />;
   };
 
-  renderThumbHorizontal = (passedProps: any) => {
-    return this.renderThumb('thumb-horizontal', passedProps);
+  renderThumbVertical = (passedProps: any, styles: any) => {
+    return <div {...passedProps} className={styles.thumbVertical} />;
   };
 
-  renderThumbVertical = (passedProps: any) => {
-    return this.renderThumb('thumb-vertical', passedProps);
-  };
-
-  renderView = (passedProps: any) => {
+  renderView = (passedProps: any, styles: any) => {
     return <div {...passedProps} className={styles.view} />;
   };
 
@@ -170,6 +164,7 @@ export class CustomScrollbar extends Component<Props> {
       autoHideTimeout,
       hideTracksWhenNotNeeded,
     } = this.props;
+    const styles = getStyles(this.props.page);
 
     return (
       <Scrollbars
@@ -184,11 +179,11 @@ export class CustomScrollbar extends Component<Props> {
         // Before these where set to inherit but that caused problems with cut of legends in firefox
         autoHeightMax={autoHeightMax}
         autoHeightMin={autoHeightMin}
-        renderTrackHorizontal={this.renderTrackHorizontal}
-        renderTrackVertical={this.renderTrackVertical}
-        renderThumbHorizontal={this.renderThumbHorizontal}
-        renderThumbVertical={this.renderThumbVertical}
-        renderView={this.renderView}
+        renderTrackHorizontal={(passedProps: any) => this.renderTrackHorizontal(passedProps, styles)}
+        renderTrackVertical={(passedProps: any) => this.renderTrackVertical(passedProps, styles)}
+        renderThumbHorizontal={(passedProps: any) => this.renderThumbHorizontal(passedProps, styles)}
+        renderThumbVertical={(passedProps: any) => this.renderThumbHorizontal(passedProps, styles)}
+        renderView={(passedProps: any) => this.renderView(passedProps, styles)}
       >
         {children}
       </Scrollbars>
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index 0838a96280d..c61c2c4f890 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -47,7 +47,7 @@ class Page extends Component<Props> {
     const { navModel, children, ...otherProps } = this.props;
     return (
       <div {...otherProps} className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
+        <CustomScrollbar autoHeightMin={'100%'} page={true}>
           <div className="page-scrollbar-content">
             <PageHeader model={navModel} />
             {children}
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 2cdb866b6c1..d5a2070607a 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -316,7 +316,7 @@ export class DashboardPage extends PureComponent<Props, State> {
             scrollTop={updateScrollTop}
             hideHorizontalTrack={true}
             updateAfterMountMs={500}
-            className="custom-scrollbar--page"
+            page={true}
           >
             <div className="dashboard-content">
               {initError && this.renderInitFailedState()}
diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx
index 469f92c5a29..7cd1bfb3296 100644
--- a/public/app/features/explore/Wrapper.tsx
+++ b/public/app/features/explore/Wrapper.tsx
@@ -31,7 +31,7 @@ export class Wrapper extends Component<WrapperProps> {
 
     return (
       <div className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'} autoHeightMax={''} className="custom-scrollbar--page">
+        <CustomScrollbar autoHeightMin={'100%'} autoHeightMax={''} page={true}>
           <div className="explore-wrapper">
             <ErrorBoundaryAlert style="page">
               <Explore exploreId={ExploreId.left} />