From 444a621bcfd0b6b4922976c207815fef263dd764 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 31 Aug 2020 14:42:08 -0400
Subject: [PATCH 1/9] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20role=20route=20s?=
 =?UTF-8?q?hould=20have=20multiple=20outlets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/routes/scopes/scope/roles/role.js | 31 ++++++++++++++++++-
 .../app/templates/scopes/scope/roles/role.hbs | 24 ++------------
 .../scopes/scope/roles/role/-actions.hbs      |  9 ++++++
 .../scopes/scope/roles/role/-header.hbs       |  1 +
 .../scopes/scope/roles/role/-navigation.hbs   | 11 +++++++
 5 files changed, 54 insertions(+), 22 deletions(-)
 create mode 100644 ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/roles/role/-header.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/roles/role/-navigation.hbs

diff --git a/ui/core/app/routes/scopes/scope/roles/role.js b/ui/core/app/routes/scopes/scope/roles/role.js
index 7fb8d3db7..6269e7748 100644
--- a/ui/core/app/routes/scopes/scope/roles/role.js
+++ b/ui/core/app/routes/scopes/scope/roles/role.js
@@ -9,10 +9,39 @@ export default class ScopesScopeRolesRoleRoute extends Route {
    * @param {string} params.role_id
    * @return {RoleModel}
    */
-  async model({ role_id }) {
+  model({ role_id }) {
     const { id: scopeID } = this.modelFor('scopes.scope');
     return this.store.findRecord('role', role_id, {
       adapterOptions: { scopeID },
     });
   }
+
+  /**
+   * Renders the route-specific templates for header, navigation,
+   * and actions page sections.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/roles/role/-header', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'header',
+      model
+    });
+
+    this.render('scopes/scope/roles/role/-actions', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'actions',
+      model
+    });
+
+    this.render('scopes/scope/roles/role/-navigation', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'navigation',
+      model
+    });
+  }
 }
diff --git a/ui/core/app/templates/scopes/scope/roles/role.hbs b/ui/core/app/templates/scopes/scope/roles/role.hbs
index 3794941ce..271a98d73 100644
--- a/ui/core/app/templates/scopes/scope/roles/role.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role.hbs
@@ -7,33 +7,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t "resources.role"}}</h2>
+    {{outlet "header"}}
   </page.header>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
-      <dropdown.button
-        @style="danger"
-        @disabled={{@model.canSave}}
-        {{on "click" (route-action "delete" @model)}}
-      >
-        {{t 'actions.delete-role'}}
-      </dropdown.button>
-    </Rose::Dropdown>
+    {{outlet "actions"}}
   </page.actions>
 
   <page.navigation>
-    <Rose::Nav::Tabs as |nav|>
-      <nav.link @route='scopes.scope.roles.role.index'>
-        {{t 'titles.settings'}}
-      </nav.link>
-      <nav.link @route='scopes.scope.roles.role.principals'>
-        {{t 'titles.principals'}}
-      </nav.link>
-      <nav.link @route='scopes.scope.roles.role.grants'>
-        {{t 'titles.grants'}}
-      </nav.link>
-    </Rose::Nav::Tabs>
+    {{outlet "navigation"}}
   </page.navigation>
 
   <page.body>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs b/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
new file mode 100644
index 000000000..6cdf1f9e9
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
@@ -0,0 +1,9 @@
+<Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.button
+    @style="danger"
+    @disabled={{@model.canSave}}
+    {{on "click" (route-action "delete" @model)}}
+  >
+    {{t 'actions.delete-role'}}
+  </dropdown.button>
+</Rose::Dropdown>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
new file mode 100644
index 000000000..d7985c901
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "resources.role"}}</h2>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-navigation.hbs b/ui/core/app/templates/scopes/scope/roles/role/-navigation.hbs
new file mode 100644
index 000000000..5498f5733
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/-navigation.hbs
@@ -0,0 +1,11 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.roles.role.index'>
+    {{t 'titles.settings'}}
+  </nav.link>
+  <nav.link @route='scopes.scope.roles.role.principals'>
+    {{t 'titles.principals'}}
+  </nav.link>
+  <nav.link @route='scopes.scope.roles.role.grants'>
+    {{t 'titles.grants'}}
+  </nav.link>
+</Rose::Nav::Tabs>

From 67de48a1376885ffc6ed54caf5e0f08fa1efb7e1 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 31 Aug 2020 15:10:10 -0400
Subject: [PATCH 2/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20setup=20initial=20a?=
 =?UTF-8?q?dd-principals=20route?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scopes/scope/roles/role/add-principals.js | 20 +++++++++++++
 ui/core/app/router.js                         |  1 +
 .../scopes/scope/roles/role/add-principals.js | 29 +++++++++++++++++++
 .../scopes/scope/roles/role/-actions.hbs      |  3 ++
 .../scope/roles/role/add-principals.hbs       |  3 ++
 .../roles/role/add-principals/-header.hbs     |  1 +
 .../scope/roles/role/add-principals-test.js   | 12 ++++++++
 .../scope/roles/role/add-principals-test.js   | 11 +++++++
 ui/core/translations/en-us.yaml               |  1 +
 9 files changed, 81 insertions(+)
 create mode 100644 ui/core/app/controllers/scopes/scope/roles/role/add-principals.js
 create mode 100644 ui/core/app/routes/scopes/scope/roles/role/add-principals.js
 create mode 100644 ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/roles/role/add-principals/-header.hbs
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/roles/role/add-principals-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/roles/role/add-principals-test.js

diff --git a/ui/core/app/controllers/scopes/scope/roles/role/add-principals.js b/ui/core/app/controllers/scopes/scope/roles/role/add-principals.js
new file mode 100644
index 000000000..36c232398
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/roles/role/add-principals.js
@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeRolesRoleAddPrincipalsController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Translated roles breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('actions.add-principals');
+  }
+
+}
diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index effcb4523..6df274629 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -62,6 +62,7 @@ Router.map(function () {
         this.route('role', { path: ':role_id' }, function () {
           this.route('grants');
           this.route('principals');
+          this.route('add-principals');
         });
         this.route('new');
       });
diff --git a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
new file mode 100644
index 000000000..1c4d8bbb8
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
@@ -0,0 +1,29 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
+
+  // =methods
+
+  /**
+   * Empties the actions and navigation outlets and renders a custom header.
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/roles/role/add-principals/-header', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'header'
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'actions'
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'navigation'
+    });
+  }
+}
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs b/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
index 6cdf1f9e9..576a6a8fb 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
@@ -1,4 +1,7 @@
 <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.link @route="scopes.scope.roles.role.add-principals">
+    {{t 'actions.add-principals'}}
+  </dropdown.link>
   <dropdown.button
     @style="danger"
     @disabled={{@model.canSave}}
diff --git a/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
new file mode 100644
index 000000000..cf8fdc119
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
@@ -0,0 +1,3 @@
+{{title (t "actions.add-principals")}}
+
+{{outlet}}
diff --git a/ui/core/app/templates/scopes/scope/roles/role/add-principals/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/add-principals/-header.hbs
new file mode 100644
index 000000000..8696fed6d
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/add-principals/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "actions.add-principals"}}</h2>
diff --git a/ui/core/tests/unit/controllers/scopes/scope/roles/role/add-principals-test.js b/ui/core/tests/unit/controllers/scopes/scope/roles/role/add-principals-test.js
new file mode 100644
index 000000000..a214f448a
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/roles/role/add-principals-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/roles/role/add-principals', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/roles/role/add-principals');
+    assert.ok(controller);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/roles/role/add-principals-test.js b/ui/core/tests/unit/routes/scopes/scope/roles/role/add-principals-test.js
new file mode 100644
index 000000000..3d4a91c31
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/roles/role/add-principals-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/roles/role/add-principals', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/roles/role/add-principals');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 655821ec8..427c1b956 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -23,6 +23,7 @@ actions:
   add-host-set: Create Host Set
   add-host: Create Host
   add-host-sets: Add Host Sets
+  add-principals: Add Principals
 auth:
   titles:
     no-scopes: No Scopes Available

From 7fecae2796376b2273ee71979acb9f65cc6aa906 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 31 Aug 2020 15:52:50 -0400
Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20initial=20add-?=
 =?UTF-8?q?principals=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/role/add-principals/index.hbs        | 66 +++++++++++++++++++
 .../form/role/add-principals/index.js         | 38 +++++++++++
 .../scopes/scope/roles/role/add-principals.js | 54 +++++++++++++++
 .../scope/roles/role/add-principals.hbs       |  8 ++-
 ui/core/mirage/generated/factories/role.js    |  1 +
 ui/core/tests/acceptance/roles-test.js        | 16 +++++
 .../form/role/add-principals-test.js          | 12 ++++
 7 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 ui/core/app/components/form/role/add-principals/index.hbs
 create mode 100644 ui/core/app/components/form/role/add-principals/index.js
 create mode 100644 ui/core/tests/integration/components/form/role/add-principals-test.js

diff --git a/ui/core/app/components/form/role/add-principals/index.hbs b/ui/core/app/components/form/role/add-principals/index.hbs
new file mode 100644
index 000000000..d15f49bc3
--- /dev/null
+++ b/ui/core/app/components/form/role/add-principals/index.hbs
@@ -0,0 +1,66 @@
+{{#if this.hasAvailablePrincipals}}
+  <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"}} />
+
+    <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::Form>
+{{/if}}
+
+{{#unless this.hasAvailablePrincipals}}
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "titles.no-principals"}} as |message|>
+      <message.description>
+        {{t "descriptions.no-principals"}}
+      </message.description>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}
diff --git a/ui/core/app/components/form/role/add-principals/index.js b/ui/core/app/components/form/role/add-principals/index.js
new file mode 100644
index 000000000..34090a495
--- /dev/null
+++ b/ui/core/app/components/form/role/add-principals/index.js
@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
+
+export default class FormRoleAddPrincipalsComponent extends Component {
+
+  // =properties
+
+  /**
+   * Array of selected principal IDs.
+   * @type {EmberArray}
+   */
+  selectedPrincipalIDs = A();
+
+  /**
+   * True if there are users or groups not yet added to this role.
+   * TODO:  this must be computed on users, groups, and role principals.
+   * @type {boolean}
+   */
+  hasAvailablePrincipals = true;
+
+  // =actions
+
+  @action
+  togglePrincipal(principal) {
+    if (!this.selectedPrincipalIDs.includes(principal.id)) {
+      this.selectedPrincipalIDs.addObject(principal.id);
+    } else {
+      this.selectedPrincipalIDs.removeObject(principal.id);
+    }
+  }
+
+  @action
+  submit(fn) {
+    fn(this.selectedPrincipalIDs);
+  }
+
+}
diff --git a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
index 1c4d8bbb8..b4854a825 100644
--- a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
+++ b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
@@ -1,9 +1,37 @@
 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 ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
 
+  // =services
+
+  @service intl;
+  @service notify;
+
   // =methods
 
+  /**
+   * Emtpy out any previously loaded users and groups
+   * (collectively, principals).
+   */
+  beforeModel() {
+    this.store.unloadAll('user');
+    this.store.unloadAll('group');
+  }
+
+  model() {
+    const role = this.modelFor('scopes.scope.roles.role');
+    const { scopeID } = role;
+    const options = { adapterOptions: { scopeID } };
+    return hash({
+      role,
+      users: this.store.findAll('user', options),
+      groups: this.store.findAll('group', options)
+    });
+  }
+
   /**
    * Empties the actions and navigation outlets and renders a custom header.
    * @override
@@ -26,4 +54,30 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
       outlet: 'navigation'
     });
   }
+
+  /**
+   * Saves principal IDs into the role via the API.
+   * @param {RoleModel} role
+   * @param {[string]} principalIDs
+   */
+  @action
+  async addPrincipals(role, principalIDs) {
+    try {
+      await role.addPrincipals(principalIDs);
+      this.replaceWith('scopes.scope.roles.role.principals');
+      this.notify.success(this.intl.t('notify.save-success'));
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Redirect to role principals as if nothing ever happened.
+   */
+  @action
+  cancel() {
+    this.replaceWith('scopes.scope.roles.role.principals');
+  }
+
 }
diff --git a/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
index cf8fdc119..5110dbec0 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
@@ -1,3 +1,9 @@
 {{title (t "actions.add-principals")}}
 
-{{outlet}}
+<Form::Role::AddPrincipals
+  @model={{@model.role}}
+  @users={{@model.users}}
+  @groups={{@model.groups}}
+  @submit={{route-action "addPrincipals" @model.role}}
+  @cancel={{route-action "cancel"}}
+/>
diff --git a/ui/core/mirage/generated/factories/role.js b/ui/core/mirage/generated/factories/role.js
index 6265c7116..13e83aad3 100644
--- a/ui/core/mirage/generated/factories/role.js
+++ b/ui/core/mirage/generated/factories/role.js
@@ -12,5 +12,6 @@ export default Factory.extend({
   created_time: () => date.recent(),
   updated_time: () => date.recent(),
   disabled: () => random.boolean(),
+  version: () => random.number(),
 
 });
diff --git a/ui/core/tests/acceptance/roles-test.js b/ui/core/tests/acceptance/roles-test.js
index 5fc89b42e..07f55d080 100644
--- a/ui/core/tests/acceptance/roles-test.js
+++ b/ui/core/tests/acceptance/roles-test.js
@@ -237,4 +237,20 @@ module('Acceptance | roles', function (hooks) {
   test('new grants can be added and saved or canceled', async function (assert) {
     assert.expect(0);
   });
+
+  test('viewing role principals', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can delete a principal', async function(assert) {
+    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);
+  });
 });
