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 }) => { ] }> - {packagesAvailable.length === 0 ? ( + {packagesAvailable === undefined || packagesAvailable.length === 0 ? (

- Search above to add additional
- packages to your image + {!packagesAvailable + ? <>Search above to add additional
packages to your image + : 'No packages found'}

) : (packagesAvailable.map((pack, index) => { return !pack.isHidden ? ( @@ -224,14 +225,14 @@ const Packages = ({ defaultArch, ...props }) => { option.selected) } + isDisabled={ !(packagesAvailable || []).some(option => option.selected) } onClick={ () => moveSelected(true) } aria-label="Add selected" tooltipContent="Add selected"> moveAll(true) } aria-label="Add all" tooltipContent="Add all">