particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Sort only selected on the frontend side

Browse source 
This removes sorting on the frontend side where it's already handled by the content sources API.
Since we manipulate selected packages by joining the, with `currentlyRemovedPackages` list, the sorting is added there to keep the packages from jumping around when unselected.
This commit is contained in:
regexowl 2025-03-06 16:15:32 +01:00 • committed by Klara Simickova
parent ff80aea171
commit fbc0ea13e6
3 changed files with 36 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/Components/CreateImageWizard/steps/Packages/Packages.tsx
View file

@ -649,7 +649,9 @@ const Packages = () => {
selectedPackages.push(...currentlyRemovedPackages);
}
if (toggleSourceRepos === RepoToggle.INCLUDED) {
return selectedPackages;
return selectedPackages.sort((a, b) =>
sortfn(a.name, b.name, debouncedSearchTerm)
);
} else {
return [];
}
@ -666,7 +668,7 @@ const Packages = () => {
packages,
toggleSelected,
toggleSourceRepos,
]).sort((a, b) => sortfn(a.name, b.name, debouncedSearchTerm));
]);
const transformedGroups = useMemo(() => {
let combinedGroupData: GroupWithRepositoryInfo[] = [];
@ -733,7 +735,7 @@ const Packages = () => {
groups,
toggleSelected,
toggleSourceRepos,
]).sort((a, b) => sortfn(a.name, b.name, debouncedSearchTerm));
]);
const handleSearch = async (
event: React.FormEvent<HTMLInputElement>,

9
src/test/Components/CreateImageWizard/steps/Packages/Packages.test.tsx
View file

@ -99,11 +99,12 @@ const getRows = async () => {
const comparePackageSearchResults = async () => {
const availablePackages = await getRows();
await waitFor(() => expect(availablePackages).toHaveLength(3));
expect(availablePackages[0]).toHaveTextContent('test');
expect(availablePackages[1]).toHaveTextContent('testPkg');
expect(availablePackages[2]).toHaveTextContent('lib-test');
expect(availablePackages[1]).toHaveTextContent('test-lib');
expect(availablePackages[2]).toHaveTextContent('testPkg');
};
const clickFirstPackageCheckbox = async () => {
@ -341,7 +342,7 @@ describe('Step Packages', () => {
await clearSearchInput();
await typeIntoSearchBox('mock');
await screen.findByText(/mockPkg/);
await screen.findByText(/mock-lib/);
user.click(checkboxes[0]);
user.click(checkboxes[1]);
@ -353,7 +354,7 @@ describe('Step Packages', () => {
await toggleSelected();
const availablePackages = await getRows();
expect(availablePackages[0]).toHaveTextContent('test');
expect(availablePackages[1]).toHaveTextContent('testPkg');
expect(availablePackages[1]).toHaveTextContent('test-lib');
});
test('should display recommendations', async () => {

52
src/test/fixtures/packages.ts vendored
View file

@ -17,51 +17,51 @@ export const mockSourcesPackagesResults = (
if (!isDistroPkgSearch) {
return [
{
package_name: 'testPkg-sources',
summary: 'test package summary',
},
{
package_name: 'lib-test-sources',
summary: 'lib-test package summary',
},
{
package_name: 'test-sources',
summary: 'summary for test package',
},
{
package_name: 'test-sources-lib',
summary: 'test-lib package summary',
},
{
package_name: 'testPkg-sources',
summary: 'test package summary',
},
];
}
if (search === 'test') {
return [
{
package_name: 'testPkg',
summary: 'test package summary',
},
{
package_name: 'lib-test',
summary: 'lib-test package summary',
},
{
package_name: 'test',
summary: 'summary for test package',
},
{
package_name: 'test-lib',
summary: 'test-lib package summary',
},
{
package_name: 'testPkg',
summary: 'test package summary',
},
];
}
if (search === 'mock') {
return [
{
package_name: 'mockPkg',
summary: 'test package summary',
},
{
package_name: 'lib-mock',
summary: 'lib-test package summary',
},
{
package_name: 'mock',
summary: 'summary for test package',
},
{
package_name: 'mock-lib',
summary: 'test-lib package summary',
},
{
package_name: 'mockPkg',
summary: 'test package summary',
},
];
}
return [];
@ -88,8 +88,8 @@ export const mockSourcesGroupsResults = (
export const mockPkgResultAlphaContentSources: ApiRepositoryRpm[] = [
{
name: 'lib-test',
summary: 'lib-test package summary',
name: 'test-lib',
summary: 'test-lib package summary',
version: '1.0',
},
{