From 89cfb14d6e194659c1640aaaa45bc831ad363453 Mon Sep 17 00:00:00 2001
From: Wadi <58947248+CaptFalc@users.noreply.github.com>
Date: Mon, 5 Aug 2024 12:53:55 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Updated=20Manage=20D?=
 =?UTF-8?q?ropdown=20for=20hosts=20form=20(#2423)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Updated Manage Dropdown for hosts form

Continuing refactoring upgrades for HDS managed dropdowns

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

* refactor: 💡 Removed disabled attribute from dropdown

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-14602
---
 .../host-catalog/hosts/host/actions/index.hbs | 19 +++++++------------
 .../host-catalogs/hosts/delete-test.js        | 16 ++++++++++++----
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/ui/admin/app/components/host-catalogs/host-catalog/hosts/host/actions/index.hbs b/ui/admin/app/components/host-catalogs/host-catalog/hosts/host/actions/index.hbs
index eb797acbf..631a7f321 100644
--- a/ui/admin/app/components/host-catalogs/host-catalog/hosts/host/actions/index.hbs
+++ b/ui/admin/app/components/host-catalogs/host-catalog/hosts/host/actions/index.hbs
@@ -4,17 +4,12 @@
 }}
 
 {{#if (can 'delete model' @model)}}
-  <Rose::Dropdown
-    @text={{t 'actions.manage'}}
-    @dropdownRight={{true}}
-    as |dropdown|
-  >
-    <dropdown.button
-      @style='danger'
-      @disabled={{@model.canSave}}
+  <Hds::Dropdown data-test-manage-hosts-dropdown as |dd|>
+    <dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
+    <dd.Interactive
+      @text={{t 'resources.host.actions.delete'}}
+      @color='critical'
       {{on 'click' (fn @delete @model)}}
-    >
-      {{t 'resources.host.actions.delete'}}
-    </dropdown.button>
-  </Rose::Dropdown>
+    />
+  </Hds::Dropdown>
 {{/if}}
\ No newline at end of file
diff --git a/ui/admin/tests/acceptance/host-catalogs/hosts/delete-test.js b/ui/admin/tests/acceptance/host-catalogs/hosts/delete-test.js
index 2f2fea565..891cf0fc2 100644
--- a/ui/admin/tests/acceptance/host-catalogs/hosts/delete-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/hosts/delete-test.js
@@ -22,6 +22,10 @@ module('Acceptance | host-catalogs | hosts | delete', function (hooks) {
   setupMirage(hooks);
 
   let getHostCount;
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-hosts-dropdown] div:first-child button';
+  const DELETE_ACTION_SELECTOR =
+    '[data-test-manage-hosts-dropdown] ul li button';
 
   const instances = {
     scopes: {
@@ -80,7 +84,8 @@ module('Acceptance | host-catalogs | hosts | delete', function (hooks) {
   test('can delete host', async function (assert) {
     const count = getHostCount();
     await visit(urls.host);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getHostCount(), count - 1);
   });
 
@@ -99,7 +104,8 @@ module('Acceptance | host-catalogs | hosts | delete', function (hooks) {
     confirmService.confirm = sinon.fake.returns(resolve());
     const count = getHostCount();
     await visit(urls.host);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getHostCount(), count - 1);
     assert.ok(confirmService.confirm.calledOnce);
   });
@@ -110,7 +116,8 @@ module('Acceptance | host-catalogs | hosts | delete', function (hooks) {
     confirmService.confirm = sinon.fake.returns(reject());
     const count = getHostCount();
     await visit(urls.host);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getHostCount(), count);
     assert.ok(confirmService.confirm.calledOnce);
   });
@@ -128,7 +135,8 @@ module('Acceptance | host-catalogs | hosts | delete', function (hooks) {
       );
     });
     await visit(urls.host);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.');
   });
 });