Template for IstioWizard based in Patternfly 3 React (minimal example to get familiar with the subcomponents)

IstioWizard.tsx

import * as React from 'react';
import { Button, Icon, Wizard } from 'patternfly-react';

type Props = {
  show: boolean;
  onClose: () => void;
};

type State = {
  showWizard: boolean;
  isLoading: boolean;
  activeStepIndex: number;
};

class IstioWizard extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { showWizard: props.show, isLoading: false, activeStepIndex: 0 };
  }

  componentWillReceiveProps(nextProps: Readonly<Props>) {
    this.setState({ showWizard: nextProps.show });
  }

  onHide = () => {
    this.setState({ showWizard: false });
    console.log('Hide IstioWizard');
  };

  onClose = () => {
    this.setState({ showWizard: false });
    this.props.onClose();
    console.log('Close IstioWizard');
  };

  onStep = (step: number) => {
    console.log('onStep ' + step);
    this.setState({ activeStepIndex: step });
  };

  onSubStep = (step: number, substep: string) => {
    console.log('onSubStep ' + step + ' ' + substep);
  };

  onBackButton = () => {
    console.log('onBackButton ');
    this.setState(prevState => {
      return {
        activeStepIndex: prevState.activeStepIndex - 1
      };
    });
  };

  onNextButton = () => {
    console.log('onNextButton');
    this.setState(prevState => {
      return {
        activeStepIndex: prevState.activeStepIndex + 1
      };
    });
  };

  onFinishButton = () => {
    console.log('onFinishButton Save things');
    this.setState({ showWizard: false });
  };

  renderSteps = () => {
    const steps: any[] = [];
    steps.push(
      <Wizard.Step
        key={0}
        stepIndex={0}
        step={0}
        label="0"
        title="Title for Step 0"
        activeStep={this.state.activeStepIndex}
        onClick={this.onStep}
      />
    );
    steps.push(
      <Wizard.Step
        key={1}
        stepIndex={1}
        step={1}
        label="1"
        title="Title for Step 1"
        activeStep={this.state.activeStepIndex}
        onClick={this.onStep}
      />
    );
    steps.push(
      <Wizard.Step
        key={2}
        stepIndex={2}
        step={2}
        label="2"
        title="Title for Step 2"
        activeStep={this.state.activeStepIndex}
        onClick={this.onStep}
      />
    );
    return steps;
  };

  renderSidebarItems = () => {
    const sidebars: any[] = [];
    sidebars.push(
      <Wizard.SidebarGroup key={0} step={0} activeStep={this.state.activeStepIndex}>
        <Wizard.SidebarGroupItem
          key={0}
          stepIndex={0}
          subStepIndex={'0.1'}
          subStep={'0.1'}
          activeSubStep={'0.1'}
          label="0.1"
          title="Title for Step 0.1"
          onClick={this.onSubStep}
        />
      </Wizard.SidebarGroup>
    );
    sidebars.push(
      <Wizard.SidebarGroup key={1} step={1} activeStep={this.state.activeStepIndex}>
        <Wizard.SidebarGroupItem
          key={1}
          stepIndex={1}
          subStepIndex={'1.1'}
          subStep={'1.1'}
          activeSubStep={'1.1'}
          label="1.1"
          title="Title for Step 1.1"
          onClick={this.onSubStep}
        />
      </Wizard.SidebarGroup>
    );
    sidebars.push(
      <Wizard.SidebarGroup key={2} step={2} activeStep={this.state.activeStepIndex}>
        <Wizard.SidebarGroupItem
          key={2}
          stepIndex={2}
          subStepIndex={'2.1'}
          subStep={'2.1'}
          activeSubStep={'2.1'}
          label="2.1"
          title="Title for Step 2.1"
          onClick={this.onSubStep}
        />
      </Wizard.SidebarGroup>
    );
    return sidebars;
  };

  renderContents = () => {
    switch (this.state.activeStepIndex) {
      case 0:
        return (
          <Wizard.Contents key={0} stepIndex={0} step={0} activeStepIndex={0}>
            This is content 0
          </Wizard.Contents>
        );
      case 1:
        return (
          <Wizard.Contents key={1} stepIndex={1} step={1} activeStepIndex={1}>
            This is content 1
          </Wizard.Contents>
        );
      case 2:
        return (
          <Wizard.Contents key={2} stepIndex={2} step={2} activeStepIndex={2}>
            This is content 2
          </Wizard.Contents>
        );
      default:
        return <div>Default content</div>;
    }
  };

  render() {
    console.log('IstioWizard ' + this.state.showWizard + ' Step ' + this.state.activeStepIndex);
    return (
      <Wizard show={this.state.showWizard} onHide={this.onHide}>
        <Wizard.Header onClose={this.onClose} title="Create A/B Traffic Routing" />
        <Wizard.Body>
          <Wizard.Steps steps={this.renderSteps()} />
          <Wizard.Row>
            <Wizard.Sidebar items={this.renderSidebarItems()} />
            <Wizard.Main>{this.renderContents()}</Wizard.Main>
          </Wizard.Row>
        </Wizard.Body>
        <Wizard.Footer>
          <Button bsStyle="default" className="btn-cancel" onClick={this.onClose}>
            Cancel
          </Button>
          <Button bsStyle="default" disabled={this.state.activeStepIndex === 0} onClick={this.onBackButton}>
            <Icon type="fa" name="angle-left" />
            Back
          </Button>
          {(this.state.activeStepIndex === 0 || this.state.activeStepIndex === 1) && (
            <Button bsStyle="primary" onClick={this.onNextButton}>
              Next
              <Icon type="fa" name="angle-right" />
            </Button>
          )}
          {this.state.activeStepIndex === 2 && (
            <Button bsStyle="primary" onClick={this.onFinishButton}>
              Finish
            </Button>
          )}
        </Wizard.Footer>
      </Wizard>
    );
  }
}

export default IstioWizard;