Wizard: add all/selected toggle buttons to custom repository step

This commit resolves #1201.
It adds a toggle to the repositories step that allows users to toggle
between all and selected repositories.

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'}
                   </Button>
                 </ToolbarItem>
+                <ToolbarItem>
+                  <ToggleGroup aria-label="Filter repositories list">
+                    <ToggleGroupItem
+                      text="All"
+                      aria-label="All repositories"
+                      buttonId="toggle-group-all"
+                      isSelected={toggleSelected === 'toggle-group-all'}
+                      onChange={handleToggleClick}
+                    />
+                    <ToggleGroupItem
+                      text="Selected"
+                      aria-label="Selected repositories"
+                      buttonId="toggle-group-selected"
+                      isSelected={toggleSelected === 'toggle-group-selected'}
+                      onChange={handleToggleClick}
+                    />
+                  </ToggleGroup>
+                </ToolbarItem>
                 <ToolbarItem variant="pagination">
                   <Pagination
                     itemCount={filteredRepositoryURLs.length}
@@ -411,7 +441,6 @@ const Repositories = (props) => {
                   </Thead>
                   <Tbody>
                     {filteredRepositoryURLs
-                      .slice()
                       .sort((a, b) => {
                         if (repositories[a].name < repositories[b].name) {
                           return -1;

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