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,8 +65,8 @@ export class FolderSettingsPage extends PureComponent<Props> {
     const { navModel, folder } = this.props;
 
     return (
-      <div>
+      <Page navModel={navModel}>
-        <PageHeader model={navModel} />
+        <Page.Contents isLoading={this.state.isLoading}>
           <div className="page-container page-body">
             <h2 className="page-sub-heading">Folder Settings</h2>
 
@@ -80,7 +92,8 @@ export class FolderSettingsPage extends PureComponent<Props> {
               </form>
             </div>
           </div>
-      </div>
+        </Page.Contents>
+      </Page>
     );
   }
 }

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

@@ -1,10 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should enable save button 1`] = `
-<div>
+<Page
-  <PageHeader
+  navModel={Object {}}
-    model={Object {}}
+>
-  />
+  <PageContents
+    isLoading={false}
+  >
     <div
       className="page-container page-body"
     >
@@ -62,14 +64,17 @@ exports[`Render should enable save button 1`] = `
         </form>
       </div>
     </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render component 1`] = `
-<div>
+<Page
-  <PageHeader
+  navModel={Object {}}
-    model={Object {}}
+>
-  />
+  <PageContents
+    isLoading={false}
+  >
     <div
       className="page-container page-body"
     >
@@ -127,5 +132,6 @@ exports[`Render should render component 1`] = `
         </form>
       </div>
     </div>
-</div>
+  </PageContents>
+</Page>
 `;