feat: Add checkbox table for user/group assignment to role

ui/core/app/components/form/role/add-principals/index.hbs

@@ -1,66 +1,53 @@
-{{#if this.hasAvailablePrincipals}}
-  <Rose::Form
-    class="full-width"
-    @onSubmit={{fn this.submit @submit}}
-    @cancel={{@cancel}}
-    @disabled={{@model.isSaving}}
-    @error={{@model.errors.base}}
-    as |form|
-  >
+<Rose::Form
+  class="full-width"
+  @onSubmit={{fn this.submit @submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  as |form|
+>
 
-    <form.actions
-      @submitText={{t "actions.add-principals"}}
-      @cancelText={{t "actions.cancel"}} />
+  <form.actions
+    @submitText={{t "actions.add-principals"}}
+    @cancelText={{t "actions.cancel"}} />
 
-    <Rose::Table as |table|>
-      <table.header as |header|>
-        <header.row as |row|>
-          <row.headerCell>{{t 'form.label.id'}}</row.headerCell>
-          <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
-          <row.headerCell>{{t 'form.label.type'}}</row.headerCell>
-        </header.row>
-      </table.header>
-      <table.body as |body|>
-        {{#each @groups as |group|}}
-          <body.row as |row|>
-            <row.cell>
-              <form.checkbox
-                @label={{group.id}}
-                @description={{group.description}}
-                onChange={{fn this.togglePrincipal group}} />
-            </row.cell>
-            <row.cell>{{group.name}}</row.cell>
-            <row.cell>
-              <Rose::Badge>{{t "resources.group"}}</Rose::Badge>
-            </row.cell>
-          </body.row>
-        {{/each}}
-        {{#each @users as |user|}}
-          <body.row as |row|>
-            <row.cell>
-              <form.checkbox
-                @label={{user.id}}
-                @description={{user.description}}
-                onChange={{fn this.togglePrincipal user}} />
-            </row.cell>
-            <row.cell>{{user.name}}</row.cell>
-            <row.cell>
-              <Rose::Badge>{{t "resources.user"}}</Rose::Badge>
-            </row.cell>
-          </body.row>
-        {{/each}}
-      </table.body>
-    </Rose::Table>
+  <Rose::Table as |table|>
+    <table.header as |header|>
+      <header.row as |row|>
+        <row.headerCell>{{t 'form.label.id'}}</row.headerCell>
+        <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
+        <row.headerCell>{{t 'form.label.type'}}</row.headerCell>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each this.filteredPrincipals as |principal|}}
+        <body.row as |row|>
+          <row.cell>
+            <form.checkbox
+              @label={{principal.id}}
+              @description={{principal.description}}
+              onChange={{fn this.togglePrincipal principal}} />
+          </row.cell>
+          <row.cell>{{principal.name}}</row.cell>
+          <row.cell>
+            <Rose::Badge>{{t (concat 'resources.' principal.constructor.modelName)}}</Rose::Badge>
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+</Rose::Form>
 
-  </Rose::Form>
-{{/if}}
 
-{{#unless this.hasAvailablePrincipals}}
   <Rose::Layout::Centered>
-    <Rose::Message @title={{t "titles.no-principals"}} as |message|>
+    <Rose::Message @title={{t "titles.no-principals-available"}} as |message|>
       <message.description>
-        {{t "descriptions.no-principals"}}
+        {{t "descriptions.no-principals-available"}}
       </message.description>
+      <message.link @route="scopes.scope.roles.role.principals">
+        <Rose::Icon @name="chevron-left" />
+        {{t "actions.back"}}
+      </message.link>
     </Rose::Message>
   </Rose::Layout::Centered>
-{{/unless}}

ui/core/app/components/form/role/add-principals/index.js

@@ -1,8 +1,8 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
+import { computed, action } from '@ember/object';
 import { A } from '@ember/array';
 
-export default class FormRoleAddPrincipalsComponent extends Component {
+export default class FormRoleAddPrincipalsIndexComponent extends Component {
 
   // =properties
 
@@ -19,6 +19,20 @@ export default class FormRoleAddPrincipalsComponent extends Component {
    */
   hasAvailablePrincipals = true;
 
+  /**
+   * Principals not currently assigned to a role.
+   * @type {[UserModel, GroupModel]}
+   */
+  @computed('args.{users,groups}')
+  get filteredPrincipals() {
+    // Retrieve principal IDs assigned to current role
+    const currentPrincipalIDs = this.args.model.principals.map((principal) => principal.principal_id);
+    // Retrieve principal IDs not assigned to current role
+    const unassignedUsers = this.args.users.filter(({ id }) => !currentPrincipalIDs.includes(id));
+    const unassignedGroups = this.args.groups.filter(({ id }) => !currentPrincipalIDs.includes(id));
+    return unassignedUsers.concat(unassignedGroups);
+  }
+
   // =actions
 
   @action

ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js

@@ -13,7 +13,7 @@ export default class ScopesScopeProjectsProjectTargetsTargetAddHostSetsRoute ext
   // =methods
 
   /**
-   * Emtpy out any previously loaded host catalogs and host sets.
+   * Empty out any previously loaded host catalogs and host sets.
    */
   beforeModel() {
     this.store.unloadAll('host-catalog');

ui/core/app/routes/scopes/scope/roles/role/add-principals.js

@@ -13,26 +13,38 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
   // =methods
 
   /**
-   * Empty out any previously loaded users and groups
-   * (collectively, principals).
+   * Empty out any previously loaded users and groups.
    */
   beforeModel() {
     this.store.unloadAll('user');
     this.store.unloadAll('group');
   }
 
+  /**
+   * Returns the current role, all users, and all groups
+   * @return {{role: RoleModel, users: [UserModel], groups: [GroupModel]}}
+   */
   model() {
     const role = this.modelFor('scopes.scope.roles.role');
     const { scopeID } = role;
     const options = { adapterOptions: { scopeID } };
-    return hash({
+
+    return {
       role,
       users: this.store.findAll('user', options),
       groups: this.store.findAll('group', options)
-    });
+    };
   }
 
-  // =methods
+  /**
+   * Checks for unassigned principals.
+   * @param {RoleModel} role
+   * @param {[UserModel]} users
+   * @param {[GroupModel]} groups
+   */
+  canAssignPrincipals(role, users, groups) {
+    return role.principals.length != (users.length + groups.length);
+  }
 
   /**
    * Renders the add-principals-specific header template.
@@ -57,8 +69,10 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
     });
   }
 
+  // =actions
+
   /**
-   * Saves principal IDs into the role via the API.
+   * Save principal IDs to current role.
    * @param {RoleModel} role
    * @param {[string]} principalIDs
    */

ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets.hbs

@@ -16,6 +16,10 @@
       <message.description>
         {{t "descriptions.no-host-sets-for-target"}}
       </message.description>
+      <message.link @route="scopes.scope.projects.project.targets.target.host-sets">
+        <Rose::Icon @name="chevron-left" />
+        {{t "actions.back"}}
+      </message.link>
     </Rose::Message>
   </Rose::Layout::Centered>
 {{/unless}}

ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs

@@ -1,9 +1,7 @@
-{{title (t "actions.add-principals")}}
-
 <Form::Role::AddPrincipals
   @model={{@model.role}}
   @users={{@model.users}}
   @groups={{@model.groups}}
   @submit={{route-action "addPrincipals" @model.role}}
   @cancel={{route-action "cancel"}}
-/>
+/>

ui/core/tests/acceptance/roles-test.js

@@ -226,6 +226,14 @@ module('Acceptance | roles', function (hooks) {
     assert.expect(0);
   });
 
+  test('select and save principals to add', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('select and cancel principals to add', async function (assert) {
+    assert.expect(0);
+  });
+
   test('grants can be updated and saved or canceled', async function (assert) {
     assert.expect(0);
   });

ui/core/tests/integration/components/form/role/add-principals/index-test.js

@@ -1,26 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | form/role/add-principals/index', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`<Form::Role::AddPrincipals::Index />`);
-
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
-    await render(hbs`
-      <Form::Role::AddPrincipals::Index>
-        template block text
-      </Form::Role::AddPrincipals::Index>
-    `);
-
-    assert.equal(this.element.textContent.trim(), 'template block text');
-  });
-});

ui/core/translations/en-us.yaml

@@ -7,6 +7,7 @@ actions:
   save: Save
   manage: Manage
   help: Need help?
+  back: Back
   authenticate: Authenticate
   deauthenticate: Deauthenticate
   choose-org: Choose Scope
@@ -94,6 +95,7 @@ titles:
   no-host-set-hosts: No Hosts Available
   no-host-sets-for-target: No Host Sets Available
   role-principals-welcome: No Principals Associated
+  no-principals-available: No Principals Available
 descriptions:
   host-catalogs: Overview of collections of hosts and host sets.
   empty-set: There are no items to display yet.  You may be able to add items or try back later.
@@ -110,6 +112,7 @@ descriptions:
   no-host-set-hosts: Before associating hosts with this host set, create hosts within the host catalog.
   no-host-sets-for-target: No host sets are available to add to this target.
   role-principals-welcome: No principals are available in this role.
+  no-principals-available: Principals are not available for assignment.
 states:
   info: Info
   success: Success