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

@@ -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'});
                 }

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>

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