From 74c21c8990b421213f159e64252c8426200b6d44 Mon Sep 17 00:00:00 2001
From: Daniel Campbell <metalwhirlwind@gmail.com>
Date: Tue, 22 Jan 2019 17:51:21 -0800
Subject: [PATCH] remove sidebar on selection step (#11473)

---
 .../components/DataLoadersWizard.tsx          |  5 +-
 ui/src/onboarding/OnboardingWizard.scss       |  2 -
 .../configureStep/ConfigureDataSourceStep.tsx | 34 ++++++-------
 .../ConfigureDataSourceSwitcher.tsx           | 50 +++++++++++--------
 .../selectionStep/SelectDataSourceStep.tsx    | 15 +-----
 .../components/side_bar/SideBar.scss          |  4 --
 .../components/verifyStep/VerifyDataStep.tsx  |  2 +-
 7 files changed, 49 insertions(+), 63 deletions(-)

diff --git a/ui/src/dataLoaders/components/DataLoadersWizard.tsx b/ui/src/dataLoaders/components/DataLoadersWizard.tsx
index 777544dab7..5c91ce10f2 100644
--- a/ui/src/dataLoaders/components/DataLoadersWizard.tsx
+++ b/ui/src/dataLoaders/components/DataLoadersWizard.tsx
@@ -224,13 +224,14 @@ class DataLoadersWizard extends PureComponent<Props> {
   }
 
   private get sideBarVisible() {
-    const {dataLoaders} = this.props
+    const {dataLoaders, currentStepIndex} = this.props
     const {telegrafPlugins, type} = dataLoaders
 
     const isStreaming = type === DataLoaderType.Streaming
     const isNotEmpty = telegrafPlugins.length > 0
+    const isConfigStep = currentStepIndex > 0
 
-    return isStreaming && isNotEmpty
+    return isStreaming && isNotEmpty && isConfigStep
   }
 
   private handleClickSideBarTab = (telegrafPluginID: string) => {
diff --git a/ui/src/onboarding/OnboardingWizard.scss b/ui/src/onboarding/OnboardingWizard.scss
index 94361cf53d..4a43dbec93 100644
--- a/ui/src/onboarding/OnboardingWizard.scss
+++ b/ui/src/onboarding/OnboardingWizard.scss
@@ -63,7 +63,6 @@
   padding: $ix-marg-c;
   padding-bottom: 0;
   flex: 1 0 100%;
-  transition: flex 0.4s ease-in-out;
 }
 
 .side-bar.show + .wizard-step--container {
@@ -85,7 +84,6 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  transition: max-width .4s ease-in-out;
 }
 
 .wizard-step--scroll-area {
diff --git a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
index 24793071f8..2b99bcd761 100644
--- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
+++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
@@ -64,24 +64,22 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
     } = this.props
 
     return (
-      <div className="onboarding-step wizard--skippable">
-        <ConfigureDataSourceSwitcher
-          buckets={buckets}
-          bucket={bucket}
-          org={org}
-          username={username}
-          telegrafPlugins={telegrafPlugins}
-          onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig}
-          onAddConfigValue={onAddConfigValue}
-          onRemoveConfigValue={onRemoveConfigValue}
-          dataLoaderType={type}
-          currentIndex={+substep}
-          onSetConfigArrayValue={onSetConfigArrayValue}
-          onClickNext={this.handleNext}
-          onClickPrevious={this.handlePrevious}
-          onClickSkip={this.jumpToCompletionStep}
-        />
-      </div>
+      <ConfigureDataSourceSwitcher
+        buckets={buckets}
+        bucket={bucket}
+        org={org}
+        username={username}
+        telegrafPlugins={telegrafPlugins}
+        onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig}
+        onAddConfigValue={onAddConfigValue}
+        onRemoveConfigValue={onRemoveConfigValue}
+        dataLoaderType={type}
+        currentIndex={+substep}
+        onSetConfigArrayValue={onSetConfigArrayValue}
+        onClickNext={this.handleNext}
+        onClickPrevious={this.handlePrevious}
+        onClickSkip={this.jumpToCompletionStep}
+      />
     )
   }
 
