Polish/scrolling plugins (#11225)

* Make Side Bar Scroll * completion tweaks * update snapshots
2019-01-17 11:54:36 -08:00 · 2019-01-17 11:54:36 -08:00 · e87421c984
parent 15547eda0d
commit e87421c984
8 changed files with 271 additions and 206 deletions
--- a/ui/src/onboarding/OnboardingWizard.scss
+++ b/ui/src/onboarding/OnboardingWizard.scss
@ -63,6 +63,7 @@
  padding: $ix-marg-c;
  padding-bottom: 0;
  flex: 1 0 100%;
+  transition: flex 0.4s ease-in-out;
 }

 .side-bar.show + .wizard-step--container {
@ -92,6 +93,12 @@
  border-radius: $ix-radius;
 }

+.buttonless {
+  .wizard-step--scroll-area {
+    height: calc(100% - 16px);
+  }
+}
+
 .wizard--skippable {
  .wizard-step--scroll-area {
    height: calc(100% - 147px);
@ -330,6 +337,13 @@
    max-width: 60vw;
  }

+
+  .buttonless {
+    .wizard-step--scroll-area {
+      height: calc(100% - 32px);
+    }
+  }
+
  .wizard--bookend-step {
    width: 70%;
  }
--- a/ui/src/onboarding/components/CompletionAdvancedButton.tsx
+++ b/ui/src/onboarding/components/CompletionAdvancedButton.tsx
@ -12,6 +12,7 @@ import {Organization} from 'src/api'

 interface OwnProps {
  orgs: Organization[]
+  onExit: () => void
 }

 type Props = OwnProps & WithRouterProps
@ -30,12 +31,12 @@ class CompletionAdvancedButton extends PureComponent<Props> {
  }

  private handleAdvanced = (): void => {
-    const {router, orgs} = this.props
+    const {router, orgs, onExit} = this.props
    const id = _.get(orgs, '[0].id', null)
    if (id) {
      router.push(`/organizations/${id}/buckets_tab`)
    } else {
-      router.push('/organizations/')
+      onExit()
    }
  }
 }
--- a/ui/src/onboarding/components/CompletionQuickStartButton.tsx
+++ b/ui/src/onboarding/components/CompletionQuickStartButton.tsx
@ -12,6 +12,7 @@ import {Dashboard} from 'src/api'

 interface OwnProps {
  dashboards: Dashboard[]
+  onExit: () => void
 }

 type Props = OwnProps & WithRouterProps
@ -30,12 +31,12 @@ class CompletionQuickStartButton extends PureComponent<Props> {
  }

  private handleAdvanced = (): void => {
-    const {router, dashboards} = this.props
+    const {router, dashboards, onExit} = this.props
    const id = _.get(dashboards, '[0].id', null)
    if (id) {
      router.push(`/dashboards/${id}`)
    } else {
-      router.push('/dashboards/')
+      onExit()
    }
  }
 }
--- a/ui/src/onboarding/components/CompletionStep.tsx
+++ b/ui/src/onboarding/components/CompletionStep.tsx
@ -6,6 +6,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import ResourceFetcher from 'src/shared/components/resource_fetcher'
 import CompletionAdvancedButton from 'src/onboarding/components/CompletionAdvancedButton'
 import CompletionQuickStartButton from 'src/onboarding/components/CompletionQuickStartButton'
+import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'

 // APIs
 import {getOrganizations, getDashboards} from 'src/organizations/apis'
