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.

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>,

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[1]).toHaveTextContent('test-lib');
-  expect(availablePackages[2]).toHaveTextContent('lib-test');
+  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 () => {

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',
+    name: 'test-lib',
-    summary: 'lib-test package summary',
+    summary: 'test-lib package summary',
     version: '1.0',
   },
   {