diff --git a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx index dc691dd8..90773280 100644 --- a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx +++ b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx @@ -19,8 +19,10 @@ import { Popover, Spinner, Stack, + Tab, + Tabs, + TabTitleText, Text, - TextContent, TextInput, ToggleGroup, ToggleGroupItem, @@ -41,6 +43,10 @@ import { useDispatch } from 'react-redux'; import CustomHelperText from './components/CustomHelperText'; import PackageInfoNotAvailablePopover from './components/PackageInfoNotAvailablePopover'; +import { + IncludedReposPopover, + OtherReposPopover, +} from './components/RepoPopovers'; import { CONTENT_URL, @@ -91,9 +97,9 @@ export type GroupWithRepositoryInfo = { package_list: string[]; }; -export enum RepoToggle { - INCLUDED = 'toggle-included-repos', - OTHER = 'toggle-other-repos', +export enum Repos { + INCLUDED = 'included-repos', + OTHER = 'other-repos', } export const RedHatRepository = () => { @@ -151,10 +157,7 @@ const Packages = () => { const [perPage, setPerPage] = useState(10); const [page, setPage] = useState(1); const [toggleSelected, setToggleSelected] = useState('toggle-available'); - - const [toggleSourceRepos, setToggleSourceRepos] = useState( - RepoToggle.INCLUDED - ); + const [activeTabKey, setActiveTabKey] = useState(Repos.INCLUDED); const [searchTerm, setSearchTerm] = useState(''); const [ @@ -259,10 +262,7 @@ const Packages = () => { } } if (debouncedSearchTerm.length > 2) { - if ( - toggleSourceRepos === RepoToggle.INCLUDED && - customRepositories.length > 0 - ) { + if (activeTabKey === Repos.INCLUDED && customRepositories.length > 0) { searchCustomRpms({ apiContentUnitSearchRequest: { search: debouncedSearchTerm, @@ -286,7 +286,7 @@ const Packages = () => { searchCustomRpms, searchDistroRpms, debouncedSearchTerm, - toggleSourceRepos, + activeTabKey, searchRecommendedRpms, epelRepoUrlByDistribution, isSuccessDistroRepositories, @@ -316,10 +316,7 @@ const Packages = () => { }, }); } - if ( - toggleSourceRepos === RepoToggle.INCLUDED && - customRepositories.length > 0 - ) { + if (activeTabKey === Repos.INCLUDED && customRepositories.length > 0) { searchCustomGroups({ apiContentUnitSearchRequest: { search: debouncedSearchTerm.substr(1), @@ -328,7 +325,7 @@ const Packages = () => { }), }, }); - } else if (toggleSourceRepos === RepoToggle.OTHER && isSuccessEpelRepo) { + } else if (activeTabKey === Repos.OTHER && isSuccessEpelRepo) { searchRecommendedGroups({ apiContentUnitSearchRequest: { search: debouncedSearchTerm.substr(1), @@ -342,7 +339,7 @@ const Packages = () => { searchCustomGroups, searchRecommendedGroups, debouncedSearchTerm, - toggleSourceRepos, + activeTabKey, epelRepoUrlByDistribution, ]); @@ -381,7 +378,7 @@ const Packages = () => { } /> - {toggleSourceRepos === RepoToggle.OTHER + {activeTabKey === Repos.OTHER ? 'Searching for recommendations' : 'Searching'} @@ -427,7 +424,7 @@ const Packages = () => { Try looking under " @@ -620,7 +617,7 @@ const Packages = () => { debouncedSearchTerm !== '' && combinedPackageData.length === 0 && isSuccessRecommendedPackages && - toggleSourceRepos === RepoToggle.OTHER + activeTabKey === Repos.OTHER ) { transformedRecommendedData = dataRecommendedPackages!.map((values) => ({ name: values.package_name!, @@ -634,7 +631,7 @@ const Packages = () => { } if (toggleSelected === 'toggle-available') { - if (toggleSourceRepos === RepoToggle.INCLUDED) { + if (activeTabKey === Repos.INCLUDED) { return combinedPackageData.filter( (pkg) => pkg.repository !== 'recommended' ); @@ -648,7 +645,7 @@ const Packages = () => { if (currentlyRemovedPackages.length > 0) { selectedPackages.push(...currentlyRemovedPackages); } - if (toggleSourceRepos === RepoToggle.INCLUDED) { + if (activeTabKey === Repos.INCLUDED) { return selectedPackages.sort((a, b) => sortfn(a.name, b.name, debouncedSearchTerm) ); @@ -667,7 +664,7 @@ const Packages = () => { isSuccessRecommendedPackages, packages, toggleSelected, - toggleSourceRepos, + activeTabKey, ]); const transformedGroups = useMemo(() => { @@ -705,7 +702,7 @@ const Packages = () => { } if (toggleSelected === 'toggle-available') { - if (toggleSourceRepos === RepoToggle.INCLUDED) { + if (activeTabKey === Repos.INCLUDED) { return combinedGroupData.filter( (pkg) => pkg.repository !== 'recommended' ); @@ -716,7 +713,7 @@ const Packages = () => { } } else { const selectedGroups = [...groups]; - if (toggleSourceRepos === RepoToggle.INCLUDED) { + if (activeTabKey === Repos.INCLUDED) { return selectedGroups; } else { return []; @@ -734,7 +731,7 @@ const Packages = () => { isSuccessRecommendedGroups, groups, toggleSelected, - toggleSourceRepos, + activeTabKey, ]); const handleSearch = async ( @@ -742,13 +739,13 @@ const Packages = () => { selection: string ) => { setSearchTerm(selection); - setToggleSourceRepos(RepoToggle.INCLUDED); + setActiveTabKey(Repos.INCLUDED); setToggleSelected('toggle-available'); }; const handleClear = async () => { setSearchTerm(''); - setToggleSourceRepos(RepoToggle.INCLUDED); + setActiveTabKey(Repos.INCLUDED); }; const handleSelect = ( @@ -823,14 +820,6 @@ const Packages = () => { setToggleSelected(id); }; - const handleRepoToggleClick = (type: RepoToggle) => { - if (toggleSourceRepos !== type) { - setCurrentlyRemovedPackages([]); - setPage(1); - setToggleSourceRepos(type); - } - }; - const handleSetPage = (_: React.MouseEvent, newPage: number) => { setPage(newPage); }; @@ -882,6 +871,14 @@ const Packages = () => { setIsRepoModalOpen(!isRepoModalOpen); }; + const handleTabClick = (event: React.MouseEvent, tabIndex: Repos) => { + if (tabIndex !== activeTabKey) { + setCurrentlyRemovedPackages([]); + setPage(1); + setActiveTabKey(tabIndex); + } + }; + const composePkgTable = () => { let rows: ReactElement[] = []; @@ -1071,13 +1068,13 @@ const Packages = () => { return ; case (debouncedSearchTerm && (isLoadingRecommendedPackages || isLoadingRecommendedGroups) && - toggleSourceRepos === RepoToggle.OTHER) || + activeTabKey === Repos.OTHER) || (debouncedSearchTerm && (isLoadingDistroPackages || isLoadingCustomPackages || isLoadingDistroGroups || isLoadingCustomGroups) && - toggleSourceRepos === RepoToggle.INCLUDED): + activeTabKey === Repos.INCLUDED): return ; case debouncedSearchTerm && transformedPackages.length === 0 && @@ -1086,7 +1083,7 @@ const Packages = () => { return ; case debouncedSearchTerm && toggleSelected === 'toggle-selected' && - toggleSourceRepos === RepoToggle.OTHER && + activeTabKey === Repos.OTHER && packages.length > 0 && groups.length > 0: return ; @@ -1111,7 +1108,7 @@ const Packages = () => { packages.length, groups.length, toggleSelected, - toggleSourceRepos, + activeTabKey, transformedPackages, isSelectingPackage, recommendedRepositories, @@ -1119,6 +1116,28 @@ const Packages = () => { transformedGroups.length, ]); + const PackagesTable = () => { + return ( + + + + + + + + + + {bodyContent} +
+ Package name + Description + {toggleSelected === 'toggle-selected' && ( + + )} + Package repositorySupport
+ ); + }; + return ( <> @@ -1182,72 +1201,6 @@ const Packages = () => { /> - - - - Included repos{' '} - - - View packages from the Red Hat repository and - repositories you've selected. - - - } - > - - - - } - buttonId={RepoToggle.INCLUDED} - isSelected={toggleSourceRepos === RepoToggle.INCLUDED} - onChange={() => handleRepoToggleClick(RepoToggle.INCLUDED)} - /> - - Other repos{' '} - - - View packages from popular repositories and your - other repositories not included in the image. - - - } - > - - - - } - buttonId="toggle-other-repos" - isSelected={toggleSourceRepos === RepoToggle.OTHER} - onChange={() => handleRepoToggleClick(RepoToggle.OTHER)} - /> - - { - - - - - - - - - - {bodyContent} -
- Package name - Description - {toggleSelected === 'toggle-selected' && ( - - )} - Package repositorySupport
+ + + Included repos + + } + aria-label="Included repositories" + /> + + Other repos + + } + aria-label="Other repositories" + /> + + { + return ( + + + View packages from the Red Hat repository and repositories + you've selected. + + + } + > + + + ); +}; + +export const OtherReposPopover = () => { + return ( + + + View packages from popular repositories and your other repositories + not included in the image. + + + } + > + + + ); +};