refactor(ui/dataLoaders): Update dataLoaders bucket dropdowns to be the same component

ui/src/dataLoaders/components/BucketsDropdown.test.tsx

@@ -0,0 +1,50 @@
+// Libraries
+import React from 'react'
+import {shallow} from 'enzyme'
+
+// Components
+import BucketsDropdown from 'src/dataLoaders/components/BucketsDropdown'
+import {Dropdown, ComponentStatus} from 'src/clockface'
+import {bucket} from 'mocks/dummyData'
+
+// Mocks
+
+const setup = (override = {}) => {
+  const props = {
+    selected: '',
+    buckets: [],
+    onSelectBucket: jest.fn(),
+    ...override,
+  }
+
+  const wrapper = shallow(<BucketsDropdown {...props} />)
+
+  return {wrapper}
+}
+
+describe('DataLoading.Components.BucketsDropdown', () => {
+  describe('when no buckets', () => {
+    it('renders disabled dropdown', () => {
+      const {wrapper} = setup()
+
+      const dropdown = wrapper.find(Dropdown)
+
+      expect(wrapper.exists()).toBe(true)
+      expect(dropdown.exists()).toBe(true)
+      expect(dropdown.prop('status')).toBe(ComponentStatus.Disabled)
+    })
+  })
+
+  describe('if buckets', () => {
+    it('renders dropdown', () => {
+      const buckets = [bucket]
+      const {wrapper} = setup({buckets})
+
+      const dropdown = wrapper.find(Dropdown)
+
+      expect(wrapper.exists()).toBe(true)
+      expect(dropdown.exists()).toBe(true)
+      expect(dropdown.prop('status')).toBe(ComponentStatus.Default)
+    })
+  })
+})

ui/src/dataLoaders/components/BucketsDropdown.tsx

@@ -0,0 +1,75 @@
+// Libraries
+import React, {PureComponent} from 'react'
+
+// Components
+import {Dropdown, ComponentStatus} from 'src/clockface'
+
+// Types
+import {Bucket} from 'src/api'
+
+interface Props {
+  selected: string
+  buckets: Bucket[]
+  onSelectBucket: (bucket: Bucket) => void
+}
+
+class BucketsDropdown extends PureComponent<Props> {
+  public render() {
+    return (
+      <Dropdown
+        titleText={this.title}
+        status={this.status}
+        selectedID={this.selectedID}
+        onChange={this.handleSelectBucket}
+      >
+        {this.dropdownBuckets}
+      </Dropdown>
+    )
+  }
+
+  private get title(): string {
+    if (this.isBucketsEmpty) {
+      return 'No buckets found'
+    }
+
+    return ''
+  }
+
+  private get status(): ComponentStatus {
+    if (this.isBucketsEmpty) {
+      return ComponentStatus.Disabled
+    }
+
+    return ComponentStatus.Default
+  }
+
+  private get selectedID(): string {
+    return this.props.selected || ''
+  }
+
+  private get isBucketsEmpty(): boolean {
+    const {buckets} = this.props
+    return !buckets || !buckets.length
+  }
+
+  private get dropdownBuckets(): JSX.Element[] {
+    const {buckets} = this.props
+    if (this.isBucketsEmpty) {
+      return []
+    }
+
+    return buckets.map(b => (
+      <Dropdown.Item key={b.name} value={b.name} id={b.name}>
+        {b.name}
+      </Dropdown.Item>
+    ))
+  }
+
+  private handleSelectBucket = (bucketName: string) => {
+    const bucket = this.props.buckets.find(b => b.name === bucketName)
+
+    this.props.onSelectBucket(bucket)
+  }
+}
+
+export default BucketsDropdown

ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.tsx

