wizard: prepare a dev env to create the new wizard

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

config/dev.webpack.config.js

@@ -106,6 +106,29 @@ if (process.env.MSW) {
   plugins[definePluginIndex] = newDefinePlugin;
 }
 
+if (process.env.EXPERIMENTAL) {
+  /*
+  We would like the client to be able to determine whether or not it is in
+  experimental mode at run time based on the value of process.env.EXPERIMENTAL.
+  We can add that variable to process.env via the DefinesPlugin plugin, but
+  DefinePlugin has already been added by config() to the default webpackConfig.
+
+  Therefore, we find it in the `plugins` array based on its type, then update
+  it to add our new process.env.EXPERIMENTAL variable.
+  */
+  const definePluginIndex = plugins.findIndex(
+    (plugin) => plugin instanceof webpack.DefinePlugin
+  );
+  const definePlugin = plugins[definePluginIndex];
+
+  const newDefinePlugin = new webpack.DefinePlugin({
+    ...definePlugin.definitions,
+    'process.env.EXPERIMENTAL': true,
+  });
+
+  plugins[definePluginIndex] = newDefinePlugin;
+}
+
 module.exports = {
   ...webpackConfig,
   plugins,

package.json

@@ -116,7 +116,9 @@
     "prod-stable": "PROXY=true webpack serve --config config/dev.webpack.config.js",
     "stage-stable": "STAGE=true npm run prod-stable",
     "stage-beta": "STAGE=true npm run prod-beta",
+    "stage-beta:experimental": "EXPERIMENTAL=TRUE npm run stage-beta",
     "stage-beta:msw": "MSW=TRUE npm run stage-beta",
+    "stage-beta:msw+experimental": "EXPERIMENTAL=TRUE npm run stage-beta:msw",
     "test": "TZ=UTC jest --verbose --no-cache",
     "test:single": "jest --verbose -w 1",
     "build": "webpack --config config/prod.webpack.config.js",

src/Components/CreateImageWizardV2/CreateImageWizard.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CreateImageWizard = () => {
+  return <></>;
+};
+
+export default CreateImageWizard;

src/Router.js

@@ -11,9 +11,16 @@ const LandingPage = lazy(() => import('./Components/LandingPage/LandingPage'));
 const CreateImageWizard = lazy(() =>
   import('./Components/CreateImageWizard/CreateImageWizard')
 );
+const CreateImageWizardV2 = lazy(() =>
+  import('./Components/CreateImageWizardV2/CreateImageWizard')
+);
 
 export const Router = () => {
   const edgeParityFlag = useFlag('edgeParity.image-list');
+
+  const experimentalWizard =
+    useFlag('image-builder.new-wizard.enabled') ||
+    process.env.EXPERIMENTAL === true;
   return (
     <Routes>
       <Route
@@ -31,7 +38,11 @@ export const Router = () => {
         path="imagewizard/:composeId?"
         element={
           <Suspense>
-            <CreateImageWizard />
+            {experimentalWizard ? (
+              <CreateImageWizardV2 />
+            ) : (
+              <CreateImageWizard />
+            )}
           </Suspense>
         }
       />