diff --git a/ui/core/tests/integration/components/form/role/add-principals-test.js b/ui/core/tests/integration/components/form/role/add-principals-test.js
new file mode 100644
index 000000000..1e155a103
--- /dev/null
+++ b/ui/core/tests/integration/components/form/role/add-principals-test.js
@@ -0,0 +1,12 @@
+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', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    assert.expect(0);
+  });
+});

From 4b1fa9a3451624bfd43e433c6e483b89546b750c Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 1 Sep 2020 11:24:28 -0400
Subject: [PATCH 4/9] feat: Add add-principals route into a role

---
 ui/core/app/routes/scopes/scope/roles/role.js | 19 +++++++------------
 .../scopes/scope/roles/role/add-principals.js | 13 +++++++------
 .../app/templates/scopes/scope/roles/role.hbs |  8 ++++----
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/ui/core/app/routes/scopes/scope/roles/role.js b/ui/core/app/routes/scopes/scope/roles/role.js
index 6269e7748..9a0012328 100644
--- a/ui/core/app/routes/scopes/scope/roles/role.js
+++ b/ui/core/app/routes/scopes/scope/roles/role.js
@@ -17,31 +17,26 @@ export default class ScopesScopeRolesRoleRoute extends Route {
   }
 
   /**
-   * Renders the route-specific templates for header, navigation,
+   * Renders the role specific templates for header, navigation,
    * and actions page sections.
    * @override
-   * @param {object} controller
-   * @param {object} model
    */
