Address initial wizard setup feedback

jpuzz0 · jpuzz0 · commit 357f963893d3 · 2025-03-18T14:41:49.000-04:00
Signed-off-by: Jeff Puzzo &lt;jpuzzo@redhat.com&gt;
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/CreatePlanWizard.style.css b/packages/forklift-console-plugin/src/modules/Plans/views/create/CreatePlanWizard.style.css
@@ -0,0 +1,3 @@
+.create-plan-wizard__form {
+  width: 66%;
+}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/CreatePlanWizard.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/CreatePlanWizard.tsx
@@ -6,83 +6,67 @@ import { Form, Title, Wizard, WizardStep, WizardStepType } from '@patternfly/rea
 
 import { CreatePlanWizardFooter } from './components/CreatePlanWizardFooter';
 import { GeneralInformationForm } from './steps/GeneralInformationForm';
-import {
-  defaultCurrentStep,
-  getPlanWizardStepNames,
-  planStepIndexes,
-  PlanWizardStepId,
-} from './constants';
+import { defaultCurrentStep, planStepIndexes, planStepNames, PlanWizardStepId } from './constants';
+
+import './CreatePlanWizard.style.css';
 
 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 stepNames = getPlanWizardStepNames(t);
 
   const onSubmit = () => console.log('SUBMITTED: ', formValues);
 
-  const isStepDisabled = (stepId: PlanWizardStepId) =>
-    currentStep?.index < planStepIndexes[stepId] && Object.keys(formState?.errors).length > 0;
+  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={({ id: stepId }) => (
-          <CreatePlanWizardFooter canSkipToReview={stepId === PlanWizardStepId.MigrationType} />
-        )}
+        footer={<CreatePlanWizardFooter />}
         onStepChange={(_event, currentStep) => setCurrentStep(currentStep)}
       >
         <WizardStep
