Swapped staff role selector from <select> to new role selection modal

closes https://github.com/TryGhost/Team/issues/572

Role selection when inviting users was updated to show information about each staff role. This change updates the staff edit screen to use the same UI for changing the role of an existing user.

- added `select-user-role` modal which uses `<GhRoleSelection>` to allow role selection
- replaced the `<select>` input for changing a user's role with a button that triggers the role selection modal
  - role is not set unless the "Set role" button is clicked after making a selection, cancel or close will leave the original role selected

ghost/admin/app/components/modal-select-user-role.hbs

@@ -0,0 +1,16 @@
+<header class="modal-header">
+    <h1>Select role</h1>
+</header>
+<a class="close" href="" role="button" title="Close" {{on "click" this.close}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
+
+<div class="modal-body" {{did-insert this.setRoleFromModel}}>
+    <GhRoleSelection
+        @selected={{this.role}}
+        @setRole={{fn (mut this.role)}}
+    />
+</div>
+
+<div class="modal-footer">
+    <button {{on "click" this.close}} class="gh-btn"><span>Cancel</span></button>
+    <button {{on "click" this.confirmAction}} class="gh-btn gh-btn-black"><span>Set role</span></button>
+</div>

ghost/admin/app/components/modal-select-user-role.js

@@ -0,0 +1,39 @@
+import ModalBase from 'ghost-admin/components/modal-base';
+import classic from 'ember-classic-decorator';
+import {action} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
+
+// TODO: update modals to work fully with Glimmer components
+@classic
+export default class ModalPostPreviewComponent extends ModalBase {
+    @tracked role;
+
+    // TODO: rename to confirm() when modals have full Glimmer support
+    @action
+    confirmAction() {
+        this.confirm(this.role);
+        this.close();
+    }
+
+    @action
+    close(event) {
+        event?.preventDefault?.();
+        this.closeModal();
+    }
+
+    @action
+    setRoleFromModel() {
+        this.role = this.model;
+    }
+
+    actions = {
+        confirm() {
+            this.confirmAction(...arguments);
+        },
+
+        // needed because ModalBase uses .send() for keyboard events
+        closeModal() {
+            this.args.close();
+        }
+    }
+}

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

@@ -28,8 +28,9 @@ export default Controller.extend({
     showSuspendUserModal: false,
     showTransferOwnerModal: false,
     showUploadCoverModal: false,
-    showUplaodImageModal: false,
+    showUploadImageModal: false,
     showRegenerateTokenModal: false,
+    showRoleSelectionModal: false,
     _scratchFacebook: null,
     _scratchTwitter: null,
 
@@ -82,6 +83,11 @@ export default Controller.extend({
     }),
 
     actions: {
+        toggleRoleSelectionModal(event) {
+            event?.preventDefault?.();
+            this.toggleProperty('showRoleSelectionModal');
+        },
+
         changeRole(newRole) {
             this.user.set('role', newRole);
             this.set('dirtyAttributes', true);

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

@@ -190,18 +190,18 @@
                         {{#if this.rolesDropdownIsVisible}}
                             <div class="form-group">
                                 <label for="user-role">Role</label>
-                                <span class="gh-select" tabindex="0">
-                                    <OneWaySelect
-                                        @id="new-user-role"
-                                        @options={{this.roles}}
-                                        @optionValuePath="id"
-                                        @optionLabelPath="name"
-                                        @value={{this.user.role}}
-                                        @update={{action "changeRole"}}
-                                    />
-                                </span>
+                                <div class="gh-input pointer" {{on "click" (action "toggleRoleSelectionModal")}}>{{this.user.role.name}}</div>
                                 <p>What permissions should this user have?</p>
                             </div>
+
+                            {{#if this.showRoleSelectionModal}}
+                                <GhFullscreenModal
+                                    @modal="select-user-role"
+                                    @model={{readonly this.user.role}}
+                                    @confirm={{action "changeRole"}}
+                                    @close={{action "toggleRoleSelectionModal"}}
+                                />
+                            {{/if}}
                         {{/if}}
 
                         <GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="location">