From 3d60d047e3e4bed3f36ef595a43fe03b52a00426 Mon Sep 17 00:00:00 2001
From: Wadi <58947248+CaptFalc@users.noreply.github.com>
Date: Mon, 26 Aug 2024 11:48:36 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Manage=20dropdown=20?=
 =?UTF-8?q?HDS=20refactoring=20for=20managed-groups=20(#2455)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Manage dropdown HDS refactoring for managed-groups

Updated the manage dropdown to reflect HDS design

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

* refactor: 💡 Changed up naming convention for Manage dropdown

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

---------

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>
---
 .../managed-group/actions/index.hbs           | 19 ++++++----------
 .../acceptance/managed-groups/delete-test.js  | 22 ++++++++++++-------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/actions/index.hbs b/ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/actions/index.hbs
index 63cd3834d..ce1240c41 100644
--- a/ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/actions/index.hbs
+++ b/ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/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-managed-group-dropdown as |dd|>
+    <dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
+    <dd.Interactive
+      @text={{t 'resources.managed-group.actions.delete'}}
+      @color='critical'
       {{on 'click' (fn @delete @model)}}
-    >
-      {{t 'resources.managed-group.actions.delete'}}
-    </dropdown.button>
-  </Rose::Dropdown>
+    />
+  </Hds::Dropdown>
 {{/if}}
\ No newline at end of file
diff --git a/ui/admin/tests/acceptance/managed-groups/delete-test.js b/ui/admin/tests/acceptance/managed-groups/delete-test.js
index 49b499041..9d5f42bd0 100644
--- a/ui/admin/tests/acceptance/managed-groups/delete-test.js
+++ b/ui/admin/tests/acceptance/managed-groups/delete-test.js
@@ -21,8 +21,10 @@ module('Acceptance | managed-groups | delete', function (hooks) {
 
   let getManagedGroupCount;
 
-  const DELETE_DROPDOWN_SELECTOR =
-    '.rose-layout-page-actions .rose-dropdown-button-danger';
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-managed-group-dropdown] div:first-child button';
+  const DELETE_ACTION_SELECTOR =
+    '[data-test-managed-group-dropdown] ul li button';
   const ERROR_MSG_SELECTOR = '.rose-notification-body';
 
   const instances = {
@@ -89,7 +91,8 @@ module('Acceptance | managed-groups | delete', function (hooks) {
     await visit(urls.managedGroups);
 
     await click(`[href="${urls.managedGroup}"]`);
-    await click(DELETE_DROPDOWN_SELECTOR);
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
 
     assert.strictEqual(getManagedGroupCount(), managedGroupsCount - 1);
     assert.strictEqual(currentURL(), urls.managedGroups);
@@ -100,7 +103,8 @@ module('Acceptance | managed-groups | delete', function (hooks) {
     await visit(urls.ldapManagedGroups);
 
     await click(`[href="${urls.ldapManagedGroup}"]`);
-    await click(DELETE_DROPDOWN_SELECTOR);
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
 
     assert.strictEqual(getManagedGroupCount(), managedGroupsCount - 1);
     assert.strictEqual(currentURL(), urls.ldapManagedGroups);
@@ -115,7 +119,7 @@ module('Acceptance | managed-groups | delete', function (hooks) {
 
     await click(`[href="${urls.managedGroup}"]`);
 
-    assert.dom(DELETE_DROPDOWN_SELECTOR).doesNotExist();
+    assert.dom(MANAGE_DROPDOWN_SELECTOR).doesNotExist();
   });
 
   test('User cannot delete a ldap managed-group without proper authorization', async function (assert) {
@@ -127,7 +131,7 @@ module('Acceptance | managed-groups | delete', function (hooks) {
 
     await click(`[href="${urls.ldapManagedGroup}"]`);
 
-    assert.dom(DELETE_DROPDOWN_SELECTOR).doesNotExist();
+    assert.dom(MANAGE_DROPDOWN_SELECTOR).doesNotExist();
   });
 
   test('Errors are displayed when delete on managed group fails', async function (assert) {
@@ -145,7 +149,8 @@ module('Acceptance | managed-groups | delete', function (hooks) {
     await visit(urls.managedGroups);
 
     await click(`[href="${urls.managedGroup}"]`);
-    await click(DELETE_DROPDOWN_SELECTOR);
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     await a11yAudit();
 
     assert.dom(ERROR_MSG_SELECTOR).hasText('Oops.');
@@ -167,7 +172,8 @@ module('Acceptance | managed-groups | delete', function (hooks) {
     await visit(urls.ldapManagedGroups);
 
     await click(`[href="${urls.ldapManagedGroup}"]`);
-    await click(DELETE_DROPDOWN_SELECTOR);
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     await a11yAudit();
 
     assert.dom(ERROR_MSG_SELECTOR).hasText('Oops.');