diff --git a/ui/mocks/dummyData.ts b/ui/mocks/dummyData.ts index 9cfd748438..f902b53bc3 100644 --- a/ui/mocks/dummyData.ts +++ b/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: { diff --git a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx index c327870946..e071306c23 100644 --- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx +++ b/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( diff --git a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx index 9b3c351d76..62635ce094 100644 --- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx +++ b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx @@ -76,7 +76,11 @@ export class SelectDataSourceStep extends PureComponent { } 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 = diff --git a/ui/src/onboarding/components/selectionStep/StreamingSelector.tsx b/ui/src/onboarding/components/selectionStep/StreamingSelector.tsx index 7c6e2e0bd4..e5d2a41997 100644 --- a/ui/src/onboarding/components/selectionStep/StreamingSelector.tsx +++ b/ui/src/onboarding/components/selectionStep/StreamingSelector.tsx @@ -130,11 +130,18 @@ class StreamingSelector extends PureComponent { 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 [ + + {'No buckets found'} + , + ] + } return buckets.map(b => (