-  renderTemplate(controller, model) {
+  renderTemplate() {
     super.renderTemplate(...arguments);
 
     this.render('scopes/scope/roles/role/-header', {
       into: 'scopes/scope/roles/role',
       outlet: 'header',
-      model
-    });
-
-    this.render('scopes/scope/roles/role/-actions', {
-      into: 'scopes/scope/roles/role',
-      outlet: 'actions',
-      model
     });
 
     this.render('scopes/scope/roles/role/-navigation', {
       into: 'scopes/scope/roles/role',
       outlet: 'navigation',
-      model
+    });
+
+    this.render('scopes/scope/roles/role/-actions', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'actions',
     });
   }
 }
diff --git a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
index b4854a825..e8d175dcb 100644
--- a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
+++ b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
@@ -13,7 +13,7 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
   // =methods
 
   /**
-   * Emtpy out any previously loaded users and groups
+   * Empty out any previously loaded users and groups
    * (collectively, principals).
    */
   beforeModel() {
@@ -32,8 +32,10 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
     });
   }
 
+  // =methods
+
   /**
-   * Empties the actions and navigation outlets and renders a custom header.
+   * Renders the add-principals-specific header template.
    * @override
    */
   renderTemplate() {
@@ -41,17 +43,17 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
 
     this.render('scopes/scope/roles/role/add-principals/-header', {
       into: 'scopes/scope/roles/role',
-      outlet: 'header'
+      outlet: 'header',
     });
 
     this.render('-empty', {
       into: 'scopes/scope/roles/role',
-      outlet: 'actions'
+      outlet: 'navigation',
     });
 
     this.render('-empty', {
       into: 'scopes/scope/roles/role',
-      outlet: 'navigation'
+      outlet: 'actions',
     });
   }
 