@ -35,60 +36,88 @@ class CompletionStep extends PureComponent<OnboardingStepProps> {
    const {onExit} = this.props

    return (
-      <div className="wizard--bookend-step">
-        <h3 className="wizard-step--title">You are ready to go!</h3>
-        <h5 className="wizard-step--sub-title">
-          Your InfluxDB 2.0 has 1 organization, 1 user, and 1 bucket.
-        </h5>
-        <div className="splash-logo secondary" />
-        <h3 className="wizard-step--title">Let’s start collecting data!</h3>
-        <dl className="wizard-completion--options">
-          <Grid>
-            <Grid.Row>
-              <Grid.Column widthXS={Columns.Twelve} widthSM={Columns.Four}>
-                <div className="wizard-completion--option">
-                  <ResourceFetcher<Dashboard[]> fetcher={getDashboards}>
-                    {dashboards => (
-                      <CompletionQuickStartButton dashboards={dashboards} />
-                    )}
-                  </ResourceFetcher>
-                  <dt>Time is of the essence!</dt>
-                  <dd>
-                    This will set up local metric collection and allow you to
-                    explore the features of InfluxDB 2.0 quickly.
-                  </dd>
-                </div>
-              </Grid.Column>
-              <Grid.Column widthXS={Columns.Twelve} widthSM={Columns.Four}>
-                <div className="wizard-completion--option">
-                  <ResourceFetcher<Organization[]> fetcher={getOrganizations}>
-                    {orgs => <CompletionAdvancedButton orgs={orgs} />}
-                  </ResourceFetcher>
-                  <dt>Whoa looks like you’re an expert!</dt>
-                  <dd>
-                    This allows you to set up Telegraf, scrapers, and much more.
-                  </dd>
-                </div>
-              </Grid.Column>
-              <Grid.Column widthXS={Columns.Twelve} widthSM={Columns.Four}>
-                <div className="wizard-completion--option">
-                  <Button
-                    text="Configure Later"
-                    color={ComponentColor.Success}
-                    size={ComponentSize.Large}
-                    onClick={onExit}
-                  />
-                  <dt>I've got this...</dt>
-                  <dd>
-                    Jump into Influx 2.0 and set up data collection when you’re
-                    ready.
-                  </dd>
-                </div>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </dl>
-        <h5 className="wizard-step--sub-title" />
+      <div className="onboarding-step buttonless">
+        <div className="wizard-step--scroll-area">
+          <FancyScrollbar autoHide={false}>
+            <div className="wizard-step--scroll-content">
+              <h3 className="wizard-step--title">You are ready to go!</h3>
+              <h5 className="wizard-step--sub-title">
+                Your InfluxDB 2.0 has 1 organization, 1 user, and 1 bucket.
+              </h5>
+              <div className="splash-logo secondary" />
+              <h3 className="wizard-step--title">
+                Let’s start collecting data!
+              </h3>
+              <dl className="wizard-completion--options">
+                <Grid>
+                  <Grid.Row>
+                    <Grid.Column
+                      widthXS={Columns.Twelve}
+                      widthSM={Columns.Four}
+                    >
+                      <div className="wizard-completion--option">
+                        <ResourceFetcher<Dashboard[]> fetcher={getDashboards}>
+                          {dashboards => (
+                            <CompletionQuickStartButton
+                              onExit={onExit}
+                              dashboards={dashboards}
+                            />
+                          )}
+                        </ResourceFetcher>
+                        <dt>Time is of the essence!</dt>
+                        <dd>
+                          This will set up local metric collection and allow you
+                          to explore the features of InfluxDB 2.0 quickly.
+                        </dd>
+                      </div>
+                    </Grid.Column>
+                    <Grid.Column
+                      widthXS={Columns.Twelve}
+                      widthSM={Columns.Four}
+                    >
+                      <div className="wizard-completion--option">
+                        <ResourceFetcher<Organization[]>
+                          fetcher={getOrganizations}
+                        >
+                          {orgs => (
+                            <CompletionAdvancedButton
+                              onExit={onExit}
+                              orgs={orgs}
+                            />
+                          )}
+                        </ResourceFetcher>
+                        <dt>Whoa looks like you’re an expert!</dt>
+                        <dd>
+                          This allows you to set up Telegraf, scrapers, and much
+                          more.
+                        </dd>
+                      </div>
+                    </Grid.Column>
+                    <Grid.Column
+                      widthXS={Columns.Twelve}
+                      widthSM={Columns.Four}
+                    >
+                      <div className="wizard-completion--option">
+                        <Button
+                          text="Configure Later"
+                          color={ComponentColor.Success}
+                          size={ComponentSize.Large}
+                          onClick={onExit}
+                        />
+                        <dt>I've got this...</dt>
+                        <dd>
+                          Jump into Influx 2.0 and set up data collection when
+                          you’re ready.
+                        </dd>
+                      </div>
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </dl>
+              <h5 className="wizard-step--sub-title" />
+            </div>
+          </FancyScrollbar>
+        </div>
      </div>
    )
  }
