Cluster wizard steps

src/components/App.tsx

@@ -1,21 +1,35 @@
 import React, { Component } from 'react';
-import { Page } from '@patternfly/react-core';
+import { Page, PageSidebar } from '@patternfly/react-core';
 import { Provider } from 'react-redux';
 
 import Header from './ui/Header';
 import BackgroundImage from './ui/BackgroundImage';
 import ClusterWizard from './ClusterWizard';
-import HostsExample from './HostsExample';
+import ClusterWizardSteps from './ClusterWizardSteps';
+// import HostsExample from './HostsExample';
 import { store } from '../store';
+import { WizardStep } from '../models/wizardStep';
 
 class App extends Component {
   render(): JSX.Element {
+    // TODO(jtomasek): This will eventually get passed in as prop from app state
+    const currentStep: WizardStep = WizardStep.AddHosts;
     return (
       <Provider store={store}>
         <BackgroundImage />
-        <Page header={<Header />}>
-          <ClusterWizard />
-          <HostsExample />
+        <Page
+          header={<Header />}
+          sidebar={
+            <PageSidebar
+              nav={<ClusterWizardSteps currentStep={currentStep} />}
+            />
+          }
+          // TODO(jtomasek): enable this to automatically hide sidebar in mobile
+          // view. This requires update to Page.d.ts and Page.js in @patternfly/react-core
+          // isManagedSidebar
+        >
+          <ClusterWizard currentStep={currentStep} />
+          {/* <HostsExample /> */}
         </Page>
       </Provider>
     );

src/components/ClusterWizard.tsx

@@ -1,18 +1,20 @@
 import React, { FC, Fragment } from 'react';
 
-// import BaremetalInventory from './BaremetalInventory';
+import BaremetalInventory from './BaremetalInventory';
 import ClusterWizardNav from './ClusterWizardNav';
-// import ClusterWizardSteps from './ClusterWizardSteps';
 import CreateClusterForm from './createCluster/CreateClusterForm';
+import { WizardStep } from '../models/wizardStep';
 
-const ClusterWizard: FC = (): JSX.Element => (
+interface ClusterWizardProps {
+  currentStep: WizardStep;
+}
+
+const ClusterWizard: FC<ClusterWizardProps> = ({
+  currentStep
+}: ClusterWizardProps): JSX.Element => (
   <Fragment>
-    {/* <ClusterWizardSteps
-      steps={[{ title: 'First' }, { title: 'Second' }]}
-      currentStepIndex={0}
-    /> */}
-    {/* <BaremetalInventory /> */}
-    <CreateClusterForm />
+    {currentStep === WizardStep.ClusterSetup && <CreateClusterForm />}
+    {currentStep === WizardStep.AddHosts && <BaremetalInventory />}
     <ClusterWizardNav />
   </Fragment>
 );

src/components/ClusterWizardSteps.tsx

@@ -1,34 +1,47 @@
 import React, { FC } from 'react';
-import { List, PageSectionVariants } from '@patternfly/react-core';
-import ClusterWizardStep from './ClusterWizardStep';
+import { Nav, NavList, NavItem } from '@patternfly/react-core';
 
-import PageSection from './ui/PageSection';
-
-interface ClusterWizardStep {
-  title: string;
-}
+import { WizardStep } from '../models/wizardStep';
 
 interface ClusterWizardStepsProps {
-  steps: ClusterWizardStep[];
-  currentStepIndex: number;
+  currentStep: WizardStep;
 }
 
 const ClusterWizardSteps: FC<ClusterWizardStepsProps> = ({
-  steps,
-  currentStepIndex
+  currentStep
 }: ClusterWizardStepsProps): JSX.Element => (
-  <PageSection variant={PageSectionVariants.light}>
-    <List variant="inline">
-      {steps.map((step, index) => (
-        <ClusterWizardStep
-          key={index}
-          index={index}
-          currentStepIndex={currentStepIndex}
-          {...step}
-        />
-      ))}
-    </List>
-  </PageSection>
+  <Nav
+    onToggle={() => {}}
+    onSelect={() => {}}
+    aria-label="Cluster deployment wizard steps"
+  >
+    <NavList>
+      <NavItem
+        id="cluster-wizard-steps-cluster-setup"
+        to="#"
+        itemId={0}
+        isActive={currentStep === WizardStep.ClusterSetup}
+      >
+        1. Cluster setup
+      </NavItem>
+      <NavItem
+        id="cluster-wizard-steps-add-hosts"
+        to="#"
+        itemId={1}
+        isActive={currentStep === WizardStep.AddHosts}
+      >
+        2. Add hosts
+      </NavItem>
+      <NavItem
+        id="cluster-wizard-steps-results"
+        to="#"
+        itemId={2}
+        isActive={currentStep === WizardStep.Results}
+      >
+        3. Results
+      </NavItem>
+    </NavList>
+  </Nav>
 );
 
 export default ClusterWizardSteps;

src/components/createCluster/CreateClusterForm.tsx

@@ -69,7 +69,7 @@ class CreateClusterForm extends Component<{}, CreateClusterFormState> {
     return (
       <PageSection variant={PageSectionVariants.light} isMain>
         <Grid gutter="md">
-          <GridItem span={12} md={10} lg={6}>
+          <GridItem span={12} lg={10} xl={6}>
             <TextContent>
               <Text component="h1">Define Cluster</Text>
             </TextContent>

src/models/wizardStep.ts

@@ -0,0 +1,5 @@
+export enum WizardStep {
+  ClusterSetup,
+  AddHosts,
+  Results
+}