ICU-16785 sort admin scopes (#2842)
* feat: 🎸 add sorting to scopes/scope/scopes/index route ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16785 * refactor: 💡 use direct hds components to support sorting ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16785 * feat: 🎸 wire up sorting to the scopes table ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16785 * test: 💍 add tests for sorting scopes ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16785
This commit is contained in:
hashicc authored and 
GitHub committed
1 parent
b06c396086
commit
daa23f66c4
4 files changed
+177
-29
No files matched your search
@@ -10,11 +10,19 @@ import { tracked } from '@glimmer/tracking';
|
||||
export default class ScopesScopeScopesIndexController extends Controller {
|
||||
// =attributes
|
||||
|
||||
queryParams = ['search', 'page', 'pageSize'];
|
||||
queryParams = [
|
||||
'search',
|
||||
'page',
|
||||
'pageSize',
|
||||
'sortAttribute',
|
||||
'sortDirection',
|
||||
];
|
||||
|
||||
@tracked search;
|
||||
@tracked page = 1;
|
||||
@tracked pageSize = 10;
|
||||
@tracked sortAttribute;
|
||||
@tracked sortDirection;
|
||||
|
||||
// =methods
|
||||
|
||||
@@ -28,4 +36,11 @@ export default class ScopesScopeScopesIndexController extends Controller {
|
||||
this.search = value;
|
||||
this.page = 1;
|
||||
}
|
||||
|
||||
@action
|
||||
sortBy(attribute, direction) {
|
||||
this.sortAttribute = attribute;
|
||||
this.sortDirection = direction;
|
||||
this.page = 1;
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,14 @@ export default class ScopesScopeScopesIndexRoute extends Route {
|
||||
pageSize: {
|
||||
refreshModel: true,
|
||||
},
|
||||
sortAttribute: {
|
||||
refreshModel: true,
|
||||
replace: true,
|
||||
},
|
||||
sortDirection: {
|
||||
refreshModel: true,
|
||||
replace: true,
|
||||
},
|
||||
};
|
||||
|
||||
// =services
|
||||
@@ -41,7 +49,14 @@ export default class ScopesScopeScopesIndexRoute extends Route {
|
||||
}
|
||||
|
||||
retrieveData = restartableTask(
|
||||
async ({ search, page, pageSize, useDebounce }) => {
|
||||
async ({
|
||||
search,
|
||||
page,
|
||||
pageSize,
|
||||
sortAttribute,
|
||||
sortDirection,
|
||||
useDebounce,
|
||||
}) => {
|
||||
if (useDebounce) {
|
||||
await timeout(250);
|
||||
}
|
||||
@@ -52,9 +67,14 @@ export default class ScopesScopeScopesIndexRoute extends Route {
|
||||
scope_id: [{ equals: scope_id }],
|
||||
};
|
||||
|
||||
const sort = {
|
||||
attribute: sortAttribute,
|
||||
direction: sortDirection,
|
||||
};
|
||||
|
||||
const subScopes = await this.store.query('scope', {
|
||||
scope_id,
|
||||
query: { search, filters },
|
||||
query: { search, filters, sort },
|
||||
page,
|
||||
pageSize,
|
||||
});
|
||||
|
||||
@@ -59,36 +59,52 @@
|
||||
</Hds::SegmentedGroup>
|
||||
{{#if @model.subScopes}}
|
||||
<Hds::Table
|
||||
@columns={{array
|
||||
(hash label=(t 'form.name.label'))
|
||||
(hash label=(t 'form.id.label'))
|
||||
}}
|
||||
@model={{@model.subScopes}}
|
||||
@valign='middle'
|
||||
@sortBy={{this.sortAttribute}}
|
||||
@sortOrder={{this.sortDirection}}
|
||||
@onSort={{this.sortBy}}
|
||||
>
|
||||
<:head as |H|>
|
||||
<H.Tr>
|
||||
<H.ThSort
|
||||
@onClickSort={{fn H.setSortBy 'name'}}
|
||||
@sortOrder={{if (eq 'name' H.sortBy) H.sortOrder}}
|
||||
>
|
||||
{{t 'form.name.label'}}
|
||||
</H.ThSort>
|
||||
<H.ThSort
|
||||
@onClickSort={{fn H.setSortBy 'id'}}
|
||||
@sortOrder={{if (eq 'id' H.sortBy) H.sortOrder}}
|
||||
>
|
||||
{{t 'form.id.label'}}
|
||||
</H.ThSort>
|
||||
</H.Tr>
|
||||
</:head>
|
||||
<:body as |B|>
|
||||
<B.Tr data-test-scopes-table-row={{B.data.id}}>
|
||||
<B.Td>
|
||||
{{#if (can 'read model' B.data)}}
|
||||
<LinkTo @route='scopes.scope' @model={{B.data.id}}>
|
||||
{{B.data.displayName}}
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
{{#each @model.subScopes as |data|}}
|
||||
<B.Tr data-test-scopes-table-row={{data.id}}>
|
||||
<B.Td>
|
||||
{{#if (can 'read model' data)}}
|
||||
<LinkTo @route='scopes.scope' @model={{data.id}}>
|
||||
{{data.displayName}}
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
<Hds::Text::Body @tag='p'>
|
||||
{{data.displayName}}
|
||||
</Hds::Text::Body>
|
||||
{{/if}}
|
||||
<Hds::Text::Body @tag='p'>
|
||||
{{B.data.displayName}}
|
||||
{{data.description}}
|
||||
</Hds::Text::Body>
|
||||
{{/if}}
|
||||
<Hds::Text::Body @tag='p'>
|
||||
{{B.data.description}}
|
||||
</Hds::Text::Body>
|
||||
</B.Td>
|
||||
<B.Td>
|
||||
<Hds::Copy::Snippet
|
||||
@textToCopy={{B.data.id}}
|
||||
@color='secondary'
|
||||
/>
|
||||
</B.Td>
|
||||
</B.Tr>
|
||||
</B.Td>
|
||||
<B.Td>
|
||||
<Hds::Copy::Snippet
|
||||
@textToCopy={{data.id}}
|
||||
@color='secondary'
|
||||
/>
|
||||
</B.Td>
|
||||
</B.Tr>
|
||||
{{/each}}
|
||||
</:body>
|
||||
</Hds::Table>
|
||||
<Rose::Pagination
|
||||
|
||||
@@ -4,13 +4,14 @@
|
||||
*/
|
||||
|
||||
import { module, test } from 'qunit';
|
||||
import { currentURL, visit, fillIn, waitFor } from '@ember/test-helpers';
|
||||
import { currentURL, visit, fillIn, waitFor, click } from '@ember/test-helpers';
|
||||
import { setupApplicationTest } from 'admin/tests/helpers';
|
||||
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
|
||||
import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
|
||||
import { authenticateSession } from 'ember-simple-auth/test-support';
|
||||
import * as commonSelectors from 'admin/tests/helpers/selectors';
|
||||
import * as selectors from './selectors';
|
||||
import { faker } from '@faker-js/faker';
|
||||
|
||||
module('Acceptance | scopes | list', function (hooks) {
|
||||
setupApplicationTest(hooks);
|
||||
@@ -160,4 +161,100 @@ module('Acceptance | scopes | list', function (hooks) {
|
||||
.dom(selectors.TABLE_ROW_SCOPE_LINK(instances.scopes.project2.id))
|
||||
.doesNotExist();
|
||||
});
|
||||
|
||||
test('scopes are sorted by created_time descending by default', async function (assert) {
|
||||
this.server.schema.scopes.all().destroy();
|
||||
|
||||
const years = ['2026', '2025', '2024', '2023'];
|
||||
faker.helpers.shuffle(years).map((year) => {
|
||||
return this.server.create('scope', {
|
||||
id: `o_${year}`,
|
||||
type: 'org',
|
||||
name: `Org ${year}`,
|
||||
scope: { id: 'global', type: 'global' },
|
||||
created_time: `${year}-01-01T00:00:00Z`,
|
||||
});
|
||||
});
|
||||
|
||||
await visit(urls.globalScope);
|
||||
|
||||
assert.dom(commonSelectors.TABLE_ROWS).exists({ count: years.length });
|
||||
assert.dom(commonSelectors.TABLE_ROW(1)).containsText('Org 2026');
|
||||
assert.dom(commonSelectors.TABLE_ROW(2)).containsText('Org 2025');
|
||||
assert.dom(commonSelectors.TABLE_ROW(3)).containsText('Org 2024');
|
||||
assert.dom(commonSelectors.TABLE_ROW(4)).containsText('Org 2023');
|
||||
});
|
||||
|
||||
test.each(
|
||||
'sorting',
|
||||
{
|
||||
'on name': {
|
||||
attribute: {
|
||||
key: 'name',
|
||||
values: ['Alpha', 'Beta', 'Delta', 'Gamma', 'Epsilon'],
|
||||
},
|
||||
expectedAscendingSort: ['Alpha', 'Beta', 'Delta', 'Epsilon', 'Gamma'],
|
||||
column: 1,
|
||||
},
|
||||
'on id': {
|
||||
attribute: {
|
||||
key: 'id',
|
||||
values: ['o_0001', 'o_0010', 'o_0100', 'o_1000', 'o_10000'],
|
||||
},
|
||||
expectedAscendingSort: [
|
||||
'o_0001',
|
||||
'o_0010',
|
||||
'o_0100',
|
||||
'o_1000',
|
||||
'o_10000',
|
||||
],
|
||||
column: 2,
|
||||
},
|
||||
},
|
||||
async function (assert, input) {
|
||||
this.server.schema.scopes.all().destroy();
|
||||
|
||||
faker.helpers.shuffle(input.attribute.values).forEach((value) => {
|
||||
this.server.create('scope', {
|
||||
[input.attribute.key]: value,
|
||||
type: 'org',
|
||||
scope: { id: 'global', type: 'global' },
|
||||
});
|
||||
});
|
||||
|
||||
await visit(urls.globalScope);
|
||||
|
||||
// click the sort button again to sort in ascending order
|
||||
await click(commonSelectors.TABLE_SORT_BTN(input.column));
|
||||
assert.true(currentURL().includes('sortDirection=asc'));
|
||||
assert.true(
|
||||
currentURL().includes(`sortAttribute=${input.attribute.key}`),
|
||||
);
|
||||
assert
|
||||
.dom(commonSelectors.TABLE_SORT_BTN_ARROW_UP(input.column))
|
||||
.isVisible();
|
||||
assert
|
||||
.dom(commonSelectors.TABLE_ROWS)
|
||||
.isVisible({ count: input.attribute.values.length });
|
||||
|
||||
input.expectedAscendingSort.forEach((expected, index) => {
|
||||
// nth-child index starts at 1
|
||||
assert.dom(commonSelectors.TABLE_ROW(index + 1)).containsText(expected);
|
||||
});
|
||||
|
||||
// click the sort button again to sort in descending order
|
||||
await click(commonSelectors.TABLE_SORT_BTN(input.column));
|
||||
assert.true(currentURL().includes('sortDirection=desc'));
|
||||
assert.true(
|
||||
currentURL().includes(`sortAttribute=${input.attribute.key}`),
|
||||
);
|
||||
assert
|
||||
.dom(commonSelectors.TABLE_SORT_BTN_ARROW_DOWN(input.column))
|
||||
.isVisible();
|
||||
input.expectedAscendingSort.toReversed().forEach((expected, index) => {
|
||||
// nth-child index starts at 1
|
||||
assert.dom(commonSelectors.TABLE_ROW(index + 1)).containsText(expected);
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
Reference in new issue
Block a user