--- a/ui/src/onboarding/components/snapshots/CompletionStep.test.tsx.snap
+++ b/ui/src/onboarding/components/snapshots/CompletionStep.test.tsx.snap
@ -2,101 +2,117 @@

 exports[`Onboarding.Components.CompletionStep renders 1`] = `
 <div
-  className="wizard--bookend-step"
+  className="onboarding-step buttonless"
 >
-  <h3
-    className="wizard-step--title"
-  >
-    You are ready to go!
-  </h3>
-  <h5
-    className="wizard-step--sub-title"
-  >
-    Your InfluxDB 2.0 has 1 organization, 1 user, and 1 bucket.
-  </h5>
  <div
-    className="splash-logo secondary"
-  />
-  <h3
-    className="wizard-step--title"
+    className="wizard-step--scroll-area"
  >
-    Let’s start collecting data!
-  </h3>
-  <dl
-    className="wizard-completion--options"
-  >
-    <Grid>
-      <GridRow>
-        <GridColumn
-          widthSM={4}
-          widthXS={12}
+    <FancyScrollbar
+      autoHeight={false}
+      autoHide={false}
+      maxHeight={null}
+      setScrollTop={[Function]}
+      style={Object {}}
+    >
+      <div
+        className="wizard-step--scroll-content"
+      >
+        <h3
+          className="wizard-step--title"
        >
-          <div
-            className="wizard-completion--option"
-          >
-            <ResourceFetcher
-              fetcher={[Function]}
-            >
-              <Component />
-            </ResourceFetcher>
-            <dt>
-              Time is of the essence!
-            </dt>
-            <dd>
-              This will set up local metric collection and allow you to explore the features of InfluxDB 2.0 quickly.
-            </dd>
-          </div>
-        </GridColumn>
-        <GridColumn
-          widthSM={4}
-          widthXS={12}
+          You are ready to go!
+        </h3>
+        <h5
+          className="wizard-step--sub-title"
        >
-          <div
-            className="wizard-completion--option"
-          >
-            <ResourceFetcher
-              fetcher={[Function]}
-            >
-              <Component />
-            </ResourceFetcher>
-            <dt>
-              Whoa looks like you’re an expert!
-            </dt>
-            <dd>
-              This allows you to set up Telegraf, scrapers, and much more.
-            </dd>
-          </div>
-        </GridColumn>
-        <GridColumn
-          widthSM={4}
-          widthXS={12}
+          Your InfluxDB 2.0 has 1 organization, 1 user, and 1 bucket.
+        </h5>
+        <div
+          className="splash-logo secondary"
+        />
+        <h3
+          className="wizard-step--title"
        >
-          <div
-            className="wizard-completion--option"
-          >
-            <Button
-              active={false}
-              color="success"
-              onClick={[MockFunction]}
-              shape="none"
-              size="lg"
-              status="default"
-              text="Configure Later"
-              type="button"
-            />
-            <dt>
-              I've got this...
-            </dt>
-            <dd>
-              Jump into Influx 2.0 and set up data collection when you’re ready.
-            </dd>
-          </div>
-        </GridColumn>
-      </GridRow>
-    </Grid>
-  </dl>
-  <h5
-    className="wizard-step--sub-title"
-  />
+          Let’s start collecting data!
+        </h3>
+        <dl
+          className="wizard-completion--options"
+        >
+          <Grid>
+            <GridRow>
+              <GridColumn
+                widthSM={4}
+                widthXS={12}
+              >
+                <div
+                  className="wizard-completion--option"
+                >
+                  <ResourceFetcher
+                    fetcher={[Function]}
+                  >
+                    <Component />
+                  </ResourceFetcher>
+                  <dt>
+                    Time is of the essence!
+                  </dt>
+                  <dd>
+                    This will set up local metric collection and allow you to explore the features of InfluxDB 2.0 quickly.
+                  </dd>
+                </div>
+              </GridColumn>
+              <GridColumn
+                widthSM={4}
+                widthXS={12}
+              >
+                <div
+                  className="wizard-completion--option"
+                >
+                  <ResourceFetcher
+                    fetcher={[Function]}
+                  >
+                    <Component />
+                  </ResourceFetcher>
+                  <dt>
+                    Whoa looks like you’re an expert!
+                  </dt>
+                  <dd>
+                    This allows you to set up Telegraf, scrapers, and much more.
+                  </dd>
+                </div>
+              </GridColumn>
+              <GridColumn
+                widthSM={4}
+                widthXS={12}
+              >
+                <div
+                  className="wizard-completion--option"
+                >
+                  <Button
+                    active={false}
+                    color="success"
+                    onClick={[MockFunction]}
+                    shape="none"
+                    size="lg"
+                    status="default"
+                    text="Configure Later"
+                    type="button"
+                  />
+                  <dt>
+                    I've got this...
+                  </dt>
+                  <dd>
+                    Jump into Influx 2.0 and set up data collection when you’re ready.
+                  </dd>
+                </div>
+              </GridColumn>
+            </GridRow>
+          </Grid>
+        </dl>
+        <h5
+          className="wizard-step--sub-title"
+        />
+      </div>
+    </FancyScrollbar>
+  </div>
 </div>
 `;
