Migrate deprecated Wizard component to PF5 and fix Wizard's focus issue

References: https://issues.redhat.com/browse/MTV-1051 https://issues.redhat.com/browse/MTV-1863 1. Migrate the deprecated Wizard component to PF5 - see https://v5-archive.patternfly.org/components/wizard/react-deprecated 2. When moving between steps in plan wizard, set the initial focus to the top of the step's page. Signed-off-by: Sharon Gratch <[email protected]>
kubev2v · Jan 21, 2025 · 9f8cb80 · 9f8cb80
1 parent 3df8b69
commit 9f8cb80
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 56 deletions.
diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
@@ -356,6 +356,7 @@
   "Plan name": "Plan name",
   "Plans": "Plans",
   "Plans for virtualization": "Plans for virtualization",
+  "Plans wizard": "Plans wizard",
   "Please choose a NetworkAttachmentDefinition for data transfer.": "Please choose a NetworkAttachmentDefinition for data transfer.",
   "Please choose a NetworkAttachmentDefinition for default data transfer.": "Please choose a NetworkAttachmentDefinition for default data transfer.",
   "Please choose a target namespace for the migrated virtual machines.": "Please choose a target namespace for the migrated virtual machines.",

diff --git a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/anyValidationErrorExists.ts b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/anyValidationErrorExists.ts
@@ -0,0 +1,4 @@
+import { CreateVmMigrationPageState } from 'src/modules/Providers/views/migrate/types';
+
+export const anyValidationErrorExists = (state: CreateVmMigrationPageState): boolean =>
+  Object.values(state?.validation || []).some((validation) => validation === 'error');
diff --git a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/index.ts b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/index.ts
@@ -1,4 +1,5 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
+export * from './anyValidationErrorExists';
 export * from './getMigrationPhase';
 export * from './getMigrationVmsCounts';
 export * from './getPlanPhase';

diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePage.style.css b/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePage.style.css
@@ -80,6 +80,12 @@
   cursor: pointer;
 }
 
