[MTV-2247] Initial new create plan wizard setup

Signed-off-by: Jeff Puzzo <[email protected]>

Author: jpuzz0

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -70,6 +70,7 @@
   "Add mapping": "Add mapping",
   "Add passphrase": "Add passphrase",
   "Add source and target providers for the migration.": "Add source and target providers for the migration.",
+  "Additional set up": "Additional set up",
   "All discovered networks have been mapped to the default network.": "All discovered networks have been mapped to the default network.",
   "All discovered storages have been mapped to the default storage.": "All discovered storages have been mapped to the default storage.",
   "All networks detected on the selected VMs require a mapping.": "All networks detected on the selected VMs require a mapping.",
@@ -90,7 +91,9 @@
   "At least one source and one target provider in the {{name}} project must be available.": "At least one source and one target provider in the {{name}} project must be available.",
   "At least one source and one target provider must be available.": "At least one source and one target provider must be available.",
   "Authentication type": "Authentication type",
+  "Back": "Back",
   "Bandwidth": "Bandwidth",
+  "Basic set up": "Basic set up",
   "Boot from first root device": "Boot from first root device",
   "Boot from the first hard drive": "Boot from the first hard drive",
   "Boot from the first partition on the first hard drive": "Boot from the first partition on the first hard drive",
@@ -142,6 +145,7 @@
   "Create NetworkMap": "Create NetworkMap",
   "Create new namespace:": "Create new namespace:",
   "Create new provider": "Create new provider",
+  "Create plan": "Create plan",
   "Create Plan": "Create Plan",
   "Create provider": "Create provider",
   "Create Provider": "Create Provider",
@@ -253,12 +257,14 @@
   "First root device": "First root device",
   "Flavor": "Flavor",
   "Folder": "Folder",
+  "General": "General",
   "Go to providers list": "Go to providers list",
   "GPUs/Host Devices": "GPUs/Host Devices",
   "Hide from view": "Hide from view",
   "Hide values": "Hide values",
   "Hide variables": "Hide variables",
   "Hooks": "Hooks",
+  "Hooks (optional)": "Hooks (optional)",
   "Hooks for virtualization": "Hooks for virtualization",
   "Host": "Host",
   "Host cluster": "Host cluster",
@@ -335,6 +341,7 @@
   "Name": "Name",
   "Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.": "Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.",
   "Name is required and must be a unique within a namespace and valid Kubernetes name.": "Name is required and must be a unique within a namespace and valid Kubernetes name.",
+  "Name your plan and choose the project you would like it to be created in.": "Name your plan and choose the project you would like it to be created in.",
   "Namespace": "Namespace",
   "Namespace defines the space within which each name must be unique.\n               An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n               Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty.": "Namespace defines the space within which each name must be unique.\n               An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n               Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty.",
   "Namespace defines the space within which each name must be unique.\n     An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n     Not all objects are required to be scoped to a namespace -\n     the value of this field for those objects will be empty.": "Namespace defines the space within which each name must be unique.\n     An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n     Not all objects are required to be scoped to a namespace -\n     the value of this field for those objects will be empty.",
@@ -344,6 +351,7 @@
   "Network interfaces": "Network interfaces",
   "Network Map name re-generated": "Network Map name re-generated",
   "Network map:": "Network map:",
+  "Network mapping": "Network mapping",
   "Network mapping is empty, make sure no mappings are required for this migration plan.": "Network mapping is empty, make sure no mappings are required for this migration plan.",
   "Network mappings": "Network mappings",
   "Network mappings have been re-generated": "Network mappings have been re-generated",
@@ -359,6 +367,7 @@
   "Networks used by the selected VMs": "Networks used by the selected VMs",
   "New name was generated for the Network Map due to naming conflict.": "New name was generated for the Network Map due to naming conflict.",
   "New name was generated for the Storage Map due to naming conflict.": "New name was generated for the Storage Map due to naming conflict.",
