diff --git a/src/Components/CreateImageWizard/formComponents/Repositories.js b/src/Components/CreateImageWizard/formComponents/Repositories.js index 45e964d5d..90a6a9289 100644 --- a/src/Components/CreateImageWizard/formComponents/Repositories.js +++ b/src/Components/CreateImageWizard/formComponents/Repositories.js @@ -21,6 +21,8 @@ import { ToolbarItem, EmptyStateHeader, EmptyStateFooter, + ToggleGroup, + ToggleGroupItem, } from '@patternfly/react-core'; import { Dropdown, @@ -195,6 +197,7 @@ const Repositories = (props) => { const [filterValue, setFilterValue] = useState(''); const [perPage, setPerPage] = useState(10); const [page, setPage] = useState(1); + const [toggleSelected, setToggleSelected] = useState('toggle-group-all'); const [selected, setSelected] = useState( getState()?.values?.['payload-repositories'] ? getState().values['payload-repositories'].map((repo) => repo.baseurl) @@ -251,6 +254,12 @@ const Repositories = (props) => { return data ? initializeRepositories(data.data) : {}; }, [firstRequest.data, followupRequest.data]); + const handleToggleClick = (event, _isSelected) => { + const id = event.currentTarget.id; + setPage(1); + setToggleSelected(id); + }; + const isRepoSelected = (repoURL) => selected.includes(repoURL); const handlePerPageSelect = (event, newPerPage, newPage) => { @@ -269,14 +278,17 @@ const Repositories = (props) => { }; const filteredRepositoryURLs = useMemo(() => { - const filteredRepoURLs = Object.values(repositories) - .filter((repo) => - repo.name.toLowerCase().includes(filterValue.toLowerCase()) - ) - .map((repo) => repo.url); - - return filteredRepoURLs; - }, [filterValue, repositories]); + const repoUrls = Object.values(repositories).filter((repo) => + repo.name.toLowerCase().includes(filterValue.toLowerCase()) + ); + if (toggleSelected === 'toggle-group-all') { + return repoUrls.map((repo) => repo.url); + } else if (toggleSelected === 'toggle-group-selected') { + return repoUrls + .filter((repo) => isRepoSelected(repo.url)) + .map((repo) => repo.url); + } + }, [filterValue, repositories, toggleSelected]); const handleClearFilter = () => { setFilterValue(''); @@ -382,6 +394,24 @@ const Repositories = (props) => { {isFetching ? 'Refreshing' : 'Refresh'} + + + + + + { {filteredRepositoryURLs - .slice() .sort((a, b) => { if (repositories[a].name < repositories[b].name) { return -1; diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js index cd9096e7b..151fd49d1 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js @@ -826,8 +826,8 @@ describe('Step Custom repositories', () => { await setUp(); await user.click( - await screen.findByRole('button', { - name: /select/i, + screen.getByRole('button', { + name: /^select$/i, }) ); @@ -861,6 +861,120 @@ describe('Step Custom repositories', () => { await waitFor(() => expect(rows).toHaveLength(10)); }); + + test('press on Selected button to see selected repositories list', async () => { + await setUp(); + + const getFirstRepoCheckbox = async () => + await screen.findByRole('checkbox', { + name: /select row 0/i, + }); + const firstRepoCheckbox = await getFirstRepoCheckbox(); + + expect(firstRepoCheckbox.checked).toEqual(false); + await user.click(firstRepoCheckbox); + expect(firstRepoCheckbox.checked).toEqual(true); + + const getSelectedButton = async () => + await screen.findByRole('button', { + name: /selected repositories/i, + }); + + const selectedButton = await getSelectedButton(); + await user.click(selectedButton); + + expect(firstRepoCheckbox.checked).toEqual(true); + + await clickNext(); + clickBack(); + expect(firstRepoCheckbox.checked).toEqual(true); + }); + + test('press on All button to see all repositories list', async () => { + await setUp(); + + const getFirstRepoCheckbox = async () => + await screen.findByRole('checkbox', { + name: /select row 0/i, + }); + const firstRepoCheckbox = await getFirstRepoCheckbox(); + + const getSecondRepoCheckbox = async () => + await screen.findByRole('checkbox', { + name: /select row 1/i, + }); + const secondRepoCheckbox = await getSecondRepoCheckbox(); + + expect(firstRepoCheckbox.checked).toEqual(false); + expect(secondRepoCheckbox.checked).toEqual(false); + await user.click(firstRepoCheckbox); + expect(firstRepoCheckbox.checked).toEqual(true); + expect(secondRepoCheckbox.checked).toEqual(false); + + const getAllButton = async () => + await screen.findByRole('button', { + name: /all repositories/i, + }); + + const allButton = await getAllButton(); + await user.click(allButton); + + expect(firstRepoCheckbox.checked).toEqual(true); + expect(secondRepoCheckbox.checked).toEqual(false); + + await clickNext(); + clickBack(); + + expect(firstRepoCheckbox.checked).toEqual(true); + expect(secondRepoCheckbox.checked).toEqual(false); + }); + + test('press on Selected button to see selected repositories list at the second page and filter checked repo', async () => { + await setUp(); + + const getFirstRepoCheckbox = async () => + await screen.findByRole('checkbox', { + name: /select row 0/i, + }); + + const firstRepoCheckbox = await getFirstRepoCheckbox(); + + const getNextPageButton = async () => + screen.getByRole('button', { + name: /go to next page/i, + }); + + const nextPageButton = await getNextPageButton(); + + expect(firstRepoCheckbox.checked).toEqual(false); + await user.click(firstRepoCheckbox); + expect(firstRepoCheckbox.checked).toEqual(true); + + await user.click(nextPageButton); + + const getSelectedButton = async () => + await screen.findByRole('button', { + name: /selected repositories/i, + }); + + const selectedButton = await getSelectedButton(); + await user.click(selectedButton); + + expect(firstRepoCheckbox.checked).toEqual(true); + + await user.type( + await screen.findByRole('textbox', { name: /search repositories/i }), + '13lk3' + ); + + expect(firstRepoCheckbox.checked).toEqual(true); + + await clickNext(); + clickBack(); + expect(firstRepoCheckbox.checked).toEqual(true); + await user.click(firstRepoCheckbox); + expect(firstRepoCheckbox.checked).toEqual(false); + }); }); describe('On Recreate', () => {