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 <[email protected]>
influxdata · Sep 4, 2019 · d47afac · d47afac
1 parent 4cd1367
commit d47afac
Show file tree

Hide file tree

Showing 3 changed files with 293 additions and 296 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/ui/src/onboarding/components/AdminStep.tsx b/ui/src/onboarding/components/AdminStep.tsx
@@ -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}