Table: Fixing scrolling draging the vertical handle (#23311)

* Table: Fixing scrolling draging the vertical handle

* updated snapshots

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) => {

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",

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) => (

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",

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)}