Merge pull request #11468 from influxdata/fix/empty-bucket-collectors

Fix empty dropdown bucket in collectors

ui/mocks/dummyData.ts

@@ -519,6 +519,21 @@ export const authResponse = {
   request: {},
 }
 
+export const bucket = {
+  links: {
+    labels: '/api/v2/buckets/034a10d6f7a6b000/labels',
+    log: '/api/v2/buckets/034a10d6f7a6b000/log',
+    org: '/api/v2/orgs/034a0adc49a6b000',
+    self: '/api/v2/buckets/034a10d6f7a6b000',
+  },
+  id: '034a10d6f7a6b000',
+  organizationID: '034a0adc49a6b000',
+  organization: 'default',
+  name: 'newbuck',
+  retentionRules: [],
+  labels: [],
+}
+
 export const setSetupParamsResponse = {
   data: {
     user: {

ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx

@@ -12,7 +12,11 @@ import {ComponentStatus} from 'src/clockface'
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
 
 // Dummy Data
-import {defaultOnboardingStepProps, cpuTelegrafPlugin} from 'mocks/dummyData'
+import {
+  defaultOnboardingStepProps,
+  cpuTelegrafPlugin,
+  bucket,
+} from 'mocks/dummyData'
 import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
 
 const setup = (override = {}) => {
@@ -57,7 +61,10 @@ describe('Onboarding.Components.SelectionStep.SelectDataSourceStep', () => {
 
   describe('if type is line protocol', () => {
     it('renders back and next buttons with correct status', () => {
-      const wrapper = setup({type: DataLoaderType.LineProtocol})
+      const wrapper = setup({
+        type: DataLoaderType.LineProtocol,
+        buckets: [bucket],
+      })
       const onboardingButtons = wrapper.find(OnboardingButtons)
       expect(onboardingButtons.prop('nextButtonStatus')).toBe(
         ComponentStatus.Default
@@ -90,6 +97,7 @@ describe('Onboarding.Components.SelectionStep.SelectDataSourceStep', () => {
           currentStepIndex: 0,
           substep: 'streaming',
           telegrafPlugins: [cpuTelegrafPlugin],
+          buckets: [bucket],
         })
         const onboardingButtons = wrapper.find(OnboardingButtons)
         expect(onboardingButtons.prop('nextButtonStatus')).toBe(

ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx

@@ -76,7 +76,11 @@ export class SelectDataSourceStep extends PureComponent<Props> {
   }
 
   private get nextButtonStatus(): ComponentStatus {
-    const {type, telegrafPlugins} = this.props
+    const {type, telegrafPlugins, buckets} = this.props
+
+    if (!buckets || !buckets.length) {
+      return ComponentStatus.Disabled
+    }
 
     const isTypeEmpty = type === DataLoaderType.Empty
     const isStreamingWithoutPlugin =

ui/src/onboarding/components/selectionStep/StreamingSelector.tsx

@@ -130,11 +130,18 @@ class StreamingSelector extends PureComponent<Props, State> {
   private get selectedBucketID(): string {
     const {bucket, selectedBucket, buckets} = this.props
 
-    return selectedBucket || bucket || _.get(buckets, '0.name', '')
+    return selectedBucket || bucket || _.get(buckets, '0.name', '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}>