From fbc0ea13e655acb4507738589dda5a0c879cedf2 Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Thu, 6 Mar 2025 16:15:32 +0100
Subject: [PATCH] Wizard: Sort only selected on the frontend side

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.
---
 .../steps/Packages/Packages.tsx               |  8 +--
 .../steps/Packages/Packages.test.tsx          |  9 ++--
 src/test/fixtures/packages.ts                 | 52 +++++++++----------
 3 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
index aab8b61f..dc691dd8 100644
--- a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
+++ b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
@@ -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>,
diff --git a/src/test/Components/CreateImageWizard/steps/Packages/Packages.test.tsx b/src/test/Components/CreateImageWizard/steps/Packages/Packages.test.tsx
index 658e68f4..ee8429ef 100644
--- a/src/test/Components/CreateImageWizard/steps/Packages/Packages.test.tsx
+++ b/src/test/Components/CreateImageWizard/steps/Packages/Packages.test.tsx
@@ -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 () => {
diff --git a/src/test/fixtures/packages.ts b/src/test/fixtures/packages.ts
index 1b01dc1f..e979a38f 100644
--- a/src/test/fixtures/packages.ts
+++ b/src/test/fixtures/packages.ts
@@ -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',
   },
   {