fix: grant scope field should be functional (#1147)

addons/api/addon/models/role.js

@@ -23,6 +23,13 @@ export default class RoleModel extends GeneratedRoleModel {
    */
   @array('string', { readOnly: true }) grant_strings;
 
+  /**
+   * Convenience for looking up the grant scope, if loaded.
+   */
+  get grantScope() {
+    return this.store.peekRecord('scope', this.grant_scope_id);
+  }
+
   // =methods
 
   /**

ui/admin/app/components/form/role/index.hbs

@@ -63,15 +63,16 @@
       <form.radioGroup
         @name='grant_scope_id'
         @selectedValue={{@model.grant_scope_id}}
+        @changed={{this.updateGrantScopeID}}
         as |radioGroup|
       >
         <Rose::Dropdown
-          @text={{this.selectedGrantScope.displayName}}
+          @text={{@model.grantScope.displayName}}
           @icon={{if
-            this.selectedGrantScope.isProject
+            @model.grantScope.isProject
             'flight-icons/svg/grid-16'
             (if
-              this.selectedGrantScope.isOrg
+              @model.grantScope.isOrg
               'flight-icons/svg/org-16'
               'flight-icons/svg/globe-16'
             )
@@ -120,6 +121,7 @@
         </Rose::Dropdown>
       </form.radioGroup>
     </fieldset>
+    <br />
   {{/unless}}
   {{#if (can 'save model' @model)}}
     <form.actions

ui/admin/app/components/form/role/index.js

@@ -1,18 +1,11 @@
 import Component from '@glimmer/component';
-import { computed } from '@ember/object';
+import { action } from '@ember/object';
 
 export default class FormRoleGrantsComponent extends Component {
-  // =attributes
+  // =actions
 
-  /**
-   * Returns the selected grant scope model.
-   * @type {ScopeModel}
-   */
-  @computed('args.model.{store,grant_scope_id}')
-  get selectedGrantScope() {
-    return this.args.model.store.peekRecord(
-      'scope',
-      this.args.model.grant_scope_id
-    );
+  @action
+  updateGrantScopeID(id) {
+    this.args.model.grant_scope_id = id;
   }
 }