We failed to update the experimental flag in the routing to use the new
useExperimentalFlag hook. This led to the V2 wizard being exposed in
stage-stable. This commit fixes the bug.
Developing a new wizard will require many pull requests and some of them
might even be worked on in parallel. To allow to develop all of that
without interfering with the legacy wizard this commit introduces a new
dev environment alongside an unleash flag when we later want to do the
switch.
To use the new dev en use `npm run stage-beta:experimental` or `npm run
stage-beta:msw+experimental` depending on what you want.
Then unleash flag to toggle in stage and prod is: `image-builder.new-wizard.enabled`
fixes: HMS-2859
When the user clicks on the "create an image" button, the image wizard
shows up replacing the landing page. This allows to keep the quickstart
guides to the right of the wizard while the user is interacting with it.
According to the React documentation[0], a suspense tag is needed to
encapsulate a lazy loaded component. Some bad behavior have been fix in
the UI thanks to that tag (i.e notification popup unclosable after
wizard creation).
[0] https://react.dev/reference/react/lazy#suspense-for-code-splitting
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.
The insights platform is moving to react router v6, meaning router
contexts can no longer be nested. As a result all applications will end
up sharing the same `BrowserRouter`.
Switch to using the release (`/` or `/beta/`) as a basename for the
BrowserRouter, and offload the full path (`/insights/$appname`) to the
individual routes. This makes it easier to drop the BrowserRouter in
image builder for the platform one in future.
This also mitigates the issue where clicking the image-builder nav link
would redirect you to `image-builder/image-builder` if image-builder was
already opened. And `/` didn't catch that path.
React router is moving away from redirects in favor of server side
redirecting since redirects are confusing because the initial "invalid"
route will still return a 200 status and redirecting unnecessarily
wastes resources. Instead of server routing we can also place our
Redirect inside of a Route as an element. Also, instead of using a
Redirect we use a Navigate. This is due to changes in how React Router
handles the history.
In React Router v6 the Route paramater 'exact' is replaced by using a
trailing * to indicate the path matches deeply. Also, elements are now
preferred over components. React, itself, has also been making this
switch. Using elements is simpler than components and integrates
better with hooks.
