From e5a026ed3403aa19d1b66b0bfc182ee559881ec6 Mon Sep 17 00:00:00 2001
From: NatashaKab <133793701+NatashaKab@users.noreply.github.com>
Date: Fri, 28 Jul 2023 15:27:56 -0400
Subject: [PATCH] Icu 10367 use hds table in target host sources (#1806)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Use HDS tables in user accounts

* refactor: 💡 Use HDS tables in target host sources
---
 .../scope/targets/target/host-sources.hbs     | 121 +++++++++---------
 .../acceptance/targets/host-sources-test.js   |   9 +-
 2 files changed, 63 insertions(+), 67 deletions(-)

diff --git a/ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs b/ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs
index bf5d91104..73bd69289 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs
@@ -26,72 +26,65 @@
   <page.body>
     {{#if @model.hostSets}}
 
-      <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.hostSets as |hostSet|}}
-            <body.row as |row|>
-              <row.headerCell>
-                {{#if (can 'read host-set' hostSet.model)}}
-                  <LinkTo
-                    @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set'
-                    @models={{array
-                      hostSet.model.host_catalog_id
-                      hostSet.model.id
-                    }}
-                  >
-                    {{hostSet.model.displayName}}
-                  </LinkTo>
-                {{else}}
-                  {{hostSet.model.displayName}}
-                {{/if}}
-                <p>{{hostSet.model.description}}</p>
-              </row.headerCell>
-              <row.cell>
-                <HostCatalogTypeBadge @model={{hostSet.model}} />
-              </row.cell>
-              <row.cell>
-                <Copyable
-                  @text={{hostSet.model.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
+      <Hds::Table
+        @model={{@model.hostSets}}
+        @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 (can 'read host-set' B.data.model)}}
+                <LinkTo
+                  @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set'
+                  @models={{array B.data.model.host_catalog_id B.data.model.id}}
                 >
-                  <code>{{hostSet.model.id}}</code>
-                </Copyable>
-              </row.cell>
-              <row.cell>
-                {{#if (can 'removeHostSources target' @model)}}
-                  <Rose::Dropdown
-                    @icon='flight-icons/svg/more-horizontal-16'
-                    @iconOnly={{true}}
-                    @showCaret={{false}}
-                    @dropdownRight={{true}}
+                  {{B.data.model.displayName}}
+                </LinkTo>
+              {{else}}
+                {{B.data.model.displayName}}
+              {{/if}}
+              <p>{{B.data.model.description}}</p>
+            </B.Td>
+            <B.Td>
+              <HostCatalogTypeBadge @model={{B.data.model}} />
+            </B.Td>
+            <B.Td>
+              <Copyable
+                @text={{B.data.model.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <code>{{B.data.model.id}}</code>
+              </Copyable>
+            </B.Td>
+            <B.Td>
+              {{#if (can 'removeHostSources target' @model)}}
+                <Hds::Dropdown as |dd|>
+                  <dd.ToggleIcon
+                    @icon='more-horizontal'
                     @text={{t 'actions.manage'}}
-                    as |dropdown|
-                  >
-                    <dropdown.button
-                      @style='danger'
-                      {{on
-                        'click'
-                        (route-action 'removeHostSource' @model hostSet.model)
-                      }}
-                    >
-                      {{t 'actions.remove'}}
-                    </dropdown.button>
-                  </Rose::Dropdown>
-                {{/if}}
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
+                    @hasChevron={{false}}
+                  />
+                  <dd.Interactive
+                    @color='critical'
+                    @text={{t 'actions.remove'}}
+                    {{on
+                      'click'
+                      (route-action 'removeHostSource' @model B.data.model)
+                    }}
+                  />
+                </Hds::Dropdown>
+              {{/if}}
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
 
     {{else}}
 
diff --git a/ui/admin/tests/acceptance/targets/host-sources-test.js b/ui/admin/tests/acceptance/targets/host-sources-test.js
index c3c58c33b..cdf6213c0 100644
--- a/ui/admin/tests/acceptance/targets/host-sources-test.js
+++ b/ui/admin/tests/acceptance/targets/host-sources-test.js
@@ -128,7 +128,8 @@ module('Acceptance | targets | host-sources', function (hooks) {
     await visit(urls.target);
 
     await click(`[href="${urls.targetHostSources}"]`);
-    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(getTargetHostSetCount(), targetHostSetCount - 1);
     assert.dom('tbody tr').exists({ count: targetHostSetCount - 1 });
@@ -165,7 +166,8 @@ module('Acceptance | targets | host-sources', function (hooks) {
     await visit(urls.target);
 
     await click(`[href="${urls.targetHostSources}"]`);
-    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('tbody tr').exists({ count: targetHostSetCount });
     assert.dom('[role="alert"] div').hasText('The request was invalid.');
@@ -217,7 +219,8 @@ module('Acceptance | targets | host-sources', function (hooks) {
     assert.dom('tbody tr').exists({ count: targetHostSetCount });
 
     // first, remove a target host set (otherwise none would be available to add)
-    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('tbody tr').exists({ count: targetHostSetCount - 1 });
 
     await click('.rose-layout-page-actions a');