From b020f6b0d37275e5ed4e317bdfcd0b0c646de001 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 7 Jan 2019 14:09:07 -0800 Subject: [PATCH 1/2] feat(ui/onboarding): Allow filtering of plugin bundles --- ui/src/onboarding/OnboardingWizard.scss | 5 +++ .../selectionStep/StreamingSelector.test.tsx | 44 +++++++++++++++++++ .../selectionStep/StreamingSelector.tsx | 40 ++++++++++++++--- 3 files changed, 83 insertions(+), 6 deletions(-) create mode 100644 ui/src/onboarding/components/selectionStep/StreamingSelector.test.tsx diff --git a/ui/src/onboarding/OnboardingWizard.scss b/ui/src/onboarding/OnboardingWizard.scss index e3d79ac786..a1f37c7186 100644 --- a/ui/src/onboarding/OnboardingWizard.scss +++ b/ui/src/onboarding/OnboardingWizard.scss @@ -220,4 +220,9 @@ width: 90%; display: block; margin: 0 auto; +} + +.wizard-step--filter { + float:right; + padding-bottom: 15px; } \ No newline at end of file diff --git a/ui/src/onboarding/components/selectionStep/StreamingSelector.test.tsx b/ui/src/onboarding/components/selectionStep/StreamingSelector.test.tsx new file mode 100644 index 0000000000..2873039066 --- /dev/null +++ b/ui/src/onboarding/components/selectionStep/StreamingSelector.test.tsx @@ -0,0 +1,44 @@ +// Libraries +import React from 'react' +import {shallow} from 'enzyme' + +// Components +import StreamingSelector from 'src/onboarding/components/selectionStep/StreamingSelector' +import CardSelectCard from 'src/clockface/components/card_select/CardSelectCard' +import {Input} from 'src/clockface' + +// Constants +import {PLUGIN_BUNDLE_OPTIONS} from 'src/onboarding/constants/pluginConfigs' + +const setup = (override = {}) => { + const props = { + telegrafPlugins: [], + pluginBundles: [], + onTogglePluginBundle: jest.fn(), + ...override, + } + + return shallow() +} + +describe('Onboarding.Components.SelectionStep.StreamingSelector', () => { + it('renders a filter input and plugin bundles', () => { + const wrapper = setup() + const cards = wrapper.find(CardSelectCard) + const filter = wrapper.find(Input) + + expect(cards.length).toBe(PLUGIN_BUNDLE_OPTIONS.length) + expect(filter.exists()).toBe(true) + }) + + describe('if searchTerm is not empty', () => { + it('filters the plugin bundles', async () => { + const wrapper = setup() + const searchTerm = 'syste' + wrapper.setState({searchTerm}) + + const cards = wrapper.find(CardSelectCard) + expect(cards.length).toBe(1) + }) + }) +}) diff --git a/ui/src/onboarding/components/selectionStep/StreamingSelector.tsx b/ui/src/onboarding/components/selectionStep/StreamingSelector.tsx index 47b56870a4..8b90fac28e 100644 --- a/ui/src/onboarding/components/selectionStep/StreamingSelector.tsx +++ b/ui/src/onboarding/components/selectionStep/StreamingSelector.tsx @@ -1,11 +1,11 @@ // Libraries -import React, {PureComponent} from 'react' +import React, {PureComponent, ChangeEvent} from 'react' import uuid from 'uuid' // Components import {ErrorHandling} from 'src/shared/decorators/errors' import CardSelectCard from 'src/clockface/components/card_select/CardSelectCard' -import {GridSizer} from 'src/clockface' +import {GridSizer, Input, IconFont} from 'src/clockface' import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar' // Constants @@ -25,6 +25,7 @@ export interface Props { interface State { gridSizerUpdateFlag: string + searchTerm: string } const ANIMATION_LENGTH = 400 @@ -36,6 +37,7 @@ class StreamingSelector extends PureComponent { super(props) this.state = { gridSizerUpdateFlag: uuid.v4(), + searchTerm: '', } } @@ -55,7 +57,7 @@ class StreamingSelector extends PureComponent { } public render() { - const {gridSizerUpdateFlag} = this.state + const {gridSizerUpdateFlag, searchTerm} = this.state return ( { maxHeight={this.scrollMaxHeight} >
+
+ +
- {PLUGIN_BUNDLE_OPTIONS.map(b => { + {this.filteredBundles.map(b => { return ( { ) } - private isCardChecked(bundle: BundleName) { + private get filteredBundles(): BundleName[] { + const {searchTerm} = this.state + + return PLUGIN_BUNDLE_OPTIONS.filter(b => + b.toLowerCase().includes(searchTerm.toLowerCase()) + ) + } + + private isCardChecked(bundle: BundleName): boolean { const {pluginBundles} = this.props if (pluginBundles.find(b => b === bundle)) { @@ -96,9 +116,17 @@ class StreamingSelector extends PureComponent { return false } - private handleToggle = (bundle: BundleName) => () => { + private handleToggle = (bundle: BundleName) => (): void => { this.props.onTogglePluginBundle(bundle, this.isCardChecked(bundle)) } + + private handleFilterChange = (e: ChangeEvent): void => { + this.setState({searchTerm: e.target.value}) + } + + private handleFilterBlur = (e: ChangeEvent): void => { + this.setState({searchTerm: e.target.value}) + } } export default StreamingSelector From 6747b3545557ed9d28fb9e3ee32760af827afb5f Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 7 Jan 2019 15:01:44 -0800 Subject: [PATCH 2/2] fix(ui/dataLoaders): Ensure the type is streaming if the substep is streaming --- .../components/selectionStep/SelectDataSourceStep.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx index cb97694fbf..6ec98e8de2 100644 --- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx +++ b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx @@ -61,6 +61,12 @@ export class SelectDataSourceStep extends PureComponent { this.state = {showStreamingSources: false} } + public componentDidMount() { + if (this.isStreaming && this.props.type !== DataLoaderType.Streaming) { + this.props.onSetDataLoadersType(DataLoaderType.Streaming) + } + } + public render() { return (