Merge pull request #12854 from grafana/12853-empty-team-list

[wip]added empty list cta to team list

public/app/containers/Teams/TeamList.tsx

@@ -6,6 +6,7 @@ import { NavStore } from 'app/stores/NavStore/NavStore';
 import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 
 interface Props {
   nav: typeof NavStore.Type;
@@ -61,11 +62,8 @@ export class TeamList extends React.Component<Props, any> {
     );
   }
 
-  render() {
-    const { nav, teams } = this.props;
+  renderTeamList(teams) {
     return (
-      <div>
-        <PageHeader model={nav as any} />
       <div className="page-container page-body">
         <div className="page-action-bar">
           <div className="gf-form gf-form--grow">
@@ -103,6 +101,42 @@ export class TeamList extends React.Component<Props, any> {
           </table>
         </div>
       </div>
+    );
+  }
+
+  renderEmptyList() {
+    return (
+      <div className="page-container page-body">
+        <EmptyListCTA
+          model={{
+            title: "You haven't created any teams yet.",
+            buttonIcon: 'fa fa-plus',
+            buttonLink: 'org/teams/new',
+            buttonTitle: ' New team',
+            proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
+            proTipLink: '',
+            proTipLinkTitle: '',
+            proTipTarget: '_blank',
+          }}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const { nav, teams } = this.props;
+    let view;
+
+    if (teams.filteredTeams.length > 0) {
+      view = this.renderTeamList(teams);
+    } else {
+      view = this.renderEmptyList();
+    }
+
+    return (
+      <div>
+        <PageHeader model={nav as any} />
+        {view}
       </div>
     );
   }