-.forklift--create-plan--wizard-appearance-order {
-  z-index: 1;
+.forklift--create-plan--wizard-content {
+  flex-flow: initial;
+}
+
+.forklift--create-plan--wizard-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePage.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePage.tsx
@@ -1,34 +1,61 @@
-import React, { useReducer } from 'react';
+import React, { FC, useMemo, useReducer } from 'react';
 import { useHistory } from 'react-router';
+import { getResourceUrl } from 'src/modules/Providers/utils/helpers';
 import { useCreateVmMigrationData } from 'src/modules/Providers/views/migrate';
 import ProvidersCreateVmMigrationPage from 'src/modules/Providers/views/migrate/ProvidersCreateVmMigrationPage';
 import { startCreate } from 'src/modules/Providers/views/migrate/reducer/actions';
 import { useFetchEffects } from 'src/modules/Providers/views/migrate/useFetchEffects';
 import { useSaveEffect } from 'src/modules/Providers/views/migrate/useSaveEffect';
+import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
+import {
+  PlanModelRef,
+  ProviderModelGroupVersionKind,
+  ProviderModelRef,
+  V1beta1Provider,
+} from '@kubev2v/types';
 import { useActiveNamespace, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
-import { PageSection, Title } from '@patternfly/react-core';
-import { Wizard } from '@patternfly/react-core/deprecated';
+import { PageSection, Title, Wizard, WizardStep } from '@patternfly/react-core';
+
+import { anyValidationErrorExists } from '../../utils';
 
 import { findProviderByID } from './components';
 import { planCreatePageInitialState, planCreatePageReducer } from './states';
 import { SelectSourceProvider } from './steps';
 
 import './PlanCreatePage.style.css';
 
-export const PlanCreatePage: React.FC<{ namespace: string }> = ({ namespace }) => {
+export const PlanCreatePage: FC<{ namespace: string }> = ({ namespace }) => {
+  const { t } = useForkliftTranslation();
+
   // Get optional initial state context
   const { data } = useCreateVmMigrationData();
   const history = useHistory();
-  const startAtStep = data?.provider !== undefined ? 2 : 1;
+  const createPlanFromPlansList = !(data?.provider !== undefined);
+  const startAtStep = createPlanFromPlansList ? 1 : 2;
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
   const defaultNamespace = process?.env?.DEFAULT_NAMESPACE || 'default';
   const projectName =
     data?.projectName ||
     (activeNamespace === '#ALL_NS#' ? 'openshift-mtv' : activeNamespace) ||
     defaultNamespace;
 
+  const plansListURL = useMemo(() => {
+    return getResourceUrl({
+      reference: PlanModelRef,
+      namespace: namespace,
+      namespaced: namespace !== undefined,
+    });
+  }, [namespace]);
+
+  const providerURL = useMemo(() => {
+    return getResourceUrl({
+      reference: ProviderModelRef,
+      name: data?.provider?.metadata?.name,
+      namespace: data?.provider?.metadata?.namespace,
+    });
+  }, [data?.provider]);
+
   // Init Select source provider form state
   const [filterState, filterDispatch] = useReducer(planCreatePageReducer, {
     ...planCreatePageInitialState,
@@ -59,65 +86,68 @@ export const PlanCreatePage: React.FC<{ namespace: string }> = ({ namespace }) =
   });
   useSaveEffect(state, dispatch);
 
-  const steps = [
-    {
-      id: 'step-1',
-      name: 'Select source provider',
-      component: (
-        <SelectSourceProvider
-          projectName={projectName}
-          filterState={filterState}
-          filterDispatch={filterDispatch}
-          dispatch={dispatch}
-          state={state}
-          providers={providers}
-          selectedProvider={selectedProvider}
-        />
-      ),
-      enableNext: filterState?.selectedVMs?.length > 0,
-    },
-    {
-      id: 'step-2',
-      name: 'Create migration plan',
-      component: (
-        <ProvidersCreateVmMigrationPage
-          state={state}
-          dispatch={dispatch}
-          emptyContext={emptyContext}
-        />
-      ),
-      enableNext:
-        !emptyContext &&
-        !(
-          !!state?.flow?.apiError ||
-          Object.values(state?.validation || []).some((validation) => validation === 'error') ||
-          state?.validation?.planName === 'default'
-        ),
-      canJumpTo: filterState?.selectedVMs?.length > 0,
-      nextButtonText: 'Create migration plan',
-    },
-  ];
+  const anyValidationError = anyValidationErrorExists(state);
+
+  const planNameValidationDefault = useMemo(() => {
+    return state?.validation?.planName === 'default';
+  }, [state?.validation?.planName]);
+
+  const title = t('Plans wizard');
 
-  const title = 'Plans wizard';
   return (
     <>
       <PageSection variant="light">
         <Title headingLevel="h2">{'Create migration plan'}</Title>
       </PageSection>
-
-      <PageSection variant="light">
+      <PageSection variant="light" className="forklift--create-plan--wizard-container">
         <Wizard
-          className="forklift--create-plan--wizard-appearance-order"
-          navAriaLabel={`${title} steps`}
-          mainAriaLabel={`${title} content`}
-          steps={steps}
+          className="forklift--create-plan--wizard-content"
+          shouldFocusContent
+          title={title}
+          startIndex={startAtStep}
+          onClose={() =>
+            history.push(createPlanFromPlansList ? plansListURL : `${providerURL}/vms`)
+          }
           onSave={() => {
             setActiveNamespace(state.underConstruction.projectName);
             dispatch(startCreate());
           }}
-          onClose={() => history.goBack()}
-          startAtStep={startAtStep}
-        />
+        >
+          <WizardStep
+            name={t('Select source provider')}
+            id="step-1"
+            footer={{ isNextDisabled: !filterState?.selectedVMs?.length }}
+          >
+            <SelectSourceProvider
+              projectName={projectName}
+              filterState={filterState}
+              filterDispatch={filterDispatch}
+              dispatch={dispatch}
+              state={state}
+              providers={providers}
+              selectedProvider={selectedProvider}
+            />
+          </WizardStep>
+          <WizardStep
+            name="Create migration plan"
+            id="step-2"
+            isDisabled={!filterState?.selectedVMs?.length}
+            footer={{
+              nextButtonText: t('Create migration plan'),
+              isNextDisabled:
+                emptyContext ||
+                !!state?.flow?.apiError ||
+                anyValidationError ||
+                planNameValidationDefault,
+            }}
+          >
+            <ProvidersCreateVmMigrationPage
+              state={state}
+              dispatch={dispatch}
+              emptyContext={emptyContext}
+            />
+          </WizardStep>
+        </Wizard>
       </PageSection>
     </>
   );