@@ -79,5 +81,4 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
   cancel() {
     this.replaceWith('scopes.scope.roles.role.principals');
   }
-
 }
diff --git a/ui/core/app/templates/scopes/scope/roles/role.hbs b/ui/core/app/templates/scopes/scope/roles/role.hbs
index 271a98d73..2a878ff51 100644
--- a/ui/core/app/templates/scopes/scope/roles/role.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role.hbs
@@ -10,14 +10,14 @@
     {{outlet "header"}}
   </page.header>
 
-  <page.actions>
-    {{outlet "actions"}}
-  </page.actions>
-
   <page.navigation>
     {{outlet "navigation"}}
   </page.navigation>
 
+  <page.actions>
+    {{outlet "actions"}}
+  </page.actions>
+
   <page.body>
     {{outlet}}
   </page.body>

From 0821160cda87169b973f7025a24e74a89f0d49f0 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 1 Sep 2020 11:34:44 -0400
Subject: [PATCH 5/9] feat: Init add-principals form component

---
 .../form/role/add-principals/index.js         |  1 -
 .../form/role/add-principals/index-test.js    | 26 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 ui/core/tests/integration/components/form/role/add-principals/index-test.js

diff --git a/ui/core/app/components/form/role/add-principals/index.js b/ui/core/app/components/form/role/add-principals/index.js
index 34090a495..906d4d9b8 100644
--- a/ui/core/app/components/form/role/add-principals/index.js
+++ b/ui/core/app/components/form/role/add-principals/index.js
@@ -34,5 +34,4 @@ export default class FormRoleAddPrincipalsComponent extends Component {
   submit(fn) {
     fn(this.selectedPrincipalIDs);
   }
-
 }
