Added staff limit check to invite people modal

refs https://github.com/TryGhost/Team/issues/587

- When user's instance reaches a "staff" limit we need a way to proactively notify them about reached limit and give enough information about why it was reached and what the next action would be to unblock them
- The implementeation uses a frontend implementation of the limit-service which allows to do preventative checks for the reached limits

ghost/admin/app/components/modal-invite-new-user.hbs

@@ -174,16 +174,29 @@
                     </div>
                 </div>
             </div>
+
+
+            <p class="gh-content-box pa bg-whitegrey" hidden={{if this.limitErrorMessage false true}}>
+                {{html-safe this.limitErrorMessage}}
+            </p>
         </div>
     </fieldset>
 </div>
 
 <div class="modal-footer">
-    <GhTaskButton @buttonText="Send invitation now &rarr;"
-        @successText="Sent"
-        @task={{this.sendInvitation}}
-        @class="gh-btn gh-btn-black gh-btn-icon"
-        @disabled={{this.fetchRoles.isRunning}}
-        @disableMouseDown="true"
-        data-test-button="send-user-invite" />
+    {{#if this.limitErrorMessage}}
+        <GhTaskButton @buttonText="Upgrade my plan &rarr;"
+            @task={{this.transitionToBilling}}
+            @class="gh-btn gh-btn-green gh-btn-icon"
+            @disableMouseDown="true"
+            data-test-button="upgrade-my-plan" />
+    {{else}}
+        <GhTaskButton @buttonText="Send invitation now &rarr;"
+            @successText="Sent"
+            @task={{this.sendInvitation}}
+            @class="gh-btn gh-btn-black gh-btn-icon"
+            @disabled={{this.fetchRoles.isRunning}}
+            @disableMouseDown="true"
+            data-test-button="send-user-invite" />
+    {{/if}}
 </div>

ghost/admin/app/components/modal-invite-new-user.js

@@ -9,14 +9,18 @@ import {task} from 'ember-concurrency';
 const {Promise} = RSVP;
 
 export default ModalComponent.extend(ValidationEngine, {
+    router: service(),
     notifications: service(),
     store: service(),
+    limit: service(),
 
     classNames: 'modal-content invite-new-user',
 
     role: null,
     roles: null,
 
+    limitErrorMessage: null,
+
     validationType: 'inviteUser',
 
     didInsertElement() {
@@ -42,8 +46,28 @@ export default ModalComponent.extend(ValidationEngine, {
         const role = this.roles.findBy('name', roleName);
         this.set('role', role);
         this.errors.remove('role');
+        this.validateRole();
     }),
 
+    async validateRole() {
+        if (this.get('role.name') !== 'Contributor'
+            && this.limit.limiter && this.limit.limiter.isLimited('staff')) {
+            try {
+                await this.limit.limiter.errorIfWouldGoOverLimit('staff');
+
+                this.set('limitErrorMessage', null);
+            } catch (error) {
+                if (error.errorType === 'HostLimitError') {
+                    this.set('limitErrorMessage', error.message);
+                } else {
+                    this.notifications.showAPIError(error, {key: 'staff.limit'});
+                }
+            }
+        } else {
+            this.set('limitErrorMessage', null);
+        }
+    },
+
     validate() {
         let email = this.email;
 
@@ -123,5 +147,11 @@ export default ModalComponent.extend(ValidationEngine, {
                 this.send('closeModal');
             }
         }
-    }).drop()
+    }).drop(),
+
+    transitionToBilling: task(function () {
+        this.router.transitionTo('pro');
+
+        this.send('closeModal');
+    })
 });

ghost/admin/app/styles/layouts/users.css

@@ -240,7 +240,8 @@
     white-space: nowrap;
 }
 
-.invite-new-user .gh-btn-black {
+.invite-new-user .gh-btn-black,
+.invite-new-user .gh-btn-green {
     margin: 0;
     width: 100%;
 }