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

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -4,8 +4,7 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 
 // Components
-import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import PageLoader from 'app/core/components/PageLoader/PageLoader';
+import Page from 'app/core/components/Page/Page';
 import PluginSettings from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
@@ -51,7 +50,7 @@ enum DataSourceStates {
 }
 
 export class DataSourceSettingsPage extends PureComponent<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -65,8 +64,8 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
     await loadDataSource(pageId);
   }
 
-  onSubmit = async event => {
-    event.preventDefault();
+  onSubmit = async (evt: React.FormEvent<HTMLFormElement>) => {
+    evt.preventDefault();
 
     await this.props.updateDataSource({ ...this.state.dataSource, name: this.props.dataSource.name });
 
@@ -89,7 +88,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
     this.props.deleteDataSource();
   };
 
-  onModelChange = dataSource => {
+  onModelChange = (dataSource: DataSourceSettings) => {
     this.setState({
       dataSource: dataSource,
     });
@@ -170,17 +169,18 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
     });
   }
 
+  get hasDataSource() {
+    return Object.keys(this.props.dataSource).length > 0;
+  }
+
   render() {
     const { dataSource, dataSourceMeta, navModel, setDataSourceName, setIsDefault } = this.props;
     const { testingMessage, testingStatus } = this.state;
 
     return (
-      <div>
-        <PageHeader model={navModel} />
-        {Object.keys(dataSource).length === 0 ? (
-          <PageLoader pageName="Data source settings" />
-        ) : (
-          <div className="page-container page-body">
+      <Page navModel={navModel}>
+        <Page.Contents isLoading={!this.hasDataSource}>
+          {this.hasDataSource && <div className="page-container page-body">
             <div>
               <form onSubmit={this.onSubmit}>
                 {this.isReadOnly() && this.renderIsReadOnlyMessage()}
@@ -225,9 +225,9 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
                 />
               </form>
             </div>
-          </div>
-        )}
-      </div>
+          </div>}
+        </Page.Contents>
+      </Page>
     );
   }
 }

public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap

@@ -1,415 +1,426 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render alpha info text 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
   >
-    <div>
-      <form
-        onSubmit={[Function]}
-      >
-        <div
-          className="grafana-info-box"
+    <div
+      className="page-container page-body"
+    >
+      <div>
+        <form
+          onSubmit={[Function]}
         >
