remove sidebar on selection step (#11473)

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) => {

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 {

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}
+      />
     )
   }
 

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>

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

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;

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}>