chore: Fix typings and add Page-component to DataSourceDashboards #14762

public/app/features/datasources/DataSourceDashboards.test.tsx

@@ -14,6 +14,7 @@ const setup = (propOverrides?: object) => {
     loadDataSource: jest.fn(),
     loadPluginDashboards: jest.fn(),
     removeDashboard: jest.fn(),
+    isLoading: false
   };
 
   Object.assign(props, propOverrides);

public/app/features/datasources/DataSourceDashboards.tsx

@@ -4,7 +4,7 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 
 // Components
-import PageHeader from 'app/core/components/PageHeader/PageHeader';
+import Page from 'app/core/components/Page/Page';
 import DashboardTable from './DashboardsTable';
 
 // Actions & Selectors
@@ -16,7 +16,7 @@ import { importDashboard, removeDashboard } from '../dashboard/state/actions';
 import { getDataSource } from './state/selectors';
 
 // Types
-import { NavModel, PluginDashboard } from 'app/types';
+import { NavModel, PluginDashboard, StoreState } from 'app/types';
 import { DataSourceSettings } from '@grafana/ui/src/types';
 
 export interface Props {
@@ -28,6 +28,7 @@ export interface Props {
   loadDataSource: typeof loadDataSource;
   loadPluginDashboards: typeof loadPluginDashboards;
   removeDashboard: typeof removeDashboard;
+  isLoading: boolean;
 }
 
 export class DataSourceDashboards extends PureComponent<Props> {
@@ -64,30 +65,30 @@ export class DataSourceDashboards extends PureComponent<Props> {
   };
 
   render() {
-    const { dashboards, navModel } = this.props;
+    const { dashboards, navModel, isLoading } = this.props;
     return (
-      <div>
-        <PageHeader model={navModel} />
-        <div className="page-container page-body">
+      <Page navModel={navModel}>
+        <Page.Contents isLoading={isLoading}>
           <DashboardTable
               dashboards={dashboards}
               onImport={(dashboard, overwrite) => this.onImport(dashboard, overwrite)}
               onRemove={dashboard => this.onRemove(dashboard)}
             />
-        </div>
-      </div>
+
+        </Page.Contents>
+      </Page>
     );
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps(state: StoreState) {
   const pageId = getRouteParamsId(state.location);
-
   return {
     navModel: getNavModel(state.navIndex, `datasource-dashboards-${pageId}`),
     pageId: pageId,
     dashboards: state.plugins.dashboards,
     dataSource: getDataSource(state.dataSources, pageId),
+    isLoading: state.plugins.isLoadingPluginDashboards
   };
 }
 

public/app/features/datasources/__snapshots__/DataSourceDashboards.test.tsx.snap

@@ -1,18 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render component 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
   >
     <DashboardsTable
       dashboards={Array []}
       onImport={[Function]}
       onRemove={[Function]}
     />
-  </div>
-</div>
+  </PageContents>
+</Page>
 `;

public/app/features/plugins/state/actions.ts

@@ -7,6 +7,7 @@ import { PluginDashboard } from '../../../types/plugins';
 export enum ActionTypes {
   LoadPlugins = 'LOAD_PLUGINS',
   LoadPluginDashboards = 'LOAD_PLUGIN_DASHBOARDS',
+  LoadedPluginDashboards = 'LOADED_PLUGIN_DASHBOARDS',
   SetPluginsSearchQuery = 'SET_PLUGIN_SEARCH_QUERY',
   SetLayoutMode = 'SET_LAYOUT_MODE',
 }
@@ -18,6 +19,10 @@ export interface LoadPluginsAction {
 
 export interface LoadPluginDashboardsAction {
   type: ActionTypes.LoadPluginDashboards;
+}
+
+export interface LoadedPluginDashboardsAction {
+  type: ActionTypes.LoadedPluginDashboards;
   payload: PluginDashboard[];
 }
 
@@ -46,12 +51,20 @@ const pluginsLoaded = (plugins: Plugin[]): LoadPluginsAction => ({
   payload: plugins,
 });
 
-const pluginDashboardsLoaded = (dashboards: PluginDashboard[]): LoadPluginDashboardsAction => ({
+const pluginDashboardsLoad = (): LoadPluginDashboardsAction => ({
   type: ActionTypes.LoadPluginDashboards,
+});
+
+const pluginDashboardsLoaded = (dashboards: PluginDashboard[]): LoadedPluginDashboardsAction => ({
+  type: ActionTypes.LoadedPluginDashboards,
   payload: dashboards,
 });
 
-export type Action = LoadPluginsAction | LoadPluginDashboardsAction | SetPluginsSearchQueryAction | SetLayoutModeAction;
+export type Action = LoadPluginsAction
+  | LoadPluginDashboardsAction
+  | LoadedPluginDashboardsAction
+  | SetPluginsSearchQueryAction
+  | SetLayoutModeAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
@@ -64,8 +77,8 @@ export function loadPlugins(): ThunkResult<void> {
 
 export function loadPluginDashboards(): ThunkResult<void> {
   return async (dispatch, getStore) => {
+    dispatch(pluginDashboardsLoad());
     const dataSourceType = getStore().dataSources.dataSource.type;
-
     const response = await getBackendSrv().get(`api/plugins/${dataSourceType}/dashboards`);
     dispatch(pluginDashboardsLoaded(response));
   };

public/app/features/plugins/state/reducers.ts

@@ -9,6 +9,7 @@ export const initialState: PluginsState = {
   layoutMode: LayoutModes.Grid,
   hasFetched: false,
   dashboards: [] as PluginDashboard[],
+  isLoadingPluginDashboards: false
 };
 
 export const pluginsReducer = (state = initialState, action: Action): PluginsState => {
@@ -23,7 +24,10 @@ export const pluginsReducer = (state = initialState, action: Action): PluginsSta
       return { ...state, layoutMode: action.payload };
 
     case ActionTypes.LoadPluginDashboards:
-      return { ...state, dashboards: action.payload };
+      return { ...state, dashboards: [], isLoadingPluginDashboards: true };
+
+    case ActionTypes.LoadedPluginDashboards:
+      return { ...state, dashboards: action.payload, isLoadingPluginDashboards: false };
   }
   return state;
 };

public/app/types/plugins.ts

@@ -47,6 +47,7 @@ export interface PluginsState {
   layoutMode: string;
   hasFetched: boolean;
   dashboards: PluginDashboard[];
+  isLoadingPluginDashboards: boolean;
 }
 
 export interface VariableQueryProps {