Merge pull request #4238 from influxdata/wizard-bugs

Fix issue with wizard content not scrolling

ui/src/reusable_ui/components/wizard/WizardButtonBar.scss

@@ -4,13 +4,15 @@
 */
 
 .wizard-button-bar {
-  display: flex;
+  display: inline-flex;
+  flex-shrink: 0;
   margin: $ix-marg-b auto $ix-marg-c auto;
   position: relative;
   min-width: 100%;
   justify-content: center;
   align-items: center;
-  height: 50px;
+  height: auto;
+  flex-wrap: nowrap;
   .btn {
     position: relative;
     white-space: nowrap;

ui/src/reusable_ui/components/wizard/WizardController.scss

@@ -9,7 +9,7 @@
 }
 
 .wizard-controller {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   min-width: 100%;
   justify-content: space-between;

ui/src/reusable_ui/components/wizard/WizardFullScreen.scss

@@ -5,10 +5,10 @@
 
 .wizard-container {
   padding: 30px;
-  display: flex;
+  display: inline-flex;
   border-radius: $radius;
-  max-height: 60vh;
   min-width: 800px;
+  max-width: 1200px;
   background-color: $g1-raven;
 }
 

ui/src/reusable_ui/components/wizard/WizardProgressBar.scss

@@ -8,7 +8,7 @@
   width: 100%;
   justify-content: center;
   align-items: center;
-  margin-bottom: $ix-marg-c;
+  margin-bottom: $ix-marg-b;
 }
 
 .wizard-progress-button {

ui/src/reusable_ui/components/wizard/WizardStep.scss

@@ -3,10 +3,26 @@
   ------------------------------------------------------------------------------
 */
 
-.wizard-step-content {
-  margin: $ix-marg-b 0;
+.wizard-step--container {
+  position: relative;
+  overflow: hidden;
+  margin: $ix-marg-b 0 0 0;
 }
 
-.wizard-step-child {
-  padding: $ix-marg-c;
+.wizard-step--child {
+  padding: 0 $ix-marg-d $ix-marg-d $ix-marg-d;
+  overflow-y: scroll;
+  max-height: 30vh;
+  min-height: 10vh;
+  position: relative;
+  z-index: 10;
 }
+
+.wizard-step--mask{
+  position: absolute;
+  height: $ix-marg-c;
+  min-width: 100%;
+  @include gradient-v(rgba(28, 28, 33, 0), $g1-raven);
+  bottom: 0;
+  z-index: 20;
+}

ui/src/reusable_ui/components/wizard/WizardStep.tsx

@@ -2,7 +2,6 @@
 import React, {PureComponent, ReactNode} from 'react'
 
 // Components
-import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import WizardButtonBar from 'src/reusable_ui/components/wizard/WizardButtonBar'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -40,14 +39,9 @@ class WizardStep extends PureComponent<WizardStepProps> {
 
     return (
       <>
-        <FancyScrollbar
-          className="wizard-step-content"
-          maxHeight={400}
-          autoHeight={true}
-          autoHide={false}
-        >
-          <div className="wizard-step-child">{children}</div>
-        </FancyScrollbar>
+        <div className="wizard-step--container">
+          <div className="wizard-step--child">{children}</div>
+        </div>
         <WizardButtonBar
           decrement={decrement}
           nextLabel={nextLabel}

ui/src/reusable_ui/components/wizard/test/WizardStep.test.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {shallow} from 'enzyme'
 
 import WizardStep from 'src/reusable_ui/components/wizard/WizardStep'
-import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import WizardButtonBar from 'src/reusable_ui/components/wizard/WizardButtonBar'
 
 describe('WizardStep', () => {
@@ -38,10 +37,6 @@ describe('WizardStep', () => {
     expect(wrapper).toHaveLength(1)
   })
 
-  it('mounts a fancy scrollbar', () => {
-    expect(wrapper.find(FancyScrollbar)).toHaveLength(1)
-  })
-
   it('mounts a button bar', () => {
     expect(wrapper.find(WizardButtonBar)).toHaveLength(1)
   })

ui/src/reusable_ui/components/wizard/test/__snapshots__/WizardStep.test.tsx.snap

@@ -2,20 +2,15 @@
 
 exports[`WizardStep matches snapshot 1`] = `
 <React.Fragment>
-  <FancyScrollbar
-    autoHeight={true}
-    autoHide={false}
-    className="wizard-step-content"
-    maxHeight={400}
-    setScrollTop={[Function]}
-    style={Object {}}
+  <div
+    className="wizard-step--container"
   >
     <div
-      className="wizard-step-child"
+      className="wizard-step--child"
     >
       this is a text
     </div>
-  </FancyScrollbar>
+  </div>
   <WizardButtonBar
     nextLabel="next"
     onClickNext={[Function]}