Skip to content

Commit

Permalink
fix(onboarding): remove fancy scrollbar that hides content
Browse files Browse the repository at this point in the history 
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>
  • Loading branch information
@goller @chnn
goller and chnn committed Sep 4, 2019
1 parent 4cd1367 commit f1d5c2a
Showing 1 changed file with 120 additions and 123 deletions.
243 changes: 120 additions & 123 deletions ui/src/onboarding/components/AdminStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit f1d5c2a

Please sign in to comment.