feat: 🎸 add complete add members form component and flow

ui/core/app/components/form/group/add-members/index.hbs

@@ -0,0 +1,48 @@
+{{#if this.availableUsers}}
+  <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-host-sets"}}
+      @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>
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        {{#each this.availableUsers as |user|}}
+          <body.row as |row|>
+            <row.cell>
+              <form.checkbox
+                @label={{user.id}}
+                @description={{user.description}}
+                onChange={{fn this.toggleMember user}} />
+            </row.cell>
+            <row.cell>{{user.name}}</row.cell>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
+
+  </Rose::Form>
+{{/if}}
+
+{{#unless this.availableUsers}}
+  <Rose::Layout::Centered>
+     <Rose::Message @title={{t "titles.no-available-users"}} as |message|>
+       <message.description>
+         {{t "descriptions.no-available-users"}}
+       </message.description>
+     </Rose::Message>
+   </Rose::Layout::Centered>
+{{/unless}}

ui/core/app/components/form/group/add-members/index.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { computed, action } from '@ember/object';
+import { A } from '@ember/array';
+
+export default class FormGroupAddMembersComponent extends Component {
+
+  // =properties
+
+  /**
+   * Array of selected user IDs.
+   * @type {EmberArray}
+   */
+  selectedMemberIDs = A();
+
+  /**
+   * Host sets not already added to the target.
+   * @type {[UserModel]}
+   */
+  @computed('args.{model.members_ids.[],users.[]}')
+  get availableUsers() {
+    const memberIDs = this.args.model.member_ids;
+    const users = this.args.users;
+    return users.filter(({ id }) => !memberIDs.includes(id));
+  }
+
+  // =actions
+
+  @action
+  toggleMember(user) {
+    if (!this.selectedMemberIDs.includes(user.id)) {
+      this.selectedMemberIDs.addObject(user.id);
+    } else {
+      this.selectedMemberIDs.removeObject(user.id);
+    }
+  }
+
+  @action
+  submit(fn) {
+    fn(this.selectedMemberIDs);
+  }
+
+}

ui/core/app/routes/scopes/scope/groups/group/add-members.js

@@ -1,6 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { hash } from 'rsvp';
 
 export default class ScopesScopeGroupsGroupAddMembersRoute extends Route {
 
@@ -18,6 +19,18 @@ export default class ScopesScopeGroupsGroupAddMembersRoute extends Route {
     this.store.unloadAll('user');
   }
 
+  /**
+   * Loads all users and returns them with the group.
+   * @return {Promise{GroupModel, [UserModel]}}
+   */
+  model() {
+    const { id: scopeID } = this.modelFor('scopes.scope');
+    return hash({
+      group: this.modelFor('scopes.scope.groups.group'),
+      users: this.store.findAll('user', { adapterOptions: { scopeID } })
+    });
+  }
+
   /**
    * Renders the route-set specific page sections
    * @override

ui/core/app/templates/scopes/scope/groups/group/add-members.hbs

@@ -1,3 +1,8 @@
 {{title (t "actions.add-members")}}
 
-{{outlet}}
+<Form::Group::AddMembers
+  @model={{@model.group}}
+  @users={{@model.users}}
+  @submit={{route-action "addMembers" @model.group}}
+  @cancel={{route-action "cancel"}}
+/>

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

@@ -221,5 +221,17 @@ module('Acceptance | groups', function (hooks) {
   test('can view group members', async function (assert) {
     assert.expect(0);
   });
-  
+
+  test('can delete members', async function(assert) {
+    assert.expect(0);
+  });
+
+  test('select and save members to add', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('select and cancel members to add', async function (assert) {
+    assert.expect(0);
+  });
+
 });

ui/core/translations/en-us.yaml

@@ -96,6 +96,7 @@ titles:
   role-principals-welcome: No Principals Associated
   members: Members
   group-members-welcome: Welcome to Members
+  no-available-users: No Users 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.
@@ -113,6 +114,7 @@ descriptions:
   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.
   group-members-welcome: Users belonging to this group appear here.
+  no-available-users: No users are available to add to this group.
 states:
   info: Info
   success: Success