From d47afacb6fd5eb956ece872666bd5bfb5e97058f Mon Sep 17 00:00:00 2001
From: Chris Goller <goller@gmail.com>
Date: Wed, 4 Sep 2019 14:42:01 -0500
Subject: [PATCH] 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>
---
 CHANGELOG.md                                  |  12 +-
 ui/src/onboarding/components/AdminStep.tsx    | 243 +++++++------
 .../__snapshots__/AdminStep.test.tsx.snap     | 334 +++++++++---------
 3 files changed, 293 insertions(+), 296 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1266ae6523..35701527f9 100644
--- 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
index db784d471a..a4a6c565c2 100644
--- 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}
diff --git a/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap b/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap
index bfb3baa0d5..e67f67f730 100644
--- a/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap
+++ b/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap
@@ -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}