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

public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap

@@ -4,7 +4,9 @@ exports[`Render should render alert rules 1`] = `
 <Page
   navModel={Object {}}
 >
-  <PageContents>
+  <PageContents
+    isLoading={false}
+  >
     <div
       className="page-action-bar"
     >
@@ -156,7 +158,9 @@ exports[`Render should render component 1`] = `
 <Page
   navModel={Object {}}
 >
-  <PageContents>
+  <PageContents
+    isLoading={false}
+  >
     <div
       className="page-action-bar"
     >

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

@@ -21,7 +21,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId } from 'app/core/selectors/location';
 
 // Types
-import { NavModel, Plugin } from 'app/types/';
+import { NavModel, Plugin, StoreState } from 'app/types/';
 import { DataSourceSettings } from '@grafana/ui/src/types/';
 import { getDataSourceLoadingNav } from '../state/navModel';
 
@@ -232,7 +232,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps(state: StoreState) {
   const pageId = getRouteParamsId(state.location);
   const dataSource = getDataSource(state.dataSources, pageId);
 

public/app/features/folders/FolderPermissions.tsx

 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 { Tooltip } from '@grafana/ui';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { getNavModel } from 'app/core/selectors/navModel';
@@ -35,7 +35,7 @@ export interface State {
 }
 
 export class FolderPermissions extends PureComponent<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -73,15 +73,14 @@ export class FolderPermissions extends PureComponent<Props, State> {
     const { isAdding } = this.state;
 
     if (folder.id === 0) {
-      return <PageHeader model={navModel} />;
+      return <Page navModel={navModel}><Page.Contents isLoading={true}><span></span></Page.Contents></Page>;
     }
 
     const folderInfo = { title: folder.title, url: folder.url, id: folder.id };
 
     return (
-      <div>
-        <PageHeader model={navModel} />
-        <div className="page-container page-body">
+      <Page navModel={navModel}>
+        <Page.Contents>
           <div className="page-action-bar">
             <h3 className="page-sub-heading">Folder Permissions</h3>
             <Tooltip placement="auto" content={<PermissionsInfo />}>
@@ -104,8 +103,8 @@ export class FolderPermissions extends PureComponent<Props, State> {
             isFetching={false}
             folderInfo={folderInfo}
           />
-        </div>
-      </div>
+        </Page.Contents>
+      </Page>
     );
   }
 }