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 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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);
   });