fix: Add CustomScroller on DataSources page

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" />}

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,14 +12,37 @@ 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>
+      <div className="page-scrollbar-wrapper">
+          <CustomScrollbar autoHeightMin={'100%'}>
+            <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
               {this.props.children}
             </div>
+          </CustomScrollbar>
+      </div>
     );
   }
 }

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>
       </div>
     );
   }

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

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 {

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 {