refactor: 💡 Refactor workers list to use Hds::Table (#2038)

* refactor: 💡 Refactor workers list to use `Hds::Table`

Refactor workers list to use `Hds::Table` instead of `Rose`.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11734

* Refactored `workers-list` table to use `margin-top` custom css instead
of removing the background from `Rose::Toolbar`

ui/admin/app/styles/app.scss

@@ -739,7 +739,8 @@
   margin-bottom: 1rem;
 }
 
-.auth-methods-list-table {
+.auth-methods-list-table,
+.workers-list-table {
   margin-top: 1rem;
 }
 

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

@@ -90,67 +90,62 @@
 
       </Rose::Toolbar>
 
-      <Rose::Table as |table|>
-        <table.header as |header|>
-          <header.row as |row|>
-            <row.headerCell>{{t 'resources.worker.title'}}</row.headerCell>
-            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-            <row.headerCell>{{t
-                'resources.worker.table.session_count'
-              }}</row.headerCell>
-            <row.headerCell>{{t
-                'resources.worker.table.release_version'
-              }}</row.headerCell>
-            <row.headerCell>{{t
-                'resources.worker.table.ip_address'
-              }}</row.headerCell>
-          </header.row>
-        </table.header>
-        <table.body as |body|>
-          {{#each @model as |worker|}}
-            <body.row as |row|>
-              <row.headerCell>
-                {{#if (and (can 'read worker' worker) worker.isPki)}}
-                  <LinkTo
-                    @route='scopes.scope.workers.worker'
-                    @model={{worker.id}}
-                  >
-                    {{worker.displayName}}
-                  </LinkTo>
-                {{else}}
-                  {{worker.displayName}}
-                {{/if}}
-                {{#if worker.description}}
-                  <p>{{worker.description}}</p>
-                {{/if}}
-                {{#if worker.tagCount}}
-                  <div>
-                    <Hds::Badge
-                      @icon='tag'
-                      @text={{t
-                        'resources.worker.table.tag_count'
-                        tagCount=worker.tagCount
-                      }}
-                    />
-                  </div>
-                {{/if}}
-              </row.headerCell>
-              <row.cell>
-                <Copyable
-                  @text={{worker.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
+      <Hds::Table
+        class='workers-list-table'
+        @model={{@model}}
+        @columns={{array
+          (hash label=(t 'resources.worker.title'))
+          (hash label=(t 'form.tags.label'))
+          (hash label=(t 'resources.session.title_plural'))
+          (hash label=(t 'resources.worker.table.release_version'))
+          (hash label=(t 'resources.worker.table.ip_address'))
+          (hash label=(t 'form.id.label'))
+        }}
+        @density='short'
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              {{#if (and (can 'read worker' B.data) B.data.isPki)}}
+                <LinkTo
+                  @route='scopes.scope.workers.worker'
+                  @model={{B.data.id}}
                 >
-                  <code>{{worker.id}}</code>
-                </Copyable>
-              </row.cell>
-              <row.cell>{{worker.active_connection_count}}</row.cell>
-              <row.cell>{{worker.release_version}}</row.cell>
-              <row.cell>{{worker.address}} </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
+                  {{B.data.displayName}}
+                </LinkTo>
+              {{else}}
+                {{B.data.displayName}}
+              {{/if}}
+              {{#if B.data.description}}
+                <p>{{B.data.description}}</p>
+              {{/if}}
+            </B.Td>
+            <B.Td>
+              {{#if B.data.tagCount}}
+                <Hds::Badge
+                  @icon='tag'
+                  @text={{t
+                    'resources.worker.table.tag_count'
+                    tagCount=B.data.tagCount
+                  }}
+                />
+              {{/if}}
+            </B.Td>
+            <B.Td>{{B.data.active_connection_count}}</B.Td>
+            <B.Td>{{B.data.release_version}}</B.Td>
+            <B.Td>{{B.data.address}} </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}}
       <Rose::Layout::Centered>
         <Rose::Message

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

@@ -72,7 +72,7 @@ module('Acceptance | workers | read', function (hooks) {
     await click(`[href="${urls.workers}"]`);
 
     assert
-      .dom('main tbody .rose-table-header-cell:nth-child(1) a')
+      .dom('.hds-table__tbody .hds-table__tr:nth-child(1) a')
       .isNotVisible();
   });
 
@@ -81,7 +81,7 @@ module('Acceptance | workers | read', function (hooks) {
 
     await click(`[href="${urls.workers}"]`);
 
-    assert.dom('main tbody .rose-table-header-cell:nth-child(1) a').isVisible();
+    assert.dom('.hds-table__tbody .hds-table__tr:nth-child(1) a').isVisible();
   });
 
   test('users can navigate to worker and incorrect url autocorrects', async function (assert) {