Merge pull request #11505 from influxdata/fix/scrapers-no-buckets

fix(ui/dataLoaders): Update scrapers bucket dropdown to not fail when there's no buckets

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

@@ -27,13 +27,16 @@ export class ScraperTarget extends PureComponent<Props> {
   }
 
   public render() {
-    const {bucket, onSelectBucket, url} = this.props
+    const {onSelectBucket, url} = this.props
     return (
       <Grid>
         <Grid.Row>
           <Grid.Column widthXS={Columns.Eight} offsetXS={Columns.Two}>
             <Form.Element label="Bucket">
-              <Dropdown selectedID={bucket} onChange={onSelectBucket}>
+              <Dropdown
+                selectedID={this.selectedBucket}
+                onChange={onSelectBucket}
+              >
                 {this.dropdownBuckets}
               </Dropdown>
             </Form.Element>
@@ -66,8 +69,24 @@ 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}>

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

@@ -1,6 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
+import _ from 'lodash'
 
 // Components
 import {Form, ComponentStatus} from 'src/clockface'
@@ -51,7 +52,7 @@ export class Scraping extends PureComponent<Props> {
     } = this.props
 
     if (!scraperBucket) {
-      onSetScraperTargetBucket(currentBucket || buckets[0].name)
+      onSetScraperTargetBucket(currentBucket || _.get(buckets, '0.name', ''))
     }
   }
 
@@ -96,6 +97,9 @@ export class Scraping extends PureComponent<Props> {
 
   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
@@ -107,7 +111,11 @@ export class Scraping extends PureComponent<Props> {
   }
 
   private get nextButtonStatus(): ComponentStatus {
-    if (this.props.url === '') {
+    if (
+      this.props.url === '' ||
+      !this.props.buckets ||
+      !this.props.buckets.length
+    ) {
       return ComponentStatus.Disabled
     }
     return ComponentStatus.Default

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

@@ -17,11 +17,21 @@ exports[`ScraperTarget rendering renders! 1`] = `
           menuColor="sapphire"
           mode="radio"
           onChange={[MockFunction]}
-          selectedID=""
+          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>
       </FormElement>
     </GridColumn>
     <GridColumn