render()

in source/console/src/views/TaskCreate.tsx [677:757]
81 lines of code
6 McCabe index (conditional complexity)

    render() {
        return (
			<Grid>
				<Row>
					<Col md={12}>
						<Breadcrumb>
							<LinkContainer to="/tasks" exact>
								<BreadcrumbItem>Tasks</BreadcrumbItem>
							</LinkContainer>
                            {
                                this.state.mode === 'Create' &&
                                <LinkContainer to="/tasks/actions" exact>
                                    <BreadcrumbItem>Actions</BreadcrumbItem>
                                </LinkContainer>
                            }
                            {
                                this.state.mode === 'Edit' &&
                                <LinkContainer to={`/tasks/${this.state.task.taskId}`} exact>
                                    <BreadcrumbItem>Update Task</BreadcrumbItem>
                                </LinkContainer>
                            }
							<BreadcrumbItem active>{this.state.mode} Task</BreadcrumbItem>
						</Breadcrumb>
					</Col>
				</Row>
				<Row>
					<Col md={12}>
						<PageHeader>{this.state.mode} a task - <small>{this.state.task.actionName}</small></PageHeader>
					</Col>
				</Row>
				{
					!this.state.isLoading && this.state.step === 1 &&
					<Row>
						<Col md={3}>
							<Button block active>Step 1: Define Task</Button>
                            <Button block disabled>Step 2: Target Tag</Button>
							<Button block disabled>Step 3: Parameters</Button>
							<Button block disabled>Step 4: Task Trigger</Button>
							<Button block disabled>Step 5: Task Scope</Button>
							<Button block disabled>Review</Button>
						</Col>
						<Col md={9}>
							<Form horizontal>
								<FormGroup controlId="taskName" validationState={this.state.validation.taskName}>
									<Col componentClass={ControlLabel} md={3}>
										Task Name
									</Col>
									<Col md={9}>
										<FormControl type="text" placeholder="Enter task name" defaultValue={this.state.task.name}
											onChange={(event) => {
												event.persist();
												this.handleTaskNameChange(event);
											}}
										    disabled={this.state.mode === 'Edit'} />
										{
											this.state.showHelp.taskName &&
											<HelpBlock>Task name cannot be empty.</HelpBlock>
										}
									</Col>
								</FormGroup>
								<FormGroup controlId="taskDescription">
									<Col componentClass={ControlLabel} md={3}>
										Task Description
									</Col>
									<Col md={9}>
										<FormControl type="text" placeholder="Enter task description" defaultValue={this.state.task.description}
											onChange={(event) => {
												event.persist();
												this.handleTaskDescriptionChange(event);
											}}
										/>
									</Col>
								</FormGroup>
							</Form>
							<ButtonToolbar>
								<Button className="pull-right" bsStyle="primary" onClick={this.checkValidation}>Next</Button>
								<Button className="pull-right" bsStyle="link" onClick={() => { this.props.history.goBack() }}>Cancel</Button>
							</ButtonToolbar>
						</Col>
					</Row>
                }