refactor: 💡 Update manage dropdown for host-catalogs (#2456)

* refactor: 💡 Update manage dropdown for host-catalogs

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

* refactor: 💡 Refactored tests

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

* refactor: 💡 Refactored test

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

---------

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>

ui/admin/app/components/host-catalogs/host-catalog/actions/index.hbs

@@ -3,35 +3,28 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Rose::Dropdown
-  @text={{t 'actions.manage'}}
-  @dropdownRight={{true}}
-  as |dropdown|
->
+<Hds::Dropdown data-test-manage-host-catalogs-dropdown as |dd|>
+  <dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
   {{#if (can 'create model' @model collection='hosts')}}
-    <dropdown.link
+    <dd.Interactive
       @route='scopes.scope.host-catalogs.host-catalog.hosts.new'
       @model={{@model}}
-    >
-      {{t 'resources.host.actions.create'}}
-    </dropdown.link>
+      @text={{t 'resources.host.actions.create'}}
+    />
   {{/if}}
   {{#if (can 'create model' @model collection='host-sets')}}
-    <dropdown.link
+    <dd.Interactive
       @route='scopes.scope.host-catalogs.host-catalog.host-sets.new'
       @model={{@model}}
-    >
-      {{t 'resources.host-set.actions.create'}}
-    </dropdown.link>
+      @text={{t 'resources.host-set.actions.create'}}
+    />
   {{/if}}
   {{#if (can 'delete model' @model)}}
-    <dropdown.separator />
-    <dropdown.button
-      @style='danger'
-      @disabled={{@model.canSave}}
+    <dd.Separator />
+    <dd.Interactive
+      @text={{t 'resources.host-catalog.actions.delete'}}
+      @color='critical'
       {{on 'click' (fn @delete @model)}}
-    >
-      {{t 'resources.host-catalog.actions.delete'}}
-    </dropdown.button>
+    />
   {{/if}}
-</Rose::Dropdown>
+</Hds::Dropdown>

ui/admin/tests/acceptance/host-catalogs/delete-test.js

@@ -22,6 +22,10 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
   setupIndexedDb(hooks);
 
   let getHostCatalogCount;
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-host-catalogs-dropdown] div:first-child button';
+  const DELETE_ACTION_SELECTOR =
+    '[data-test-manage-host-catalogs-dropdown] ul li button';
 
   const instances = {
     scopes: {
@@ -70,7 +74,8 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
 
     await visit(urls.hostCatalogs);
     await click(`[href="${urls.hostCatalog}"]`);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
 
     assert.strictEqual(getHostCatalogCount(), hostCatalogCount - 1);
   });
@@ -83,10 +88,9 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
       );
 
     await click(`[href="${urls.hostCatalog}"]`);
+    await click(MANAGE_DROPDOWN_SELECTOR);
 
-    assert
-      .dom('.rose-layout-page-actions .rose-dropdown-button-danger')
-      .doesNotExist();
+    assert.dom(DELETE_ACTION_SELECTOR).doesNotExist();
   });
 
   test('can accept delete host catalog via dialog', async function (assert) {
@@ -96,7 +100,8 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
     await visit(urls.hostCatalogs);
 
     await click(`[href="${urls.hostCatalog}"]`);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     await click('.rose-dialog .rose-button-primary');
 
     assert.dom('.rose-notification-body').hasText('Deleted successfully.');
@@ -111,7 +116,8 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
     await visit(urls.hostCatalogs);
 
     await click(`[href="${urls.hostCatalog}"]`);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     await click('.rose-dialog .rose-button-secondary');
 
     assert.strictEqual(getHostCatalogCount(), hostCatalogCount);
@@ -133,7 +139,8 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
     });
 
     await click(`[href="${urls.hostCatalog}"]`);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
 
     assert.dom('.rose-notification-body').hasText('Oops.');
   });

ui/admin/tests/acceptance/host-catalogs/host-sets/list-test.js

@@ -18,6 +18,9 @@ module('Acceptance | host-catalogs | host sets | list', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-host-catalogs-dropdown] div:first-child button';
+
   const instances = {
     scopes: {
       global: null,
@@ -94,7 +97,9 @@ module('Acceptance | host-catalogs | host sets | list', function (hooks) {
       'create',
     ];
     await visit(urls.hostCatalog);
+
     assert.ok(find(`[href="${urls.hostSets}"]`));
-    assert.ok(find(`.rose-layout-page-actions [href="${urls.newHostSet}"]`));
+
+    assert.dom(MANAGE_DROPDOWN_SELECTOR).exists();
   });
 });

ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js

@@ -20,6 +20,8 @@ module('Acceptance | host-catalogs | hosts | create', function (hooks) {
   setupMirage(hooks);
 
   let getHostCount;
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-host-catalogs-dropdown] div:first-child button';
 
   const instances = {
     scopes: {
@@ -101,7 +103,7 @@ module('Acceptance | host-catalogs | hosts | create', function (hooks) {
         'create',
       ),
     );
-    assert.ok(find(`[href="${urls.newHost}"]`));
+    assert.dom(MANAGE_DROPDOWN_SELECTOR).exists();
   });
 
   test('Users cannot navigate to new host route without proper authorization', async function (assert) {

ui/admin/tests/acceptance/host-catalogs/hosts/list-test.js

@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, find } from '@ember/test-helpers';
+import { visit, find, click } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import {
@@ -18,6 +18,11 @@ module('Acceptance | host-catalogs | hosts | list', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-host-catalogs-dropdown] div:first-child button';
+  const NEW_HOST_SELECTOR =
+    '[data-test-manage-host-catalogs-dropdown] div ul li a';
+
   const instances = {
     scopes: {
       global: null,
@@ -76,6 +81,7 @@ module('Acceptance | host-catalogs | hosts | list', function (hooks) {
         'list',
       ),
     );
+    assert.dom(MANAGE_DROPDOWN_SELECTOR);
     assert.ok(find(`[href="${urls.hosts}"]`));
   });
 
@@ -94,6 +100,7 @@ module('Acceptance | host-catalogs | hosts | list', function (hooks) {
     instances.hostCatalog.authorized_collection_actions.hosts = ['create'];
     await visit(urls.hostCatalog);
     assert.ok(find(`[href="${urls.hosts}"]`));
-    assert.ok(find(`.rose-layout-page-actions [href="${urls.newHost}"]`));
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    assert.dom(NEW_HOST_SELECTOR).hasAttribute('href', urls.newHost);
   });
 });