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);
+    });
   }
 
   /**