CreateImageWizard: filter already added packages

When a user searches for available packages, already chosen packages are
filtered from the available packages list. This prevents the user from
adding duplicate packages.

src/Components/CreateImageWizard/formComponents/Packages.js

@@ -80,6 +80,14 @@ const Packages = ({ defaultArch, ...props }) => {
         setPackagesAvailable(sortResults);
     });
 
+    // filter the packages by name
+    const filterPackagesAvailable = useCallback((packageList) => {
+        return packageList.filter((availablePackage) => {
+            // returns true if no packages in the available or chosen list have the same name
+            return !packagesChosen.some((chosenPackage) => availablePackage.name === chosenPackage.name);
+        });
+    });
+
     // call api to list available packages
     const handlePackagesAvailableSearch = async () => {
         const { data } = await api.getPackages(
@@ -88,8 +96,9 @@ const Packages = ({ defaultArch, ...props }) => {
             packagesSearchName.current
         );
         if (data) {
+            const packagesAvailableFiltered = filterPackagesAvailable(data);
+            sortPackages(packagesAvailableFiltered);
             setPackagesAvailableFound(true);
-            sortPackages(data);
         } else {
             setPackagesAvailableFound(false);
         }

src/test/Components/CreateImageWizard/CreateImageWizard.test.js

@@ -611,6 +611,34 @@ describe('Step Packages', () => {
         // We need to clear this input in order to not have sideeffects on other tests
         await searchForChosenPackages(searchboxChosen, '');
     });
+
+    test('should filter chosen packages from available list', async () => {
+        const searchboxAvailable = screen.getAllByRole('textbox')[0];
+
+        const getPackages = jest
+            .spyOn(api, 'getPackages')
+            .mockImplementation(() => Promise.resolve(mockPkgResult));
+
+        searchboxAvailable.click();
+        await searchForAvailablePackages(searchboxAvailable, 'test');
+        expect(getPackages).toHaveBeenCalledTimes(1);
+
+        const availablePackages = screen.getByTestId('available-pkgs-list');
+        expect(availablePackages.children.length).toEqual(3);
+
+        screen.getByRole('option', { name: /testPkg test package summary/ }).click();
+        screen.getByRole('button', { name: /Add selected/ }).click();
+
+        const chosenPackages = screen.getByTestId('chosen-pkgs-list');
+        expect(availablePackages.children.length).toEqual(2);
+        expect(chosenPackages.children.length).toEqual(1);
+
+        searchboxAvailable.click();
+        await searchForAvailablePackages(searchboxAvailable, 'test');
+        expect(getPackages).toHaveBeenCalledTimes(2);
+        expect(availablePackages.children.length).toEqual(2);
+        expect(chosenPackages.children.length).toEqual(1);
+    });
 });
 
 describe('Step Review', () => {