From 21ec3b30ad748422cfad8e7d7c5f224c8d4476dc Mon Sep 17 00:00:00 2001
From: Wadi <58947248+CaptFalc@users.noreply.github.com>
Date: Fri, 26 Jul 2024 17:19:50 -0400
Subject: [PATCH] refactor: Update Manage Dropdown in Groups Form (#2415)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../components/groups/group/actions/index.hbs | 27 +++++++++----------
 .../tests/acceptance/groups/delete-test.js    |  9 +++++--
 .../tests/acceptance/groups/members-test.js   | 11 +++++---
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/ui/admin/app/components/groups/group/actions/index.hbs b/ui/admin/app/components/groups/group/actions/index.hbs
index ac9352b2a..9c81696ff 100644
--- a/ui/admin/app/components/groups/group/actions/index.hbs
+++ b/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>
\ No newline at end of file
+</Hds::Dropdown>
\ No newline at end of file
diff --git a/ui/admin/tests/acceptance/groups/delete-test.js b/ui/admin/tests/acceptance/groups/delete-test.js
index 3a2e6a9e4..680e0d8da 100644
--- a/ui/admin/tests/acceptance/groups/delete-test.js
+++ b/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.',
diff --git a/ui/admin/tests/acceptance/groups/members-test.js b/ui/admin/tests/acceptance/groups/members-test.js
index 9442fbd5b..b987b28b9 100644
--- a/ui/admin/tests/acceptance/groups/members-test.js
+++ b/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"]');