Skip to content
This repository has been archived by the owner on Apr 30, 2023. It is now read-only.

Cluster wizard steps #22

Merged
merged 2 commits into from
Feb 18, 2019
Merged

Cluster wizard steps #22

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8412141
Implement cluster wizard steps sidebar according to the wireframes
Feb 14, 2019
78f06d3
Introduce WizardStep enum to track wizard steps
Feb 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions src/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,33 @@
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';

class App extends Component {
render(): JSX.Element {
const currentStep = 1;
return (
<Provider store={store}>
<BackgroundImage />
<Page header={<Header />}>
<ClusterWizard />
<HostsExample />
<Page
header={<Header />}
sidebar={
<PageSidebar
nav={<ClusterWizardSteps currentStepIndex={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 currentStepIndex={currentStep} />
{/* <HostsExample /> */}
</Page>
</Provider>
);
Expand Down
19 changes: 10 additions & 9 deletions src/components/ClusterWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
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';

const ClusterWizard: FC = (): JSX.Element => (
interface ClusterWizardProps {
currentStepIndex: number;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we still use a more concrete type to represent the wizard step?

E.g.:

enum WizardStep {
    One,
    Two
}

let step: WizardStep = WizardStep.One;

It gives you much nicer comparisons:

if (step === WizardStep.One) {
    
}

Instead of comparing against numbers.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

}

const ClusterWizard: FC<ClusterWizardProps> = ({
currentStepIndex
}: ClusterWizardProps): JSX.Element => (
<Fragment>
{/* <ClusterWizardSteps
steps={[{ title: 'First' }, { title: 'Second' }]}
currentStepIndex={0}
/> */}
{/* <BaremetalInventory /> */}
<CreateClusterForm />
{currentStepIndex === 0 && <CreateClusterForm />}
{currentStepIndex === 1 && <BaremetalInventory />}
<ClusterWizardNav />
</Fragment>
);
Expand Down
27 changes: 0 additions & 27 deletions src/components/ClusterWizardStep.tsx
View file
Open in desktop

This file was deleted.

55 changes: 33 additions & 22 deletions src/components/ClusterWizardSteps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,45 @@
import React, { FC } from 'react';
import { List, PageSectionVariants } from '@patternfly/react-core';
import ClusterWizardStep from './ClusterWizardStep';

import PageSection from './ui/PageSection';

interface ClusterWizardStep {
title: string;
}
import { Nav, NavList, NavItem } from '@patternfly/react-core';

interface ClusterWizardStepsProps {
steps: ClusterWizardStep[];
currentStepIndex: number;
}

const ClusterWizardSteps: FC<ClusterWizardStepsProps> = ({
steps,
currentStepIndex
}: 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={currentStepIndex === 0}
>
1. Cluster setup
</NavItem>
<NavItem
id="cluster-wizard-steps-add-hosts"
to="#"
itemId={1}
isActive={currentStepIndex === 1}
>
2. Add hosts
</NavItem>
<NavItem
id="cluster-wizard-steps-results"
to="#"
itemId={2}
isActive={currentStepIndex === 2}
>
3. Results
</NavItem>
</NavList>
</Nav>
);

export default ClusterWizardSteps;
2 changes: 1 addition & 1 deletion src/components/createCluster/CreateClusterForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down