[MTV-2247] Address init wizard setup feedback

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

Author: jpuzz0

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

@@ -340,11 +340,7 @@
   "Multiple NICs on the same network": "Multiple NICs on the same network",
   "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.",
-<<<<<<< HEAD
-=======
-  "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.",
->>>>>>> c1c1c83c ([MTV-2247] Initial new create plan wizard setup)
   "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.",
@@ -444,13 +440,10 @@
   "Plan details": "Plan details",
   "Plan information": "Plan information",
   "Plan name": "Plan name",
-<<<<<<< HEAD
+  "Plan name is required.": "Plan name is required.",
   "Plan name must be a unique within a namespace.": "Plan name must be a unique within a namespace.",
   "Plan name must contain only lowercase alphanumeric characters or '-'": "Plan name must contain only lowercase alphanumeric characters or '-'",
   "Plan name must not be empty": "Plan name must not be empty",
-=======
-  "Plan name is required.": "Plan name is required.",
->>>>>>> c1c1c83c ([MTV-2247] Initial new create plan wizard setup)
   "Plans": "Plans",
   "Plans for virtualization": "Plans for virtualization",
   "Plans wizard": "Plans wizard",

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

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

packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/components/NameTemplate/utils/utils.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
 import { OnConfirmHookType } from 'src/modules/Providers';
-import { setObjectValueByPath, unsetObjectValueByPath } from 'src/utils/utils';
 
 import { k8sUpdate } from '@openshift-console/dynamic-plugin-sdk';
+import { setObjectValueByPath, unsetObjectValueByPath } from '@utils/helpers';
 
 import { EnhancedPlan } from '../../../utils/types';
 

packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/components/SharedDisksDetailsItem/components/MigrateSharedDisksSwitch/MigrateSharedDisksSwitch.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { ModalInputComponentType } from 'src/modules/Providers/modals';
-import { useForkliftTranslation } from 'src/utils/i18n';
-import { safeBoolean } from 'src/utils/utils';
 
 import { Switch } from '@patternfly/react-core';
+import { safeBoolean } from '@utils/helpers';
+import { useForkliftTranslation } from '@utils/i18n';
 
 type SwitchRendererProps = {
   value: string;

packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/components/SharedDisksDetailsItem/utils/helpers.ts

@@ -1,9 +1,9 @@
 import { produce } from 'immer';
 import { OnConfirmHookType } from 'src/modules/Providers/modals';
-import { safeBoolean } from 'src/utils/utils';
 
 import { V1beta1Plan } from '@kubev2v/types';
 import { k8sUpdate } from '@openshift-console/dynamic-plugin-sdk';
+import { safeBoolean } from '@utils/helpers';
 
 import { EnhancedPlan } from '../../../utils/types';
 

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

@@ -1,3 +1,6 @@
 .create-plan-wizard__form {
   width: 66%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-v5-global--spacer--lg);
 }

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

@@ -1,29 +1,29 @@
 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 { isEmpty } from '@utils/helpers';
+import { useForkliftTranslation } from '@utils/i18n';
 
 import { GeneralInformationForm } from './steps/GeneralInformationForm';
