fix(ui/dataLoaders): Move plugins sidebar into only collectors configure step

CHANGELOG.md

@@ -12,6 +12,7 @@
 1. [11689](https://github.com/influxdata/influxdb/pull/11689): Change the wording for the Collectors configure step button to Create and Verify
 1. [11697](https://github.com/influxdata/influxdb/pull/11697): Standardize page loading spinner styles
 1. [11711](https://github.com/influxdata/influxdb/pull/11711): Show checkbox on Save As button in data explorer
+1. [11705](https://github.com/influxdata/influxdb/pull/11705): Make collectors plugins side bar visible in only the configure step
 
 ## v2.0.0-alpha.1 [2019-01-23]
 

ui/src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher.tsx

@@ -28,7 +28,7 @@ class StepSwitcher extends PureComponent<Props> {
         return <SelectCollectorsStep {...stepProps} buckets={buckets} />
       case CollectorsStep.Configure:
         return (
-          <div className="onboarding-step wizard--skippable">
+          <div className="onboarding-step">
             <PluginConfigSwitcher />
           </div>
         )

ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx

@@ -7,7 +7,6 @@ import _ from 'lodash'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
 import CollectorsStepSwitcher from 'src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher'
-import PluginsSideBar from 'src/dataLoaders/components/PluginsSideBar'
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -87,7 +86,7 @@ class CollectorsWizard extends PureComponent<Props> {
   }
 
   public render() {
-    const {visible, buckets, telegrafPlugins, currentStepIndex} = this.props
+    const {visible, buckets} = this.props
 
     return (
       <WizardOverlay
@@ -96,13 +95,6 @@ class CollectorsWizard extends PureComponent<Props> {
         onDismiss={this.handleDismiss}
       >
         <div className="wizard-contents">
-          <PluginsSideBar
-            telegrafPlugins={telegrafPlugins}
-            onTabClick={this.handleClickSideBarTab}
-            title="Plugins to Configure"
-            visible={this.sideBarVisible}
-            currentStepIndex={currentStepIndex}
-          />
           <div className="wizard-step--container">
             <CollectorsStepSwitcher
               stepProps={this.stepProps}
@@ -139,30 +131,6 @@ class CollectorsWizard extends PureComponent<Props> {
     this.props.onClearSteps()
   }
 
-  private get sideBarVisible() {
-    const {telegrafPlugins, currentStepIndex} = this.props
-
-    const isNotEmpty = telegrafPlugins.length > 0
-    const isConfigStep = currentStepIndex > 0
-
-    return isNotEmpty && isConfigStep
-  }
-
-  private handleClickSideBarTab = (tabID: string) => {
-    const {
-      onSetActiveTelegrafPlugin,
-      telegrafPlugins,
-      onSetPluginConfiguration,
-    } = this.props
-
-    const activeTelegrafPlugin = telegrafPlugins.find(tp => tp.active)
-    if (!!activeTelegrafPlugin) {
-      onSetPluginConfiguration(activeTelegrafPlugin.name)
-    }
-
-    onSetActiveTelegrafPlugin(tabID)
-  }
-
   private get stepProps(): CollectorsStepProps {
     const {
       notify,

ui/src/dataLoaders/components/PluginsSideBar.test.tsx → ui/src/dataLoaders/components/collectorsWizard/configure/PluginsSideBar.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import {shallow} from 'enzyme'
 
 // Components
-import PluginsSideBar from 'src/dataLoaders/components/PluginsSideBar'
+import PluginsSideBar from 'src/dataLoaders/components/collectorsWizard/configure/PluginsSideBar'
 import {cpuTelegrafPlugin, diskTelegrafPlugin} from 'mocks/dummyData'
 import SideBarTab from 'src/dataLoaders/components/side_bar/SideBarTab'
 

ui/src/dataLoaders/components/PluginsSideBar.tsx → ui/src/dataLoaders/components/collectorsWizard/configure/PluginsSideBar.tsx

@@ -11,7 +11,6 @@ interface Props {
   visible: boolean
   telegrafPlugins: TelegrafPlugin[]
   onTabClick: (tabID: string) => void
-  currentStepIndex: number
 }
 
 const configStateToTabStatus = (cs: ConfigurationState): TabStatus => {
@@ -30,17 +29,10 @@ class PluginsSideBar extends Component<Props> {
     const {title, visible} = this.props
     return (
       <SideBar title={title} visible={visible}>
-        {this.content}
+        {this.tabs}
       </SideBar>
     )
   }
-  private get content(): JSX.Element[] {
-    const {currentStepIndex} = this.props
-    if (currentStepIndex !== 2) {
-      return [...this.tabs]
-    }
-    return this.tabs
-  }
 
   private get tabs(): JSX.Element[] {
     const {telegrafPlugins, onTabClick} = this.props

ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx

@@ -6,59 +6,82 @@ import {connect} from 'react-redux'
 import {Form, Input, InputType, ComponentSize} from 'src/clockface'
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
+import PluginsSideBar from 'src/dataLoaders/components/collectorsWizard/configure/PluginsSideBar'
 
 // Actions
-import {setTelegrafConfigName} from 'src/dataLoaders/actions/dataLoaders'
+import {
+  setTelegrafConfigName,
+  setActiveTelegrafPlugin,
+  setPluginConfiguration,
+} from 'src/dataLoaders/actions/dataLoaders'
 import {
   incrementCurrentStepIndex,
   decrementCurrentStepIndex,
 } from 'src/dataLoaders/actions/steps'
 
 // Types
 import {AppState} from 'src/types/v2/index'
+import {TelegrafPlugin} from 'src/types/v2/dataLoaders'
 
 interface DispatchProps {
   onSetTelegrafConfigName: typeof setTelegrafConfigName
+  onSetActiveTelegrafPlugin: typeof setActiveTelegrafPlugin
+  onSetPluginConfiguration: typeof setPluginConfiguration
   onIncrementStep: typeof incrementCurrentStepIndex
   onDecrementStep: typeof decrementCurrentStepIndex
 }
 
 interface StateProps {
   telegrafConfigName: string
+  telegrafPlugins: TelegrafPlugin[]
 }
 
 type Props = DispatchProps & StateProps
 
 export class TelegrafPluginInstructions extends PureComponent<Props> {
   public render() {
-    const {telegrafConfigName, onDecrementStep, onIncrementStep} = this.props
+    const {
+      telegrafConfigName,
+      telegrafPlugins,
+      onDecrementStep,
+      onIncrementStep,
+    } = this.props
     return (
       <Form onSubmit={onIncrementStep}>
         <div className="wizard-step--scroll-area">
-          <FancyScrollbar autoHide={false}>
-            <div className="wizard-step--scroll-content">
-              <h3 className="wizard-step--title">
-                Telegraf Configuration Information
-              </h3>
-              <h5 className="wizard-step--sub-title">
-                Telegraf is a plugin based data collection agent. Click on the
-                plugin names to the left in order to configure the selected
-                plugins. For more information about Telegraf Plugins, see
-                documentation.
-              </h5>
-              <Form.Element label="Telegraf Configuration Name">
-                <Input
-                  type={InputType.Text}
-                  value={telegrafConfigName}
-                  onChange={this.handleNameInput}
-                  titleText="Telegraf Configuration Name"
-                  size={ComponentSize.Medium}
-                  autoFocus={true}
-                />
-              </Form.Element>
-            </div>
-          </FancyScrollbar>
+          <div className="wizard--columns">
+            <PluginsSideBar
+              telegrafPlugins={telegrafPlugins}
+              onTabClick={this.handleClickSideBarTab}
+              title="Plugins to Configure"
+              visible={this.sideBarVisible}
+            />
+            <FancyScrollbar autoHide={false}>
+              <div className="wizard-step--scroll-content">
+                <h3 className="wizard-step--title">
+                  Telegraf Configuration Information
+                </h3>
+                <h5 className="wizard-step--sub-title">
+                  Telegraf is a plugin based data collection agent. Click on the
+                  plugin names to the left in order to configure the selected
+                  plugins. For more information about Telegraf Plugins, see
+                  documentation.
+                </h5>
+                <Form.Element label="Telegraf Configuration Name">
+                  <Input
+                    type={InputType.Text}
+                    value={telegrafConfigName}
+                    onChange={this.handleNameInput}
+                    titleText="Telegraf Configuration Name"
+                    size={ComponentSize.Medium}
+                    autoFocus={true}
+                  />
+                </Form.Element>
+              </div>
+            </FancyScrollbar>
+          </div>
         </div>
+
         <OnboardingButtons
           onClickBack={onDecrementStep}
           nextButtonText={'Create and Verify'}
@@ -67,26 +90,51 @@ export class TelegrafPluginInstructions extends PureComponent<Props> {
     )
   }
 
+  private get sideBarVisible() {
+    const {telegrafPlugins} = this.props
+
+    return telegrafPlugins.length > 0
+  }
+
   private handleNameInput = (e: ChangeEvent<HTMLInputElement>) => {
     this.props.onSetTelegrafConfigName(e.target.value)
   }
+
+  private handleClickSideBarTab = (tabID: string) => {
+    const {
+      onSetActiveTelegrafPlugin,
+      telegrafPlugins,
+      onSetPluginConfiguration,
+    } = this.props
+
+    const activeTelegrafPlugin = telegrafPlugins.find(tp => tp.active)
+    if (!!activeTelegrafPlugin) {
+      onSetPluginConfiguration(activeTelegrafPlugin.name)
+    }
+
+    onSetActiveTelegrafPlugin(tabID)
+  }
 }
 
 const mstp = ({
   dataLoading: {
-    dataLoaders: {telegrafConfigName},
+    dataLoaders: {telegrafConfigName, telegrafPlugins},
   },
 }: AppState): StateProps => {
   return {
     telegrafConfigName,
+    telegrafPlugins,
   }
 }
 
 const mdtp: DispatchProps = {
   onSetTelegrafConfigName: setTelegrafConfigName,
   onIncrementStep: incrementCurrentStepIndex,
   onDecrementStep: decrementCurrentStepIndex,
+  onSetActiveTelegrafPlugin: setActiveTelegrafPlugin,
+  onSetPluginConfiguration: setPluginConfiguration,
 }
+
 export default connect<StateProps, DispatchProps, {}>(
   mstp,
   mdtp

ui/src/dataLoaders/components/side_bar/SideBar.scss

@@ -13,6 +13,9 @@ $sidebar-width-md: 240px;
   overflow: hidden;
   transform: translate3d(0,0,0);
   flex: 1 0 0;
+  border-radius: $radius;
+  background-color: $g2-kevlar;
+  margin: $ix-marg-b;
 
   &.show {
     flex: 1 0 $sidebar-width-sm;
@@ -26,7 +29,6 @@ $sidebar-width-md: 240px;
   width: 100%;
   display: inline-flex;
   flex-direction: column;
-  align-items: stretch;
   padding: $ix-marg-e 0 34px 0;
 }
 

ui/src/dataLoaders/components/side_bar/SideBar.test.tsx

@@ -8,10 +8,6 @@ import SideBar from 'src/dataLoaders/components/side_bar/SideBar'
 // Types
 import {SideBarTabStatus as TabStatus} from 'src/dataLoaders/components/side_bar/SideBar'
 
-// Constants
-import {ComponentColor} from 'src/clockface'
-import {IconFont} from 'src/clockface'
-
 const onClick = jest.fn(() => {})
 
 const childrenArray = [
@@ -31,20 +27,6 @@ const childrenArray = [
     status={TabStatus.Default}
     onClick={onClick}
   />,
-  <SideBar.Button
-    key="a"
-    text="a"
-    titleText="a"
-    color={ComponentColor.Secondary}
-    icon={IconFont.Download}
-  />,
-  <SideBar.Button
-    text="b"
-    key="b"
-    titleText="b"
-    color={ComponentColor.Default}
-    icon={IconFont.Plus}
-  />,
 ]
 
 const setup = (override?, childrenArray = []) => {
@@ -71,7 +53,6 @@ describe('SideBar', () => {
         expect(wrapper.exists()).toBe(true)
         expect(wrapper.contains(childrenArray[0])).toBe(true)
         expect(wrapper.find(SideBar.Tab)).toHaveLength(2)
-        expect(wrapper.find(SideBar.Button)).toHaveLength(2)
         expect(wrapper).toMatchSnapshot()
       })
   })

ui/src/dataLoaders/components/side_bar/SideBar.tsx

@@ -6,7 +6,6 @@ import classnames from 'classnames'
 import SideBarTab from 'src/dataLoaders/components/side_bar/SideBarTab'
 import SideBarButton from 'src/dataLoaders/components/side_bar/SideBarButton'
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
-import {ComponentSpacer, Stack, Alignment} from 'src/clockface'
 
 // Styles
 import './SideBar.scss'
@@ -39,11 +38,6 @@ class SideBar extends Component<Props> {
           <FancyScrollbar autoHide={false}>
             <div className="side-bar--tabs">{this.childTabs}</div>
           </FancyScrollbar>
-          <div className="side-bar--buttons">
-            <ComponentSpacer stackChildren={Stack.Rows} align={Alignment.Left}>
-              {this.childButtons}
-            </ComponentSpacer>
-          </div>
         </div>
       </div>
     )
@@ -63,15 +57,6 @@ class SideBar extends Component<Props> {
       }
     })
   }
-
-  private get childButtons(): JSX.Element[] {
-    const {children} = this.props
-    return React.Children.map(children, (child: JSX.Element) => {
-      if (child.type === SideBarButton) {
-        return child
-      }
-    })
-  }
 }
 
 export default SideBar