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

public/app/features/folders/FolderSettingsPage.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import PageHeader from 'app/core/components/PageHeader/PageHeader';
+import Page from 'app/core/components/Page/Page';
 import appEvents from 'app/core/app_events';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { NavModel, StoreState, FolderState } from 'app/types';
@@ -18,23 +18,35 @@ export interface Props {
   deleteFolder: typeof deleteFolder;
 }
 
-export class FolderSettingsPage extends PureComponent<Props> {
+export interface State {
+  isLoading: boolean;
+}
+
+export class FolderSettingsPage extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      isLoading: false
+    };
+  }
+
   componentDidMount() {
     this.props.getFolderByUid(this.props.folderUid);
   }
 
-  onTitleChange = evt => {
+  onTitleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     this.props.setFolderTitle(evt.target.value);
   };
 
-  onSave = async evt => {
+  onSave = async (evt: React.FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     evt.stopPropagation();
-
+    this.setState({isLoading: true});
     await this.props.saveFolder(this.props.folder);
+    this.setState({isLoading: false});
   };
 
-  onDelete = evt => {
+  onDelete = (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.stopPropagation();
     evt.preventDefault();
 
@@ -53,34 +65,35 @@ export class FolderSettingsPage extends PureComponent<Props> {
     const { navModel, folder } = this.props;
 
     return (
-      <div>
-        <PageHeader model={navModel} />
-        <div className="page-container page-body">
-          <h2 className="page-sub-heading">Folder Settings</h2>
+      <Page navModel={navModel}>
+        <Page.Contents isLoading={this.state.isLoading}>
+          <div className="page-container page-body">
+            <h2 className="page-sub-heading">Folder Settings</h2>
 
-          <div className="section gf-form-group">
-            <form name="folderSettingsForm" onSubmit={this.onSave}>
-              <div className="gf-form">
-                <label className="gf-form-label width-7">Name</label>
-                <input
-                  type="text"
-                  className="gf-form-input width-30"
-                  value={folder.title}
-                  onChange={this.onTitleChange}
-                />
-              </div>
-              <div className="gf-form-button-row">
-                <button type="submit" className="btn btn-success" disabled={!folder.canSave || !folder.hasChanged}>
-                  <i className="fa fa-save" /> Save
-                </button>
-                <button className="btn btn-danger" onClick={this.onDelete} disabled={!folder.canSave}>
-                  <i className="fa fa-trash" /> Delete
-                </button>
-              </div>
-            </form>
+            <div className="section gf-form-group">
+              <form name="folderSettingsForm" onSubmit={this.onSave}>
+                <div className="gf-form">
+                  <label className="gf-form-label width-7">Name</label>
+                  <input
+                    type="text"
+                    className="gf-form-input width-30"
+                    value={folder.title}
+                    onChange={this.onTitleChange}
+                  />
+                </div>
+                <div className="gf-form-button-row">
+                  <button type="submit" className="btn btn-success" disabled={!folder.canSave || !folder.hasChanged}>
+                    <i className="fa fa-save" /> Save
+                  </button>
+                  <button className="btn btn-danger" onClick={this.onDelete} disabled={!folder.canSave}>
+                    <i className="fa fa-trash" /> Delete
+                  </button>
+                </div>
+              </form>
+            </div>
           </div>
-        </div>
-      </div>
+        </Page.Contents>
+      </Page>
     );
   }
 }

public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap

@@ -1,131 +1,137 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should enable save button 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
+<Page
+  navModel={Object {}}
+>
+  <PageContents
+    isLoading={false}
   >
-    <h2
-      className="page-sub-heading"
-    >
-      Folder Settings
-    </h2>
     <div
-      className="section gf-form-group"
+      className="page-container page-body"
     >
-      <form
-        name="folderSettingsForm"
-        onSubmit={[Function]}
+      <h2
+        className="page-sub-heading"
       >
-        <div
-          className="gf-form"
-        >
-          <label
-            className="gf-form-label width-7"
-          >
-            Name
-          </label>
-          <input
-            className="gf-form-input width-30"
-            onChange={[Function]}
-            type="text"
-            value="loading"
-          />
-        </div>
-        <div
-          className="gf-form-button-row"
+        Folder Settings
+      </h2>
+      <div
+        className="section gf-form-group"
+      >
+        <form
+          name="folderSettingsForm"
+          onSubmit={[Function]}
         >
-          <button
-            className="btn btn-success"
-            disabled={false}
-            type="submit"
+          <div
+            className="gf-form"
           >
-            <i
-              className="fa fa-save"
+            <label
+              className="gf-form-label width-7"
+            >
+              Name
+            </label>
+            <input
+              className="gf-form-input width-30"
+              onChange={[Function]}
+              type="text"
+              value="loading"
             />
-             Save
-          </button>
-          <button
-            className="btn btn-danger"
-            disabled={false}
-            onClick={[Function]}
+          </div>
+          <div
+            className="gf-form-button-row"
           >
-            <i
-              className="fa fa-trash"
-            />
-             Delete
-          </button>
-        </div>
-      </form>
+            <button
+              className="btn btn-success"
+              disabled={false}
+              type="submit"
+            >
+              <i
+                className="fa fa-save"
+              />
+               Save
+            </button>
+            <button
+              className="btn btn-danger"
+              disabled={false}
+              onClick={[Function]}
+            >
+              <i
+                className="fa fa-trash"
+              />
+               Delete
+            </button>
+          </div>
+        </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}
   >
-    <h2
-      className="page-sub-heading"
-    >
-      Folder Settings
-    </h2>
     <div
-      className="section gf-form-group"
+      className="page-container page-body"
     >
-      <form
-        name="folderSettingsForm"
-        onSubmit={[Function]}
+      <h2
+        className="page-sub-heading"
       >
-        <div
-          className="gf-form"
-        >
-          <label
-            className="gf-form-label width-7"
-          >
-            Name
-          </label>
-          <input
-            className="gf-form-input width-30"
-            onChange={[Function]}
-            type="text"
-            value="loading"
-          />
-        </div>
-        <div
-          className="gf-form-button-row"
+        Folder Settings
+      </h2>
+      <div
+        className="section gf-form-group"
+      >
+        <form
+          name="folderSettingsForm"
+          onSubmit={[Function]}
         >
-          <button
-            className="btn btn-success"
-            disabled={true}
-            type="submit"
+          <div
+            className="gf-form"
           >
-            <i
-              className="fa fa-save"
+            <label
+              className="gf-form-label width-7"
+            >
+              Name
+            </label>
+            <input
+              className="gf-form-input width-30"
+              onChange={[Function]}
+              type="text"
+              value="loading"
             />
-             Save
-          </button>
-          <button
-            className="btn btn-danger"
-            disabled={false}
-            onClick={[Function]}
+          </div>
+          <div
+            className="gf-form-button-row"
           >
-            <i
-              className="fa fa-trash"
-            />
-             Delete
-          </button>
-        </div>
-      </form>
+            <button
+              className="btn btn-success"
+              disabled={true}
+              type="submit"
+            >
+              <i
+                className="fa fa-save"
+              />
+               Save
+            </button>
+            <button
+              className="btn btn-danger"
+              disabled={false}
+              onClick={[Function]}
+            >
+              <i
+                className="fa fa-trash"
+              />
+               Delete
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
-  </div>
-</div>
+  </PageContents>
+</Page>
 `;