refactor: 💡 Updated Manage Dropdown to HDS in Targets Menu (#2418)

* refactor: 💡 Updated Manage Dropdown to HDS in Targets Menu

Updated the manage dropdown present in the targets scope to reflect HDS
design

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

* refactor: 💡 Updated to reflect changes

Added changes to reflect variable design

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

* refactor: 💡 Removed @deleted attribute

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

ui/admin/app/components/targets/target/actions/index.hbs

@@ -2,44 +2,39 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 }}
+<Hds::Dropdown data-test-manage-targets-dropdown as |dd|>
+  <dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
 
-<Rose::Dropdown
-  @text={{t 'actions.manage'}}
-  @dropdownRight={{true}}
-  as |dropdown|
->
   {{#if (can 'addHostSources target' @model)}}
-    <dropdown.link @route='scopes.scope.targets.target.add-host-sources'>
-      {{t 'resources.target.actions.add-host-sources'}}
-    </dropdown.link>
+    <dd.Interactive
+      @route='scopes.scope.targets.target.add-host-sources'
+      @text={{t 'resources.target.actions.add-host-sources'}}
+    />
   {{/if}}
   {{#if (can 'addBrokeredCredentialSources target' @model)}}
-    <dropdown.link
+    <dd.Interactive
       @route='scopes.scope.targets.target.add-brokered-credential-sources'
+      @text={{t 'resources.target.actions.add-brokered-credential-sources'}}
       data-test-add-brokered-cred-sources-action
-    >
-      {{t 'resources.target.actions.add-brokered-credential-sources'}}
-    </dropdown.link>
+    />
   {{/if}}
-
   {{#if (can 'addInjectedApplicationCredentialSources target' @model)}}
-    <dropdown.link
+    <dd.Interactive
       @route='scopes.scope.targets.target.add-injected-application-credential-sources'
-      data-test-add-injected-cred-sources-action
-    >
-      {{t
+      @text={{t
         'resources.target.actions.add-injected-application-credential-sources'
       }}
-    </dropdown.link>
+      data-test-add-injected-cred-sources-action
+    />
   {{/if}}
+
   {{#if (can 'delete model' @model)}}
-    <dropdown.separator />
-    <dropdown.button
-      @style='danger'
-      @disabled={{@model.canSave}}
+    <dd.Separator />
+    <dd.Interactive
+      @text={{t 'resources.target.actions.delete'}}
+      @color='critical'
       {{on 'click' (fn @delete @model)}}
-    >
-      {{t 'resources.target.actions.delete'}}
-    </dropdown.button>
+    />
   {{/if}}
-</Rose::Dropdown>
+
+</Hds::Dropdown>

ui/admin/tests/acceptance/targets/delete-test.js

@@ -22,6 +22,10 @@ module('Acceptance | targets | delete', function (hooks) {
   setupIndexedDb(hooks);
 
   let getTargetCount;
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-targets-dropdown] div:first-child button';
+  const DELETE_ACTION_SELECTOR =
+    '[data-test-manage-targets-dropdown] ul li button';
 
   const instances = {
     scopes: {
@@ -69,8 +73,8 @@ module('Acceptance | targets | delete', function (hooks) {
     await visit(urls.targets);
 
     await click(`[href="${urls.target}"]`);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
-
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getTargetCount(), targetCount - 1);
   });
 
@@ -81,7 +85,8 @@ module('Acceptance | targets | delete', function (hooks) {
     await visit(urls.targets);
 
     await click(`[href="${urls.target}"]`);
-    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.');
@@ -96,7 +101,8 @@ module('Acceptance | targets | delete', function (hooks) {
     await visit(urls.targets);
 
     await click(`[href="${urls.target}"]`);
-    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(getTargetCount(), targetCount);
@@ -130,7 +136,8 @@ module('Acceptance | targets | delete', function (hooks) {
     });
 
     await click(`[href="${urls.target}"]`);
-    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/targets/host-sources-test.js

@@ -21,6 +21,9 @@ module('Acceptance | targets | host-sources', function (hooks) {
   setupMirage(hooks);
 
   let getTargetHostSetCount;
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-targets-dropdown] div:first-child button';
+  const ADD_HOSTSOURCE_SELECTOR = '[data-test-manage-targets-dropdown] ul li a';
 
   const instances = {
     scopes: {
@@ -171,10 +174,10 @@ module('Acceptance | targets | host-sources', function (hooks) {
     instances.target.update({ hostSetIds: [] });
     await visit(urls.target);
     const targetHostSetCount = getTargetHostSetCount();
-
     await click(`[href="${urls.targetHostSources}"]`);
     assert.dom('tbody tr').exists({ count: 0 });
-    await click('.rose-layout-page-actions a');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(ADD_HOSTSOURCE_SELECTOR);
     assert.strictEqual(currentURL(), urls.targetAddHostSources);
 
     // Click three times to select, unselect, then reselect (for coverage)
@@ -196,10 +199,8 @@ module('Acceptance | targets | host-sources', function (hooks) {
     await visit(urls.target);
 
     await click(`[href="${urls.targetHostSources}"]`);
-
-    assert
-      .dom('.rose-layout-page-actions a')
-      .doesNotIncludeText('Add Host Sources');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    assert.dom(ADD_HOSTSOURCE_SELECTOR).doesNotIncludeText('Add Host Sources');
   });
 
   test('select and cancel host sets to add', async function (assert) {
@@ -214,7 +215,8 @@ module('Acceptance | targets | host-sources', function (hooks) {
     await click('tbody tr .hds-dropdown-list-item button');
     assert.dom('tbody tr').exists({ count: targetHostSetCount - 1 });
 
-    await click('.rose-layout-page-actions a');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(ADD_HOSTSOURCE_SELECTOR);
     assert.strictEqual(currentURL(), urls.targetAddHostSources);
     await click('tbody label');
     await click('form [type="button"]');
@@ -241,7 +243,8 @@ module('Acceptance | targets | host-sources', function (hooks) {
     instances.target.update({ hostSetIds: [] });
     const targetHostSetCount = getTargetHostSetCount();
 
-    await click(`[href="${urls.targetAddHostSources}"]`);
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(ADD_HOSTSOURCE_SELECTOR);
     assert.strictEqual(targetHostSetCount, 0);
     await click('tbody label');
     await click('form [type="submit"]');
@@ -268,7 +271,8 @@ module('Acceptance | targets | host-sources', function (hooks) {
     const targetUrl = `${urls.targets}/${target.id}`;
     await visit(targetUrl);
     await click(`[href="${targetUrl}/host-sources"]`);
-    await click('.rose-layout-page-actions a', 'Click add host set');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(ADD_HOSTSOURCE_SELECTOR);
 
     await click('tbody label');
     await click('form [type="submit"]');
@@ -303,7 +307,8 @@ module('Acceptance | targets | host-sources', function (hooks) {
     const targetUrl = `${urls.targets}/${target.id}`;
     await visit(targetUrl);
     await click(`[href="${targetUrl}/host-sources"]`);
-    await click('.rose-layout-page-actions a', 'Click add host set');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(ADD_HOSTSOURCE_SELECTOR);
 
     await click('tbody label');
     await click('form [type="submit"]');