diff --git a/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx b/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx
index 1d74f419b7..42c14ee317 100644
--- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx
+++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx
@@ -60,34 +60,40 @@ class ConfigureDataSourceSwitcher extends PureComponent<Props> {
     switch (dataLoaderType) {
       case DataLoaderType.Streaming:
         return (
-          <PluginConfigSwitcher
-            onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig}
-            onRemoveConfigValue={onRemoveConfigValue}
-            telegrafPlugins={telegrafPlugins}
-            currentIndex={currentIndex}
-            onAddConfigValue={onAddConfigValue}
-            onSetConfigArrayValue={onSetConfigArrayValue}
-            onClickNext={onClickNext}
-            onClickPrevious={onClickPrevious}
-            onClickSkip={onClickSkip}
-          />
+          <div className="onboarding-step wizard--skippable">
+            <PluginConfigSwitcher
+              onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig}
+              onRemoveConfigValue={onRemoveConfigValue}
+              telegrafPlugins={telegrafPlugins}
+              currentIndex={currentIndex}
+              onAddConfigValue={onAddConfigValue}
+              onSetConfigArrayValue={onSetConfigArrayValue}
+              onClickNext={onClickNext}
+              onClickPrevious={onClickPrevious}
+              onClickSkip={onClickSkip}
+            />
+          </div>
         )
       case DataLoaderType.LineProtocol:
         return (
-          <LineProtocol
-            bucket={bucket}
-            org={org}
-            onClickNext={onClickNext}
-            onClickBack={onClickPrevious}
-          />
+          <div className="onboarding-step">
+            <LineProtocol
+              bucket={bucket}
+              org={org}
+              onClickNext={onClickNext}
+              onClickBack={onClickPrevious}
+            />
+          </div>
         )
       case DataLoaderType.Scraping:
         return (
-          <Scraping
-            onClickNext={onClickNext}
-            onClickBack={onClickPrevious}
-            buckets={buckets}
-          />
+          <div className="onboarding-step">
+            <Scraping
+              onClickNext={onClickNext}
+              onClickBack={onClickPrevious}
+              buckets={buckets}
+            />
+          </div>
         )
       case DataLoaderType.CSV:
         return <div>{DataLoaderType.CSV}</div>
diff --git a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
index 62635ce094..00efcedc8e 100644
--- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
+++ b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
@@ -1,7 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import _ from 'lodash'
-import classnames from 'classnames'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -52,7 +51,7 @@ export class SelectDataSourceStep extends PureComponent<Props> {
 
   public render() {
     return (
-      <div className={this.skippableClassName}>
+      <div className="onboarding-step">
         <Form onSubmit={this.handleClickNext}>
           <div className="wizard-step--scroll-area">
             <FancyScrollbar autoHide={false}>
@@ -189,18 +188,6 @@ export class SelectDataSourceStep extends PureComponent<Props> {
   private get isStreaming(): boolean {
     return this.props.substep === 'streaming'
   }
-
-  private get skippableClassName(): string {
-    const {telegrafPlugins} = this.props
-    const pluginsSelected = telegrafPlugins.length > 0
-    const allConfigured = telegrafPlugins.every(
-      plugin => plugin.configured === 'configured'
-    )
-
-    return classnames('onboarding-step', {
-      'wizard--skippable': pluginsSelected && allConfigured,
-    })
-  }
 }
 
 export default SelectDataSourceStep
diff --git a/ui/src/onboarding/components/side_bar/SideBar.scss b/ui/src/onboarding/components/side_bar/SideBar.scss
index 8347f48352..b5b269c501 100644
--- a/ui/src/onboarding/components/side_bar/SideBar.scss
+++ b/ui/src/onboarding/components/side_bar/SideBar.scss
@@ -13,7 +13,6 @@ $sidebar-width-md: 240px;
   overflow: hidden;
   transform: translate3d(0,0,0);
   flex: 1 0 0;
-  transition: flex 0.4s ease-in-out;
 
   &.show {
     flex: 1 0 $sidebar-width-sm;
@@ -23,7 +22,6 @@ $sidebar-width-md: 240px;
 .side-bar--container {
   box-sizing: border-box;
   opacity: 0;
-  transition: opacity 0.5s ease;
   height: 100%;
   width: 100%;
   display: inline-flex;
@@ -63,7 +61,6 @@ $sidebar-width-md: 240px;
   color: $g10-wolf;
   background-color: transparent;
   white-space: nowrap;
-  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
 
   &:hover {
     color: $g15-platinum;
@@ -83,7 +80,6 @@ $sidebar-width-md: 240px;
   display: inline-block;
   font-size: 16px;
   margin: 0 13px;
-  transition: color 0.25s ease-in-out;
 
   .side-bar--tab:hover & {
     color: $g11-sidewalk;
diff --git a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
index 903d039bb1..524790b3f9 100644
--- a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
+++ b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
@@ -69,7 +69,7 @@ export class VerifyDataStep extends PureComponent<Props> {
     } = this.props
 
     return (
-      <div className="onboarding-step wizard--skippable">
+      <div className="onboarding-step">
         <Form onSubmit={this.handleIncrementStep}>
           <div className="wizard-step--scroll-area">
             <FancyScrollbar autoHide={false}>