particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Router: Modify /share and /imagewizard routing

Browse source 
Insights offers 'quickstarts', which can be used to provide
mini-tutorials in a sidebar.

Unfortunately, these quickstarts change our URL... they add an optional
query parameter related to the quickstart. The process of doing so
destroys our router's `location`, setting it to undefined.

We have been using the location state to store the GUID of the image,
needed when opening the wizard via the `Recreate image` action or when
opening the share modal.

As a workaround, we can simply accept that the quickstarts will change
our URL and destroy our router's location. Instead, we now put the image
id (its UUID) in the route itself. We can access it in the components as
necessary via the useParams hook.
This commit is contained in:
lucasgarfield 2023-04-17 19:00:46 +02:00 • committed by Lucas Garfield
parent a81fb72523
commit bc1435994d
12 changed files with 176 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/test/Components/ImagesTable/ImagesTable.test.js
View file

@ -7,7 +7,6 @@ import { BrowserRouter } from 'react-router-dom';
import api from '../../../api.js';
import { ImageBuildStatus } from '../../../Components/ImagesTable/ImageBuildStatus';
import ImageLink from '../../../Components/ImagesTable/ImageLink';
import ImagesTable from '../../../Components/ImagesTable/ImagesTable';
import Target from '../../../Components/ImagesTable/Target';
import '@testing-library/jest-dom';
import { RHEL_8 } from '../../../constants.js';
@ -463,7 +462,7 @@ jest.spyOn(api, 'getCloneStatus').mockImplementation((id) => {
describe('Images Table', () => {
const user = userEvent.setup();
test('render ImagesTable', async () => {
const view = renderWithReduxRouter(<ImagesTable />, {});
const view = renderWithReduxRouter('', {});
const table = await screen.findByTestId('images-table');
@ -541,7 +540,7 @@ describe('Images Table', () => {
});
test('check recreate action', async () => {
const { history } = renderWithReduxRouter(<ImagesTable />, {});
const { router } = renderWithReduxRouter('', {});
// get rows
const table = await screen.findByTestId('images-table');
@ -560,17 +559,13 @@ describe('Images Table', () => {
});
await user.click(recreateButton);
expect(history.location.pathname).toBe(
'/insights/image-builder/imagewizard'
expect(router.state.location.pathname).toBe(
`/insights/image-builder/imagewizard/${imageId}`
);
expect(history.location.state.composeRequest).toStrictEqual(
mockComposes.data.find((c) => c.id === imageId).request
);
expect(history.location.state.initialStep).toBe('review');
});
test('check download compose request action', async () => {
renderWithReduxRouter(<ImagesTable />, {});
renderWithReduxRouter('', {});
// get rows
const table = await screen.findByTestId('images-table');
@ -608,7 +603,7 @@ describe('Images Table', () => {
});
test('check expandable row toggle', async () => {
renderWithReduxRouter(<ImagesTable />, {});
renderWithReduxRouter('', {});
const table = await screen.findByTestId('images-table');
const { getAllByRole } = within(table);
@ -632,7 +627,7 @@ describe('Images Table', () => {
});
test('check error details', async () => {
renderWithReduxRouter(<ImagesTable />, {});
renderWithReduxRouter('', {});
const table = await screen.findByTestId('images-table');
const { getAllByRole } = within(table);
@ -656,7 +651,7 @@ describe('Images Table', () => {
describe('Images Table Toolbar', () => {
test('render toolbar', async () => {
renderWithReduxRouter(<ImagesTable />, {});
renderWithReduxRouter('', {});
await screen.findByTestId('images-table');
// check create image button
@ -670,7 +665,7 @@ describe('Images Table Toolbar', () => {
describe('Clones table', () => {
test('renders clones table', async () => {
const view = renderWithReduxRouter(<ImagesTable />);
const view = renderWithReduxRouter('', {});
const table = await screen.findByTestId('images-table');