CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the Manage Dropdown button to reflect HDS Design (#2392)

Browse Source
This commit is contained in:
Wadi authored and GitHub committed 2024-07-16 21:41:36 -04:00
1 parent 66fb4b2451
commit cc0edf311c
3 files changed
+47 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/admin/app/components/users/user/actions/index.hbs
+13 -15
View File
@@ -2,25 +2,23 @@
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
<Hds::Dropdown data-test-manage-user-dropdown as |dd|>
<dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
<Rose::Dropdown
@text={{t 'actions.manage'}}
@dropdownRight={{true}}
as |dropdown|
>
{{#if (can 'addAccounts user' @model)}}
<dropdown.link @route='scopes.scope.users.user.add-accounts'>
{{t 'resources.user.actions.add-accounts'}}
</dropdown.link>
<dd.Interactive
@route='scopes.scope.users.user.add-accounts'
@text={{t 'resources.user.actions.add-accounts'}}
/>
{{/if}}
{{#if (can 'delete model' @model)}}
<dropdown.separator />
<dropdown.button
@style='danger'
<dd.Separator />
<dd.Interactive
@color='critical'
@disabled={{@model.canSave}}
@text={{t 'resources.user.actions.delete'}}
{{on 'click' (fn @delete @model)}}
>
{{t 'resources.user.actions.delete'}}
</dropdown.button>
/>
{{/if}}
</Rose::Dropdown>
</Hds::Dropdown>
ui/admin/tests/acceptance/users/accounts-test.js
+19 -11
View File
@@ -25,7 +25,8 @@ module('Acceptance | users | accounts', function (hooks) {
let features;
const ACCOUNTS_TYPE_SELECTOR = 'tbody tr .hds-badge__text';
const ADD_ACCOUNTS_ACTION_SELECTOR = '.rose-layout-page-actions a';
const ADD_ACCOUNTS_ACTION_SELECTOR = "[data-test-manage-user-dropdown] ul li:first-child a"
const MANAGE_DROPDOWN_SELECTOR = "[data-test-manage-user-dropdown] div:first-child button"
const ERROR_MSG_SELECTOR = '[role="alert"]';
const TABLE_ROWS_SELECTOR = 'tbody tr';
const CHECKBOX_SELECTOR = 'tbody label';
@@ -168,7 +169,7 @@ module('Acceptance | users | accounts', function (hooks) {
test('visiting account add accounts', async function (assert) {
await visit(urls.accounts);
await click(MANAGE_DROPDOWN_SELECTOR);
await click(ADD_ACCOUNTS_ACTION_SELECTOR);
await a11yAudit();
@@ -177,10 +178,10 @@ module('Acceptance | users | accounts', function (hooks) {
test('can navigate to add accounts with proper authorization', async function (assert) {
await visit(urls.user);
await click(`[href="${urls.accounts}"]`);
await click(MANAGE_DROPDOWN_SELECTOR);
assert.dom(`[href="${urls.addAccounts}"]`).exists();
assert.dom(`[href="${urls.addAccounts}"]`).isVisible();
});
test('cannot navigate to add accounts without proper authorization', async function (assert) {
@@ -210,6 +211,7 @@ module('Acceptance | users | accounts', function (hooks) {
await visit(urls.user);
await click(`[href="${urls.accounts}"]`);
await click(MANAGE_DROPDOWN_SELECTOR);
await click(ADD_ACCOUNTS_ACTION_SELECTOR);
assert
@@ -234,8 +236,11 @@ module('Acceptance | users | accounts', function (hooks) {
await visit(urls.user);
await click(`[href="${urls.accounts}"]`);
await click(MANAGE_DROPDOWN_SELECTOR);
await click(ADD_ACCOUNTS_ACTION_SELECTOR);
assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsAvailableCount });
});
@@ -245,6 +250,7 @@ module('Acceptance | users | accounts', function (hooks) {
await click(`[href="${urls.accounts}"]`);
assert.dom(TABLE_ROWS_SELECTOR).exists({ count: 0 });
await click(MANAGE_DROPDOWN_SELECTOR);
await click(ADD_ACCOUNTS_ACTION_SELECTOR);
assert.strictEqual(currentURL(), urls.addAccounts);
// Click three times to select, unselect, then reselect (for coverage)
@@ -260,18 +266,20 @@ module('Acceptance | users | accounts', function (hooks) {
test('select and cancel accounts to add', async function (assert) {
await visit(urls.user);
await click(`[href="${urls.accounts}"]`);
await click(`[href="${urls.accounts}"]`)
assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount });
await click(ACCOUNTS_ACTION_SELECTOR);
await click(REMOVE_ACTION_SELECTOR);
assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount - 1 });
await click(MANAGE_DROPDOWN_SELECTOR);
await click(ADD_ACCOUNTS_ACTION_SELECTOR);
assert.strictEqual(currentURL(), urls.addAccounts);
await click(CHECKBOX_SELECTOR);
await click(CANCEL_BTN_SELECTOR);
await visit(urls.accounts);
assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount - 1 });
assert.strictEqual(currentURL(), urls.accounts);
assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount});
});
test('shows error message on account add', async function (assert) {
ui/admin/tests/acceptance/users/delete-test.js
+15 -9
View File
@@ -20,7 +20,8 @@ module('Acceptance | users | delete', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
setupIndexedDb(hooks);
const DELETE_ACTION_SELECTOR = "[data-test-manage-user-dropdown] ul li button"
const MANAGE_DROPDOWN_SELECTOR = "[data-test-manage-user-dropdown] div:first-child button"
const instances = {
scopes: {
global: null,
@@ -57,7 +58,8 @@ module('Acceptance | users | delete', function (hooks) {
await click(`[href="${urls.user}"]`);
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.users.length, usersCount - 1);
});
@@ -66,11 +68,12 @@ module('Acceptance | users | delete', function (hooks) {
instances.user.authorized_actions =
instances.user.authorized_actions.filter((item) => item !== 'delete');
await visit(urls.users);
await click(`[href="${urls.user}"]`);
await click(MANAGE_DROPDOWN_SELECTOR);
assert
.dom('.rose-layout-page-actions .rose-dropdown-button-danger')
.dom('[data-test-manage-user-dropdown] ul li button')
.doesNotExist();
});
@@ -79,9 +82,11 @@ module('Acceptance | users | delete', function (hooks) {
confirmService.enabled = true;
const usersCount = this.server.db.users.length;
await visit(urls.users);
await click(`[href="${urls.user}"]`);
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 | users | delete', function (hooks) {
await visit(urls.users);
await click(`[href="${urls.user}"]`);
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(this.server.db.users.length, usersCount);
@@ -118,8 +124,8 @@ module('Acceptance | users | delete', function (hooks) {
});
await click(`[href="${urls.user}"]`);
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.');
});
});