+  "Next": "Next",
   "NICs with empty NIC profile": "NICs with empty NIC profile",
   "No concerns found for this virtual machine.": "No concerns found for this virtual machine.",
   "No credentials found.": "No credentials found.",
@@ -417,6 +426,8 @@
   "Operator": "Operator",
   "Operator conditions define the current state of the controller": "Operator conditions define the current state of the controller",
   "Other networks present on the source provider ": "Other networks present on the source provider ",
+  "Other settings": "Other settings",
+  "Other settings (optional)": "Other settings (optional)",
   "Other storages present on the source provider ": "Other storages present on the source provider ",
   "OvaPath": "OvaPath",
   "Overview": "Overview",
@@ -428,7 +439,9 @@
   "Phase": "Phase",
   "Pipeline status": "Pipeline status",
   "Plan details": "Plan details",
+  "Plan information": "Plan information",
   "Plan name": "Plan name",
+  "Plan name is required.": "Plan name is required.",
   "Plans": "Plans",
   "Plans for virtualization": "Plans for virtualization",
   "Plans wizard": "Plans wizard",
@@ -487,6 +500,7 @@
   "Restore default columns": "Restore default columns",
   "Return to the providers list page": "Return to the providers list page",
   "Reveal values": "Reveal values",
+  "Review and create": "Review and create",
   "Root device": "Root device",
   "Run the migration plan.": "Run the migration plan.",
   "Running": "Running",
@@ -520,6 +534,7 @@
   "Show the welcome card": "Show the welcome card",
   "Show variables": "Show variables",
   "Skip certificate validation": "Skip certificate validation",
+  "Skip to review": "Skip to review",
   "Skip VMware Virtual Disk Development Kit (VDDK) SDK acceleration (not recommended).": "Skip VMware Virtual Disk Development Kit (VDDK) SDK acceleration (not recommended).",
   "Snapshot polling interval (seconds)": "Snapshot polling interval (seconds)",
   "Some VMs Failed": "Some VMs Failed",
@@ -543,6 +558,7 @@
   "Storage domains": "Storage domains",
   "Storage Map name re-generated": "Storage Map name re-generated",
   "Storage map:": "Storage map:",
+  "Storage mapping": "Storage mapping",
   "Storage mapping is empty, make sure no mappings are required for this migration plan.": "Storage mapping is empty, make sure no mappings are required for this migration plan.",
   "Storage mappings": "Storage mappings",
   "Storage mappings have been re-generated": "Storage mappings have been re-generated",

packages/forklift-console-plugin/package.json

@@ -44,6 +44,7 @@
     "node-forge": "^1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-hook-form": "^7.54.2",
     "react-i18next": "^11.14.3",
     "react-linkify": "^1.0.0-alpha",
     "react-router": "5.3.x",
@@ -53,6 +54,7 @@
   "devDependencies": {
     "@openshift-console/dynamic-plugin-sdk-webpack": "1.3.0",
     "@types/ejs": "^3.1.5",
+    "@types/i18next": "^11.9.3",
     "@types/jsonpath": "^0.2.4",
     "@types/jsrsasign": "10.5.14",
     "@types/luxon": "^3.4.2",

packages/forklift-console-plugin/src/components/FormErrorHelperText.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { FieldError } from 'react-hook-form';
+
+import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+
+type FormErrorHelperTextProps = {
+  error: Partial<FieldError>;
+};
+
+export const FormErrorHelperText: FC<FormErrorHelperTextProps> = ({ error }) => {
+  return error ? (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+          {error?.message?.toString()}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  ) : null;
+};

packages/forklift-console-plugin/src/modules/Plans/dynamic-plugin.ts

@@ -12,6 +12,7 @@ import type { ConsolePluginBuildMetadata } from '@openshift-console/dynamic-plug
 export const exposedModules: ConsolePluginBuildMetadata['exposedModules'] = {
   PlansListPage: './modules/Plans/views/list/PlansListPage',
   PlanCreatePage: './modules/Plans/views/create/PlanCreatePage',
+  PlanCreatePageV2: './plans/create/PlanCreatePage',
   PlanDetailsPage: './modules/Plans/views/details/PlanDetailsPage',
 };
 
@@ -64,6 +65,17 @@ export const extensions: EncodedExtension[] = [
     },
   } as EncodedExtension<CreateResource>,
 