-          This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes.
-        </div>
-        <BasicSettings
-          dataSourceName="gdev-cloudwatch"
-          isDefault={false}
-          onDefaultChange={[Function]}
-          onNameChange={[Function]}
-        />
-        <PluginSettings
-          dataSource={
-            Object {
-              "access": "",
-              "basicAuth": false,
-              "basicAuthPassword": "",
-              "basicAuthUser": "",
-              "database": "",
-              "id": 13,
-              "isDefault": false,
-              "jsonData": Object {
-                "authType": "credentials",
-                "defaultRegion": "eu-west-2",
-              },
-              "name": "gdev-cloudwatch",
-              "orgId": 1,
-              "password": "",
-              "readOnly": false,
-              "type": "cloudwatch",
-              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-              "url": "",
-              "user": "",
-              "withCredentials": false,
-            }
-          }
-          dataSourceMeta={
-            Object {
-              "defaultNavUrl": "some/url",
-              "enabled": false,
-              "hasUpdate": false,
-              "id": "1",
-              "info": Object {
-                "author": Object {
-                  "name": "Grafana Labs",
-                  "url": "url/to/GrafanaLabs",
+          <div
+            className="grafana-info-box"
+          >
+            This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes.
+          </div>
+          <BasicSettings
+            dataSourceName="gdev-cloudwatch"
+            isDefault={false}
+            onDefaultChange={[Function]}
+            onNameChange={[Function]}
+          />
+          <PluginSettings
+            dataSource={
+              Object {
+                "access": "",
+                "basicAuth": false,
+                "basicAuthPassword": "",
+                "basicAuthUser": "",
+                "database": "",
+                "id": 13,
+                "isDefault": false,
+                "jsonData": Object {
+                  "authType": "credentials",
+                  "defaultRegion": "eu-west-2",
                 },
-                "description": "pretty decent plugin",
-                "links": Array [
-                  Object {
-                    "name": "project",
-                    "url": "one link",
+                "name": "gdev-cloudwatch",
+                "orgId": 1,
+                "password": "",
+                "readOnly": false,
+                "type": "cloudwatch",
+                "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+                "url": "",
+                "user": "",
+                "withCredentials": false,
+              }
+            }
+            dataSourceMeta={
+              Object {
+                "defaultNavUrl": "some/url",
+                "enabled": false,
+                "hasUpdate": false,
+                "id": "1",
+                "info": Object {
+                  "author": Object {
+                    "name": "Grafana Labs",
+                    "url": "url/to/GrafanaLabs",
                   },
-                ],
-                "logos": Object {
-                  "large": "large/logo",
-                  "small": "small/logo",
-                },
-                "screenshots": Array [
-                  Object {
-                    "path": "screenshot",
+                  "description": "pretty decent plugin",
+                  "links": Array [
+                    Object {
+                      "name": "project",
+                      "url": "one link",
+                    },
+                  ],
+                  "logos": Object {
+                    "large": "large/logo",
+                    "small": "small/logo",
                   },
-                ],
-                "updated": "2018-09-26",
-                "version": "1",
-              },
-              "latestVersion": "1",
-              "module": Object {},
-              "name": "pretty cool plugin 1",
-              "pinned": false,
-              "state": "alpha",
-              "type": "",
+                  "screenshots": Array [
+                    Object {
+                      "path": "screenshot",
+                    },
+                  ],
+                  "updated": "2018-09-26",
+                  "version": "1",
+                },
+                "latestVersion": "1",
+                "module": Object {},
+                "name": "pretty cool plugin 1",
+                "pinned": false,
+                "state": "alpha",
+                "type": "",
+              }
             }
-          }
-          onModelChange={[Function]}
-        />
-        <div
-          className="gf-form-group section"
-        />
-        <ButtonRow
-          isReadOnly={false}
-          onDelete={[Function]}
-          onSubmit={[Function]}
-        />
-      </form>
+            onModelChange={[Function]}
+          />
+          <div
+            className="gf-form-group section"
+          />
+          <ButtonRow
+            isReadOnly={false}
+            onDelete={[Function]}
+            onSubmit={[Function]}
+          />
+        </form>
+      </div>
     </div>
-  </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render beta info text 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
   >
-    <div>
-      <form
-        onSubmit={[Function]}
-      >
-        <div
-          className="grafana-info-box"
+    <div
+      className="page-container page-body"
+    >
+      <div>
+        <form
+          onSubmit={[Function]}
         >
-          This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features.
-        </div>
-        <BasicSettings
-          dataSourceName="gdev-cloudwatch"
-          isDefault={false}
-          onDefaultChange={[Function]}
-          onNameChange={[Function]}
-        />
-        <PluginSettings
-          dataSource={
-            Object {
-              "access": "",
-              "basicAuth": false,
-              "basicAuthPassword": "",
-              "basicAuthUser": "",
-              "database": "",
-              "id": 13,
-              "isDefault": false,
-              "jsonData": Object {
-                "authType": "credentials",
-                "defaultRegion": "eu-west-2",
-              },
-              "name": "gdev-cloudwatch",
-              "orgId": 1,
-              "password": "",
-              "readOnly": false,
-              "type": "cloudwatch",
-              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-              "url": "",
-              "user": "",
-              "withCredentials": false,
-            }
-          }
-          dataSourceMeta={
-            Object {
-              "defaultNavUrl": "some/url",
-              "enabled": false,
-              "hasUpdate": false,
-              "id": "1",
-              "info": Object {
-                "author": Object {
-                  "name": "Grafana Labs",
-                  "url": "url/to/GrafanaLabs",
+          <div
+            className="grafana-info-box"
+          >
+            This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features.
+          </div>
+          <BasicSettings
+            dataSourceName="gdev-cloudwatch"
+            isDefault={false}
+            onDefaultChange={[Function]}
+            onNameChange={[Function]}
+          />
+          <PluginSettings
+            dataSource={
+              Object {
+                "access": "",
+                "basicAuth": false,
+                "basicAuthPassword": "",
+                "basicAuthUser": "",
+                "database": "",
+                "id": 13,
+                "isDefault": false,
+                "jsonData": Object {
+                  "authType": "credentials",
+                  "defaultRegion": "eu-west-2",
                 },
-                "description": "pretty decent plugin",
-                "links": Array [
-                  Object {
-                    "name": "project",
-                    "url": "one link",
+                "name": "gdev-cloudwatch",
+                "orgId": 1,
+                "password": "",
+                "readOnly": false,
+                "type": "cloudwatch",
+                "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+                "url": "",
+                "user": "",
+                "withCredentials": false,
+              }
+            }
+            dataSourceMeta={
+              Object {
+                "defaultNavUrl": "some/url",
+                "enabled": false,
+                "hasUpdate": false,
+                "id": "1",
+                "info": Object {
+                  "author": Object {
+                    "name": "Grafana Labs",
+                    "url": "url/to/GrafanaLabs",
                   },
-                ],
-                "logos": Object {
-                  "large": "large/logo",
-                  "small": "small/logo",
-                },
-                "screenshots": Array [
-                  Object {
-                    "path": "screenshot",
+                  "description": "pretty decent plugin",
+                  "links": Array [
+                    Object {
+                      "name": "project",
+                      "url": "one link",
+                    },
+                  ],
+                  "logos": Object {
+                    "large": "large/logo",
+                    "small": "small/logo",
                   },
-                ],
-                "updated": "2018-09-26",
-                "version": "1",
-              },
-              "latestVersion": "1",
-              "module": Object {},
-              "name": "pretty cool plugin 1",
-              "pinned": false,
-              "state": "beta",
-              "type": "",
+                  "screenshots": Array [
+                    Object {
+                      "path": "screenshot",
+                    },
+                  ],
+                  "updated": "2018-09-26",
+                  "version": "1",
+                },
+                "latestVersion": "1",
+                "module": Object {},
+                "name": "pretty cool plugin 1",
+                "pinned": false,
+                "state": "beta",
+                "type": "",
+              }
             }
-          }
-          onModelChange={[Function]}
-        />
-        <div
-          className="gf-form-group section"
-        />
-        <ButtonRow
-          isReadOnly={false}
-          onDelete={[Function]}
-          onSubmit={[Function]}
-        />
-      </form>
+            onModelChange={[Function]}
+          />
+          <div
+            className="gf-form-group section"
+          />
+          <ButtonRow
+            isReadOnly={false}
+            onDelete={[Function]}
+            onSubmit={[Function]}
+          />
+        </form>
+      </div>
     </div>
-  </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render component 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
   >
-    <div>
-      <form
-        onSubmit={[Function]}
-      >
-        <BasicSettings
-          dataSourceName="gdev-cloudwatch"
-          isDefault={false}
-          onDefaultChange={[Function]}
-          onNameChange={[Function]}
-        />
-        <PluginSettings
-          dataSource={
-            Object {
-              "access": "",
-              "basicAuth": false,
-              "basicAuthPassword": "",
-              "basicAuthUser": "",
-              "database": "",
-              "id": 13,
-              "isDefault": false,
-              "jsonData": Object {
-                "authType": "credentials",
-                "defaultRegion": "eu-west-2",
-              },
-              "name": "gdev-cloudwatch",
-              "orgId": 1,
-              "password": "",
-              "readOnly": false,
-              "type": "cloudwatch",
-              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-              "url": "",
-              "user": "",
-              "withCredentials": false,
-            }
-          }
-          dataSourceMeta={
-            Object {
-              "defaultNavUrl": "some/url",
-              "enabled": false,
-              "hasUpdate": false,
-              "id": "1",
-              "info": Object {
-                "author": Object {
-                  "name": "Grafana Labs",
-                  "url": "url/to/GrafanaLabs",
+    <div
+      className="page-container page-body"
+    >
+      <div>
+        <form
+          onSubmit={[Function]}
+        >
+          <BasicSettings
+            dataSourceName="gdev-cloudwatch"
+            isDefault={false}
+            onDefaultChange={[Function]}
+            onNameChange={[Function]}
+          />
+          <PluginSettings
+            dataSource={
+              Object {
+                "access": "",
+                "basicAuth": false,
+                "basicAuthPassword": "",
+                "basicAuthUser": "",
+                "database": "",
+                "id": 13,
+                "isDefault": false,
+                "jsonData": Object {
+                  "authType": "credentials",
+                  "defaultRegion": "eu-west-2",
                 },
-                "description": "pretty decent plugin",
-                "links": Array [
-                  Object {
-                    "name": "project",
-                    "url": "one link",
+                "name": "gdev-cloudwatch",
+                "orgId": 1,
+                "password": "",
+                "readOnly": false,
+                "type": "cloudwatch",
+                "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+                "url": "",
+                "user": "",
+                "withCredentials": false,
+              }
+            }
+            dataSourceMeta={
+              Object {
+                "defaultNavUrl": "some/url",
+                "enabled": false,
+                "hasUpdate": false,
+                "id": "1",
+                "info": Object {
+                  "author": Object {
+                    "name": "Grafana Labs",
+                    "url": "url/to/GrafanaLabs",
                   },
-                ],
-                "logos": Object {
-                  "large": "large/logo",
-                  "small": "small/logo",
-                },
-                "screenshots": Array [
-                  Object {
-                    "path": "screenshot",
+                  "description": "pretty decent plugin",
+                  "links": Array [
+                    Object {
+                      "name": "project",
+                      "url": "one link",
+                    },
+                  ],
+                  "logos": Object {
+                    "large": "large/logo",
+                    "small": "small/logo",
                   },
-                ],
-                "updated": "2018-09-26",
-                "version": "1",
-              },
-              "latestVersion": "1",
-              "module": Object {},
-              "name": "pretty cool plugin 1",
-              "pinned": false,
-              "state": "",
-              "type": "",
+                  "screenshots": Array [
+                    Object {
+                      "path": "screenshot",
+                    },
+                  ],
+                  "updated": "2018-09-26",
+                  "version": "1",
+                },
+                "latestVersion": "1",
+                "module": Object {},
+                "name": "pretty cool plugin 1",
+                "pinned": false,
+                "state": "",
+                "type": "",
+              }
             }
-          }
-          onModelChange={[Function]}
-        />
-        <div
-          className="gf-form-group section"
-        />
-        <ButtonRow
-          isReadOnly={false}
-          onDelete={[Function]}
-          onSubmit={[Function]}
-        />
-      </form>
+            onModelChange={[Function]}
+          />
+          <div
+            className="gf-form-group section"
+          />
+          <ButtonRow
+            isReadOnly={false}
+            onDelete={[Function]}
+            onSubmit={[Function]}
+          />
+        </form>
+      </div>
     </div>
-  </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render is ready only message 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
   >
-    <div>
-      <form
-        onSubmit={[Function]}
-      >
-        <div
-          className="grafana-info-box span8"
+    <div
+      className="page-container page-body"
+    >
+      <div>
+        <form
+          onSubmit={[Function]}
         >
-          This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
-        </div>
-        <BasicSettings
-          dataSourceName="gdev-cloudwatch"
-          isDefault={false}
-          onDefaultChange={[Function]}
-          onNameChange={[Function]}
-        />
-        <PluginSettings
-          dataSource={
-            Object {
-              "access": "",
-              "basicAuth": false,
-              "basicAuthPassword": "",
-              "basicAuthUser": "",
-              "database": "",
-              "id": 13,
-              "isDefault": false,
-              "jsonData": Object {
-                "authType": "credentials",
-                "defaultRegion": "eu-west-2",
-              },
-              "name": "gdev-cloudwatch",
-              "orgId": 1,
-              "password": "",
-              "readOnly": true,
-              "type": "cloudwatch",
-              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-              "url": "",
-              "user": "",
-              "withCredentials": false,
-            }
-          }
-          dataSourceMeta={
-            Object {
-              "defaultNavUrl": "some/url",
-              "enabled": false,
-              "hasUpdate": false,
-              "id": "1",
-              "info": Object {
-                "author": Object {
-                  "name": "Grafana Labs",
-                  "url": "url/to/GrafanaLabs",
+          <div
+            className="grafana-info-box span8"
+          >
+            This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+          </div>
+          <BasicSettings
+            dataSourceName="gdev-cloudwatch"
+            isDefault={false}
+            onDefaultChange={[Function]}
+            onNameChange={[Function]}
+          />
+          <PluginSettings
+            dataSource={
+              Object {
+                "access": "",
+                "basicAuth": false,
+                "basicAuthPassword": "",
+                "basicAuthUser": "",
+                "database": "",
+                "id": 13,
+                "isDefault": false,
+                "jsonData": Object {
+                  "authType": "credentials",
+                  "defaultRegion": "eu-west-2",
                 },
-                "description": "pretty decent plugin",
-                "links": Array [
-                  Object {
-                    "name": "project",
-                    "url": "one link",
+                "name": "gdev-cloudwatch",
+                "orgId": 1,
+                "password": "",
+                "readOnly": true,
+                "type": "cloudwatch",
+                "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+                "url": "",
+                "user": "",
+                "withCredentials": false,
+              }
+            }
+            dataSourceMeta={
+              Object {
+                "defaultNavUrl": "some/url",
+                "enabled": false,
+                "hasUpdate": false,
+                "id": "1",
+                "info": Object {
+                  "author": Object {
+                    "name": "Grafana Labs",
+                    "url": "url/to/GrafanaLabs",
                   },
-                ],
-                "logos": Object {
-                  "large": "large/logo",
-                  "small": "small/logo",
-                },
-                "screenshots": Array [
-                  Object {
-                    "path": "screenshot",
+                  "description": "pretty decent plugin",
+                  "links": Array [
+                    Object {
+                      "name": "project",
+                      "url": "one link",
+                    },
+                  ],
+                  "logos": Object {
+                    "large": "large/logo",
+                    "small": "small/logo",
                   },
-                ],
-                "updated": "2018-09-26",
-                "version": "1",
-              },
-              "latestVersion": "1",
-              "module": Object {},
-              "name": "pretty cool plugin 1",
-              "pinned": false,
-              "state": "",
-              "type": "",
+                  "screenshots": Array [
+                    Object {
+                      "path": "screenshot",
+                    },
+                  ],
+                  "updated": "2018-09-26",
+                  "version": "1",
+                },
+                "latestVersion": "1",
+                "module": Object {},
+                "name": "pretty cool plugin 1",
+                "pinned": false,
+                "state": "",
+                "type": "",
+              }
             }
-          }
-          onModelChange={[Function]}
-        />
-        <div
-          className="gf-form-group section"
-        />
-        <ButtonRow
-          isReadOnly={true}
-          onDelete={[Function]}
-          onSubmit={[Function]}
-        />
-      </form>
+            onModelChange={[Function]}
+          />
+          <div
+            className="gf-form-group section"
+          />
+          <ButtonRow
+            isReadOnly={true}
+            onDelete={[Function]}
+            onSubmit={[Function]}
+          />
+        </form>
+      </div>
     </div>
-  </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render loader 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <PageLoader
-    pageName="Data source settings"
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={true}
   />
-</div>
+</Page>
 `;