-import { defaultCurrentStep, planStepIndexes, planStepNames, PlanWizardStepId } from './constants';
+import { firstStep, planStepNames, planStepOrder, 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 [currentStep, setCurrentStep] = useState<WizardStepType>(firstStep);
+  const { formState, watch } = form;
+  const formValues = watch();
 
   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,
+    isDisabled: currentStep?.index < planStepOrder[id] && !isEmpty(formState?.errors),
   });
 
   return (

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

@@ -2,7 +2,6 @@ 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';
@@ -13,6 +12,7 @@ import {
   WizardFooterProps,
   WizardFooterWrapper,
 } from '@patternfly/react-core';
+import { useForkliftTranslation } from '@utils/i18n';
 
 import { PlanWizardStepId } from './constants';
 
@@ -31,17 +31,29 @@ export const CreatePlanWizardFooter: FC<CreatePlanWizardFooterProps> = ({
     activeStep.id === PlanWizardStepId.MigrationType ||
     activeStep.id === PlanWizardStepId.OtherSettings;
 
-  const onNextClick =
-    (event: MouseEvent<HTMLButtonElement>) => async (goToStep: () => void | Promise<void>) => {
-      if (onNext) {
-        return onNext(event);
-      }
+  const validate = async () => trigger(null, { shouldFocus: true });
 
-      const isValid = await trigger(null, { shouldFocus: true });
-      if (isValid) {
-        goToStep();
-      }
-    };
+  const onNextClick = async (event: MouseEvent<HTMLButtonElement>) => {
+    if (onNext) {
+      return onNext(event);
+    }
+
+    const isValid = await validate();
+    if (isValid) {
+      goToNextStep();
+    }
+  };
+
+  const onSkipToReviewClick = async (event: MouseEvent<HTMLButtonElement>) => {
+    if (onNext) {
+      return onNext(event);
+    }
+
+    const isValid = await validate();
+    if (isValid) {
+      goToStepById(PlanWizardStepId.ReviewAndCreate);
+    }
+  };
 
   const onCancel = () => {
     const plansListURL = getResourceUrl({
@@ -61,19 +73,11 @@ export const CreatePlanWizardFooter: FC<CreatePlanWizardFooterProps> = ({
       >
         {t('Back')}
       </Button>
-      <Button
-        variant={ButtonVariant.primary}
-        onClick={(event) => onNextClick(event)(() => goToNextStep())}
-      >
+      <Button variant={ButtonVariant.primary} onClick={onNextClick}>
         {nextButtonText || t('Next')}
       </Button>
       {canSkipToReview && (
-        <Button
-          variant={ButtonVariant.tertiary}
-          onClick={(event) =>
-            onNextClick(event)(() => goToStepById(PlanWizardStepId.ReviewAndCreate))
-          }
-        >
+        <Button variant={ButtonVariant.tertiary} onClick={onSkipToReviewClick}>
           {t('Skip to review')}
         </Button>
       )}

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

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { useForkliftTranslation } from 'src/utils';
 
 import { PageSection, PageSectionTypes, PageSectionVariants, Title } from '@patternfly/react-core';
+import { useForkliftTranslation } from '@utils/i18n';
 
 import { CreatePlanWizard } from './CreatePlanWizard';
 

packages/forklift-console-plugin/src/plans/create/constants.ts

@@ -1,4 +1,5 @@
-import { t } from 'src/utils/i18n';
+import { WizardStepType } from '@patternfly/react-core';
+import { t } from '@utils/i18n';
 
 export enum PlanWizardStepId {
   BasicSetUp = 'basic-set-up',
@@ -26,17 +27,22 @@ export const planStepNames: Record<PlanWizardStepId, string> = {
   [PlanWizardStepId.ReviewAndCreate]: t('Review and create'),
 };
 
-export const planStepIndexes = Object.values(PlanWizardStepId).reduce(
-  (acc, stepId, index) => ({ ...acc, [stepId]: index + 1 }),
-  {},
-);
+export const planStepOrder: Record<PlanWizardStepId, number> = {
+  [PlanWizardStepId.BasicSetUp]: 1,
+  [PlanWizardStepId.General]: 2,
+  [PlanWizardStepId.VirtualMachines]: 3,
+  [PlanWizardStepId.NetworkMapping]: 4,
+  [PlanWizardStepId.StorageMapping]: 5,
+  [PlanWizardStepId.MigrationType]: 6,
+  [PlanWizardStepId.AdditionalSetUp]: 7,
+  [PlanWizardStepId.OtherSettings]: 8,
+  [PlanWizardStepId.Hooks]: 9,
+  [PlanWizardStepId.ReviewAndCreate]: 10,
+};
 
-export const defaultCurrentStep = {
+export const firstStep: WizardStepType = {
   id: PlanWizardStepId.General,
   parentId: PlanWizardStepId.BasicSetUp,
   name: PlanWizardStepId.General,
-  index: planStepIndexes[PlanWizardStepId.General],
+  index: planStepOrder[PlanWizardStepId.General],
 };
-
-export const warmMigrationLearnMoreLink =
-  'https://docs.redhat.com/en/documentation/migration_toolkit_for_virtualization/2.7/html-single/installing_and_using_the_migration_toolkit_for_virtualization/index#warm-migration_mtv';

packages/forklift-console-plugin/src/plans/create/steps/GeneralInformationForm.tsx

@@ -1,17 +1,16 @@
 import React, { FC } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { FormErrorHelperText } from 'src/components/FormErrorHelperText';
-import { useForkliftTranslation } from 'src/utils';
 
+import { FormErrorHelperText } from '@components/FormErrorHelperText';
 import {
-  Flex,
   Form,
   FormGroup,
   FormSection,
   TextInput,
   Title,
   ValidatedOptions,
 } from '@patternfly/react-core';
+import { useForkliftTranslation } from '@utils/i18n';
 
 import { GeneralFormFieldId, generalFormFieldLabels } from './constants';
 
@@ -23,11 +22,7 @@ export const GeneralInformationForm: FC = () => {
   } = useFormContext();
 
   return (
-    <Flex
-      direction={{ default: 'column' }}
-      spaceItems={{ default: 'spaceItemsLg' }}
-      className="create-plan-wizard__form"
-    >
+    <div className="create-plan-wizard__form">
       <Title headingLevel="h2">{t('General')}</Title>
 
       <Form>
@@ -61,7 +56,7 @@ export const GeneralInformationForm: FC = () => {
           </FormGroup>
         </FormSection>
       </Form>
-    </Flex>
+    </div>
   );
 };
 

packages/forklift-console-plugin/src/plans/create/steps/constants.ts

@@ -1,4 +1,4 @@
-import { t } from 'src/utils/i18n';
+import { t } from '@utils/i18n';
 
 export enum GeneralFormFieldId {
   PlanName = 'plan-name',

packages/forklift-console-plugin/src/utils/docLinks.ts

@@ -0,0 +1,2 @@
+export const warmMigrationLearnMoreLink =
+  'https://docs.redhat.com/en/documentation/migration_toolkit_for_virtualization/2.7/html-single/installing_and_using_the_migration_toolkit_for_virtualization/index#warm-migration_mtv';

packages/forklift-console-plugin/src/utils/utils.ts packages/forklift-console-plugin/src/utils/helpers.ts

@@ -46,3 +46,6 @@ export const unsetObjectValueByPath = (obj: object, path: OpenApiJsonPath) => {
     delete parent[lastKey];
   }
 };
+
+export const isEmpty = (value: object | Array<unknown> | undefined): boolean =>
+  Array.isArray(value) ? value.length === 0 : Object.keys(value || {}).length === 0;

packages/forklift-console-plugin/src/utils/index.ts

@@ -1,8 +1,10 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './constants';
 export * from './deepCopy';
+export * from './docLinks';
 export * from './enums';
 export * from './fetch';
+export * from './helpers';
 export * from './i18n';
 export * from './resources';
 export * from './types';

packages/forklift-console-plugin/tsconfig.json

@@ -25,6 +25,7 @@
 
     "paths": {
       "@utils/*": ["./src/utils/*"],
+      "@components/*": ["./src/components/*"],
       "src/*": ["./src/*"],
       "common/src/*": ["../common/src/*"]
     }
@@ -39,4 +40,4 @@
       "module": "commonjs"
     }
   }
-}
+}