diff --git a/ui/core/tests/integration/components/form/role/add-principals/index-test.js b/ui/core/tests/integration/components/form/role/add-principals/index-test.js
new file mode 100644
index 000000000..12716f951
--- /dev/null
+++ b/ui/core/tests/integration/components/form/role/add-principals/index-test.js
@@ -0,0 +1,26 @@
+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');
+  });
+});

From d55d6419e4a560651d4c6122beaeb1e6de689d97 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 1 Sep 2020 15:29:19 -0400
Subject: [PATCH 6/9] feat: Add checkbox table for user/group assignment to
 role

---
 .../form/role/add-principals/index.hbs        | 101 ++++++++----------
 .../form/role/add-principals/index.js         |  18 +++-
 .../project/targets/target/add-host-sets.js   |   2 +-
 .../scopes/scope/roles/role/add-principals.js |  26 +++--
 .../project/targets/target/add-host-sets.hbs  |   4 +
 .../scope/roles/role/add-principals.hbs       |   4 +-
 ui/core/tests/acceptance/roles-test.js        |   8 ++
 .../form/role/add-principals/index-test.js    |  26 -----
 ui/core/translations/en-us.yaml               |   3 +
 9 files changed, 97 insertions(+), 95 deletions(-)
 delete mode 100644 ui/core/tests/integration/components/form/role/add-principals/index-test.js

diff --git a/ui/core/app/components/form/role/add-principals/index.hbs b/ui/core/app/components/form/role/add-principals/index.hbs
index d15f49bc3..c47e8e51d 100644
--- a/ui/core/app/components/form/role/add-principals/index.hbs
+++ b/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}}
diff --git a/ui/core/app/components/form/role/add-principals/index.js b/ui/core/app/components/form/role/add-principals/index.js
index 906d4d9b8..913a53e03 100644
--- a/ui/core/app/components/form/role/add-principals/index.js
+++ b/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
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
index f58b7ebb7..f1fdc55ec 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
+++ b/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');
diff --git a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
index e8d175dcb..73d8cd7e1 100644
--- a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
+++ b/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
    */
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets.hbs
index 206de2d68..e487f20f6 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets.hbs
+++ b/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}}
diff --git a/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
index 5110dbec0..81fc1baa6 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
+++ b/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"}}
-/>
+/>
\ No newline at end of file
diff --git a/ui/core/tests/acceptance/roles-test.js b/ui/core/tests/acceptance/roles-test.js
index 07f55d080..f88517210 100644
--- a/ui/core/tests/acceptance/roles-test.js
+++ b/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);
   });