+  {
+    type: 'console.page/route',
+    properties: {
+      exact: false,
+      path: ['/mtv/create/plan'],
+      component: {
+        $codeRef: 'PlanCreatePageV2',
+      },
+    },
+  },
+
   {
     type: 'console.model-metadata',
     properties: {

packages/forklift-console-plugin/src/modules/Plans/views/create/steps/CreateMigrationPlan/index.ts

@@ -0,0 +1,3 @@
+.create-plan-wizard__form {
+  width: 66%;
+}

packages/forklift-console-plugin/src/plans/create/CreatePlanWizard.style.scss

@@ -0,0 +1,108 @@
+import React, { FC, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useForkliftTranslation } from 'src/utils';
+
+import { Form, Title, Wizard, WizardStep, WizardStepType } from '@patternfly/react-core';
+
+import { GeneralInformationForm } from './steps/GeneralInformationForm';
+import { defaultCurrentStep, planStepIndexes, planStepNames, PlanWizardStepId } from './constants';
+import { CreatePlanWizardFooter } from './CreatePlanWizardFooter';
+
+import './CreatePlanWizard.style.scss';
+
+export const CreatePlanWizard: FC = () => {
+  const { t } = useForkliftTranslation();
+  const form = useForm({ mode: 'onChange' });
+  const [currentStep, setCurrentStep] = useState<WizardStepType>(defaultCurrentStep);
+  const { formState, getValues } = form;
+  const formValues = getValues();
+
+  const onSubmit = () => console.log('SUBMITTED: ', formValues);
+
+  const getStepProps = (id: PlanWizardStepId) => ({
+    id,
+    name: planStepNames[id],
+    isDisabled:
+      currentStep?.index < planStepIndexes[id] && Object.keys(formState?.errors).length > 0,
+  });
+
+  return (
+    <FormProvider {...form}>
+      <Wizard
+        isVisitRequired
+        title={t('Create migration plan')}
+        footer={<CreatePlanWizardFooter />}
+        onStepChange={(_event, currentStep) => setCurrentStep(currentStep)}
+      >
+        <WizardStep
+          {...getStepProps(PlanWizardStepId.BasicSetUp)}
+          steps={[
+            <WizardStep key={PlanWizardStepId.General} {...getStepProps(PlanWizardStepId.General)}>
+              <GeneralInformationForm />
+            </WizardStep>,
+            <WizardStep
+              key={PlanWizardStepId.VirtualMachines}
+              {...getStepProps(PlanWizardStepId.VirtualMachines)}
+            >
+              <Form>
+                <Title headingLevel="h2">{t('Virtual machines')}</Title>
+              </Form>
+            </WizardStep>,
+            <WizardStep
+              key={PlanWizardStepId.NetworkMapping}
+              {...getStepProps(PlanWizardStepId.NetworkMapping)}
+            >
+              <Form>
+                <Title headingLevel="h2">{t('Network mappings')}</Title>
+              </Form>
+            </WizardStep>,
+            <WizardStep
+              key={PlanWizardStepId.StorageMapping}
+              {...getStepProps(PlanWizardStepId.StorageMapping)}
+            >
+              <Form>
+                <Title headingLevel="h2">{t('Storage mappings')}</Title>
+              </Form>
+            </WizardStep>,
+            <WizardStep
+              key={PlanWizardStepId.MigrationType}
+              {...getStepProps(PlanWizardStepId.MigrationType)}
+            >
+              <Form>
+                <Title headingLevel="h2">{t('Migration type')}</Title>
+              </Form>
+            </WizardStep>,
+          ]}
+        />
+
+        <WizardStep
+          {...getStepProps(PlanWizardStepId.AdditionalSetUp)}
+          steps={[
+            <WizardStep
+              key={PlanWizardStepId.OtherSettings}
+              {...getStepProps(PlanWizardStepId.OtherSettings)}
+            >
+              <Form>
+                <Title headingLevel="h2">{t('Other settings')}</Title>
+              </Form>
+            </WizardStep>,
+            <WizardStep key={PlanWizardStepId.Hooks} {...getStepProps(PlanWizardStepId.Hooks)}>
+              <Form>
+                <Title headingLevel="h2">{t('Hooks')}</Title>
+              </Form>
+            </WizardStep>,
+          ]}
+        />
+
+        <WizardStep
+          footer={<CreatePlanWizardFooter nextButtonText={t('Create plan')} onNext={onSubmit} />}
+          {...getStepProps(PlanWizardStepId.ReviewAndCreate)}
+        >
+          <pre>{JSON.stringify(formValues, null, 2)}</pre>
+        </WizardStep>
+      </Wizard>
+    </FormProvider>
+  );
+};
+
+export default CreatePlanWizard;

packages/forklift-console-plugin/src/plans/create/CreatePlanWizard.tsx

@@ -0,0 +1,87 @@
+import React, { FC, MouseEvent } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useHistory } from 'react-router';
+import { getResourceUrl } from 'src/modules';
+import { useForkliftTranslation } from 'src/utils';
+
+import { PlanModelRef } from '@kubev2v/types';
+import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  Button,
+  ButtonVariant,
+  useWizardContext,
+  WizardFooterProps,
+  WizardFooterWrapper,
+} from '@patternfly/react-core';
+
+import { PlanWizardStepId } from './constants';
+
+type CreatePlanWizardFooterProps = Partial<Pick<WizardFooterProps, 'nextButtonText' | 'onNext'>>;
+
+export const CreatePlanWizardFooter: FC<CreatePlanWizardFooterProps> = ({
+  nextButtonText,
+  onNext,
+}) => {
+  const history = useHistory();
+  const { t } = useForkliftTranslation();
+  const [activeNamespace] = useActiveNamespace();
+  const { trigger } = useFormContext();
+  const { activeStep, goToNextStep, goToPrevStep, goToStepById } = useWizardContext();
+  const canSkipToReview =
+    activeStep.id === PlanWizardStepId.MigrationType ||
+    activeStep.id === PlanWizardStepId.OtherSettings;
+
+  const onNextClick =
+    (event: MouseEvent<HTMLButtonElement>) => async (goToStep: () => void | Promise<void>) => {
+      if (onNext) {
+        return onNext(event);
+      }
+
+      const isValid = await trigger(null, { shouldFocus: true });
+      if (isValid) {
+        goToStep();
+      }
+    };
+
+  const onCancel = () => {
+    const plansListURL = getResourceUrl({
+      reference: PlanModelRef,
+      namespace: activeNamespace,
+    });
+
+    history.push(plansListURL);
+  };
+
+  return (
+    <WizardFooterWrapper>
+      <Button
+        variant={ButtonVariant.secondary}
+        onClick={goToPrevStep}
+        isDisabled={activeStep.id === PlanWizardStepId.General}
+      >
+        {t('Back')}
+      </Button>
+      <Button
+        variant={ButtonVariant.primary}
+        onClick={(event) => onNextClick(event)(() => goToNextStep())}
+      >
+        {nextButtonText || t('Next')}
+      </Button>
+      {canSkipToReview && (
+        <Button
+          variant={ButtonVariant.tertiary}
+          onClick={(event) =>
+            onNextClick(event)(() => goToStepById(PlanWizardStepId.ReviewAndCreate))
+          }
+        >
+          {t('Skip to review')}
+        </Button>
+      )}
+      <Button variant={ButtonVariant.link} onClick={onCancel}>
+        {t('Cancel')}
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+export default CreatePlanWizardFooter;