Wizard: Update the Repositories step

This updates the Repositories and Review step as per [mocks](https://www.sketch.com/s/d7aa6d29-fca0-4283-a846-09cc5fd10612/a/MyEbDz7).

Repositories with the unavailable or invalid status have a popover that allows for further inspection. The time of the last introspection and the counter of failed attempts was added to the popover, together with the "Go to Repositories" button.

On Recreate the payload repositories are checked against "freshly" fetched list of repositories. In case any of the previously checked repositories is no longer available in content sources an Alert is rendered on both Repositories and Review steps. The unavailable repository is checked, but the checkbox is disabled and the information is dashed out. Since the information about the repository is stored in the Repository type, the only information available to be rendered is the baseurl.

Create image button is also disabled when recreating an image with unavailable repositories.

src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js

@@ -8,7 +8,11 @@ import userEvent from '@testing-library/user-event';
 import api from '../../../api.js';
 import CreateImageWizard from '../../../Components/CreateImageWizard/CreateImageWizard';
 import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal';
-import { mockComposesEmpty } from '../../fixtures/composes';
+import { store } from '../../../store/index.js';
+import {
+  mockComposesEmpty,
+  mockStateRecreateImage,
+} from '../../fixtures/composes';
 import {
   mockPkgResultAlpha,
   mockPkgResultAlphaContentSources,
@@ -19,6 +23,7 @@ import {
   clickBack,
   clickNext,
   renderCustomRoutesWithReduxRouter,
+  renderWithReduxRouter,
   verifyCancelButton,
 } from '../../testUtils';
 
@@ -868,3 +873,104 @@ describe('Step Custom repositories', () => {
     await waitFor(() => expect(rows).toHaveLength(10));
   });
 });
+
+describe('On Recreate', () => {
+  const user = userEvent.setup();
+  const setUp = async () => {
+    jest.mock('../../../store/index.js');
+
+    const state = mockStateRecreateImage;
+
+    store.getState = () => state;
+
+    ({ router } = renderWithReduxRouter(
+      'imagewizard/hyk93673-8dcc-4a61-ac30-e9f4940d8346',
+      state
+    ));
+  };
+
+  const setUpUnavailableRepo = async () => {
+    jest.mock('../../../store/index.js');
+
+    const state = mockStateRecreateImage;
+
+    store.getState = () => state;
+
+    ({ router } = renderWithReduxRouter(
+      'imagewizard/b7193673-8dcc-4a5f-ac30-e9f4940d8346',
+      state
+    ));
+  };
+
+  test('with valid repositories', async () => {
+    await setUp();
+
+    screen.getByRole('heading', { name: /review/i });
+    expect(
+      screen.queryByText('Previously added custom repository unavailable')
+    ).not.toBeInTheDocument();
+
+    const createImageButton = await screen.findByRole('button', {
+      name: /create image/i,
+    });
+    await waitFor(() => expect(createImageButton).toBeEnabled());
+
+    await user.click(
+      await screen.findByRole('button', { name: /custom repositories/i })
+    );
+
+    await screen.findByRole('heading', { name: /custom repositories/i });
+    expect(
+      screen.queryByText('Previously added custom repository unavailable')
+    ).not.toBeInTheDocument();
+
+    const table = await screen.findByTestId('repositories-table');
+
+    const { getAllByRole } = within(table);
+    const rows = getAllByRole('row');
+
+    const availableRepo = rows[1].cells[1];
+    expect(availableRepo).toHaveTextContent(
+      '13lk3http://yum.theforeman.org/releases/3.4/el8/x86_64/'
+    );
+
+    const availableRepoCheckbox = await screen.findByRole('checkbox', {
+      name: /select row 0/i,
+    });
+    expect(availableRepoCheckbox).toBeEnabled();
+  });
+
+  test('with repositories that are no longer available', async () => {
+    await setUpUnavailableRepo();
+
+    screen.getByRole('heading', { name: /review/i });
+    await screen.findByText('Previously added custom repository unavailable');
+
+    const createImageButton = await screen.findByRole('button', {
+      name: /create image/i,
+    });
+    expect(createImageButton).toBeDisabled();
+
+    await user.click(
+      await screen.findByRole('button', { name: /custom repositories/i })
+    );
+
+    await screen.findByRole('heading', { name: /custom repositories/i });
+    await screen.findByText('Previously added custom repository unavailable');
+
+    const table = await screen.findByTestId('repositories-table');
+
+    const { getAllByRole } = within(table);
+    const rows = getAllByRole('row');
+
+    const unavailableRepo = rows[1].cells[1];
+    expect(unavailableRepo).toHaveTextContent(
+      'Repository with the following url is no longer available:http://unreachable.link.to.repo.org/x86_64/'
+    );
+
+    const unavailableRepoCheckbox = await screen.findByRole('checkbox', {
+      name: /select row 0/i,
+    });
+    expect(unavailableRepoCheckbox).toBeDisabled();
+  });
+});