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,10 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render alpha info text 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
+  >
     <div
       className="page-container page-body"
     >
@@ -99,14 +101,17 @@ exports[`Render should render alpha info text 1`] = `
         </form>
       </div>
     </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render beta info text 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
+  >
     <div
       className="page-container page-body"
     >
@@ -201,14 +206,17 @@ exports[`Render should render beta info text 1`] = `
         </form>
       </div>
     </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render component 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
+  >
     <div
       className="page-container page-body"
     >
@@ -298,14 +306,17 @@ exports[`Render should render component 1`] = `
         </form>
       </div>
     </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render is ready only message 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
+  >
     <div
       className="page-container page-body"
     >
@@ -400,16 +411,16 @@ exports[`Render should render is ready only message 1`] = `
         </form>
       </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>
 `;