Merge pull request #1917 from influxdata/dataLoaders/download-before-…

…creation

Fix(ui/dataLoaders): Hide download button if there's nothing to download

ui/src/onboarding/components/OnboardingSideBar.test.tsx

@@ -4,16 +4,22 @@ import {shallow} from 'enzyme'
 
 // Components
 import OnboardingSideBar from 'src/onboarding/components/OnboardingSideBar'
-import {cpuPlugin, influxDB2Plugin} from 'mocks/dummyData'
+import {cpuTelegrafPlugin, diskTelegrafPlugin} from 'mocks/dummyData'
+import {Button} from 'src/clockface'
+import SideBarTab from 'src/onboarding/components/side_bar/SideBarTab'
 
 const onClick = jest.fn(() => {})
 
-const setup = (override?) => {
+const setup = (override = {}) => {
   const props = {
     title: 'title',
     visible: true,
     telegrafPlugins: [],
     onTabClick: onClick,
+    telegrafConfigID: '',
+    notify: jest.fn(),
+    currentStepIndex: 0,
+    onNewSourceClick: jest.fn(),
     ...override,
   }
 
@@ -25,10 +31,54 @@ const setup = (override?) => {
 describe('OnboardingSideBar', () => {
   describe('rendering', () => {
     it('renders! wee!', () => {
-      const {wrapper} = setup({telegrafPlugins: [cpuPlugin, influxDB2Plugin]})
+      const {wrapper} = setup({
+        telegrafPlugins: [cpuTelegrafPlugin, diskTelegrafPlugin],
+      })
 
       expect(wrapper.exists()).toBe(true)
       expect(wrapper).toMatchSnapshot()
     })
   })
+
+  describe('if on selection step', () => {
+    it('renders the tabs but no buttons', () => {
+      const {wrapper} = setup({
+        currentStepIndex: 2,
+        telegrafPlugins: [cpuTelegrafPlugin, diskTelegrafPlugin],
+      })
+
+      const buttons = wrapper.find(Button)
+      const tabs = wrapper.find(SideBarTab)
+
+      expect(buttons.exists()).toBe(false)
+      expect(tabs.exists()).toBe(true)
+    })
+  })
+
+  describe('if there is not a telegraf config id', () => {
+    it('renders the streaming sources button but not download config button', () => {
+      const {wrapper} = setup({currentStepIndex: 3})
+
+      const downloadButton = wrapper.find('[data-test="download"]')
+      const addNewSourceButton = wrapper.find('[data-test="new"]')
+
+      expect(downloadButton.exists()).toBe(false)
+      expect(addNewSourceButton.exists()).toBe(true)
+    })
+  })
+
+  describe('if there is a telegraf config id', () => {
+    it('renders the streaming sources button and the download config button', () => {
+      const {wrapper} = setup({
+        currentStepIndex: 3,
+        telegrafConfigID: 'ajefoiaijesfk',
+      })
+
+      const downloadButton = wrapper.find('[data-test="download"]')
+      const addNewSourceButton = wrapper.find('[data-test="new"]')
+
+      expect(downloadButton.exists()).toBe(true)
+      expect(addNewSourceButton.exists()).toBe(true)
+    })
+  })
 })

ui/src/onboarding/components/OnboardingSideBar.tsx

@@ -70,26 +70,43 @@ class OnboardingSideBar extends Component<Props> {
     ))
   }
 
-  private get buttons(): JSX.Element[] {
-    const {onNewSourceClick} = this.props
-    return [
+  private get downloadButton(): JSX.Element {
+    return (
       <SideBar.Button
         key="Download Config File"
         text="Download Config File"
         titleText="Download Config File"
+        data-test="download"
         color={ComponentColor.Secondary}
         icon={IconFont.Download}
         onClick={this.handleDownload}
-      />,
+      />
+    )
+  }
+
+  private get streamingButton(): JSX.Element {
+    const {onNewSourceClick} = this.props
+
+    return (
       <SideBar.Button
         text="Add New Source"
         key="Add New Source"
         titleText="Add New Source"
+        data-test="new"
         color={ComponentColor.Default}
         icon={IconFont.Plus}
         onClick={onNewSourceClick}
-      />,
-    ]
+      />
+    )
+  }
+
+  private get buttons(): JSX.Element[] {
+    const {telegrafConfigID} = this.props
+
+    if (telegrafConfigID) {
+      return [this.downloadButton, this.streamingButton]
+    }
+    return [this.streamingButton]
   }
 
   private handleDownload = async () => {

ui/src/onboarding/components/__snapshots__/OnboardingSideBar.test.tsx.snap

@@ -6,29 +6,27 @@ exports[`OnboardingSideBar rendering renders! wee! 1`] = `
   visible={true}
 >
   <SideBarTab
+    active={false}
     id="cpu"
     key="cpu"
     label="cpu"
     onClick={[MockFunction]}
+    status="default"
   />
   <SideBarTab
-    id="influxdb_v2"
-    key="influxdb_v2"
-    label="influxdb_v2"
+    active={false}
+    id="disk"
+    key="disk"
+    label="disk"
     onClick={[MockFunction]}
-  />
-  <SideBarButton
-    color="secondary"
-    icon="download"
-    key="Download Config File"
-    onClick={[Function]}
-    text="Download Config File"
-    titleText="Download Config File"
+    status="default"
   />
   <SideBarButton
     color="default"
+    data-test="new"
     icon="plus"
     key="Add New Source"
+    onClick={[MockFunction]}
     text="Add New Source"
     titleText="Add New Source"
   />