refactor: 💡 Migrate credential-libraries-list to Hds::Table (#2067)

* refactor: 💡 Migrate `credential-libraries-list` to `Hds::Table`

Migrate `credential-libraries-list` to `Hds::Table` instead of
`Rose::Table`

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

* refactor: 💡 Fix broken test for navigating to `credentials-libraries`

Fix broken test for navigating to `credentials-libraries`

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

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs

@@ -28,54 +28,50 @@
   <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.type.label'}}</row.headerCell>
-            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-          </header.row>
-        </table.header>
-        <table.body as |body|>
-          {{#each @model as |credentialLibrary|}}
-            <body.row as |row|>
-              <row.headerCell>
-                {{#if (can 'read credential-library' credentialLibrary)}}
-                  <LinkTo
-                    @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library'
-                    @model={{credentialLibrary.id}}
-                  >
-                    {{credentialLibrary.displayName}}
-                  </LinkTo>
-                {{else}}
-                  {{credentialLibrary.displayName}}
-                {{/if}}
-                <p>{{credentialLibrary.description}}</p>
-              </row.headerCell>
-              <row.cell>
-                <Hds::Badge
-                  @text={{t
-                    (concat
-                      'resources.credential-library.types.'
-                      credentialLibrary.type
-                    )
-                  }}
-                />
-              </row.cell>
-              <row.cell>
-                <Copyable
-                  @text={{credentialLibrary.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
+      <Hds::Table
+        @model={{@model}}
+        @columns={{array
+          (hash label=(t 'form.name.label'))
+          (hash label=(t 'form.type.label'))
+          (hash label=(t 'form.id.label'))
+        }}
+        @valign='middle'
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              {{#if (can 'read credential-library' B.data)}}
+                <LinkTo
+                  @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library'
+                  @model={{B.data.id}}
                 >
-                  <code>{{credentialLibrary.id}}</code>
-                </Copyable>
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
-
+                  {{B.data.displayName}}
+                </LinkTo>
+              {{else}}
+                <Hds::Text::Body @tag='p'>
+                  {{B.data.displayName}}
+                </Hds::Text::Body>
+              {{/if}}
+              <Hds::Text::Body @tag='p'>
+                {{B.data.description}}
+              </Hds::Text::Body>
+            </B.Td>
+            <B.Td>
+              <Hds::Badge
+                @text={{t
+                  (concat 'resources.credential-library.types.' B.data.type)
+                }}
+              />
+            </B.Td>
+            <B.Td>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
     {{else}}
 
       <Rose::Layout::Centered>

ui/admin/tests/acceptance/credential-library/read-test.js

@@ -68,7 +68,7 @@ module('Acceptance | credential-libraries | read', function (hooks) {
 
   test('can navigate to resource', async function (assert) {
     await visit(urls.credentialLibraries);
-    await click('main tbody .rose-table-header-cell a');
+    await click('.hds-table .hds-table__tbody .hds-table__tr a');
     await a11yAudit();
     assert.strictEqual(currentURL(), urls.credentialLibrary);
   });