From ecf82fbfe8413dd32f22622426d0d83b34d1a72f Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@ghost.org>
Date: Tue, 20 Apr 2021 13:39:03 +0100
Subject: [PATCH] Fixed invite staff modal button not reflecting validation
 state (#1924)

no issue

- when the role selection was extracted to an external component the limit validation was also extracted but had no way of feeding back to the consumer
- added `onValidationSuccess` and `onValidationFailure` arguments to the role selection component to allow validation feedback to the consumer
- updated staff invite modal with actions to update state based on validation so the modal's buttons can update accordingly
---
 ghost/admin/app/components/gh-role-selection.js      | 10 +++++++++-
 ghost/admin/app/components/modal-invite-new-user.hbs |  2 ++
 ghost/admin/app/components/modal-invite-new-user.js  | 10 +++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/components/gh-role-selection.js b/ghost/admin/app/components/gh-role-selection.js
index 8722f858bf..174731a192 100644
--- a/ghost/admin/app/components/gh-role-selection.js
+++ b/ghost/admin/app/components/gh-role-selection.js
@@ -34,15 +34,23 @@ export default class GhRoleSelectionComponent extends Component {
     }
 
     async validateRole(role) {
+        if (role.name === 'Contributor') {
+            this.args.onValidationSuccess?.();
+        }
+
         if (role.name !== 'Contributor'
-            && this.limit.limiter && this.limit.limiter.isLimited('staff')) {
+            && this.limit.limiter
+            && this.limit.limiter.isLimited('staff')
+        ) {
             try {
                 await this.limit.limiter.errorIfWouldGoOverLimit('staff');
 
                 this.limitErrorMessage = null;
+                this.args.onValidationSuccess?.();
             } catch (error) {
                 if (error.errorType === 'HostLimitError') {
                     this.limitErrorMessage = error.message;
+                    this.args.onValidationFailure?.(this.limitErrorMessage);
                 } else {
                     this.notifications.showAPIError(error, {key: 'staff.limit'});
                 }
diff --git a/ghost/admin/app/components/modal-invite-new-user.hbs b/ghost/admin/app/components/modal-invite-new-user.hbs
index 6326bc16b7..b6f6738c0b 100644
--- a/ghost/admin/app/components/modal-invite-new-user.hbs
+++ b/ghost/admin/app/components/modal-invite-new-user.hbs
@@ -33,6 +33,8 @@
         <GhRoleSelection
             @selected={{this.role}}
             @setRole={{this.setRole}}
+            @onValidationSuccess={{action "roleValidationSucceeded"}}
+            @onValidationFailure={{action "roleValidationFailed"}}
         />
     </fieldset>
 </div>
diff --git a/ghost/admin/app/components/modal-invite-new-user.js b/ghost/admin/app/components/modal-invite-new-user.js
index fbb070bfae..0c8774c5eb 100644
--- a/ghost/admin/app/components/modal-invite-new-user.js
+++ b/ghost/admin/app/components/modal-invite-new-user.js
@@ -12,11 +12,11 @@ export default ModalComponent.extend(ValidationEngine, {
     router: service(),
     notifications: service(),
     store: service(),
-    limit: service(),
 
     classNames: 'modal-content invite-new-user',
 
     role: null,
+    limitErrorMessage: null,
 
     validationType: 'inviteUser',
 
@@ -31,6 +31,14 @@ export default ModalComponent.extend(ValidationEngine, {
     actions: {
         confirm() {
             this.sendInvitation.perform();
+        },
+
+        roleValidationFailed(reason) {
+            this.set('limitErrorMessage', reason);
+        },
+
+        roleValidationSucceeded() {
+            this.set('limitErrorMessage', null);
         }
     },