refactor: 💡 use hds table in role list (#1779)

* refactor: 💡 use hds table in role list

* refactor: 💡 Fixed the tests that were failing

---------

Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>

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

@@ -32,40 +32,38 @@
   <page.body>
 
     {{#if @model}}
-
-      <Rose::Table as |table|>
-        <table.header as |header|>
-          <header.row as |row|>
-            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-          </header.row>
-        </table.header>
-        <table.body as |body|>
-          {{#each @model as |role|}}
-            <body.row as |row|>
-              <row.headerCell>
-                {{#if (can 'read model' role)}}
-                  <LinkTo @route='scopes.scope.roles.role' @model={{role.id}}>
-                    {{role.displayName}}
-                  </LinkTo>
-                {{else}}
-                  {{role.displayName}}
-                {{/if}}
-                <p>{{role.description}}</p>
-              </row.headerCell>
-              <row.cell>
-                <Copyable
-                  @text={{role.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{role.id}}</code>
-                </Copyable>
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
+      <Hds::Table
+        @model={{@model}}
+        @columns={{array
+          (hash label=(t 'form.name.label'))
+          (hash label=(t 'form.id.label'))
+        }}
+        @valign='middle'
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              {{#if (can 'read role' B.data)}}
+                <LinkTo @route='scopes.scope.roles.role' @model={{B.data.id}}>
+                  {{B.data.displayName}}
+                </LinkTo>
+              {{else}}
+                {{B.data.displayName}}
+              {{/if}}
+              <p>{{B.data.description}}</p>
+            </B.Td>
+            <B.Td>
+              <Copyable
+                @text={{B.data.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <code>{{B.data.id}}</code>
+              </Copyable>
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
 
     {{else}}
 

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

@@ -70,7 +70,7 @@ module('Acceptance | roles | read', function (hooks) {
   test('can navigate to a role form', async function (assert) {
     assert.expect(1);
     await visit(urls.roles);
-    await click('main tbody .rose-table-header-cell:nth-child(1) a');
+    await click('main tbody .hds-table__tr:nth-child(1) a');
     await a11yAudit();
     assert.strictEqual(currentURL(), urls.role);
   });
@@ -80,6 +80,6 @@ module('Acceptance | roles | read', function (hooks) {
     instances.role.authorized_actions =
       instances.role.authorized_actions.filter((item) => item !== 'read');
     await visit(urls.roles);
-    assert.notOk(find('main tbody .rose-table-header-cell:nth-child(1) a'));
+    assert.notOk(find('main tbody .hds-table__tr:nth-child(1) a'));
   });
 });