added no datasources added

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

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

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>
 `;

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

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;

public/app/types/datasources.ts

@@ -21,4 +21,5 @@ export interface DataSourcesState {
   dataSources: DataSource[];
   searchQuery: string;
   layoutMode: LayoutMode;
+  dataSourcesCount: number;
 }