From 54ddaecea193211d6b47d054172c429ecc0ec029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 3 Apr 2020 10:21:15 +0200
Subject: [PATCH] Table: Fixing scrolling draging the vertical handle (#23311)

* Table: Fixing scrolling draging the vertical handle

* updated snapshots
---
 .../CustomScrollbar/CustomScrollbar.tsx         | 17 +++++------------
 .../__snapshots__/CustomScrollbar.test.tsx.snap |  4 ++--
 .../grafana-ui/src/components/Table/Table.tsx   |  2 +-
 .../__snapshots__/ServerStats.test.tsx.snap     |  4 ++--
 .../components/Inspector/PanelInspector.tsx     |  2 +-
 5 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index 96e8809a6eb..7bc33f860ba 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import isNil from 'lodash/isNil';
 import classNames from 'classnames';
 import Scrollbars from 'react-custom-scrollbars';
-import { cx, css } from 'emotion';
 
 interface Props {
   className?: string;
@@ -72,17 +71,11 @@ export class CustomScrollbar extends Component<Props> {
   }
 
   renderTrack = (track: 'track-vertical' | 'track-horizontal', hideTrack: boolean | undefined, passedProps: any) => {
-    return (
-      <div
-        {...passedProps}
-        className={cx(
-          css`
-            visibility: ${hideTrack ? 'hidden' : 'visible'};
-          `,
-          track
-        )}
-      />
-    );
+    if (passedProps.style && hideTrack) {
+      passedProps.style.display = 'none';
+    }
+
+    return <div {...passedProps} className={track} />;
   };
 
   renderThumb = (thumb: 'thumb-horizontal' | 'thumb-vertical', passedProps: any) => {
diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
index 2d941bb1767..dd3f59ad1e1 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
     </p>
   </div>
   <div
-    className="css-52gpmd track-horizontal"
+    className="track-horizontal"
     style={
       Object {
         "display": "none",
@@ -58,7 +58,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
     />
   </div>
   <div
-    className="css-52gpmd track-vertical"
+    className="track-vertical"
     style={
       Object {
         "display": "none",
diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 4076162554b..9cfc18ce7c9 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -68,7 +68,7 @@ export const Table: FC<Props> = memo(({ data, height, onCellClick, width, column
 
   return (
     <div {...getTableProps()} className={tableStyles.table}>
-      <CustomScrollbar>
+      <CustomScrollbar hideVerticalTrack={true}>
         {!noHeader && (
           <div>
             {headerGroups.map((headerGroup: HeaderGroup) => (
diff --git a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
index db07518ab12..97f8e5faff0 100644
--- a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
+++ b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`ServerStats Should render table with stats 1`] = `
       </div>
     </div>
     <div
-      className="css-52gpmd track-horizontal"
+      className="track-horizontal"
       style={
         Object {
           "display": "none",
@@ -241,7 +241,7 @@ exports[`ServerStats Should render table with stats 1`] = `
       />
     </div>
     <div
-      className="css-52gpmd track-vertical"
+      className="track-vertical"
       style={
         Object {
           "display": "none",
diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
index ecbdbe44a71..82c0ca5671d 100644
--- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
+++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
@@ -353,8 +353,8 @@ export class PanelInspector extends PureComponent<Props, State> {
     return (
       <Drawer title={this.drawerHeader} width={drawerWidth} onClose={this.onDismiss}>
         <TabContent className={styles.tabContent}>
+          {tab === InspectTab.Data && this.renderDataTab()}
           <CustomScrollbar autoHeightMin="100%">
-            {tab === InspectTab.Data && this.renderDataTab()}
             {tab === InspectTab.Meta && this.renderMetadataInspector()}
             {tab === InspectTab.Request && this.renderRequestTab()}
             {tab === InspectTab.Error && this.renderErrorTab(error)}