refactor: 💡 add grant scopes applied badge (#2374)

* refactor: 💡 add grant scopes applied badge

* test: 💍 add extra asserts

addons/core/translations/resources/en-us.yaml

@@ -529,8 +529,12 @@ role:
   messages:
     welcome:
       title: Welcome to Roles
+    tooltips:
+      yes: The grants on this role have been applied to this scope.
+      no: The grants on this role have not been applied to this scope.
   titles:
     new: New Role
+    grants-applied: Grants applied on this scope?
   actions:
     create: Create Role
     delete: Delete Role

ui/admin/app/controllers/scopes/scope/roles/index.js

@@ -11,6 +11,7 @@ import { tracked } from '@glimmer/tracking';
 import { debounce } from 'core/decorators/debounce';
 import { confirm } from 'core/decorators/confirm';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
+import { GRANT_SCOPE_THIS } from 'api/models/role';
 
 export default class ScopesScopeRolesIndexController extends Controller {
   // =services
@@ -26,6 +27,8 @@ export default class ScopesScopeRolesIndexController extends Controller {
   @tracked page = 1;
   @tracked pageSize = 10;
 
+  grantScopeThis = GRANT_SCOPE_THIS;
+
   // =actions
 
   /**

ui/admin/app/templates/scopes/scope/roles/index.hbs

@@ -46,13 +46,14 @@
           @model={{@model.roles}}
           @columns={{array
             (hash label=(t 'form.name.label'))
+            (hash label=(t 'resources.role.titles.grants-applied'))
             (hash label=(t 'form.id.label'))
           }}
           @density='short'
           @valign='middle'
         >
           <:body as |B|>
-            <B.Tr>
+            <B.Tr data-test-role-row={{B.data.id}}>
               <B.Td>
                 {{#if (can 'read role' B.data)}}
                   <LinkTo @route='scopes.scope.roles.role' @model={{B.data.id}}>
@@ -63,6 +64,21 @@
                 {{/if}}
                 <p>{{B.data.description}}</p>
               </B.Td>
+              <B.Td>
+                {{#if (includes this.grantScopeThis B.data.grant_scope_ids)}}
+                  <Hds::TooltipButton
+                    @text={{t 'resources.role.messages.tooltips.yes'}}
+                  >
+                    <Hds::Badge @text={{t 'actions.yes'}} @color='success' />
+                  </Hds::TooltipButton>
+                {{else}}
+                  <Hds::TooltipButton
+                    @text={{t 'resources.role.messages.tooltips.no'}}
+                  >
+                    <Hds::Badge @text={{t 'actions.no'}} />
+                  </Hds::TooltipButton>
+                {{/if}}
+              </B.Td>
               <B.Td>
                 <Hds::Copy::Snippet
                   @textToCopy={{B.data.id}}

ui/admin/tests/acceptance/roles/list-test.js

@@ -4,7 +4,14 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, findAll, click, fillIn, waitUntil } from '@ember/test-helpers';
+import {
+  visit,
+  findAll,
+  click,
+  fillIn,
+  waitUntil,
+  focus,
+} from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
@@ -14,12 +21,19 @@ import {
   //currentSession,
   //invalidateSession,
 } from 'ember-simple-auth/test-support';
+import { GRANT_SCOPE_THIS } from 'api/models/role';
 
 module('Acceptance | roles | list', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
   setupIndexedDb(hooks);
 
+  const ROLE_BADGE_SELECTOR = (id) =>
+    `tbody [data-test-role-row="${id}"] td:nth-child(2) .hds-badge__text`;
+  const ROLE_TOOLTIP_BTN_SELECTOR = (id) =>
+    `tbody [data-test-role-row="${id}"] td:nth-child(2) .hds-tooltip-button`;
+  const ROLE_TOOLTIP_CONTENT_SELECTOR = (id) =>
+    `tbody [data-test-role-row="${id}"] td:nth-child(2) [data-tippy-root]`;
   const SEARCH_INPUT_SELECTOR = '.search-filtering [type="search"]';
   const NO_RESULTS_MSG_SELECTOR = '[data-test-no-role-results]';
 
@@ -122,4 +136,29 @@ module('Acceptance | roles | list', function (hooks) {
     assert.dom(`[href="${urls.role2}"]`).doesNotExist();
     assert.dom(NO_RESULTS_MSG_SELECTOR).includesText('No results found');
   });
+
+  test('correct badge in grants applied column is visible to user', async function (assert) {
+    instances.role1.grant_scope_ids = instances.role1.grant_scope_ids.filter(
+      (id) => id !== GRANT_SCOPE_THIS,
+    );
+    await visit(urls.orgScope);
+
+    await click(`[href="${urls.roles}"]`);
+
+    assert.true(instances.role2.grant_scope_ids.includes(GRANT_SCOPE_THIS));
+    assert.dom(ROLE_BADGE_SELECTOR(instances.role1.id)).hasText('No');
+    assert.dom(ROLE_BADGE_SELECTOR(instances.role2.id)).hasText('Yes');
+
+    await focus(ROLE_TOOLTIP_BTN_SELECTOR(instances.role1.id));
+
+    assert
+      .dom(ROLE_TOOLTIP_CONTENT_SELECTOR(instances.role1.id))
+      .hasText('The grants on this role have not been applied to this scope.');
+
+    await focus(ROLE_TOOLTIP_BTN_SELECTOR(instances.role2.id));
+
+    assert
+      .dom(ROLE_TOOLTIP_CONTENT_SELECTOR(instances.role2.id))
+      .hasText('The grants on this role have been applied to this scope.');
+  });
 });