From 8237c22e24a83224c61a7a0fe06a931e4622272c Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 14 Jan 2019 16:05:49 +0100
Subject: [PATCH] fix: Add CustomScroller on DataSources page

---
 .../CustomScrollbar/CustomScrollbar.tsx       |  3 +-
 public/app/core/components/Page/Page.tsx      | 28 +++++++++++++++++--
 .../app/core/components/Page/PageContents.tsx |  7 ++---
 .../datasources/DataSourcesListPage.tsx       |  4 +--
 public/sass/components/_footer.scss           |  8 ++++++
 public/sass/layout/_page.scss                 | 17 ++++++++++-
 6 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index 519e755b474..7f43936481f 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -8,6 +8,7 @@ interface Props {
   autoHideDuration?: number;
   autoMaxHeight?: string;
   hideTracksWhenNotNeeded?: boolean;
+  autoHeightMin?: number | string;
 }
 
 /**
@@ -21,6 +22,7 @@ export class CustomScrollbar extends PureComponent<Props> {
     autoHideDuration: 200,
     autoMaxHeight: '100%',
     hideTracksWhenNotNeeded: false,
+    autoHeightMin: '0'
   };
 
   render() {
@@ -32,7 +34,6 @@ export class CustomScrollbar extends PureComponent<Props> {
         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={autoMaxHeight}
         renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
         renderTrackVertical={props => <div {...props} className="track-vertical" />}
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index 087ac0e111b..f225d4d3170 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 // Components
 import PageHeader from '../PageHeader/PageHeader';
 import PageContents from './PageContents';
+import { CustomScrollbar } from '@grafana/ui';
 
 interface Props {
   title: string;
@@ -11,13 +12,36 @@ interface Props {
 }
 
 class Page extends Component<Props> {
+  private bodyClass = 'is-react';
+  private body = document.getElementsByTagName('body')[0];
+  private footer = document.getElementsByClassName('footer')[0].cloneNode(true);
+  private scrollbarElementRef = React.createRef<HTMLDivElement>();
   static Header = PageHeader;
   static Contents = PageContents;
 
+
+  componentDidMount() {
+    this.body.classList.add(this.bodyClass);
+    this.copyFooter();
+  }
+
+  componentWillUnmount() {
+    this.body.classList.remove(this.bodyClass);
+  }
+
+  copyFooter = () => {
+    const c = this.scrollbarElementRef.current;
+    c.append(this.footer);
+  }
+
   render() {
     return (
-      <div>
-        {this.props.children}
+      <div className="page-scrollbar-wrapper">
+          <CustomScrollbar autoHeightMin={'100%'}>
+            <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
+              {this.props.children}
+            </div>
+          </CustomScrollbar>
       </div>
     );
   }
diff --git a/public/app/core/components/Page/PageContents.tsx b/public/app/core/components/Page/PageContents.tsx
index 4c740584e69..6970857d383 100644
--- a/public/app/core/components/Page/PageContents.tsx
+++ b/public/app/core/components/Page/PageContents.tsx
@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 
 // Components
-import { CustomScrollbar } from '@grafana/ui';
 import PageLoader from '../PageLoader/PageLoader';
 
 interface Props {
@@ -17,10 +16,8 @@ class PageContents extends Component<Props> {
 
     return (
       <div className="page-container page-body">
-        <CustomScrollbar>
-          {isLoading && <PageLoader />}
-          {this.props.children}
-        </CustomScrollbar>
+        {isLoading && <PageLoader />}
+        {this.props.children}
       </div>
     );
   }
diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx
index de9dba34d73..d81caae663c 100644
--- a/public/app/features/datasources/DataSourcesListPage.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.tsx
@@ -5,7 +5,7 @@ import Page from 'app/core/components/Page/Page';
 import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import DataSourcesList from './DataSourcesList';
-import { DataSource, NavModel } from 'app/types';
+import { DataSource, NavModel, StoreState } from 'app/types';
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
 import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
@@ -90,7 +90,7 @@ export class DataSourcesListPage extends PureComponent<Props> {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps(state: StoreState) {
   return {
     navModel: getNavModel(state.navIndex, 'datasources'),
     dataSources: getDataSources(state.dataSources),
diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index 893eea02914..b5617f4e387 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -38,6 +38,14 @@
   }
 }
 
+.is-react .footer {
+  display: none;
+}
+
+.is-react .custom-scrollbars .footer {
+  display: block;
+}
+
 // Keeping footer inside the graphic on Login screen
 .login-page {
   .footer {
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 818dc6c3e60..425cbc903c0 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -20,7 +20,23 @@
   }
 }
 
+.page-scrollbar-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.page-scrollbar-content {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+}
+
 .page-container {
+  flex-grow: 1;
+  width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: $spacer*2;
@@ -78,7 +94,6 @@
 
 .page-body {
   padding-top: $spacer*2;
-  min-height: 500px;
 }
 
 .page-heading {