--- a/ui/src/onboarding/components/side_bar/SideBar.scss
+++ b/ui/src/onboarding/components/side_bar/SideBar.scss
@ -13,7 +13,7 @@ $sidebar-width-md: 240px;
  overflow: hidden;
  transform: translate3d(0,0,0);
  flex: 1 0 0;
-  transition: flex 0.4s ease;
+  transition: flex 0.4s ease-in-out;

  &.show {
    flex: 1 0 $sidebar-width-sm;
@ -25,7 +25,8 @@ $sidebar-width-md: 240px;
  opacity: 0;
  transition: opacity 0.5s ease;
  height: 100%;
-  display: flex;
+  width: 100%;
+  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  padding: $ix-marg-e 0 34px 0;
@ -41,22 +42,19 @@ $sidebar-width-md: 240px;
  font-size: $ix-text-base-1;
 }

-.side-bar--contents {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
 .side-bar--tabs {
-  display: flex;
+  display: inline-flex;
  flex-direction: column;
-  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+  flex: 1 1 0;
+  padding-bottom: $ix-marg-c;
 }

 .side-bar--tab {
-  height: 44px;
-  display: flex;
+  flex-shrink: 0;
+  height: 30px;
+  display: inline-flex;
  align-items: center;
  border-radius: $radius 0 0 $radius;
  font-size: 15px;
@ -65,7 +63,7 @@ $sidebar-width-md: 240px;
  color: $g10-wolf;
  background-color: transparent;
  white-space: nowrap;
-  transition: color 0.25s ease, background-color 0.25s ease;
+  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;

  &:hover {
    color: $g15-platinum;
@ -85,7 +83,7 @@ $sidebar-width-md: 240px;
  display: inline-block;
  font-size: 16px;
  margin: 0 13px;
-  transition: color 0.25s ease;
+  transition: color 0.25s ease-in-out;

  .side-bar--tab:hover & {
    color: $g11-sidewalk;
--- a/ui/src/onboarding/components/side_bar/SideBar.tsx
+++ b/ui/src/onboarding/components/side_bar/SideBar.tsx
@ -5,6 +5,7 @@ import classnames from 'classnames'
 // Components
 import SideBarTab from 'src/onboarding/components/side_bar/SideBarTab'
 import SideBarButton from 'src/onboarding/components/side_bar/SideBarButton'
+import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 import {ComponentSpacer, Stack, Alignment} from 'src/clockface'

 // Styles
@ -35,16 +36,13 @@ class SideBar extends Component<Props> {
      <div className={this.containerClassName}>
        <div className="side-bar--container">
          <h3 className="side-bar--title">{title}</h3>
-          <div className="side-bar--contents">
+          <FancyScrollbar autoHide={false}>
            <div className="side-bar--tabs">{this.childTabs}</div>
-            <div className="side-bar--buttons">
-              <ComponentSpacer
-                stackChildren={Stack.Rows}
-                align={Alignment.Left}
-              >
-                {this.childButtons}
-              </ComponentSpacer>
-            </div>
+          </FancyScrollbar>
+          <div className="side-bar--buttons">
+            <ComponentSpacer stackChildren={Stack.Rows} align={Alignment.Left}>
+              {this.childButtons}
+            </ComponentSpacer>
          </div>
        </div>
      </div>
--- a/ui/src/onboarding/components/side_bar/snapshots/SideBar.test.tsx.snap
+++ b/ui/src/onboarding/components/side_bar/snapshots/SideBar.test.tsx.snap
@ -12,8 +12,12 @@ exports[`SideBar rendering renders with children, and renders its children 1`] =
    >
      titleString
    </h3>
-    <div
-      className="side-bar--contents"
+    <FancyScrollbar
+      autoHeight={false}
+      autoHide={false}
+      maxHeight={null}
+      setScrollTop={[Function]}
+      style={Object {}}
    >
      <div
        className="side-bar--tabs"
@ -35,29 +39,29 @@ exports[`SideBar rendering renders with children, and renders its children 1`] =
          status="default"
        />
      </div>
-      <div
-        className="side-bar--buttons"
+    </FancyScrollbar>
+    <div
+      className="side-bar--buttons"
+    >
+      <ComponentSpacer
+        align="left"
+        stackChildren="rows"
      >
-        <ComponentSpacer
-          align="left"
-          stackChildren="rows"
-        >
-          <SideBarButton
-            color="secondary"
-            icon="download"
-            key=".0:$a"
-            text="a"
-            titleText="a"
-          />
-          <SideBarButton
-            color="default"
-            icon="plus"
-            key=".0:$b"
-            text="b"
-            titleText="b"
-          />
-        </ComponentSpacer>
-      </div>
+        <SideBarButton
+          color="secondary"
+          icon="download"
+          key=".0:$a"
+          text="a"
+          titleText="a"
+        />
+        <SideBarButton
+          color="default"
+          icon="plus"
+          key=".0:$b"
+          text="b"
+          titleText="b"
+        />
+      </ComponentSpacer>
    </div>
  </div>
 </div>
@ -75,20 +79,24 @@ exports[`SideBar rendering renders with no children 1`] = `
    >
      titleString
    </h3>
-    <div
-      className="side-bar--contents"
+    <FancyScrollbar
+      autoHeight={false}
+      autoHide={false}
+      maxHeight={null}
+      setScrollTop={[Function]}
+      style={Object {}}
    >
      <div
        className="side-bar--tabs"
      />
-      <div
-        className="side-bar--buttons"
-      >
-        <ComponentSpacer
-          align="left"
-          stackChildren="rows"
-        />
-      </div>
+    </FancyScrollbar>
+    <div
+      className="side-bar--buttons"
+    >
+      <ComponentSpacer
+        align="left"
+        stackChildren="rows"
+      />
    </div>
  </div>
 </div>