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 6, 2025 · 02a2181 · 02a2181
1 parent 3df8b69
commit 02a2181
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 52 deletions.
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
@@ -8,8 +8,7 @@ import { useSaveEffect } from 'src/modules/Providers/views/migrate/useSaveEffect
 
 import { ProviderModelGroupVersionKind, 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 { findProviderByID } from './components';
 import { planCreatePageInitialState, planCreatePageReducer } from './states';
@@ -59,65 +58,61 @@ 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 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.goBack()}
           onSave={() => {
             setActiveNamespace(state.underConstruction.projectName);
             dispatch(startCreate());
           }}
-          onClose={() => history.goBack()}
-          startAtStep={startAtStep}
-        />
+        >
+          <WizardStep
+            name="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: 'Create migration plan',
+              isNextDisabled:
+                emptyContext ||
+                !!state?.flow?.apiError ||
+                Object.values(state?.validation || []).some(
+                  (validation) => validation === 'error',
+                ) ||
+                state?.validation?.planName === 'default',
+            }}
+          >
+            <ProvidersCreateVmMigrationPage
+              state={state}
+              dispatch={dispatch}
+              emptyContext={emptyContext}
+            />
+          </WizardStep>
+        </Wizard>
       </PageSection>
     </>
   );