SpinnakerSettings.js

return (
	<div>
		<ul className="layout">
			<TextInput label="Target API"
					   placeHolder="API to install Spinnaker, e.g. https://api.run.pivotal.io"
					   name={this.props.settings.api}
					   handleChange={this.handleChange}
					   optional={pwsButton}
					   inputLayout="layout__item u-7/16-lap-and-up u-11/16-desk"
					   settings={this.props.settings} />
			<TextInput label="Target Email"
					   placeHolder="Login email to install Spinnaker"
					   name={this.props.settings.email}
					   handleChange={this.handleChange}
					   settings={this.props.settings} />
			<PasswordInput label="Target Password"
					   placeHolder="Password to install Spinnaker"
					   name={this.props.settings.password}
					   handleChange={this.handleChange}
					   settings={this.props.settings} />
			<li className='control-group'>
				<label className='layout__item u-1/2-lap-and-up u-1/4-desk'></label>
				<button className='layout__item u-1/2-lap-and-up u-3/4-desk'
						onClick={this.refreshOrgsAndSpaces}>Refresh</button>
			</li>
			{ this.props.settings.orgsAndSpacesLoading ?
				<Spinner />
				:
				<span>
					<DropdownInput label="Target Organization"
								   name={this.props.settings.org}
								   handleChange={this.handleChange}
								   data={this.listOrgs}
								   settings={this.props.settings}/>
					<DropdownInput label="Target Space"
								   name={this.props.settings.space}
								   handleChange={this.handleChange}
								   data={this.listSpaces}
								   settings={this.props.settings}/>
				</span>
			}
			<TextInput label="Namespace"
					   placeHolder="Logical name for each module of Spinnaker (e.g. alice)"
					   name="all.namespace"
					   handleChange={this.handleChange}
					   settings={this.props.settings} />
		</ul>
	</div>
)