ux: move add member into its own page (#10167)

public/app/core/routes/routes.ts

@@ -104,6 +104,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     controllerAs: 'ctrl',
     resolve: loadOrgBundle,
   })
+  .when('/org/users/new', {
+    templateUrl: 'public/app/features/org/partials/invite.html',
+    controller : 'UserInviteCtrl',
+    resolve: loadOrgBundle,
+  })
   .when('/org/apikeys', {
     templateUrl: 'public/app/features/org/partials/orgApiKeys.html',
     controller : 'OrgApiKeysCtrl',

public/app/features/org/partials/invite.html

@@ -1,60 +1,49 @@
-<div class="modal-body" ng-controller="UserInviteCtrl" ng-init="init()">
+<page-header model="navModel"></page-header>
 
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			Invite Users
-		</h2>
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
+<div class="page-container page-body" ng-cloak>
+  <div class="p-b-2">
+    Send invite or add existing Grafana users to the organization
+    <span class="highlight-word">{{contextSrv.user.orgName}}</span>
+  </div>
 
-	<div class="modal-content">
+  <form name="inviteForm">
+    <div class="gf-form-group">
+      <div class="gf-form-inline" ng-repeat="invite in invites">
+        <div class="gf-form max-width-21">
+          <span class="gf-form-label">Email or Username</span>
+          <input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
+        </div>
+        <div class="gf-form max-width-14">
+          <span class="gf-form-label">Name</span>
+          <input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
+        </div>
+        <div class="gf-form max-width-10">
+          <span class="gf-form-label">Role</span>
+          <select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
+          </select>
+        </div>
+        <div class="gf-form gf-size-auto">
+          <a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
+            <i class="fa fa-remove"></i>
+          </a>
+        </div>
+      </div>
+    </div>
 
-		<div class="modal-tagline p-b-2">
-			Send invite or add existing Grafana users to the organization
-			<span class="highlight-word">{{contextSrv.user.orgName}}</span>
-		</div>
+    <div class="gf-form-inline gf-form-group">
+      <div class="gf-form" style="margin-right:.25rem">
+        <a class="btn btn-inverse gf-form-button" ng-click="addInvite()">
+          <i class="fa fa-plus"></i>
+          Invite another
+        </a>
+      </div>
+      <gf-form-switch class="gf-form" label="Skip sending invite email" checked="options.skipEmails" switch-class="max-width-6"></gf-form-switch>
+    </div>
 
-		<form name="inviteForm">
-			<div class="gf-form-group">
-				<div class="gf-form-inline" ng-repeat="invite in invites">
-					<div class="gf-form max-width-21">
-						<span class="gf-form-label">Email or Username</span>
-						<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
-					</div>
-					<div class="gf-form max-width-14">
-						<span class="gf-form-label">Name</span>
-						<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
-					</div>
-					<div class="gf-form max-width-10">
-						<span class="gf-form-label">Role</span>
-						<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
-						</select>
-					</div>
-					<div class="gf-form gf-size-auto">
-						<a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
-							<i class="fa fa-remove"></i>
-						</a>
-					</div>
-				</div>
-			</div>
-
-			<div class="gf-form-inline gf-form-group">
-				<div class="gf-form" style="margin-right:.25rem">
-					<a class="btn btn-inverse gf-form-button" ng-click="addInvite()">
-						<i class="fa fa-plus"></i>
-						Invite another
-					</a>
-				</div>
-				<gf-form-switch class="gf-form" label="Skip sending invite email" checked="options.skipEmails" switch-class="max-width-6"></gf-form-switch>
-			</div>
-
-			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
-				<a class="btn-text" ng-click="dismiss()">Cancel</a>
-			</div>
-			<div class="clearfix"></div>
-		</form>
-	</div>
+    <div class="gf-form-button-row">
+      <button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
+      <a class="btn-text" href="org/users">Cancel</a>
+    </div>
+    <div class="clearfix"></div>
+  </form>
 </div>

public/app/features/org/partials/orgUsers.html

@@ -38,10 +38,10 @@
     <button class="btn btn-inverse" ng-show="ctrl.pendingInvites.length" ng-click="ctrl.editor.index = 1">
       Pending Invites ({{ctrl.pendingInvites.length}})
     </button>
-		<button class="btn btn-success" ng-click="ctrl.openAddUsersView()" ng-hide="ctrl.externalUserMngLinkUrl">
+		<a class="btn btn-success" href="org/users/new" ng-hide="ctrl.externalUserMngLinkUrl">
       <i class="fa fa-plus"></i>
 			<span>{{ctrl.addUsersBtnName}}</span>
-		</button>
+    </a>
     <a class="btn btn-inverse" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl">
       <i class="fa fa-external-link-square"></i>
       {{ctrl.addUsersBtnName}}

public/app/features/org/user_invite_ctrl.ts

@@ -1,14 +1,18 @@
-import angular from 'angular';
+import coreModule from 'app/core/core_module';
 import _ from 'lodash';
 
 export class UserInviteCtrl {
 
   /** @ngInject **/
-  constructor($scope, backendSrv) {
-    $scope.invites = [
+  constructor($scope, backendSrv, navModelSrv) {
+    $scope.navModel = navModelSrv.getNav('cfg', 'users', 0);
+
+    const defaultInvites = [
       {name: '', email: '', role: 'Editor'},
     ];
 
+    $scope.invites = _.cloneDeep(defaultInvites);
+
     $scope.options = {skipEmails: false};
     $scope.init = function() { };
 
@@ -20,11 +24,19 @@ export class UserInviteCtrl {
       $scope.invites = _.without($scope.invites, invite);
     };
 
+    $scope.resetInvites = function() {
+      $scope.invites = _.cloneDeep(defaultInvites);
+    };
+
     $scope.sendInvites = function() {
       if (!$scope.inviteForm.$valid) { return; }
       $scope.sendSingleInvite(0);
     };
 
+    $scope.invitesSent = function() {
+      $scope.resetInvites();
+    };
+
     $scope.sendSingleInvite = function(index) {
       var invite = $scope.invites[index];
       invite.skipEmails = $scope.options.skipEmails;
@@ -34,7 +46,6 @@ export class UserInviteCtrl {
 
         if (index === $scope.invites.length) {
           $scope.invitesSent();
-          $scope.dismiss();
         } else {
           $scope.sendSingleInvite(index);
         }
@@ -43,4 +54,4 @@ export class UserInviteCtrl {
   }
 }
 
-angular.module('grafana.controllers').controller('UserInviteCtrl', UserInviteCtrl);
+coreModule.controller('UserInviteCtrl', UserInviteCtrl);