-          name={t(stepNames[PlanWizardStepId.BasicSetUp])}
-          id={PlanWizardStepId.BasicSetUp}
+          {...getStepProps(PlanWizardStepId.BasicSetUp)}
           steps={[
-            <WizardStep
-              key={PlanWizardStepId.General}
-              id={PlanWizardStepId.General}
-              name={stepNames[PlanWizardStepId.General]}
-              isDisabled={isStepDisabled(PlanWizardStepId.General)}
-            >
+            <WizardStep key={PlanWizardStepId.General} {...getStepProps(PlanWizardStepId.General)}>
               <GeneralInformationForm />
             </WizardStep>,
             <WizardStep
               key={PlanWizardStepId.VirtualMachines}
-              id={PlanWizardStepId.VirtualMachines}
-              name={stepNames[PlanWizardStepId.VirtualMachines]}
-              isDisabled={isStepDisabled(PlanWizardStepId.VirtualMachines)}
+              {...getStepProps(PlanWizardStepId.VirtualMachines)}
             >
               <Form>
                 <Title headingLevel="h2">{t('Virtual machines')}</Title>
               </Form>
             </WizardStep>,
             <WizardStep
               key={PlanWizardStepId.NetworkMapping}
-              id={PlanWizardStepId.NetworkMapping}
-              name={stepNames[PlanWizardStepId.NetworkMapping]}
-              isDisabled={isStepDisabled(PlanWizardStepId.NetworkMapping)}
+              {...getStepProps(PlanWizardStepId.NetworkMapping)}
             >
               <Form>
                 <Title headingLevel="h2">{t('Network mappings')}</Title>
               </Form>
             </WizardStep>,
             <WizardStep
               key={PlanWizardStepId.StorageMapping}
-              id={PlanWizardStepId.StorageMapping}
-              name={stepNames[PlanWizardStepId.StorageMapping]}
-              isDisabled={isStepDisabled(PlanWizardStepId.StorageMapping)}
+              {...getStepProps(PlanWizardStepId.StorageMapping)}
             >
               <Form>
                 <Title headingLevel="h2">{t('Storage mappings')}</Title>
               </Form>
             </WizardStep>,
             <WizardStep
               key={PlanWizardStepId.MigrationType}
-              id={PlanWizardStepId.MigrationType}
-              name={stepNames[PlanWizardStepId.MigrationType]}
-              isDisabled={isStepDisabled(PlanWizardStepId.MigrationType)}
+              {...getStepProps(PlanWizardStepId.MigrationType)}
             >
               <Form>
                 <Title headingLevel="h2">{t('Migration type')}</Title>
@@ -92,25 +76,17 @@ export const CreatePlanWizard: FC = () => {
         />
 
         <WizardStep
-          name={stepNames[PlanWizardStepId.AdditionalSetUp]}
-          id={PlanWizardStepId.AdditionalSetUp}
+          {...getStepProps(PlanWizardStepId.AdditionalSetUp)}
           steps={[
             <WizardStep
               key={PlanWizardStepId.OtherSettings}
-              id={PlanWizardStepId.OtherSettings}
-              name={stepNames[PlanWizardStepId.OtherSettings]}
-              isDisabled={isStepDisabled(PlanWizardStepId.OtherSettings)}
+              {...getStepProps(PlanWizardStepId.OtherSettings)}
             >
               <Form>
                 <Title headingLevel="h2">{t('Other settings')}</Title>
               </Form>
             </WizardStep>,
-            <WizardStep
-              key={PlanWizardStepId.Hooks}
-              id={PlanWizardStepId.Hooks}
-              name={stepNames[PlanWizardStepId.Hooks]}
-              isDisabled={isStepDisabled(PlanWizardStepId.Hooks)}
-            >
+            <WizardStep key={PlanWizardStepId.Hooks} {...getStepProps(PlanWizardStepId.Hooks)}>
               <Form>
                 <Title headingLevel="h2">{t('Hooks')}</Title>
               </Form>
@@ -119,10 +95,8 @@ export const CreatePlanWizard: FC = () => {
         />
 
         <WizardStep
-          name={stepNames[PlanWizardStepId.ReviewAndCreate]}
-          id={PlanWizardStepId.ReviewAndCreate}
           footer={<CreatePlanWizardFooter nextButtonText={t('Create plan')} onNext={onSubmit} />}
-          isDisabled={isStepDisabled(PlanWizardStepId.ReviewAndCreate)}
+          {...getStepProps(PlanWizardStepId.ReviewAndCreate)}
         >
           <pre>{JSON.stringify(formValues, null, 2)}</pre>
         </WizardStep>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePageV2.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePageV2.tsx
@@ -1,24 +1,31 @@
 import React, { FC } from 'react';
+import { useForkliftTranslation } from 'src/utils';
 
-import { PageSection, Title } from '@patternfly/react-core';
+import { PageSection, PageSectionTypes, PageSectionVariants, Title } from '@patternfly/react-core';
 
 import { CreatePlanWizard } from './CreatePlanWizard';
 
 import './PlanCreatePage.style.css';
 
-export const PlanCreatePageV2: FC = () => (
-  <>
-    <PageSection variant="light">
-      <Title headingLevel="h2">{'Create migration plan'}</Title>
-    </PageSection>
-    <PageSection
-      hasOverflowScroll={true}
-      variant="light"
-      className="forklift--create-plan--wizard-container"
-    >
-      <CreatePlanWizard />
-    </PageSection>
-  </>
-);
+export const PlanCreatePageV2: FC = () => {
+  const { t } = useForkliftTranslation();
+
+  return (
+    <>
+      <PageSection variant={PageSectionVariants.light}>
+        <Title headingLevel="h2">{t('Create migration plan')}</Title>
+      </PageSection>
+
+      <PageSection
+        hasOverflowScroll
+        variant={PageSectionVariants.light}
+        type={PageSectionTypes.wizard}
+        className="forklift--create-plan--wizard-container"
+      >
+        <CreatePlanWizard />
+      </PageSection>
+    </>
+  );
+};
 
 export default PlanCreatePageV2;
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/components/CreatePlanWizardFooter.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/CreatePlanWizardFooter.tsx
@@ -8,19 +8,17 @@ 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'>> & {
-  canSkipToReview?: boolean;
-};
+type CreatePlanWizardFooterProps = Partial<Pick<WizardFooterProps, 'nextButtonText' | 'onNext'>>;
 
 export const CreatePlanWizardFooter: FC<CreatePlanWizardFooterProps> = ({
-  canSkipToReview,
   nextButtonText,
   onNext,
 }) => {
@@ -29,6 +27,9 @@ export const CreatePlanWizardFooter: FC<CreatePlanWizardFooterProps> = ({
   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>) => {
@@ -54,26 +55,29 @@ export const CreatePlanWizardFooter: FC<CreatePlanWizardFooterProps> = ({
   return (
     <WizardFooterWrapper>
       <Button
-        variant="secondary"
+        variant={ButtonVariant.secondary}
         onClick={goToPrevStep}
         isDisabled={activeStep.id === PlanWizardStepId.General}
       >
         {t('Back')}
       </Button>
-      <Button variant="primary" onClick={(event) => onNextClick(event)(() => goToNextStep())}>
+      <Button
+        variant={ButtonVariant.primary}
+        onClick={(event) => onNextClick(event)(() => goToNextStep())}
+      >
         {nextButtonText || t('Next')}
       </Button>
       {canSkipToReview && (
         <Button
-          variant="tertiary"
+          variant={ButtonVariant.tertiary}
           onClick={(event) =>
             onNextClick(event)(() => goToStepById(PlanWizardStepId.ReviewAndCreate))
           }
         >
           {t('Skip to review')}
         </Button>
       )}
-      <Button variant="link" onClick={onCancel}>
+      <Button variant={ButtonVariant.link} onClick={onCancel}>
         {t('Cancel')}
       </Button>
     </WizardFooterWrapper>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/constants.ts b/packages/forklift-console-plugin/src/modules/Plans/views/create/constants.ts
@@ -1,4 +1,4 @@
-import { TFunction } from 'react-i18next';
+import { t } from 'src/utils/i18n';
 
 export enum PlanWizardStepId {
   BasicSetUp = 'basic-set-up',
@@ -13,7 +13,7 @@ export enum PlanWizardStepId {
   ReviewAndCreate = 'review-and-create',
 }
 
-export const getPlanWizardStepNames = (t: TFunction): Record<PlanWizardStepId, string> => ({
+export const planStepNames: Record<PlanWizardStepId, string> = {
   [PlanWizardStepId.BasicSetUp]: t('Basic set up'),
   [PlanWizardStepId.General]: t('General'),
   [PlanWizardStepId.VirtualMachines]: t('Virtual machines'),
@@ -24,7 +24,7 @@ export const getPlanWizardStepNames = (t: TFunction): Record<PlanWizardStepId, s
   [PlanWizardStepId.OtherSettings]: t('Other settings (optional)'),
   [PlanWizardStepId.Hooks]: t('Hooks (optional)'),
   [PlanWizardStepId.ReviewAndCreate]: t('Review and create'),
-});
+};
 
 export const planStepIndexes = Object.values(PlanWizardStepId).reduce(
   (acc, stepId, index) => ({ ...acc, [stepId]: index + 1 }),
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/steps/CreateMigrationPlan/index.ts b/packages/forklift-console-plugin/src/modules/Plans/views/create/steps/CreateMigrationPlan/index.ts
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/steps/GeneralInformationForm.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/steps/GeneralInformationForm.tsx
@@ -3,6 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { useForkliftTranslation } from 'src/utils';
 
 import {
+  Flex,
   Form,
   FormGroup,
   FormSection,
@@ -13,48 +14,50 @@ import {
 
 import { FormErrorHelperText } from '../components/FormErrorHelperText';
 
-import { GeneralFormFieldId, getGeneralFormFieldLabels } from './constants';
+import { GeneralFormFieldId, generalFormFieldLabels } from './constants';
 
 export const GeneralInformationForm: FC = () => {
   const { t } = useForkliftTranslation();
   const {
     control,
     formState: { errors },
   } = useFormContext();
-  const fieldLabels = getGeneralFormFieldLabels(t);
 
   return (
-    <Form className="pf-v5-u-w-66">
+    <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
       <Title headingLevel="h2">{t('General')}</Title>
 
-      <FormSection title={t('Plan information')} titleElement="h3" className="pf-v5-u-mt-0">
-        <p>{t('Name your plan and choose the project you would like it to be created in.')}</p>
-        <FormGroup
-          isRequired
-          fieldId={GeneralFormFieldId.PlanName}
-          label={fieldLabels[GeneralFormFieldId.PlanName]}
-        >
-          <Controller
-            name={GeneralFormFieldId.PlanName}
-            control={control}
-            rules={{
-              required: t('Plan name is required.'),
-            }}
-            render={({ field }) => (
-              <TextInput
-                {...field}
-                validated={
-                  errors[GeneralFormFieldId.PlanName]
-                    ? ValidatedOptions.error
-                    : ValidatedOptions.default
-                }
-              />
-            )}
-          />
-
-          <FormErrorHelperText error={errors[GeneralFormFieldId.PlanName]} />
-        </FormGroup>
-      </FormSection>
-    </Form>
+      <Form className="create-plan-wizard__form">
+        <FormSection title={t('Plan information')} titleElement="h3">
+          <p>{t('Name your plan and choose the project you would like it to be created in.')}</p>
+
+          <FormGroup
+            isRequired
+            fieldId={GeneralFormFieldId.PlanName}
+            label={generalFormFieldLabels[GeneralFormFieldId.PlanName]}
+          >
+            <Controller
+              name={GeneralFormFieldId.PlanName}
+              control={control}
+              rules={{
+                required: t('Plan name is required.'),
+              }}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  validated={
+                    errors[GeneralFormFieldId.PlanName]
+                      ? ValidatedOptions.error
+                      : ValidatedOptions.default
+                  }
+                />
+              )}
+            />
+
+            <FormErrorHelperText error={errors[GeneralFormFieldId.PlanName]} />
+          </FormGroup>
+        </FormSection>
+      </Form>
+    </Flex>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/steps/constants.ts b/packages/forklift-console-plugin/src/modules/Plans/views/create/steps/constants.ts
@@ -1,9 +1,9 @@
-import { TFunction } from 'react-i18next';
+import { t } from 'src/utils/i18n';
 
 export enum GeneralFormFieldId {
   PlanName = 'plan-name',
 }
 
-export const getGeneralFormFieldLabels = (t: TFunction): Record<GeneralFormFieldId, string> => ({
+export const generalFormFieldLabels: Record<GeneralFormFieldId, string> = {
   [GeneralFormFieldId.PlanName]: t('Plan name'),
-});
+};
diff --git a/packages/forklift-console-plugin/src/utils/i18n.tsx b/packages/forklift-console-plugin/src/utils/i18n.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.create-plan-wizard__form {`
	`2`	`+ width: 66%;`
	`3`	`+}`