fix(onboarding): remove fancy scrollbar that hides content (#14931)
e2e tests are failing because the fancyscroll bar component hides the admin step during certain points in onboarding. We were able to reproduce when the form in the admin step had been marked as valid. The use of the scrollbar in the setting seemed unneeded as it could be rendered in a quite small window. Therefore, we removed the scrollbar altogether for now. Co-authored-by: Christopher Henn <chris@chrishenn.net>pull/14933/head
Chris Goller
GitHub
parent
4cd136721c
commit
d47afacb6f
12
CHANGELOG.md
12
CHANGELOG.md
|
|
@ -1,4 +1,14 @@
|
|||
## v2.0.0-alpha.17 [unreleased]
|
||||
## v2.0.0-alpha.18 [unreleased]
|
||||
|
||||
### Features
|
||||
|
||||
### UI Improvements
|
||||
|
||||
### Bug Fixes
|
||||
1. [14931](https://github.com/influxdata/influxdb/pull/14931): Remove scrollbars blocking onboarding UI step.
|
||||
|
||||
|
||||
## v2.0.0-alpha.17 [2019-08-14]
|
||||
|
||||
### Features
|
||||
1. [14809](https://github.com/influxdata/influxdb/pull/14809): Add task middleware's for checks and notifications
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {getDeep} from 'src/utils/wrappers'
|
|||
import {Form, Input, Grid} from '@influxdata/clockface'
|
||||
import QuestionMarkTooltip from 'src/shared/components/question_mark_tooltip/QuestionMarkTooltip'
|
||||
import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
// Actions
|
||||
import {setupAdmin} from 'src/onboarding/actions'
|
||||
|
|
@ -72,131 +71,129 @@ class AdminStep extends PureComponent<Props, State> {
|
|||
<div className="onboarding-step">
|
||||
<Form onSubmit={this.handleNext}>
|
||||
<div className="wizard-step--scroll-area">
|
||||
<FancyScrollbar autoHide={false}>
|
||||
<div className="wizard-step--scroll-content">
|
||||
<h3
|
||||
className="wizard-step--title"
|
||||
data-testid="admin-step--head-main"
|
||||
>
|
||||
Setup Initial User
|
||||
</h3>
|
||||
<h5
|
||||
className="wizard-step--sub-title"
|
||||
data-testid="admin-step--head-sub"
|
||||
>
|
||||
You will be able to create additional Users, Buckets and
|
||||
Organizations later
|
||||
</h5>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
<div className="wizard-step--scroll-content">
|
||||
<h3
|
||||
className="wizard-step--title"
|
||||
data-testid="admin-step--head-main"
|
||||
>
|
||||
Setup Initial User
|
||||
</h3>
|
||||
<h5
|
||||
className="wizard-step--sub-title"
|
||||
data-testid="admin-step--head-sub"
|
||||
>
|
||||
You will be able to create additional Users, Buckets and
|
||||
Organizations later
|
||||
</h5>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element label="Username">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={this.handleUsername}
|
||||
titleText="Username"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={status}
|
||||
disabledTitleText="Username has been set"
|
||||
autoFocus={true}
|
||||
testID="input-field--username"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Six}
|
||||
widthMD={Columns.Five}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element label="Password">
|
||||
<Input
|
||||
type={InputType.Password}
|
||||
value={password}
|
||||
onChange={this.handlePassword}
|
||||
titleText="Password"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={status}
|
||||
disabledTitleText="Password has been set"
|
||||
testID="input-field--password"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column widthXS={Columns.Six} widthMD={Columns.Five}>
|
||||
<Form.Element
|
||||
label="Confirm Password"
|
||||
errorMessage={
|
||||
isPassMismatched && 'Passwords do not match'
|
||||
}
|
||||
>
|
||||
<Form.Element label="Username">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={this.handleUsername}
|
||||
titleText="Username"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={status}
|
||||
disabledTitleText="Username has been set"
|
||||
autoFocus={true}
|
||||
testID="input-field--username"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Six}
|
||||
widthMD={Columns.Five}
|
||||
offsetMD={Columns.One}
|
||||
<Input
|
||||
type={InputType.Password}
|
||||
value={confirmPassword}
|
||||
onChange={this.handleConfirmPassword}
|
||||
titleText="Confirm Password"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={this.passwordStatus}
|
||||
disabledTitleText="password has been set"
|
||||
testID="input-field--password-chk"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element
|
||||
label="Initial Organization Name"
|
||||
labelAddOn={this.orgTip}
|
||||
testID="form-elem--orgname"
|
||||
>
|
||||
<Form.Element label="Password">
|
||||
<Input
|
||||
type={InputType.Password}
|
||||
value={password}
|
||||
onChange={this.handlePassword}
|
||||
titleText="Password"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={status}
|
||||
disabledTitleText="Password has been set"
|
||||
testID="input-field--password"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column widthXS={Columns.Six} widthMD={Columns.Five}>
|
||||
<Form.Element
|
||||
label="Confirm Password"
|
||||
errorMessage={
|
||||
isPassMismatched && 'Passwords do not match'
|
||||
}
|
||||
>
|
||||
<Input
|
||||
type={InputType.Password}
|
||||
value={confirmPassword}
|
||||
onChange={this.handleConfirmPassword}
|
||||
titleText="Confirm Password"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={this.passwordStatus}
|
||||
disabledTitleText="password has been set"
|
||||
testID="input-field--password-chk"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
<Input
|
||||
value={org}
|
||||
onChange={this.handleOrg}
|
||||
titleText="Initial Organization Name"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={ComponentStatus.Default}
|
||||
placeholder="An organization is a workspace for a group of users."
|
||||
disabledTitleText="Initial organization name has been set"
|
||||
testID="input-field--orgname"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element
|
||||
label="Initial Bucket Name"
|
||||
labelAddOn={this.bucketTip}
|
||||
testID="form-elem--bucketname"
|
||||
>
|
||||
<Form.Element
|
||||
label="Initial Organization Name"
|
||||
labelAddOn={this.orgTip}
|
||||
testID="form-elem--orgname"
|
||||
>
|
||||
<Input
|
||||
value={org}
|
||||
onChange={this.handleOrg}
|
||||
titleText="Initial Organization Name"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={ComponentStatus.Default}
|
||||
placeholder="An organization is a workspace for a group of users."
|
||||
disabledTitleText="Initial organization name has been set"
|
||||
testID="input-field--orgname"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element
|
||||
label="Initial Bucket Name"
|
||||
labelAddOn={this.bucketTip}
|
||||
testID="form-elem--bucketname"
|
||||
>
|
||||
<Input
|
||||
value={bucket}
|
||||
onChange={this.handleBucket}
|
||||
titleText="Initial Bucket Name"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={status}
|
||||
placeholder="A bucket is where your time series data is stored with a retention policy."
|
||||
disabledTitleText="Initial bucket name has been set"
|
||||
testID="input-field--bucketname"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</div>
|
||||
</FancyScrollbar>
|
||||
<Input
|
||||
value={bucket}
|
||||
onChange={this.handleBucket}
|
||||
titleText="Initial Bucket Name"
|
||||
size={ComponentSize.Medium}
|
||||
icon={icon}
|
||||
status={status}
|
||||
placeholder="A bucket is where your time series data is stored with a retention policy."
|
||||
disabledTitleText="Initial bucket name has been set"
|
||||
testID="input-field--bucketname"
|
||||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
<OnboardingButtons
|
||||
nextButtonStatus={this.nextButtonStatus}
|
||||
|
|
|
|||
|
|
@ -12,187 +12,177 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
|
|||
<div
|
||||
className="wizard-step--scroll-area"
|
||||
>
|
||||
<FancyScrollbar
|
||||
autoHeight={false}
|
||||
autoHide={false}
|
||||
className=""
|
||||
hideTracksWhenNotNeeded={true}
|
||||
maxHeight={null}
|
||||
setScrollTop={[Function]}
|
||||
style={Object {}}
|
||||
<div
|
||||
className="wizard-step--scroll-content"
|
||||
>
|
||||
<div
|
||||
className="wizard-step--scroll-content"
|
||||
<h3
|
||||
className="wizard-step--title"
|
||||
data-testid="admin-step--head-main"
|
||||
>
|
||||
<h3
|
||||
className="wizard-step--title"
|
||||
data-testid="admin-step--head-main"
|
||||
Setup Initial User
|
||||
</h3>
|
||||
<h5
|
||||
className="wizard-step--sub-title"
|
||||
data-testid="admin-step--head-sub"
|
||||
>
|
||||
You will be able to create additional Users, Buckets and Organizations later
|
||||
</h5>
|
||||
<Grid
|
||||
testID="grid"
|
||||
>
|
||||
<GridRow
|
||||
testID="grid--row"
|
||||
>
|
||||
Setup Initial User
|
||||
</h3>
|
||||
<h5
|
||||
className="wizard-step--sub-title"
|
||||
data-testid="admin-step--head-sub"
|
||||
>
|
||||
You will be able to create additional Users, Buckets and Organizations later
|
||||
</h5>
|
||||
<Grid
|
||||
testID="grid"
|
||||
>
|
||||
<GridRow
|
||||
testID="grid--row"
|
||||
<GridColumn
|
||||
offsetMD={1}
|
||||
testID="grid--column"
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
>
|
||||
<GridColumn
|
||||
offsetMD={1}
|
||||
testID="grid--column"
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
<FormElement
|
||||
label="Username"
|
||||
testID="form--element"
|
||||
>
|
||||
<FormElement
|
||||
label="Username"
|
||||
testID="form--element"
|
||||
>
|
||||
<Input
|
||||
autoFocus={true}
|
||||
autocomplete="off"
|
||||
disabledTitleText="Username has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder=""
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--username"
|
||||
titleText="Username"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetMD={1}
|
||||
testID="grid--column"
|
||||
widthMD={5}
|
||||
widthXS={6}
|
||||
<Input
|
||||
autoFocus={true}
|
||||
autocomplete="off"
|
||||
disabledTitleText="Username has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder=""
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--username"
|
||||
titleText="Username"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetMD={1}
|
||||
testID="grid--column"
|
||||
widthMD={5}
|
||||
widthXS={6}
|
||||
>
|
||||
<FormElement
|
||||
label="Password"
|
||||
testID="form--element"
|
||||
>
|
||||
<FormElement
|
||||
label="Password"
|
||||
testID="form--element"
|
||||
>
|
||||
<Input
|
||||
autoFocus={false}
|
||||
autocomplete="off"
|
||||
disabledTitleText="Password has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder=""
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--password"
|
||||
titleText="Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
testID="grid--column"
|
||||
widthMD={5}
|
||||
widthXS={6}
|
||||
<Input
|
||||
autoFocus={false}
|
||||
autocomplete="off"
|
||||
disabledTitleText="Password has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder=""
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--password"
|
||||
titleText="Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
testID="grid--column"
|
||||
widthMD={5}
|
||||
widthXS={6}
|
||||
>
|
||||
<FormElement
|
||||
errorMessage={false}
|
||||
label="Confirm Password"
|
||||
testID="form--element"
|
||||
>
|
||||
<FormElement
|
||||
errorMessage={false}
|
||||
label="Confirm Password"
|
||||
testID="form--element"
|
||||
>
|
||||
<Input
|
||||
autoFocus={false}
|
||||
autocomplete="off"
|
||||
disabledTitleText="password has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder=""
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--password-chk"
|
||||
titleText="Confirm Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetMD={1}
|
||||
testID="grid--column"
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
<Input
|
||||
autoFocus={false}
|
||||
autocomplete="off"
|
||||
disabledTitleText="password has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder=""
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--password-chk"
|
||||
titleText="Confirm Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetMD={1}
|
||||
testID="grid--column"
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
>
|
||||
<FormElement
|
||||
label="Initial Organization Name"
|
||||
labelAddOn={[Function]}
|
||||
testID="form-elem--orgname"
|
||||
>
|
||||
<FormElement
|
||||
label="Initial Organization Name"
|
||||
labelAddOn={[Function]}
|
||||
testID="form-elem--orgname"
|
||||
>
|
||||
<Input
|
||||
autoFocus={false}
|
||||
autocomplete="off"
|
||||
disabledTitleText="Initial organization name has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder="An organization is a workspace for a group of users."
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--orgname"
|
||||
titleText="Initial Organization Name"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetMD={1}
|
||||
testID="grid--column"
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
<Input
|
||||
autoFocus={false}
|
||||
autocomplete="off"
|
||||
disabledTitleText="Initial organization name has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder="An organization is a workspace for a group of users."
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--orgname"
|
||||
titleText="Initial Organization Name"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetMD={1}
|
||||
testID="grid--column"
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
>
|
||||
<FormElement
|
||||
label="Initial Bucket Name"
|
||||
labelAddOn={[Function]}
|
||||
testID="form-elem--bucketname"
|
||||
>
|
||||
<FormElement
|
||||
label="Initial Bucket Name"
|
||||
labelAddOn={[Function]}
|
||||
testID="form-elem--bucketname"
|
||||
>
|
||||
<Input
|
||||
autoFocus={false}
|
||||
autocomplete="off"
|
||||
disabledTitleText="Initial bucket name has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder="A bucket is where your time series data is stored with a retention policy."
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--bucketname"
|
||||
titleText="Initial Bucket Name"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
</Grid>
|
||||
</div>
|
||||
</FancyScrollbar>
|
||||
<Input
|
||||
autoFocus={false}
|
||||
autocomplete="off"
|
||||
disabledTitleText="Initial bucket name has been set"
|
||||
icon={null}
|
||||
name=""
|
||||
onChange={[Function]}
|
||||
placeholder="A bucket is where your time series data is stored with a retention policy."
|
||||
required={false}
|
||||
size="md"
|
||||
spellCheck={false}
|
||||
status="default"
|
||||
testID="input-field--bucketname"
|
||||
titleText="Initial Bucket Name"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</FormElement>
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
<OnboardingButtons
|
||||
autoFocusNext={false}
|
||||
|
|
|
|||
Loading…
Reference in New Issue