From 7ae4076ddd3923e6b6463cef4e09c7db7f0e3090 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 28 Sep 2018 11:29:18 +0200
Subject: [PATCH] added no datasources added

---
 .../datasources/DataSourcesListPage.test.tsx  |  2 +
 .../datasources/DataSourcesListPage.tsx       | 20 +++++----
 .../DataSourcesListPage.test.tsx.snap         | 42 ++++++++++++-------
 .../features/datasources/state/reducers.ts    |  3 +-
 .../features/datasources/state/selectors.ts   |  1 +
 public/app/types/datasources.ts               |  1 +
 6 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/public/app/features/datasources/DataSourcesListPage.test.tsx b/public/app/features/datasources/DataSourcesListPage.test.tsx
index 2cb6652ee13..fed7954d716 100644
--- a/public/app/features/datasources/DataSourcesListPage.test.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.test.tsx
@@ -11,6 +11,7 @@ const setup = (propOverrides?: object) => {
     layoutMode: LayoutModes.Grid,
     loadDataSources: jest.fn(),
     navModel: {} as NavModel,
+    dataSourcesCount: 0,
   };
 
   Object.assign(props, propOverrides);
@@ -28,6 +29,7 @@ describe('Render', () => {
   it('should render action bar and datasources', () => {
     const wrapper = setup({
       dataSources: getMockDataSources(5),
+      dataSourcesCount: 5,
     });
 
     expect(wrapper).toMatchSnapshot();
diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx
index a6ce1be7be9..c6db6ee7889 100644
--- a/public/app/features/datasources/DataSourcesListPage.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.tsx
@@ -5,7 +5,7 @@ import PageHeader from '../../core/components/PageHeader/PageHeader';
 import DataSourcesActionBar from './DataSourcesActionBar';
 import DataSourcesList from './DataSourcesList';
 import { loadDataSources } from './state/actions';
-import { getDataSources, getDataSourcesLayoutMode } from './state/selectors';
+import { getDataSources, getDataSourcesCount, getDataSourcesLayoutMode } from './state/selectors';
 import { getNavModel } from '../../core/selectors/navModel';
 import { DataSource, NavModel } from 'app/types';
 import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
@@ -14,6 +14,7 @@ import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
 export interface Props {
   navModel: NavModel;
   dataSources: DataSource[];
+  dataSourcesCount: number;
   layoutMode: LayoutMode;
   loadDataSources: typeof loadDataSources;
 }
@@ -39,18 +40,20 @@ export class DataSourcesListPage extends PureComponent<Props> {
   }
 
   render() {
-    const { navModel, dataSources, layoutMode } = this.props;
-
-    if (dataSources.length === 0) {
-      return <EmptyListCTA model={emptyListModel} />;
-    }
+    const { dataSources, dataSourcesCount, navModel, layoutMode } = this.props;
 
     return (
       <div>
         <PageHeader model={navModel} />
         <div className="page-container page-body">
-          <DataSourcesActionBar />
-          <DataSourcesList dataSources={dataSources} layoutMode={layoutMode} />
+          {dataSourcesCount === 0 ? (
+            <EmptyListCTA model={emptyListModel} />
+          ) : (
+            [
+              <DataSourcesActionBar key="action-bar" />,
+              <DataSourcesList dataSources={dataSources} layoutMode={layoutMode} key="list" />,
+            ]
+          )}
         </div>
       </div>
     );
@@ -62,6 +65,7 @@ function mapStateToProps(state) {
     navModel: getNavModel(state.navIndex, 'datasources'),
     dataSources: getDataSources(state.dataSources),
     layoutMode: getDataSourcesLayoutMode(state.dataSources),
+    dataSourcesCount: getDataSourcesCount(state.dataSources),
   };
 }
 
diff --git a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap b/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap
index 837a8aceb24..c19ee641e1b 100644
--- a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap
+++ b/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap
@@ -8,7 +8,9 @@ exports[`Render should render action bar and datasources 1`] = `
   <div
     className="page-container page-body"
   >
-    <Connect(DataSourcesActionBar) />
+    <Connect(DataSourcesActionBar)
+      key="action-bar"
+    />
     <DataSourcesList
       dataSources={
         Array [
@@ -128,6 +130,7 @@ exports[`Render should render action bar and datasources 1`] = `
           },
         ]
       }
+      key="list"
       layoutMode="grid"
     />
   </div>
@@ -135,18 +138,27 @@ exports[`Render should render action bar and datasources 1`] = `
 `;
 
 exports[`Render should render component 1`] = `
-<EmptyListCTA
-  model={
-    Object {
-      "buttonIcon": "gicon gicon-add-datasources",
-      "buttonLink": "datasources/new",
-      "buttonTitle": "Add data source",
-      "proTip": "You can also define data sources through configuration files.",
-      "proTipLink": "http://docs.grafana.org/administration/provisioning/#datasources?utm_source=grafana_ds_list",
-      "proTipLinkTitle": "Learn more",
-      "proTipTarget": "_blank",
-      "title": "There are no data sources defined yet",
-    }
-  }
-/>
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <EmptyListCTA
+      model={
+        Object {
+          "buttonIcon": "gicon gicon-add-datasources",
+          "buttonLink": "datasources/new",
+          "buttonTitle": "Add data source",
+          "proTip": "You can also define data sources through configuration files.",
+          "proTipLink": "http://docs.grafana.org/administration/provisioning/#datasources?utm_source=grafana_ds_list",
+          "proTipLinkTitle": "Learn more",
+          "proTipTarget": "_blank",
+          "title": "There are no data sources defined yet",
+        }
+      }
+    />
+  </div>
+</div>
 `;
diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts
index 15604fa8b53..d57b0ad523a 100644
--- a/public/app/features/datasources/state/reducers.ts
+++ b/public/app/features/datasources/state/reducers.ts
@@ -6,12 +6,13 @@ const initialState: DataSourcesState = {
   dataSources: [] as DataSource[],
   layoutMode: LayoutModes.Grid,
   searchQuery: '',
+  dataSourcesCount: 0,
 };
 
 export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => {
   switch (action.type) {
     case ActionTypes.LoadDataSources:
-      return { ...state, dataSources: action.payload };
+      return { ...state, dataSources: action.payload, dataSourcesCount: action.payload.length };
 
     case ActionTypes.SetDataSourcesSearchQuery:
       return { ...state, searchQuery: action.payload };
diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts
index 15ee88e715a..6df08f68037 100644
--- a/public/app/features/datasources/state/selectors.ts
+++ b/public/app/features/datasources/state/selectors.ts
@@ -8,3 +8,4 @@ export const getDataSources = state => {
 
 export const getDataSourcesSearchQuery = state => state.searchQuery;
 export const getDataSourcesLayoutMode = state => state.layoutMode;
+export const getDataSourcesCount = state => state.dataSourcesCount;
diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts
index 40266fbbc5a..b9936e7c01b 100644
--- a/public/app/types/datasources.ts
+++ b/public/app/types/datasources.ts
@@ -21,4 +21,5 @@ export interface DataSourcesState {
   dataSources: DataSource[];
   searchQuery: string;
   layoutMode: LayoutMode;
+  dataSourcesCount: number;
 }