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

refactor: 💡 update Dropdown component to have name & toggleText (#2218)

Browse Source 
* refactor: 💡 update Dropdown component to have name & toggleText

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

* test: 💍 remove hds class selector

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13336
This commit is contained in:
Cameron Perera authored and Zhihe Li committed 2024-04-12 14:55:33 -04:00
1 parent a39b208b48
commit eb4ec5f6de
10 files changed
+56 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/core/addon/components/dropdown/index.hbs
+2 -2
View File
@@ -4,15 +4,15 @@
}}
<Hds::Dropdown
...attributes
@height='314px'
@onClose={{this.close}}
@listPosition={{@listPosition}}
name={{@name}}
as |DD|
>
<DD.ToggleButton
@color='secondary'
@text={{@name}}
@text={{@toggleText}}
@count={{@checkedItems.length}}
{{on 'click' this.open}}
/>
addons/core/tests/integration/components/dropdown/index-test.js
+19 -11
View File
@@ -23,17 +23,19 @@ module('Integration | Component | dropdown/index', function (hooks) {
name: 'Fake Project',
displayName: 'Fake Project',
};
const name = 'Click Me';
const name = 'test';
const toggleText = 'Click Me';
const FIRST_ITEM_SELECTOR = `[data-test-checkbox="${firstItem.id}"]`;
const SECOND_ITEM_SELECTOR = `[data-test-checkbox="${secondItem.id}"]`;
const TOGGLE_DROPDOWN_SELECTOR = '.hds-dropdown-toggle-button';
const TOGGLE_DROPDOWN_SELECTOR = `[name=${name}] button`;
const SEARCH_INPUT_SELECTOR = '[data-test-dropdown-search]';
const COUNT_SELECTOR = '.hds-dropdown-toggle-button__count';
const ITEM_SELECTOR = '.hds-dropdown-list-item';
const COUNT_SELECTOR = `[name=${name}] button div:nth-child(2)`;
const ITEM_SELECTOR = 'li';
hooks.beforeEach(function () {
this.set('name', name);
this.set('toggleText', toggleText);
this.set('array', [firstItem, secondItem]);
this.set('checkedItems', [firstItem.id]);
this.set('applyFilter', () => {});
@@ -41,14 +43,15 @@ module('Integration | Component | dropdown/index', function (hooks) {
test('it renders', async function (assert) {
await render(hbs`<Dropdown
@name={{this.name}}
name={{this.name}}
@toggleText={{this.toggleText}}
@itemOptions={{this.array}}
@checkedItems={{this.checkedItems}}
@applyFilter={{this.applyFilter}}
/>`);
await click(TOGGLE_DROPDOWN_SELECTOR);
assert.dom('.hds-dropdown-toggle-button__text').hasText(name);
assert.dom(TOGGLE_DROPDOWN_SELECTOR).includesText(toggleText);
assert.dom(FIRST_ITEM_SELECTOR).isVisible();
assert.dom(FIRST_ITEM_SELECTOR).isChecked();
assert.dom(SECOND_ITEM_SELECTOR).isVisible();
@@ -58,7 +61,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
test('it renders a search input when isSearchable is true', async function (assert) {
await render(hbs`<Dropdown
@name={{this.name}}
name={{this.name}}
@toggleText={{this.toggleText}}
@itemOptions={{this.array}}
@checkedItems={{this.checkedItems}}
@applyFilter={{this.applyFilter}}
@@ -71,7 +75,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
test('it renders the correct count of checked items', async function (assert) {
await render(hbs`<Dropdown
@name={{this.name}}
name={{this.name}}
@toggleText={{this.toggleText}}
@itemOptions={{this.array}}
@checkedItems={{this.checkedItems}}
@applyFilter={{this.applyFilter}}
@@ -87,7 +92,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
});
await render(hbs`<Dropdown
@name={{this.name}}
name={{this.name}}
@toggleText={{this.toggleText}}
@itemOptions={{this.array}}
@checkedItems={{this.checkedItems}}
@applyFilter={{this.applyFilter}}
@@ -102,7 +108,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
this.set('checkedItems', []);
await render(hbs`<Dropdown
@name={{this.name}}
name={{this.name}}
@toggleText={{this.toggleText}}
@itemOptions={{this.array}}
@checkedItems={{this.checkedItems}}
@applyFilter={{this.applyFilter}}
@@ -128,7 +135,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
);
await render(hbs`<Dropdown
@name={{this.name}}
name={{this.name}}
@toggleText={{this.toggleText}}
@itemOptions={{this.itemOptions}}
@checkedItems={{this.checkedItems}}
@applyFilter={{this.applyFilter}}
ui/admin/app/templates/scopes/scope/credential-stores/index.hbs
+2 -1
View File
@@ -42,7 +42,8 @@
/>
<S.Generic>
<Dropdown
@name={{t 'form.type.label'}}
name='type'
@toggleText={{t 'form.type.label'}}
@itemOptions={{this.credStoreTypeOptions}}
@checkedItems={{this.types}}
@applyFilter={{fn this.applyFilter 'types'}}
ui/admin/app/templates/scopes/scope/sessions/index.hbs
+6 -3
View File
@@ -30,7 +30,8 @@
/>
<S.Generic>
<Dropdown
@name={{t 'resources.user.title'}}
name='user'
@toggleText={{t 'resources.user.title'}}
@itemOptions={{@model.associatedUsers}}
@checkedItems={{this.users}}
@applyFilter={{fn this.applyFilter 'users'}}
@@ -50,7 +51,8 @@
</S.Generic>
<S.Generic>
<Dropdown
@name={{t 'resources.target.title'}}
name='target'
@toggleText={{t 'resources.target.title'}}
@itemOptions={{@model.associatedTargets}}
@checkedItems={{this.targets}}
@applyFilter={{fn this.applyFilter 'targets'}}
@@ -59,7 +61,8 @@
</S.Generic>
<S.Generic>
<Dropdown
@name={{t 'form.status.label'}}
name='status'
@toggleText={{t 'form.status.label'}}
@itemOptions={{this.sessionStatusOptions}}
@checkedItems={{this.status}}
@applyFilter={{fn this.applyFilter 'status'}}
ui/admin/app/templates/scopes/scope/targets/index.hbs
+4 -2
View File
@@ -40,7 +40,8 @@
/>
<S.Generic>
<Dropdown
@name={{t 'resources.target.titles.active-sessions'}}
name='active-sessions'
@toggleText={{t 'resources.target.titles.active-sessions'}}
@itemOptions={{this.availableSessionOptions}}
@checkedItems={{this.availableSessions}}
@applyFilter={{fn this.applyFilter 'availableSessions'}}
@@ -49,7 +50,8 @@
{{#if (feature-flag 'ssh-target')}}
<S.Generic>
<Dropdown
@name={{t 'form.type.label'}}
name='type'
@toggleText={{t 'form.type.label'}}
@itemOptions={{this.targetTypeOptions}}
@checkedItems={{this.types}}
@applyFilter={{fn this.applyFilter 'types'}}
ui/admin/tests/acceptance/credential-store/list-test.js
+1 -1
View File
@@ -174,7 +174,7 @@ module('Acceptance | credential-stores | list', function (hooks) {
assert.dom(`[href="${urls.staticCredentialStore}"]`).exists();
assert.dom(`[href="${urls.vaultCredentialStore}"]`).exists();
await click(FILTER_DROPDOWN_SELECTOR('Type'));
await click(FILTER_DROPDOWN_SELECTOR('type'));
await click(`input[value="${TYPE_CREDENTIAL_STORE_VAULT}"]`);
await click(FILTER_APPLY_BUTTON_SELECTOR);
ui/admin/tests/acceptance/sessions/list-test.js
+6 -6
View File
@@ -221,9 +221,9 @@ module('Acceptance | sessions | list', function (hooks) {
});
await click(`[href="${urls.sessions}"]`);
await click(FILTER_TOGGLE_SELECTOR('User'));
await click(FILTER_TOGGLE_SELECTOR('user'));
await click(`input[value="${instances.dev.id}"]`);
await click(FILTER_APPLY_BUTTON('User'));
await click(FILTER_APPLY_BUTTON('user'));
assert.dom(SESSION_ID_SELECTOR(instances.sessions[2].id)).exists();
assert.dom('tbody tr').exists({ count: 1 });
@@ -236,9 +236,9 @@ module('Acceptance | sessions | list', function (hooks) {
});
await click(`[href="${urls.sessions}"]`);
await click(FILTER_TOGGLE_SELECTOR('Target'));
await click(FILTER_TOGGLE_SELECTOR('target'));
await click(`input[value="${instances.sshTarget.id}"]`);
await click(FILTER_APPLY_BUTTON('Target'));
await click(FILTER_APPLY_BUTTON('target'));
assert.dom(SESSION_ID_SELECTOR(instances.sessions[2].id)).exists();
assert.dom('tbody tr').exists({ count: 1 });
@@ -248,9 +248,9 @@ module('Acceptance | sessions | list', function (hooks) {
await visit(urls.projectScope);
await click(`[href="${urls.sessions}"]`);
await click(FILTER_TOGGLE_SELECTOR('Status'));
await click(FILTER_TOGGLE_SELECTOR('status'));
await click('input[value="active"]');
await click(FILTER_APPLY_BUTTON('Status'));
await click(FILTER_APPLY_BUTTON('status'));
assert.dom(NO_RESULTS_MSG_SELECTOR).includesText('No results found');
});
ui/admin/tests/acceptance/targets/list-test.js
+4 -4
View File
@@ -24,15 +24,15 @@ module('Acceptance | targets | list', function (hooks) {
const SEARCH_INPUT_SELECTOR = '.search-filtering [type="search"]';
const NO_RESULTS_MSG_SELECTOR = '[data-test-no-target-results]';
const TYPE_FILTER_DROPDOWN_SELECTOR =
'.search-filtering [name="Type"] button';
'.search-filtering [name="type"] button';
const TCP_TYPE_FILTER_OPTION_SELECTOR =
'.search-filtering [name="Type"] [data-test-checkbox="tcp"]';
'.search-filtering [name="type"] [data-test-checkbox="tcp"]';
const FILTER_APPLY_BUTTON_SELECTOR =
'.search-filtering [data-test-dropdown-apply-button]';
const ACTIVE_SESSIONS_FILTER_DROPDOWN_SELECTOR =
'.search-filtering [name="Active sessions"] button';
'.search-filtering [name="active-sessions"] button';
const YES_FILTER_OPTION_SELECTOR =
'.search-filtering [name="Active sessions"] [data-test-checkbox="yes"]';
'.search-filtering [name="active-sessions"] [data-test-checkbox="yes"]';
const instances = {
scopes: {
ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+6 -3
View File
@@ -9,7 +9,8 @@
<Hds::SegmentedGroup as |S|>
<S.Generic>
<Dropdown
@name={{t 'resources.target.title'}}
name='target'
@toggleText={{t 'resources.target.title'}}
@itemOptions={{this.availableTargets}}
@checkedItems={{this.targets}}
@applyFilter={{fn this.applyFilter 'targets'}}
@@ -19,7 +20,8 @@
</S.Generic>
<S.Generic>
<Dropdown
@name={{t 'form.status.label'}}
name='status'
@toggleText={{t 'form.status.label'}}
@itemOptions={{this.sessionStatusOptions}}
@checkedItems={{this.status}}
@applyFilter={{fn this.applyFilter 'status'}}
@@ -27,7 +29,8 @@
</S.Generic>
<S.Generic>
<Dropdown
@name={{t 'resources.scope.title'}}
name='scope'
@toggleText={{t 'resources.scope.title'}}
@itemOptions={{this.availableScopes}}
@checkedItems={{this.scopes}}
@applyFilter={{fn this.applyFilter 'scopes'}}
ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+6 -3
View File
@@ -16,7 +16,8 @@
/>
<S.Generic>
<Dropdown
@name={{t 'resources.target.titles.active-sessions'}}
name='active-sessions'
@toggleText={{t 'resources.target.titles.active-sessions'}}
@itemOptions={{this.availableSessionOptions}}
@checkedItems={{this.availableSessions}}
@applyFilter={{fn this.applyFilter 'availableSessions'}}
@@ -24,7 +25,8 @@
</S.Generic>
<S.Generic>
<Dropdown
@name={{t 'form.type.label'}}
name='type'
@toggleText={{t 'form.type.label'}}
@itemOptions={{this.targetTypeOptions}}
@checkedItems={{this.types}}
@applyFilter={{fn this.applyFilter 'types'}}
@@ -32,7 +34,8 @@
</S.Generic>
<S.Generic>
<Dropdown
@name={{t 'resources.scope.title'}}
name='scope'
@toggleText={{t 'resources.scope.title'}}
@itemOptions={{this.availableScopes}}
@checkedItems={{this.scopes}}
@applyFilter={{fn this.applyFilter 'scopes'}}