fix(pf4): make wizard more translatable

- name of step is used as key
- substepOf can be now object

Author: rvsia

packages/common/src/wizard/reducer.js

@@ -13,8 +13,10 @@ const createSchema = ({ formOptions, fields }) => {
     schema = [
       ...schema,
       {
+        name: field.name,
         title: field.title,
-        substepOf: field.substepOf,
+        substepOf: field.substepOf?.name || field.substepOf,
+        substepOfTitle: field.substepOf?.title || field.substepOf,
         index,
         primary: !schema[schema.length - 1] || !field.substepOf || field.substepOf !== schema[schema.length - 1].substepOf
       }

packages/pf4-component-mapper/demo/index.js

@@ -24,7 +24,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {schema: selectSchema, additionalOptions: {}} 
+        this.state = {schema: wizardSchema, additionalOptions: {}} 
     }
 
     render() {

packages/pf4-component-mapper/src/files/wizard.d.ts

@@ -47,11 +47,16 @@ export interface WizardButtonsProps {
   selectNext: SelectNextFunction;
 }
 
+export interface SubstepOfObject {
+  name: string;
+  title?: ReactNode;
+}
+
 export interface WizardField {
   name: string | number;
   fields: Field[];
   nextStep?: WizardNextStep;
-  substepOf?: string | number;
+  substepOf?: string | number | SubstepOfObject;
   title?: ReactNode;
   showTitle?: boolean;
   customTitle?: ReactNode;

packages/pf4-component-mapper/src/files/wizard/wizard-nav.js

@@ -30,8 +30,8 @@ const WizardNavigationInternal = React.memo(
 
         return (
           <WizardNavItem
-            key={step.substepOf || step.title}
-            content={step.substepOf || step.title}
+            key={step.substepOf || step.name}
+            content={step.substepOfTitle || step.title}
             isCurrent={substeps ? activeStepIndex >= step.index && activeStepIndex < step.index + substeps.length : activeStepIndex === step.index}
             isDisabled={isValid ? maxStepIndex < step.index : step.index > activeStepIndex}
             onNavItemClick={(ind) => jumpToStep(ind, isValid)}
@@ -41,7 +41,7 @@ const WizardNavigationInternal = React.memo(
               <WizardNav returnList>
                 {substeps.map((substep) => (
                   <WizardNavItem
-                    key={substep.title}
+                    key={substep.name}
                     content={substep.title}
                     isCurrent={activeStepIndex === substep.index}
                     isDisabled={isValid ? maxStepIndex < substep.index : substep.index > activeStepIndex}