@@ -11,7 +11,6 @@ import {
   Input,
   IconFont,
   ComponentSize,
-  Dropdown,
   FormElement,
   Grid,
   Columns,
@@ -22,6 +21,7 @@ import {
   PLUGIN_BUNDLE_OPTIONS,
   BUNDLE_LOGOS,
 } from 'src/dataLoaders/constants/pluginConfigs'
+import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown'
 
 // Types
 import {TelegrafPlugin, BundleName} from 'src/types/v2/dataLoaders'
@@ -69,6 +69,7 @@ class StreamingSelector extends PureComponent<Props, State> {
   }
 
   public render() {
+    const {bucket, buckets} = this.props
     const {gridSizerUpdateFlag, searchTerm} = this.state
 
     return (
@@ -76,12 +77,11 @@ class StreamingSelector extends PureComponent<Props, State> {
         <Grid.Row>
           <Grid.Column widthSM={Columns.Five}>
             <FormElement label="Bucket">
-              <Dropdown
-                selectedID={this.selectedBucketID}
-                onChange={this.handleSelectBucket}
-              >
-                {this.dropdownBuckets}
-              </Dropdown>
+              <BucketDropdown
+                selected={bucket}
+                buckets={buckets}
+                onSelectBucket={this.handleSelectBucket}
+              />
             </FormElement>
           </Grid.Column>
           <Grid.Column widthSM={Columns.Five} offsetSM={Columns.Two}>
@@ -120,33 +120,10 @@ class StreamingSelector extends PureComponent<Props, State> {
     )
   }
 
-  private handleSelectBucket = (bucketName: string) => {
-    const bucket = this.props.buckets.find(b => b.name === bucketName)
-
+  private handleSelectBucket = (bucket: Bucket) => {
     this.props.onSelectBucket(bucket)
   }
 
-  private get selectedBucketID(): string {
-    return this.props.bucket || 'empty'
-  }
-
-  private get dropdownBuckets(): JSX.Element[] {
-    const {buckets} = this.props
-    if (!buckets || !buckets.length) {
-      return [
-        <Dropdown.Item key={'none'} value={'No buckets found'} id={'empty'}>
-          {'No buckets found'}
-        </Dropdown.Item>,
-      ]
-    }
-
-    return buckets.map(b => (
-      <Dropdown.Item key={b.name} value={b.name} id={b.name}>
-        {b.name}
-      </Dropdown.Item>
-    ))
-  }
-
   private get filteredBundles(): BundleName[] {
     const {searchTerm} = this.state
 

ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx

@@ -8,15 +8,16 @@ import {
   Columns,
   Grid,
   ComponentSize,
-  Dropdown,
   InputType,
   ComponentStatus,
 } from 'src/clockface'
+import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown'
+import {Bucket} from 'src/api'
 
 interface Props {
   bucket: string
-  buckets: string[]
-  onSelectBucket: (value: string) => void
+  buckets: Bucket[]
+  onSelectBucket: (bucket: Bucket) => void
   onChangeURL: (value: string) => void
   url: string
 }
@@ -27,18 +28,17 @@ export class ScraperTarget extends PureComponent<Props> {
   }
 
   public render() {
-    const {onSelectBucket, url} = this.props
+    const {onSelectBucket, url, bucket, buckets} = this.props
     return (
       <Grid>
         <Grid.Row>
           <Grid.Column widthXS={Columns.Eight} offsetXS={Columns.Two}>
             <Form.Element label="Bucket">
-              <Dropdown
-                selectedID={this.selectedBucket}
-                onChange={onSelectBucket}
-              >
-                {this.dropdownBuckets}
-              </Dropdown>
+              <BucketDropdown
+                selected={bucket}
+                buckets={buckets}
+                onSelectBucket={onSelectBucket}
+              />
             </Form.Element>
           </Grid.Column>
           <Grid.Column widthXS={Columns.Eight} offsetXS={Columns.Two}>
@@ -69,32 +69,6 @@ export class ScraperTarget extends PureComponent<Props> {
     return ComponentStatus.Default
   }
 
-  private get selectedBucket(): string {
-    const {buckets, bucket} = this.props
-
-    if (!buckets || !buckets.length) {
-      return 'empty'
-    }
-    return bucket
-  }
-
-  private get dropdownBuckets(): JSX.Element[] {
-    const {buckets} = this.props
-    if (!buckets || !buckets.length) {
-      return [
-        <Dropdown.Item key={'none'} value={'No buckets found'} id={'empty'}>
-          {'No buckets found'}
-        </Dropdown.Item>,
-      ]
-    }
-
-    return buckets.map(b => (
-      <Dropdown.Item key={b} value={b} id={b}>
-        {b}
-      </Dropdown.Item>
-    ))
-  }
-
   private get urlEmpty(): boolean {
     return !this.props.url
   }

ui/src/dataLoaders/components/configureStep/Scraping.tsx

@@ -56,7 +56,7 @@ export class Scraping extends PureComponent<Props> {
   }
 
   public render() {
-    const {scraperBucket, onSetScraperTargetURL, url} = this.props
+    const {scraperBucket, onSetScraperTargetURL, url, buckets} = this.props
 
     return (
       <Form onSubmit={this.handleSubmit}>
@@ -70,7 +70,7 @@ export class Scraping extends PureComponent<Props> {
               </h5>
               <ScraperTarget
                 bucket={scraperBucket}
-                buckets={this.buckets}
+                buckets={buckets}
                 onSelectBucket={this.handleSelectBucket}
                 onChangeURL={onSetScraperTargetURL}
                 url={url}
@@ -87,25 +87,12 @@ export class Scraping extends PureComponent<Props> {
     )
   }
 
-  private get buckets(): string[] {
-    const {buckets} = this.props
+  private handleSelectBucket = (bucket: Bucket) => {
+    const {onSetBucketInfo, onSetScraperTargetBucket} = this.props
+    const {organization, organizationID, id, name} = bucket
 
-    return buckets.map(b => b.name)
-  }
-
-  private handleSelectBucket = (bucket: string) => {
-    const {buckets, onSetScraperTargetBucket, onSetBucketInfo} = this.props
-    if (!buckets || !buckets.length) {
-      return
-    }
-
-    const findBucket = buckets.find(b => b.name === bucket)
-    const bucketID = findBucket.id
-    const org = findBucket.organization
-    const orgID = findBucket.organizationID
-
-    onSetBucketInfo(org, orgID, bucket, bucketID)
-    onSetScraperTargetBucket(bucket)
+    onSetBucketInfo(organization, organizationID, name, id)
+    onSetScraperTargetBucket(bucket.name)
   }
 
   private get nextButtonStatus(): ComponentStatus {

ui/src/dataLoaders/components/configureStep/__snapshots__/Scraper.test.tsx.snap

@@ -10,28 +10,11 @@ exports[`ScraperTarget rendering renders! 1`] = `
       <FormElement
         label="Bucket"
       >
-        <Dropdown
-          buttonColor="default"
-          buttonSize="sm"
-          maxMenuHeight={250}
-          menuColor="sapphire"
-          mode="radio"
-          onChange={[MockFunction]}
-          selectedID="empty"
-          status="default"
-          titleText=""
-          wrapText={false}
-        >
-          <DropdownItem
-            checkbox={false}
-            id="empty"
-            key="none"
-            selected={false}
-            value="No buckets found"
-          >
-            No buckets found
-          </DropdownItem>
-        </Dropdown>
+        <BucketsDropdown
+          buckets={Array []}
+          onSelectBucket={[MockFunction]}
+          selected=""
+        />
       </FormElement>
     </GridColumn>
     <GridColumn