From 292d14e36fdff383ef5199307a860ddb312edde8 Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Thu, 25 Nov 2021 11:40:54 +0100
Subject: [PATCH] CreateImageWizard: Show "no package results are found" when
 no packages are found

Fixes #463
---
 .../CreateImageWizard/formComponents/Packages.js  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/Components/CreateImageWizard/formComponents/Packages.js b/src/Components/CreateImageWizard/formComponents/Packages.js
index 64fbb58e..3433c06e 100644
--- a/src/Components/CreateImageWizard/formComponents/Packages.js
+++ b/src/Components/CreateImageWizard/formComponents/Packages.js
@@ -26,7 +26,7 @@ const Packages = ({ defaultArch, ...props }) => {
     const { change, getState } = useFormApi();
     const { input } = useFieldApi(props);
     const packagesSearchName = useRef();
-    const [ packagesAvailable, setPackagesAvailable ] = useState([]);
+    const [ packagesAvailable, setPackagesAvailable ] = useState();
     const [ packagesChosen, setPackagesChosen ] = useState([]);
     const [ filterChosen, setFilterChosen ] = useState('');
     const [ focus, setFocus ] = useState('');
@@ -74,7 +74,7 @@ const Packages = ({ defaultArch, ...props }) => {
     });
 
     const sortPackages = useCallback((packageList) => {
-        const sortResults = packageList.sort(searchResultsComparator(packagesSearchName.current));
+        const sortResults = packageList ? packageList.sort(searchResultsComparator(packagesSearchName.current)) : [];
         setPackagesAvailable(sortResults);
     });
 
@@ -201,10 +201,11 @@ const Packages = ({ defaultArch, ...props }) => {
                     </Button>
                 ] }>
                 <DualListSelectorList data-testid="available-pkgs-list">
-                    {packagesAvailable.length === 0 ? (
+                    {packagesAvailable === undefined || packagesAvailable.length === 0 ? (
                         <p className="pf-u-text-align-center pf-u-mt-md">
-                            Search above to add additional<br />
-                            packages to your image
+                            {!packagesAvailable
+                                ? <>Search above to add additional<br />packages to your image</>
+                                : 'No packages found'}
                         </p>
                     ) : (packagesAvailable.map((pack, index) => {
                         return !pack.isHidden ? (
@@ -224,14 +225,14 @@ const Packages = ({ defaultArch, ...props }) => {
             <DualListSelectorControlsWrapper
                 aria-label="Selector controls">
                 <DualListSelectorControl
-                    isDisabled={ !packagesAvailable.some(option => option.selected) }
+                    isDisabled={ !(packagesAvailable || []).some(option => option.selected) }
                     onClick={ () => moveSelected(true) }
                     aria-label="Add selected"
                     tooltipContent="Add selected">
                     <AngleRightIcon />
                 </DualListSelectorControl>
                 <DualListSelectorControl
-                    isDisabled={ packagesAvailable.length === 0 }
+                    isDisabled={ (packagesAvailable || []).length === 0 }
                     onClick={ () => moveAll(true) }
                     aria-label="Add all"
                     tooltipContent="Add all">