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

-<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="modal-content">
-
-		<div class="modal-tagline p-b-2">
+<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>
@@ -52,9 +42,8 @@
 
     <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>
+      <a class="btn-text" href="org/users">Cancel</a>
     </div>
     <div class="clearfix"></div>
   </form>
-	</div>
 </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

-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);