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', () => {