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,7 +64,6 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
     } = this.props
 
     return (
-      <div className="onboarding-step wizard--skippable">
       <ConfigureDataSourceSwitcher
         buckets={buckets}
         bucket={bucket}
@@ -81,7 +80,6 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
         onClickPrevious={this.handlePrevious}
         onClickSkip={this.jumpToCompletionStep}
       />
-      </div>
     )
   }
 

ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx

@@ -60,6 +60,7 @@ class ConfigureDataSourceSwitcher extends PureComponent<Props> {
     switch (dataLoaderType) {
       case DataLoaderType.Streaming:
         return (
+          <div className="onboarding-step wizard--skippable">
             <PluginConfigSwitcher
               onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig}
               onRemoveConfigValue={onRemoveConfigValue}
@@ -71,23 +72,28 @@ class ConfigureDataSourceSwitcher extends PureComponent<Props> {
               onClickPrevious={onClickPrevious}
               onClickSkip={onClickSkip}
             />
+          </div>
         )
       case DataLoaderType.LineProtocol:
         return (
+          <div className="onboarding-step">
             <LineProtocol
               bucket={bucket}
               org={org}
               onClickNext={onClickNext}
               onClickBack={onClickPrevious}
             />
+          </div>
         )
       case DataLoaderType.Scraping:
         return (
+          <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}>