refactor: 💡 Updated Manage Dropdown in host-sets to HDS design (#2433)

* refactor: 💡 Updated Manage Dropdown in host-sets to HDS design

Updated the manage dropdown in host-sets to reflect HDS design

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

* refactor: 💡 Specified selector in host-test.js

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-14600
This commit is contained in:
Wadi authored and GitHub committed 2024-08-12 13:25:43 -04:00
1 parent 0542218537
commit 9c018f131f
3 files changed
+41 -28

No files matched your search

@@ -3,31 +3,25 @@
SPDX-License-Identifier: BUSL-1.1
}}
<Rose::Dropdown
@text={{t 'actions.manage'}}
@dropdownRight={{true}}
as |dropdown|
>
<Hds::Dropdown data-test-manage-dropdown-host-sets as |dd|>
<dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
{{#if (can 'addHosts hostSet' @model)}}
<dropdown.link
<dd.Interactive
@text={{t 'resources.host-set.actions.create-and-add-host'}}
@route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.create-and-add-host'
>
{{t 'resources.host-set.actions.create-and-add-host'}}
</dropdown.link>
<dropdown.link
/>
<dd.Interactive
@text={{t 'resources.host-set.actions.add-hosts'}}
@route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.add-hosts'
>
{{t 'resources.host-set.actions.add-hosts'}}
</dropdown.link>
<dropdown.separator />
/>
<dd.Separator />
{{/if}}
{{#if (can 'delete model' @model)}}
<dropdown.button
@style='danger'
@disabled={{@model.canSave}}
<dd.Interactive
@text={{t 'resources.host-set.actions.delete'}}
@color='critical'
{{on 'click' (fn @delete @model)}}
>
{{t 'resources.host-set.actions.delete'}}
</dropdown.button>
/>
{{/if}}
</Rose::Dropdown>
</Hds::Dropdown>
@@ -22,6 +22,10 @@ module('Acceptance | host-catalogs | host sets | delete', function (hooks) {
setupMirage(hooks);
let getHostSetCount;
const MANAGE_DROPDOWN_SELECTOR =
'[data-test-manage-dropdown-host-sets] div:first-child button';
const DELETE_ACTION_SELECTOR =
'[data-test-manage-dropdown-host-sets] ul li button';
const instances = {
scopes: {
@@ -80,7 +84,8 @@ module('Acceptance | host-catalogs | host sets | delete', function (hooks) {
test('can delete host', async function (assert) {
const count = getHostSetCount();
await visit(urls.hostSet);
await click('.rose-layout-page-actions .rose-dropdown-button-danger');
await click(MANAGE_DROPDOWN_SELECTOR);
await click(DELETE_ACTION_SELECTOR);
assert.strictEqual(getHostSetCount(), count - 1);
});
@@ -90,7 +95,8 @@ module('Acceptance | host-catalogs | host sets | delete', function (hooks) {
confirmService.confirm = sinon.fake.returns(resolve());
const count = getHostSetCount();
await visit(urls.hostSet);
await click('.rose-layout-page-actions .rose-dropdown-button-danger');
await click(MANAGE_DROPDOWN_SELECTOR);
await click(DELETE_ACTION_SELECTOR);
assert.strictEqual(getHostSetCount(), count - 1);
assert.ok(confirmService.confirm.calledOnce);
});
@@ -99,6 +105,7 @@ module('Acceptance | host-catalogs | host sets | delete', function (hooks) {
instances.hostSet.authorized_actions =
instances.hostSet.authorized_actions.filter((item) => item !== 'delete');
await visit(urls.hostSet);
await click(MANAGE_DROPDOWN_SELECTOR);
assert.notOk(
find('.rose-layout-page-actions .rose-dropdown-button-danger'),
);
@@ -110,7 +117,8 @@ module('Acceptance | host-catalogs | host sets | delete', function (hooks) {
confirmService.confirm = sinon.fake.returns(reject());
const count = getHostSetCount();
await visit(urls.hostSet);
await click('.rose-layout-page-actions .rose-dropdown-button-danger');
await click(MANAGE_DROPDOWN_SELECTOR);
await click(DELETE_ACTION_SELECTOR);
assert.strictEqual(getHostSetCount(), count);
assert.ok(confirmService.confirm.calledOnce);
});
@@ -128,7 +136,8 @@ module('Acceptance | host-catalogs | host sets | delete', function (hooks) {
);
});
await visit(urls.hostSet);
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.');
});
});
@@ -28,6 +28,12 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
setupMirage(hooks);
let getHostSetHostCount;
const MANAGE_DROPDOWN_SELECTOR =
'[data-test-manage-dropdown-host-sets] div:first-child button';
const CREATE_AND_ADD_HOSTS_SELECTOR =
'[data-test-manage-dropdown-host-sets] div ul li:first-child a';
const ADD_EXISTING_HOSTS_SELECTOR =
'[data-test-manage-dropdown-host-sets] div ul li:nth-child(2) a';
const instances = {
scopes: {
@@ -141,6 +147,7 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
test('can navigate to add hosts with proper authorization', async function (assert) {
await visit(urls.hostSet);
await click(MANAGE_DROPDOWN_SELECTOR);
assert.ok(find(`[href="${urls.addHosts}"]`));
});
@@ -157,7 +164,8 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
instances.hostSet.update({ hostIds: [] });
await visit(urls.hostSetHosts);
assert.strictEqual(findAll('tbody tr').length, 0);
await click('.rose-layout-page-actions a:nth-child(2)');
await click(MANAGE_DROPDOWN_SELECTOR);
await click(ADD_EXISTING_HOSTS_SELECTOR);
assert.strictEqual(currentURL(), urls.addHosts);
// Click three times to select, unselect, then reselect (for coverage)
await click('tbody label');
@@ -175,7 +183,8 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
await click('[data-test-host-set-hosts-dropdown-toggle]');
await click('[data-test-host-set-hosts-dropdown-remove-host]');
assert.strictEqual(findAll('tbody tr').length, count - 1);
await click('.rose-layout-page-actions a:nth-child(2)');
await click(MANAGE_DROPDOWN_SELECTOR);
await click(ADD_EXISTING_HOSTS_SELECTOR);
assert.strictEqual(currentURL(), urls.addHosts);
await click('tbody .hds-table__tr .hds-form-label');
await click('form [type="button"]');
@@ -213,7 +222,8 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
instances.hostSet.update({ hostIds: [] });
await visit(urls.hostSet);
assert.strictEqual(findAll('tbody tr').length, 0);
await click('.rose-layout-page-actions a:nth-child(1)');
await click(MANAGE_DROPDOWN_SELECTOR);
await click(CREATE_AND_ADD_HOSTS_SELECTOR);
assert.strictEqual(currentURL(), urls.createAndAddHost);
await fillIn('[name="name"]', 'Test Name');
await fillIn('[name="description"]', 'description');