refactor: Update Manage Dropdown in Groups Form (#2415)

* Updated the Manage Dropdown button to reflect HDS Design

* refactor: HDS Upgrade for Manage Dropdown inside of groups

* refactor: 💡 Lint fixes

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

ui/admin/app/components/groups/group/actions/index.hbs

@@ -3,24 +3,21 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Rose::Dropdown
-  @text={{t 'actions.manage'}}
-  @dropdownRight={{true}}
-  as |dropdown|
->
+<Hds::Dropdown data-test-manage-group-dropdown as |dd|>
+  <dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
   {{#if (can 'addMembers group' @model)}}
-    <dropdown.link @route='scopes.scope.groups.group.add-members'>
-      {{t 'resources.group.actions.add-members'}}
-    </dropdown.link>
+    <dd.Interactive
+      @route='scopes.scope.groups.group.add-members'
+      @text={{t 'resources.group.actions.add-members'}}
+    />
   {{/if}}
   {{#if (can 'delete model' @model)}}
-    <dropdown.separator />
-    <dropdown.button
-      @style='danger'
+    <dd.Separator />
+    <dd.Interactive
+      @color='critical'
       @disabled={{@model.canSave}}
+      @text={{t 'resources.group.actions.delete'}}
       {{on 'click' @delete}}
-    >
-      {{t 'resources.group.actions.delete'}}
-    </dropdown.button>
+    />
   {{/if}}
-</Rose::Dropdown>
+</Hds::Dropdown>

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

@@ -19,6 +19,9 @@ module('Acceptance | groups | delete', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  const MANAGE_DROPDOWN_SELECTOR = "[data-test-manage-group-dropdown] div:first-child button"
+  const DELETE_ACTION_SELECTOR = "[data-test-manage-group-dropdown] ul li button"
+
   const instances = {
     scopes: {
       global: null,
@@ -51,7 +54,8 @@ module('Acceptance | groups | delete', function (hooks) {
   test('can delete a group', async function (assert) {
     const groupsCount = this.server.db.groups.length;
     await visit(urls.group);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(this.server.db.groups.length, groupsCount - 1);
   });
 
@@ -77,7 +81,8 @@ module('Acceptance | groups | delete', function (hooks) {
       );
     });
     await visit(urls.group);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(
       find('.rose-notification-body').textContent.trim(),
       'Oops.',

ui/admin/tests/acceptance/groups/members-test.js

@@ -37,6 +37,8 @@ module('Acceptance | groups | members', function (hooks) {
     addMembers: null,
   };
   let membersCount;
+  const MANAGE_DROPDOWN_SELECTOR = "[data-test-manage-group-dropdown] div:first-child button"
+  const ADD_MEMBERS_ACTION_SELECTOR = "[data-test-manage-group-dropdown] ul li a"
 
   hooks.beforeEach(function () {
     authenticateSession({});
@@ -111,7 +113,8 @@ module('Acceptance | groups | members', function (hooks) {
 
   test('can navigate to add members with proper authorization', async function (assert) {
     await visit(urls.group);
-    assert.ok(find(`[href="${urls.addMembers}"]`));
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    assert.dom(ADD_MEMBERS_ACTION_SELECTOR).isVisible()
   });
 
   test('cannot navigate to add members without proper authorization', async function (assert) {
@@ -127,7 +130,8 @@ module('Acceptance | groups | members', function (hooks) {
     instances.group.update({ memberIds: [] });
     await visit(urls.members);
     assert.strictEqual(findAll('tbody tr').length, 0);
-    await click('.rose-layout-page-actions a');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(ADD_MEMBERS_ACTION_SELECTOR);
     assert.strictEqual(currentURL(), urls.addMembers);
     // Click three times to select, unselect, then reselect (for coverage)
     await click('tbody label');
@@ -144,7 +148,8 @@ module('Acceptance | groups | members', function (hooks) {
     await click('.hds-dropdown-toggle-icon');
     await click('tbody tr .hds-dropdown-list-item button');
     assert.strictEqual(findAll('tbody tr').length, membersCount - 1);
-    await click('.rose-layout-page-actions a');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(ADD_MEMBERS_ACTION_SELECTOR);
     assert.strictEqual(currentURL(), urls.addMembers);
     await click('tbody label');
     await click('form [type="button"]');