Adding preparing migration page to the Wizard (#24)

Signed-off-by: Montse Ortega <[email protected]>

apps/demo/src/migration-wizard/MigrationWizard.tsx

@@ -4,6 +4,11 @@ import { ConnectStep } from "./steps/connect/ConnectStep";
 import { DiscoveryStep } from "./steps/discovery/DiscoveryStep";
 import { useComputedHeightFromPageHeader } from "./hooks/UseComputedHeightFromPageHeader";
 import { useDiscoverySources } from "./contexts/discovery-sources/Context";
+import { PrepareMigrationStep } from "./steps/prepare-migration/PrepareMigrationStep";
+
+const openAssistedInstaller = (): void => {
+  window.open("https://console.dev.redhat.com/openshift/assisted-installer/clusters/~new?source=assisted_migration", "_blank");
+};
 
 export const MigrationWizard: React.FC = () => {
   const computedHeight = useComputedHeightFromPageHeader();
@@ -30,8 +35,15 @@ export const MigrationWizard: React.FC = () => {
       >
         <DiscoveryStep />
       </WizardStep>
-      <WizardStep name="Plan" id="plan-step" footer={{ isCancelHidden: true }}>
-        <div>Plan step</div>
+      <WizardStep
+        name="Plan"
+        id="plan-step"
+        footer={{
+          nextButtonText: "Let's create a new cluster",
+          onNext: openAssistedInstaller,
+        }}
+      >
+        <PrepareMigrationStep />
       </WizardStep>
     </Wizard>
   );

apps/demo/src/migration-wizard/steps/prepare-migration/PrepareMigrationStep.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import {
+  Stack,
+  StackItem,
+  TextContent,
+  Text,
+  Panel,
+  PanelMain,
+  PanelHeader,
+  List,
+  OrderType,
+  ListItem,
+  Icon,
+  Alert,
+  AlertActionLink,
+  Radio,
+} from "@patternfly/react-core";
+import { ClusterIcon } from "@patternfly/react-icons";
+import { SourcesTable } from "#/migration-wizard/steps/connect/sources-table/SourcesTable";
+import { useDiscoverySources } from "#/migration-wizard/contexts/discovery-sources/Context";
+
+export const PrepareMigrationStep: React.FC = () => {
+  const discoverySourcesContext = useDiscoverySources();
+  const [firstSource, ..._otherSources] = discoverySourcesContext.sources;
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <TextContent>
+          <Text component="h2">Prepare for Migration</Text>
+        </TextContent>
+      </StackItem>
+      <StackItem>
+        <TextContent>
+          <Text component="h3">Migration goal</Text>
+        </TextContent>
+      </StackItem>
+      <StackItem>
+        <Radio
+          id="lets-try"
+          label="Let's try"
+          name="lets-try"
+          description="Starting with a minimal cluster to try our migration flows and Openshift Virtualization. (20 VMs or up to cluster capacity limitations)"
+          checked
+        />
+      </StackItem>
+      <StackItem>
+        <Radio
+          id="feel-good"
+          label="Feeling good"
+          name="feel-good"
+          description="Create a cluster that can support a medium migration scale (500 VMs or up to cluster capacity limitations)"
+          isDisabled
+        />
+      </StackItem>
+      <StackItem>
+        <Radio
+          id="got-this"
+          label="I got this"
+          name="got-this"
+          description="Create a cluster that can support a big migration scale (5000 VMs or up to cluster capacity limitations)"
+          isDisabled
+        />
+      </StackItem>
+      <StackItem>
+        <TextContent style={{ paddingBlock: "1rem" }}>
+          <Text component="h3">Target cluster</Text>
+        </TextContent>
+      </StackItem>
+      <StackItem>
+        <Radio
+          id="new-cluster"
+          label="New cluster"
+          name="new-cluster"
+          description="Let's use our OpenShift assisted installer to create a new bare metal cluster"
+          checked
+        />
+      </StackItem>
+      <StackItem>
+        <Radio
+          id="use-existing-cluster"
+          label="Use existing cluster"
+          name="use-existing-cluster"
+          description="Choose one of your Openshift cluster"
+          isDisabled
+        />
+      </StackItem>
+      <StackItem>
+        <Radio
+          id="use-sandbox"
+          label="Use Openshift developer sandbox (Coming Soon)"
+          name="use-sandabox"
+          description=""
+          isDisabled
+        />
+      </StackItem>
+    </Stack>
+  );
+};
+
+PrepareMigrationStep.displayName = "PrepareMigrationStep";