From a9cfc4340480c9e71411e32b1d6efc9c2ad0b9af Mon Sep 17 00:00:00 2001
From: Wadi <58947248+CaptFalc@users.noreply.github.com>
Date: Mon, 26 Aug 2024 15:58:14 -0400
Subject: [PATCH] Icu 14663 update manage dropdown for credential stores form
 (#2454)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Update Manage dropdown in credential-store

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

* refactor: 💡 Adjusted tests

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

* refactor: 💡 Refactored tests and naming conventions

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

* refactor: 💡 Removed @model from delete

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

* test: 💍 add clicks to correct tests assertions

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

---------

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>
---
 .../credential-store/actions/index.hbs        | 39 +++++++-----------
 .../credential-store/credentials/list-test.js | 11 +++--
 .../credential-store/delete-test.js           | 40 ++++++++++++-------
 3 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/ui/admin/app/components/credential-stores/credential-store/actions/index.hbs b/ui/admin/app/components/credential-stores/credential-store/actions/index.hbs
index 1dc76467e..fe93c9560 100644
--- a/ui/admin/app/components/credential-stores/credential-store/actions/index.hbs
+++ b/ui/admin/app/components/credential-stores/credential-store/actions/index.hbs
@@ -2,37 +2,26 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 }}
-
-<Rose::Dropdown
-  @text={{t 'actions.manage'}}
-  @dropdownRight={{true}}
-  as |dropdown|
->
+<Hds::Dropdown data-test-manage-credential-stores-dropdown as |dd|>
+  <dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
   {{#if (can 'create model' @model collection='credential-libraries')}}
-
-    <dropdown.link
+    <dd.Interactive
       @route='scopes.scope.credential-stores.credential-store.credential-libraries.new'
-      @model={{@model}}
-    >
-      {{t 'resources.credential-library.actions.create'}}
-    </dropdown.link>
+      @text={{t 'resources.credential-library.actions.create'}}
+    />
   {{/if}}
   {{#if (can 'create model' @model collection='credentials')}}
-    <dropdown.link
+    <dd.Interactive
       @route='scopes.scope.credential-stores.credential-store.credentials.new'
-      @model={{@model}}
-    >
-      {{t 'resources.credential.actions.create'}}
-    </dropdown.link>
+      @text={{t 'resources.credential.actions.create'}}
+    />
   {{/if}}
   {{#if (can 'delete model' @model)}}
-    <dropdown.separator />
-    <dropdown.button
-      @style='danger'
-      @disabled={{@model.canSave}}
+    <dd.Separator />
+    <dd.Interactive
+      @text={{t 'resources.credential-store.actions.delete'}}
+      @color='critical'
       {{on 'click' @delete}}
-    >
-      {{t 'resources.credential-store.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/credential-store/credentials/list-test.js b/ui/admin/tests/acceptance/credential-store/credentials/list-test.js
index 28ac37d11..8e187bb0d 100644
--- a/ui/admin/tests/acceptance/credential-store/credentials/list-test.js
+++ b/ui/admin/tests/acceptance/credential-store/credentials/list-test.js
@@ -13,6 +13,12 @@ module('Acceptance | credential-stores | credentials | list', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-credential-stores-dropdown] div:first-child button';
+
+  const ADD_CREDENTIALS_SELECTOR =
+    '[data-test-manage-credential-stores-dropdown] div ul li a';
+
   const instances = {
     scopes: {
       org: null,
@@ -107,8 +113,7 @@ module('Acceptance | credential-stores | credentials | list', function (hooks) {
       ['create'];
     await visit(urls.staticCredentialStore);
     assert.dom(`[href="${urls.credentials}"]`).isVisible();
-    assert
-      .dom(`.rose-layout-page-actions [href="${urls.newCredential}"]`)
-      .isVisible();
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    assert.dom(ADD_CREDENTIALS_SELECTOR).isVisible();
   });
 });
diff --git a/ui/admin/tests/acceptance/credential-store/delete-test.js b/ui/admin/tests/acceptance/credential-store/delete-test.js
index 2a3343190..132dda39f 100644
--- a/ui/admin/tests/acceptance/credential-store/delete-test.js
+++ b/ui/admin/tests/acceptance/credential-store/delete-test.js
@@ -20,6 +20,10 @@ module('Acceptance | credential-stores | delete', function (hooks) {
 
   let getStaticCredentialStoresCount;
   let getVaultCredentialStoresCount;
+  const MANAGE_DROPDOWN_SELECTOR =
+    '[data-test-manage-credential-stores-dropdown] div:first-child button';
+  const DELETE_ACTION_SELECTOR =
+    '[data-test-manage-credential-stores-dropdown] ul li button';
 
   const instances = {
     scopes: {
@@ -79,14 +83,16 @@ module('Acceptance | credential-stores | delete', function (hooks) {
   test('can delete credential store of type vault', async function (assert) {
     const count = getVaultCredentialStoresCount();
     await visit(urls.vaultCredentialStore);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getVaultCredentialStoresCount(), count - 1);
   });
 
   test('can delete credential store of type static', async function (assert) {
     const count = getStaticCredentialStoresCount();
     await visit(urls.staticCredentialStore);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getStaticCredentialStoresCount(), count - 1);
   });
 
@@ -96,9 +102,9 @@ module('Acceptance | credential-stores | delete', function (hooks) {
         (item) => item !== 'delete',
       );
     await visit(urls.vaultCredentialStore);
-    assert.notOk(
-      find('.rose-layout-page-actions .rose-dropdown-button-danger'),
-    );
+    await click(MANAGE_DROPDOWN_SELECTOR);
+
+    assert.dom(DELETE_ACTION_SELECTOR).doesNotExist();
   });
 
   test('cannot delete a static credential store without proper authorization', async function (assert) {
@@ -107,9 +113,9 @@ module('Acceptance | credential-stores | delete', function (hooks) {
         (item) => item !== 'delete',
       );
     await visit(urls.staticCredentialStore);
-    assert.notOk(
-      find('.rose-layout-page-actions .rose-dropdown-button-danger'),
-    );
+    await click(MANAGE_DROPDOWN_SELECTOR);
+
+    assert.dom(DELETE_ACTION_SELECTOR).doesNotExist();
   });
 
   test('can accept delete static credential store via dialog', async function (assert) {
@@ -118,7 +124,8 @@ module('Acceptance | credential-stores | delete', function (hooks) {
     confirmService.confirm = sinon.fake.returns(resolve());
     const count = getStaticCredentialStoresCount();
     await visit(urls.staticCredentialStore);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getStaticCredentialStoresCount(), count - 1);
     assert.ok(confirmService.confirm.calledOnce);
   });
@@ -129,7 +136,8 @@ module('Acceptance | credential-stores | delete', function (hooks) {
     confirmService.confirm = sinon.fake.returns(resolve());
     const count = getVaultCredentialStoresCount();
     await visit(urls.vaultCredentialStore);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getVaultCredentialStoresCount(), count - 1);
     assert.ok(confirmService.confirm.calledOnce);
   });
@@ -140,7 +148,8 @@ module('Acceptance | credential-stores | delete', function (hooks) {
     confirmService.confirm = sinon.fake.returns(reject());
     const count = getStaticCredentialStoresCount();
     await visit(urls.staticCredentialStore);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getStaticCredentialStoresCount(), count);
     assert.ok(confirmService.confirm.calledOnce);
   });
@@ -151,7 +160,8 @@ module('Acceptance | credential-stores | delete', function (hooks) {
     confirmService.confirm = sinon.fake.returns(reject());
     const count = getVaultCredentialStoresCount();
     await visit(urls.vaultCredentialStore);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.strictEqual(getVaultCredentialStoresCount(), count);
     assert.ok(confirmService.confirm.calledOnce);
   });
@@ -169,7 +179,8 @@ module('Acceptance | credential-stores | delete', function (hooks) {
       );
     });
     await visit(urls.staticCredentialStore);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.');
   });
 
@@ -186,7 +197,8 @@ module('Acceptance | credential-stores | delete', function (hooks) {
       );
     });
     await visit(urls.vaultCredentialStore);
-    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
+    await click(MANAGE_DROPDOWN_SELECTOR);
+    await click(DELETE_ACTION_SELECTOR);
     assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.');
   });
 });