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

Implement sorting for credential stores (#2856)

Browse Source
This commit is contained in:
Carlos Alcaide Corvo authored and GitHub committed 2025-05-30 15:36:43 -04:00
1 parent e3433ec1f7
commit e4da851172
4 files changed
+197 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/admin/app/controllers/scopes/scope/credential-stores/index.js
+22 -1
View File
@@ -21,12 +21,21 @@ export default class ScopesScopeCredentialStoresIndexController extends Controll
// =attributes
queryParams = ['search', { types: { type: 'array' } }, 'page', 'pageSize'];
queryParams = [
'search',
{ types: { type: 'array' } },
'page',
'pageSize',
'sortAttribute',
'sortDirection',
];
@tracked search;
@tracked types = [];
@tracked page = 1;
@tracked pageSize = 10;
@tracked sortAttribute;
@tracked sortDirection;
get credStoreTypeOptions() {
return TYPES_CREDENTIAL_STORE.map((type) => ({
@@ -176,4 +185,16 @@ export default class ScopesScopeCredentialStoresIndexController extends Controll
'scopes.scope.credential-stores.credential-store.worker-filter',
);
}
/**
* Set sort values and sets page to 1
* @param {string} sortBy
* @param {string} sortOrder
*/
@action
onSort(sortBy, sortOrder) {
this.sortAttribute = sortBy;
this.sortDirection = sortOrder;
this.page = 1;
}
}
ui/admin/app/routes/scopes/scope/credential-stores/index.js
+23 -2
View File
@@ -30,6 +30,14 @@ export default class ScopesScopeCredentialStoresIndexRoute extends Route {
pageSize: {
refreshModel: true,
},
sortAttribute: {
refreshModel: true,
replace: true,
},
sortDirection: {
refreshModel: true,
replace: true,
},
};
// =methods
@@ -45,7 +53,15 @@ export default class ScopesScopeCredentialStoresIndexRoute extends Route {
}
retrieveData = restartableTask(
async ({ search, types, page, pageSize, useDebounce }) => {
async ({
search,
types,
page,
pageSize,
sortAttribute,
sortDirection,
useDebounce,
}) => {
if (useDebounce) {
await timeout(250);
}
@@ -61,6 +77,11 @@ export default class ScopesScopeCredentialStoresIndexRoute extends Route {
filters.type.push({ equals: type });
});
const sort = {
attribute: sortAttribute,
direction: sortDirection,
};
let credentialStores;
let totalItems = 0;
let doCredentialStoresExist = false;
@@ -71,7 +92,7 @@ export default class ScopesScopeCredentialStoresIndexRoute extends Route {
) {
credentialStores = await this.store.query('credential-store', {
scope_id,
query: { search, filters },
query: { search, filters, sort },
page,
pageSize,
});
ui/admin/app/templates/scopes/scope/credential-stores/index.hbs
+52 -36
View File
@@ -56,49 +56,65 @@
{{#if @model.credentialStores}}
<Hds::Table
@model={{@model.credentialStores}}
@columns={{array
(hash label=(t 'form.name.label'))
(hash label=(t 'form.type.label'))
(hash label=(t 'form.id.label'))
}}
@valign='middle'
@onSort={{this.onSort}}
@sortBy={{this.sortAttribute}}
@sortOrder={{this.sortDirection}}
>
<: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 'type'}}
@sortOrder={{if (eq 'type' H.sortBy) H.sortOrder}}
>{{t 'form.type.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>
<B.Td>
{{#if (can 'read credential-store' B.data)}}
<LinkTo
@route='scopes.scope.credential-stores.credential-store'
@model={{B.data.id}}
>
{{B.data.displayName}}
</LinkTo>
{{else}}
{{#each @model.credentialStores as |data|}}
<B.Tr>
<B.Td>
{{#if (can 'read credential-store' data)}}
<LinkTo
@route='scopes.scope.credential-stores.credential-store'
@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::Badge
@text={{t
(concat 'resources.credential-store.types.' B.data.type)
}}
/>
</B.Td>
<B.Td>
<Hds::Copy::Snippet
@textToCopy={{B.data.id}}
@color='secondary'
/>
</B.Td>
</B.Tr>
</B.Td>
<B.Td>
<Hds::Badge
@text={{t
(concat 'resources.credential-store.types.' data.type)
}}
/>
</B.Td>
<B.Td>
<Hds::Copy::Snippet
@textToCopy={{data.id}}
@color='secondary'
/>
</B.Td>
</B.Tr>
{{/each}}
</:body>
</Hds::Table>
<Rose::Pagination
@totalItems={{@model.totalItems}}
@currentPage={{this.page}}
ui/admin/tests/acceptance/credential-store/list-test.js
+100 -1
View File
@@ -4,11 +4,12 @@
*/
import { module, test } from 'qunit';
import { visit, click, fillIn, waitFor } from '@ember/test-helpers';
import { visit, click, fillIn, waitFor, currentURL } 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 { faker } from '@faker-js/faker';
import {
TYPE_CREDENTIAL_STORE_STATIC,
TYPE_CREDENTIAL_STORE_VAULT,
@@ -182,4 +183,102 @@ module('Acceptance | credential-stores | list', function (hooks) {
assert.dom(commonSelectors.HREF(urls.staticCredentialStore)).doesNotExist();
assert.dom(commonSelectors.HREF(urls.vaultCredentialStore)).isVisible();
});
test('credential stores table is sorted by `created_time` descending by default', async function (assert) {
this.server.schema.credentialStores.all().destroy();
const years = ['2006', '2005', '2004', '2003'];
faker.helpers.shuffle(years).map((year) => {
return this.server.create('credential-store', {
scope: instances.scopes.project,
type: TYPE_CREDENTIAL_STORE_STATIC,
created_time: `${year}-01-01T00:00:00Z`,
name: `Credential-store ${year}`,
});
});
await visit(urls.credentialStores);
assert.dom(commonSelectors.TABLE_ROWS).exists({ count: years.length });
years.forEach((year, index) => {
// nth-child index starts at 1
assert
.dom(commonSelectors.TABLE_ROW(index + 1))
.containsText(`Credential-store ${year}`);
});
});
test.each(
'sorting',
{
'on name': {
attribute: {
key: 'name',
values: ['Alpha', 'Beta', 'Delta', 'Gamma', 'Epsilon'],
},
expectedAscendingSort: ['Alpha', 'Beta', 'Delta', 'Epsilon', 'Gamma'],
column: 1,
},
'on type': {
attribute: {
key: 'type',
values: ['Vault', 'Vault', 'Static', 'Vault', 'Static'],
},
expectedAscendingSort: ['Static', 'Static', 'Vault', 'Vault', 'Vault'],
column: 2,
},
'on id': {
attribute: {
key: 'id',
values: ['cs_1000', 'cs_0001', 'cs_0100', 'cs_0010'],
},
expectedAscendingSort: ['cs_0001', 'cs_0010', 'cs_0100', 'cs_1000'],
column: 3,
},
},
async function (assert, input) {
this.server.schema.credentialStores.all().destroy();
faker.helpers.shuffle(input.attribute.values).forEach((value) => {
this.server.create('credential-store', {
[input.attribute.key]: value,
scope: instances.scopes.project,
});
});
await visit(urls.credentialStores);
// 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);
});
},
);
});