Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1708 from influxdata/dataloader/skip-data-sources-steps 

Dataloader/skip data sources steps
pull/10616/head
Alirie Gray 2018-12-06 14:31:26 -08:00 committed by GitHub
parent 3b8578c7d6 960ace37c2
commit d607afe2a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 122 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/onboarding/OnboardingWizard.scss
View File

@ -53,6 +53,16 @@
}
}
.wizard-button-container {
display: inline-flex;
flex-direction: column;
align-items: center;
.button {
width: 50%;
}
}
.splash-logo {
background-size: 100% 100%;
background-position: center center;

52
ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
View File

@ -65,26 +65,48 @@ class ConfigureDataSourceStep extends PureComponent<Props> {
dataLoaderType={type}
currentIndex={+substepID}
/>
<div className="wizard-button-bar">
<Button
color={ComponentColor.Default}
text="Back"
size={ComponentSize.Medium}
onClick={this.handlePrevious}
/>
<Button
color={ComponentColor.Primary}
text="Next"
size={ComponentSize.Medium}
onClick={this.handleNext}
status={ComponentStatus.Default}
titleText={'Next'}
/>
<div className="wizard-button-container">
<div className="wizard-button-bar">
<Button
color={ComponentColor.Default}
text="Back"
size={ComponentSize.Medium}
onClick={this.handlePrevious}
/>
<Button
color={ComponentColor.Primary}
text="Next"
size={ComponentSize.Medium}
onClick={this.handleNext}
status={ComponentStatus.Default}
titleText={'Next'}
/>
</div>
{this.skipLink}
</div>
</div>
)
}
private get skipLink() {
return (
<Button
color={ComponentColor.Default}
text="Skip"
size={ComponentSize.Small}
onClick={this.jumpToCompletionStep}
>
skip
</Button>
)
}
private jumpToCompletionStep = () => {
const {onSetCurrentStepIndex, stepStatuses} = this.props
onSetCurrentStepIndex(stepStatuses.length - 1)
}
private handleNext = () => {
const {
onIncrementCurrentStepIndex,

52
ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
View File

@ -60,21 +60,24 @@ class SelectDataSourceStep extends PureComponent<Props, State> {
You will be able to configure additional Data Sources later
</h5>
{this.selector}
<div className="wizard-button-bar">
<Button
color={ComponentColor.Default}
text="Back"
size={ComponentSize.Medium}
onClick={this.handleClickBack}
/>
<Button
color={ComponentColor.Primary}
text="Next"
size={ComponentSize.Medium}
onClick={this.handleClickNext}
status={ComponentStatus.Default}
titleText={'Next'}
/>
<div className="wizard-button-container">
<div className="wizard-button-bar">
<Button
color={ComponentColor.Default}
text="Back"
size={ComponentSize.Medium}
onClick={this.handleClickBack}
/>
<Button
color={ComponentColor.Primary}
text="Next"
size={ComponentSize.Medium}
onClick={this.handleClickNext}
status={ComponentStatus.Default}
titleText={'Next'}
/>
</div>
{this.skipLink}
</div>
</div>
)
@ -106,6 +109,25 @@ class SelectDataSourceStep extends PureComponent<Props, State> {
)
}
private get skipLink() {
return (
<Button
color={ComponentColor.Default}
text="Skip"
size={ComponentSize.Small}
onClick={this.jumpToCompletionStep}
>
skip
</Button>
)
}
private jumpToCompletionStep = () => {
const {onSetCurrentStepIndex, stepStatuses} = this.props
onSetCurrentStepIndex(stepStatuses.length - 1)
}
private handleClickNext = () => {
const {
router,

2
ui/src/onboarding/components/verifyStep/VerifyDataStep.test.tsx
View File

@ -32,7 +32,7 @@ describe('Onboarding.Components.VerifyStep.VerifyDataStep', () => {
const switcher = wrapper.find(VerifyDataSwitcher)
expect(wrapper.exists()).toBe(true)
expect(buttons.length).toBe(2)
expect(buttons.length).toBe(3)
expect(switcher.exists()).toBe(true)
})
})

52
ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
View File

@ -38,25 +38,47 @@ class VerifyDataStep extends PureComponent<Props> {
username={_.get(setupParams, 'username', '')}
bucket={_.get(setupParams, 'bucket', '')}
/>
<div className="wizard-button-bar">
<Button
color={ComponentColor.Default}
text="Back"
size={ComponentSize.Medium}
onClick={onDecrementCurrentStepIndex}
/>
<Button
color={ComponentColor.Primary}
text="Next"
size={ComponentSize.Medium}
onClick={onIncrementCurrentStepIndex}
status={ComponentStatus.Default}
titleText={'Next'}
/>
<div className="wizard-button-container">
<div className="wizard-button-bar">
<Button
color={ComponentColor.Default}
text="Back"
size={ComponentSize.Medium}
onClick={onDecrementCurrentStepIndex}
/>
<Button
color={ComponentColor.Primary}
text="Next"
size={ComponentSize.Medium}
onClick={onIncrementCurrentStepIndex}
status={ComponentStatus.Default}
titleText={'Next'}
/>
</div>
{this.skipLink}
</div>
</div>
)
}
private get skipLink() {
return (
<Button
color={ComponentColor.Default}
text="Skip"
size={ComponentSize.Small}
onClick={this.jumpToCompletionStep}
>
skip
</Button>
)
}
private jumpToCompletionStep = () => {
const {onSetCurrentStepIndex, stepStatuses} = this.props
onSetCurrentStepIndex(stepStatuses.length - 1)
}
}
export default VerifyDataStep

2
ui/src/onboarding/containers/OnboardingWizard.tsx
View File

@ -1,7 +1,6 @@
// Libraries
import React, {PureComponent} from 'react'
import {withRouter, WithRouterProps} from 'react-router'
import {connect} from 'react-redux'
import _ from 'lodash'
@ -29,7 +28,6 @@ import {
import {StepStatus} from 'src/clockface/constants/wizard'
// Types
import {Links} from 'src/types/v2/links'
import {SetupParams} from 'src/onboarding/apis'
import {TelegrafPlugin, DataLoaderType} from 'src/types/v2/dataLoaders'