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>
+              dashboards={dashboards}
+              onImport={(dashboard, overwrite) => this.onImport(dashboard, overwrite)}
+              onRemove={dashboard => this.onRemove(dashboard)}
+            />
+
+        </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>
 `;