Added upgrade moal when unsuspending staff user

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

- Previous behavior wa showing a generic API error in the top banner which wasn't ideal UX
- With these changes user is informed about the limitation before performing any action with clear call to upgrade through the billing page

ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.hbs

@@ -0,0 +1,20 @@
+<header class="modal-header" data-test-modal="delete-user">
+    <h1>Upgrade to un-suspend this user</h1>
+</header>
+<button class="close" title="Close" {{on "click" this.closeModal}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+
+<div class="modal-body">
+    <p>
+        {{html-safe this.model.message}} To give this user access to Ghost, upgrade to a different plan.
+    </p>
+</div>
+
+<div class="modal-footer">
+    <button {{on "click" this.closeModal}} class="gh-btn" data-test-button="cancel-upgrade">
+        <span>Cancel</span>
+    </button>
+
+    <button {{on "click" (action "upgrade")}} class="gh-btn gh-btn-black" data-test-button="upgrade-plan">
+        <span>Upgrade my plan</span>
+    </button>
+</div>

ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.js

@@ -0,0 +1,12 @@
+import ModalComponent from 'ghost-admin/components/modal-base';
+import {inject as service} from '@ember/service';
+
+export default ModalComponent.extend({
+    router: service(),
+
+    actions: {
+        upgrade: function () {
+            this.router.transitionTo('pro');
+        }
+    }
+});

ghost/admin/app/controllers/staff/user.js

@@ -16,11 +16,13 @@ export default Controller.extend({
     config: service(),
     dropdown: service(),
     ghostPaths: service(),
+    limit: service(),
     notifications: service(),
     session: service(),
     slugGenerator: service(),
 
     personalToken: null,
+    limitErrorMessage: null,
     personalTokenRegenerated: false,
     leaveSettingsTransition: null,
     dirtyAttributes: false,
@@ -117,7 +119,25 @@ export default Controller.extend({
 
         toggleUnsuspendUserModal() {
             if (this.deleteUserActionIsVisible) {
-                this.toggleProperty('showUnsuspendUserModal');
+                if (this.user.role.name !== 'Contributor'
+                    && this.limit.limiter
+                    && this.limit.limiter.isLimited('staff')
+                ) {
+                    this.limit.limiter.errorIfWouldGoOverLimit('staff')
+                        .then(() => {
+                            this.toggleProperty('showUnsuspendUserModal');
+                        })
+                        .catch((error) => {
+                            if (error.errorType === 'HostLimitError') {
+                                this.limitErrorMessage = error.message;
+                                this.toggleProperty('showUnsuspendUserModal');
+                            } else {
+                                this.notifications.showAPIError(error, {key: 'staff.limit'});
+                            }
+                        });
+                } else {
+                    this.toggleProperty('showUnsuspendUserModal');
+                }
             }
         },
 

ghost/admin/app/services/limit.js

@@ -78,7 +78,8 @@ export default class LimitsService extends Service {
     async getStaffUsersCount() {
         return RSVP.hash({
             users: this.store.findAll('user', {reload: true}),
-            invites: this.store.findAll('invite', {reload: true})
+            invites: this.store.findAll('invite', {reload: true}),
+            roles: this.store.findAll('role', {reload: true}) // NOTE: roles have to be fetched as they are not always loaded with invites
         }).then((data) => {
             const staffUsers = data.users.filter(u => u.get('status') !== 'inactive' && u.role.get('name') !== 'Contributor');
             const staffInvites = data.invites.filter(i => i.role.get('name') !== 'Contributor');

ghost/admin/app/templates/staff/user.hbs

@@ -84,11 +84,20 @@
             {{/if}}
 
             {{#if this.showUnsuspendUserModal}}
-                <GhFullscreenModal @modal="unsuspend-user"
-                    @model={{this.user}}
-                    @confirm={{action "unsuspendUser"}}
-                    @close={{action "toggleUnsuspendUserModal"}}
-                    @modifier="action wide" />
+                {{#if this.limitErrorMessage}}
+                    <GhFullscreenModal @modal="upgrade-unsuspend-user-host-limit"
+                        @model={{hash
+                            message=limitErrorMessage
+                        }}
+                        @close={{action "toggleUnsuspendUserModal"}}
+                        @modifier="action wide" />
+                {{else}}
+                    <GhFullscreenModal @modal="unsuspend-user"
+                        @model={{this.user}}
+                        @confirm={{action "unsuspendUser"}}
+                        @close={{action "toggleUnsuspendUserModal"}}
+                        @modifier="action wide" />
+                {{/if}}
             {{/if}}
         </section>
     </GhCanvasHeader>