diff --git a/ui/core/tests/integration/components/form/role/add-principals/index-test.js b/ui/core/tests/integration/components/form/role/add-principals/index-test.js
deleted file mode 100644
index 12716f951..000000000
--- a/ui/core/tests/integration/components/form/role/add-principals/index-test.js
+++ /dev/null
@@ -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');
-  });
-});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 427c1b956..e79d240e0 100644
--- a/ui/core/translations/en-us.yaml
+++ b/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

From 7a79e4e8202afb362250b09d1a1711cfffe639f6 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 1 Sep 2020 16:05:40 -0400
Subject: [PATCH 7/9] refactor: Cleanup after rebasing feature-add-principals
 branc

---
 .../form/role/add-principals/index.hbs        | 79 ++++++++++---------
 .../form/role/add-principals/index.js         | 12 ++-
 .../scopes/scope/roles/role/add-principals.js | 14 +---
 3 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/ui/core/app/components/form/role/add-principals/index.hbs b/ui/core/app/components/form/role/add-principals/index.hbs
index c47e8e51d..bbf95f605 100644
--- a/ui/core/app/components/form/role/add-principals/index.hbs
+++ b/ui/core/app/components/form/role/add-principals/index.hbs
@@ -1,45 +1,47 @@
-<Rose::Form
-  class="full-width"
-  @onSubmit={{fn this.submit @submit}}
-  @cancel={{@cancel}}
-  @disabled={{@model.isSaving}}
-  @error={{@model.errors.base}}
-  as |form|
->
+{{#if this.hasAvailablePrincipals}}
+  <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 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::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>
+{{/if}}
 
+{{#unless this.hasAvailablePrincipals}}
   <Rose::Layout::Centered>
     <Rose::Message @title={{t "titles.no-principals-available"}} as |message|>
       <message.description>
@@ -51,3 +53,4 @@
       </message.link>
     </Rose::Message>
   </Rose::Layout::Centered>
+{{/unless}}
\ No newline at end of file
diff --git a/ui/core/app/components/form/role/add-principals/index.js b/ui/core/app/components/form/role/add-principals/index.js
index 913a53e03..de1a8a5de 100644
--- a/ui/core/app/components/form/role/add-principals/index.js
+++ b/ui/core/app/components/form/role/add-principals/index.js
@@ -13,17 +13,23 @@ export default class FormRoleAddPrincipalsIndexComponent extends Component {
   selectedPrincipalIDs = A();
 
   /**
+   * Checks for unassigned principals.
    * True if there are users or groups not yet added to this role.
-   * TODO:  this must be computed on users, groups, and role principals.
+   * @param {RoleModel} role
+   * @param {[UserModel]} users
+   * @param {[GroupModel]} groups
    * @type {boolean}
    */
-  hasAvailablePrincipals = true;
+  @computed('args.{model,users,groups}')
+  get hasAvailablePrincipals() {
+    return this.args.model.principals.length != (this.args.users.length + this.args.groups.length);
+  }
 
   /**
    * Principals not currently assigned to a role.
    * @type {[UserModel, GroupModel]}
    */
-  @computed('args.{users,groups}')
+  @computed('args.{model,users,groups}')
   get filteredPrincipals() {
     // Retrieve principal IDs assigned to current role
     const currentPrincipalIDs = this.args.model.principals.map((principal) => principal.principal_id);
diff --git a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
index 73d8cd7e1..29baf7f54 100644
--- a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
+++ b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
@@ -29,21 +29,11 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
     const { scopeID } = role;
     const options = { adapterOptions: { scopeID } };
 
-    return {
+    return hash({
       role,
       users: this.store.findAll('user', options),
       groups: this.store.findAll('group', options)
-    };
-  }
-
-  /**
-   * 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);
+    });
   }
 
   /**

From dff67eddae686ecc2bee51ad55d98b6ac1534a34 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 1 Sep 2020 16:12:46 -0400
Subject: [PATCH 8/9] feat: Add title to add-principals view

Cleanup comments after rebasing
---
 .../app/routes/scopes/scope/roles/role/add-principals.js  | 4 +++-
 ui/core/app/templates/scopes/scope/roles/role.hbs         | 8 ++++----
 .../templates/scopes/scope/roles/role/add-principals.hbs  | 4 +++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
index 29baf7f54..b308e7c5d 100644
--- a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
+++ b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
@@ -14,6 +14,7 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
 
   /**
    * Empty out any previously loaded users and groups.
+   * (collectively, principals).
    */
   beforeModel() {
     this.store.unloadAll('user');
@@ -38,6 +39,7 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
 
   /**
    * Renders the add-principals-specific header template.
+   * Empties the actions and navigation outlets and renders a custom empty header.
    * @override
    */
   renderTemplate() {
@@ -62,7 +64,7 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
   // =actions
 
   /**
-   * Save principal IDs to current role.
+   * Save principal IDs to current role via the API.
    * @param {RoleModel} role
    * @param {[string]} principalIDs
    */
diff --git a/ui/core/app/templates/scopes/scope/roles/role.hbs b/ui/core/app/templates/scopes/scope/roles/role.hbs
index 2a878ff51..271a98d73 100644
--- a/ui/core/app/templates/scopes/scope/roles/role.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role.hbs
@@ -10,14 +10,14 @@
     {{outlet "header"}}
   </page.header>
 
-  <page.navigation>
-    {{outlet "navigation"}}
-  </page.navigation>
-
   <page.actions>
     {{outlet "actions"}}
   </page.actions>
 
+  <page.navigation>
+    {{outlet "navigation"}}
+  </page.navigation>
+
   <page.body>
     {{outlet}}
   </page.body>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
index 81fc1baa6..5110dbec0 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
@@ -1,7 +1,9 @@
+{{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"}}
-/>
\ No newline at end of file
+/>

From e286f1386830530f31efebffbf2671dfccf9e768 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 2 Sep 2020 17:07:41 -0400
Subject: [PATCH 9/9] refactor: Update empty role principals calculation

---
 .../app/components/form/role/add-principals/index.js | 12 +++++-------
 ui/core/tests/acceptance/roles-test.js               |  8 --------
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/ui/core/app/components/form/role/add-principals/index.js b/ui/core/app/components/form/role/add-principals/index.js
index de1a8a5de..84ba22428 100644
--- a/ui/core/app/components/form/role/add-principals/index.js
+++ b/ui/core/app/components/form/role/add-principals/index.js
@@ -15,14 +15,12 @@ export default class FormRoleAddPrincipalsIndexComponent extends Component {
   /**
    * Checks for unassigned principals.
    * True if there are users or groups not yet added to this role.
-   * @param {RoleModel} role
-   * @param {[UserModel]} users
-   * @param {[GroupModel]} groups
+   * @param {[UserModel, GroupModel]} filteredPrincipals
    * @type {boolean}
    */
-  @computed('args.{model,users,groups}')
+  @computed('filteredPrincipals')
   get hasAvailablePrincipals() {
-    return this.args.model.principals.length != (this.args.users.length + this.args.groups.length);
+    return this.filteredPrincipals.length > 0;
   }
 
   /**
@@ -32,11 +30,11 @@ export default class FormRoleAddPrincipalsIndexComponent extends Component {
   @computed('args.{model,users,groups}')
   get filteredPrincipals() {
     // Retrieve principal IDs assigned to current role
-    const currentPrincipalIDs = this.args.model.principals.map((principal) => principal.principal_id);
+    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);
+    return [...unassignedUsers, ...unassignedGroups];
   }
 
   // =actions
diff --git a/ui/core/tests/acceptance/roles-test.js b/ui/core/tests/acceptance/roles-test.js
index f88517210..07f55d080 100644
--- a/ui/core/tests/acceptance/roles-test.js
+++ b/ui/core/tests/acceptance/roles-test.js
@@ -226,14 +226,6 @@ 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);
   });