Icu 10366 use hds table in brokered credential sources (#1802)

* refactor: 💡 Use HDS tables in user accounts

* refactor: 💡 Use HDS tables in brokered-credential-sources

ui/admin/app/templates/scopes/scope/targets/target/brokered-credential-sources.hbs

@@ -26,92 +26,77 @@
   <page.body>
     {{#if @model.brokeredCredentialSources}}
 
-      <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>
-            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-          </header.row>
-        </table.header>
-        <table.body as |body|>
-          {{#each
-            @model.brokeredCredentialSources
-            as |brokeredCredentialSource|
-          }}
-            <body.row as |row|>
-              <row.headerCell>
-                {{#if (cannot 'read credential' brokeredCredentialSource)}}
-                  {{brokeredCredentialSource.displayName}}
-                {{else}}
-                  {{#if brokeredCredentialSource.isStatic}}
-                    <LinkTo
-                      @route='scopes.scope.credential-stores.credential-store.credentials.credential'
-                      @models={{array
-                        brokeredCredentialSource.credential_store_id
-                        brokeredCredentialSource.id
-                      }}
-                    >
-                      {{brokeredCredentialSource.displayName}}
-                    </LinkTo>
-                  {{else}}
-                    <LinkTo
-                      @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library'
-                      @models={{array
-                        brokeredCredentialSource.credential_store_id
-                        brokeredCredentialSource.id
-                      }}
-                    >
-                      {{brokeredCredentialSource.displayName}}
-                    </LinkTo>
-                  {{/if}}
-                {{/if}}
-
-                <p>{{brokeredCredentialSource.description}}</p>
-              </row.headerCell>
-              <row.cell>
-                <CredSourceTypeBadge @model={{brokeredCredentialSource}} />
-              </row.cell>
-              <row.cell>
-                <Copyable
-                  @text={{brokeredCredentialSource.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{brokeredCredentialSource.id}}</code>
-                </Copyable>
-              </row.cell>
-              <row.cell>
-                {{#if (can 'removeCredentialSources target' @model)}}
-                  <Rose::Dropdown
-                    @icon='flight-icons/svg/more-horizontal-16'
-                    @iconOnly={{true}}
-                    @showCaret={{false}}
-                    @dropdownRight={{true}}
-                    @text={{t 'actions.manage'}}
-                    as |dropdown|
+      <Hds::Table
+        @model={{@model.brokeredCredentialSources}}
+        @columns={{array
+          (hash label=(t 'form.name.label'))
+          (hash label=(t 'form.type.label'))
+          (hash label=(t 'form.id.label'))
+          (hash label=(t 'titles.actions'))
+        }}
+        @valign='middle'
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              {{#if (cannot 'read credential' B.data)}}
+                {{B.data.displayName}}
+              {{else}}
+                {{#if B.data.isStatic}}
+                  <LinkTo
+                    @route='scopes.scope.credential-stores.credential-store.credentials.credential'
+                    @models={{array B.data.credential_store_id B.data.id}}
                   >
-                    <dropdown.button
-                      @style='danger'
-                      {{on
-                        'click'
-                        (route-action
-                          'removeBrokeredCredentialSource'
-                          @model
-                          brokeredCredentialSource
-                        )
-                      }}
-                    >
-                      {{t 'actions.remove'}}
-                    </dropdown.button>
-                  </Rose::Dropdown>
+                    {{B.data.displayName}}
+                  </LinkTo>
+                {{else}}
+                  <LinkTo
+                    @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library'
+                    @models={{array B.data.credential_store_id B.data.id}}
+                  >
+                    {{B.data.displayName}}
+                  </LinkTo>
                 {{/if}}
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
+              {{/if}}
+
+              <p>{{B.data.description}}</p>
+            </B.Td>
+            <B.Td>
+              <CredSourceTypeBadge @model={{B.data}} />
+            </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.Td>
+              {{#if (can 'removeCredentialSources target' @model)}}
+                <Hds::Dropdown as |dd|>
+                  <dd.ToggleIcon
+                    @icon='more-horizontal'
+                    @text={{t 'actions.manage'}}
+                    @hasChevron={{false}}
+                  />
+                  <dd.Interactive
+                    @color='critical'
+                    @text={{t 'actions.remove'}}
+                    {{on
+                      'click'
+                      (route-action
+                        'removeBrokeredCredentialSource' @model B.data
+                      )
+                    }}
+                  />
+                </Hds::Dropdown>
+              {{/if}}
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
 
     {{else}}
 

ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js

@@ -131,7 +131,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
   test('can navigate to a vault type credential library', async function (assert) {
     assert.expect(1);
     await visit(urls.brokeredCredentialSources);
-    await click('main tbody .rose-table-header-cell:nth-child(1) a');
+    await click('main tbody tr .hds-table__td:nth-child(1) a');
     await a11yAudit();
     assert.strictEqual(currentURL(), urls.credentialLibrary);
   });
@@ -142,7 +142,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
       brokeredCredentialSourceIds: [...randomlySelectedCredentials],
     });
     await visit(urls.brokeredCredentialSources);
-    await click('main tbody .rose-table-header-cell:nth-child(1) a');
+    await click('main tbody tr .hds-table__td:nth-child(1) a');
     await a11yAudit();
     assert.strictEqual(currentURL(), urls.credential);
   });
@@ -155,9 +155,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     });
     await visit(urls.brokeredCredentialSources);
     assert.false(featuresService.isEnabled('json-credentials'));
-    assert
-      .dom('.rose-table-row:nth-child(3)')
-      .includesText(jsonCredential.name);
+    assert.dom('.hds-table__tr:nth-child(3)').includesText(jsonCredential.name);
     assert.dom(`[href="${urls.jsonCredential}"]`).doesNotExist();
   });
 
@@ -328,7 +326,8 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     const availableCredentialsCount = getCredentialCount();
     await visit(urls.brokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, credentialLibraryCount);
-    await click('tbody tr .rose-dropdown-button-danger');
+    await click('.hds-dropdown-toggle-icon');
+    await click('tbody tr .hds-dropdown-list-item button');
     assert.strictEqual(findAll('tbody tr').length, credentialLibraryCount - 1);
     await visit(urls.addBrokeredCredentialSources);
     assert.strictEqual(
@@ -346,7 +345,8 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     const availableCredentialsCount = getCredentialLibraryCount();
     await visit(urls.brokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, credentialCount);
-    await click('tbody tr .rose-dropdown-button-danger');
+    await click('.hds-dropdown-toggle-icon');
+    await click('tbody tr .hds-dropdown-list-item button');
     assert.strictEqual(findAll('tbody tr').length, credentialCount - 1);
     await visit(urls.addBrokeredCredentialSources);
     assert.strictEqual(
@@ -362,7 +362,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
         (item) => item !== 'remove-credential-sources'
       );
     await visit(urls.brokeredCredentialSources);
-    assert.dom('tbody tr .rose-dropdown-button-danger').doesNotExist();
+    assert.dom('tbody tr .hds-dropdown-list-item button').doesNotExist();
   });
 
   test('removing a target credential library which errors displays error messages', async function (assert) {
@@ -385,7 +385,8 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     const count = getCredentialLibraryCount();
     await visit(urls.brokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, count);
-    await click('tbody tr .rose-dropdown-button-danger');
+    await click('.hds-dropdown-toggle-icon');
+    await click('tbody tr .hds-dropdown-list-item button');
     assert.dom('[role="alert"]').isVisible();
   });
 
@@ -409,7 +410,8 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     const count = getCredentialCount();
     await visit(urls.brokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, count);
-    await click('tbody tr .rose-dropdown-button-danger');
+    await click('.hds-dropdown-toggle-icon');
+    await click('tbody tr .hds-dropdown-list-item button');
     assert.dom('[role="alert"]').isVisible();
   });
 });