From 730036e18db3f6e53fba5cde9a12c05ed1274470 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 28 Jan 2019 13:07:37 +0100
Subject: [PATCH] chore: Fix typings and add Page-component to TeamPages #14762

---
 .../core/components/PageHeader/PageHeader.tsx |  2 +-
 public/app/features/teams/TeamPages.tsx       | 21 ++++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx
index 83066054f88..623070651d1 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
@@ -80,7 +80,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
 };
 
 export default class PageHeader extends React.Component<Props, any> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
   }
 
diff --git a/public/app/features/teams/TeamPages.tsx b/public/app/features/teams/TeamPages.tsx
index 38ba23262ba..ebbde595601 100644
--- a/public/app/features/teams/TeamPages.tsx
+++ b/public/app/features/teams/TeamPages.tsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import _ from 'lodash';
 import { hot } from 'react-hot-loader';
 import config from 'app/core/config';
-import PageHeader from 'app/core/components/PageHeader/PageHeader';
+import Page from 'app/core/components/Page/Page';
 import TeamMembers from './TeamMembers';
 import TeamSettings from './TeamSettings';
 import TeamGroupSync from './TeamGroupSync';
@@ -24,6 +24,7 @@ export interface Props {
 
 interface State {
   isSyncEnabled: boolean;
+  isLoading: boolean;
 }
 
 enum PageTypes {
@@ -33,10 +34,11 @@ enum PageTypes {
 }
 
 export class TeamPages extends PureComponent<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
+      isLoading: false,
       isSyncEnabled: config.buildInfo.isEnterprise,
     };
   }
@@ -47,8 +49,10 @@ export class TeamPages extends PureComponent<Props, State> {
 
   async fetchTeam() {
     const { loadTeam, teamId } = this.props;
-
-    return await loadTeam(teamId);
+    this.setState({isLoading: true});
+    const team = await loadTeam(teamId);
+    this.setState({isLoading: false});
+    return team;
   }
 
   getCurrentPage() {
@@ -78,10 +82,11 @@ export class TeamPages extends PureComponent<Props, State> {
     const { team, navModel } = this.props;
 
     return (
-      <div>
-        <PageHeader model={navModel} />
-        {team && Object.keys(team).length !== 0 && <div className="page-container page-body">{this.renderPage()}</div>}
-      </div>
+      <Page navModel={navModel}>
+        <Page.Contents isLoading={this.state.isLoading}>
+          {team && Object.keys(team).length !== 0 && <div className="page-container page-body">{this.renderPage()}</div>}
+        </Page.Contents>
+      </Page>
     );
   }
 }