From 3be556d2301cb759e12978d69fb5fd0df05bad3e Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Tue, 16 Oct 2018 14:33:54 -0700 Subject: [PATCH] Protoboard wizard updates (#4601) * fix background color, increase icon size * Remove suggest dashboards button, auto-suggest dashboards * style updates * Add selected dashboard count to next button * add label getter * Skip loads completion card instead of exiting wizard --- .../card_select/CardSelectCard.scss | 4 +- .../card_select/ProtoboardIcon.scss | 4 +- .../components/wizard/WizardController.tsx | 20 +++---- .../components/wizard/WizardFullScreen.scss | 6 +- .../components/wizard/WizardStep.scss | 5 +- .../WizardController.test.tsx.snap | 18 ++++++ .../sources/components/ConnectionWizard.tsx | 21 +++++++ ui/src/sources/components/DashboardStep.scss | 5 +- ui/src/sources/components/DashboardStep.tsx | 55 +++++++++++-------- ui/src/sources/components/WelcomeStep.scss | 3 +- .../sources/containers/OnboardingWizard.tsx | 21 ++++++- 11 files changed, 115 insertions(+), 47 deletions(-) diff --git a/ui/src/reusable_ui/components/card_select/CardSelectCard.scss b/ui/src/reusable_ui/components/card_select/CardSelectCard.scss index 57efdc188..0f12df443 100644 --- a/ui/src/reusable_ui/components/card_select/CardSelectCard.scss +++ b/ui/src/reusable_ui/components/card_select/CardSelectCard.scss @@ -6,7 +6,7 @@ .card-select--card { min-width: 100%; min-height: 100%; - background-color: $g1-raven; + background-color: $g2-kevlar; border-radius: $radius; border: $ix-border solid transparent; transition: border-color 0.2s ease, background-color 0.2s ease; @@ -71,7 +71,7 @@ min-width: 100%; display: inline-block; position: absolute; - bottom: 5%; + bottom: 10%; font-family: $ix-text-font; color: $ix-text-default; font-size: $ix-text-base; diff --git a/ui/src/reusable_ui/components/card_select/ProtoboardIcon.scss b/ui/src/reusable_ui/components/card_select/ProtoboardIcon.scss index f579e0417..d7914bc2d 100644 --- a/ui/src/reusable_ui/components/card_select/ProtoboardIcon.scss +++ b/ui/src/reusable_ui/components/card_select/ProtoboardIcon.scss @@ -2,8 +2,8 @@ position: relative; svg { - margin: 0 20%; - width: 60%; + margin: 0 10%; + width: 80%; } .protoboard-icon--shape { diff --git a/ui/src/reusable_ui/components/wizard/WizardController.tsx b/ui/src/reusable_ui/components/wizard/WizardController.tsx index 8b94ad14c..94fb65e81 100644 --- a/ui/src/reusable_ui/components/wizard/WizardController.tsx +++ b/ui/src/reusable_ui/components/wizard/WizardController.tsx @@ -170,18 +170,16 @@ class WizardController extends PureComponent { private get skipLink() { const {handleSkip, skipLinkText} = this.props + const {steps} = this.state - if (handleSkip) { - return ( - - ) - } - return null + return ( + + ) } private get switchLink() { diff --git a/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss b/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss index 6bdcdbf9b..7b1972bb2 100644 --- a/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss +++ b/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss @@ -11,6 +11,8 @@ position: relative; min-width: 100%; min-height: 100%; + background-color: $g0-obsidian; + @include gradient-v($g2-kevlar,$g0-obsidian); } .wizard-container { @@ -18,7 +20,7 @@ display: inline-flex; border-radius: $radius; width: 60%; - min-width: 800px; - max-width: 1200px; + min-width: 700px; + max-width: 1000px; background-color: $g1-raven; } \ No newline at end of file diff --git a/ui/src/reusable_ui/components/wizard/WizardStep.scss b/ui/src/reusable_ui/components/wizard/WizardStep.scss index 9b230ab11..3951d3405 100644 --- a/ui/src/reusable_ui/components/wizard/WizardStep.scss +++ b/ui/src/reusable_ui/components/wizard/WizardStep.scss @@ -11,9 +11,10 @@ } .wizard-step--child { - padding: 0 $ix-marg-d $ix-marg-d $ix-marg-d; + padding: 0 $ix-marg-d $ix-marg-b $ix-marg-d; + margin: $ix-marg-b auto; overflow-y: auto; - max-height: 30vh; + max-height: 45vh; min-height: 10vh; position: relative; z-index: 10; diff --git a/ui/src/reusable_ui/components/wizard/test/__snapshots__/WizardController.test.tsx.snap b/ui/src/reusable_ui/components/wizard/test/__snapshots__/WizardController.test.tsx.snap index f4eeb242b..5a3346788 100644 --- a/ui/src/reusable_ui/components/wizard/test/__snapshots__/WizardController.test.tsx.snap +++ b/ui/src/reusable_ui/components/wizard/test/__snapshots__/WizardController.test.tsx.snap @@ -40,6 +40,12 @@ exports[`WizardController with multiple children matches snapshot with two child > step child 1 + `; @@ -82,6 +88,12 @@ exports[`WizardController with multiple children with first step complete matche > step child 2 + `; @@ -120,5 +132,11 @@ exports[`WizardController with one child matches snapshot with one child 1`] = ` > only step child + `; diff --git a/ui/src/sources/components/ConnectionWizard.tsx b/ui/src/sources/components/ConnectionWizard.tsx index af13c3afe..565067fd0 100644 --- a/ui/src/sources/components/ConnectionWizard.tsx +++ b/ui/src/sources/components/ConnectionWizard.tsx @@ -32,6 +32,7 @@ interface State { dashboardError: boolean dashboardsCreated: Protoboard[] hasNextOnDashboard: boolean + selectedDashboards: number } @ErrorHandling @@ -59,6 +60,7 @@ class ConnectionWizard extends PureComponent { dashboardError: false, dashboardsCreated: [], hasNextOnDashboard: false, + selectedDashboards: 0, } } @@ -103,12 +105,15 @@ class ConnectionWizard extends PureComponent { tipText="Select Dashboards you would like to create:" isComplete={this.isDashboardComplete} isErrored={dashboardError} + nextLabel={this.dashboardNextLabel} onNext={this.handleDashboardNext} + previousLabel="Go Back" > (this.dashboardStepRef = c && c.getWrappedInstance())} source={source} dashboardsCreated={dashboardsCreated} + countSelected={this.countSelected} /> { return response } + private countSelected = (selectedDashboards: number) => { + this.setState({selectedDashboards}) + } + + private get dashboardNextLabel(): string { + const {selectedDashboards} = this.state + + if (selectedDashboards) { + return `Create ${selectedDashboards} Dashboard${ + selectedDashboards > 1 ? 's' : '' + }` + } + + return 'Next' + } + // KapacitorStep private isKapacitorComplete = () => { const {kapacitor} = this.state diff --git a/ui/src/sources/components/DashboardStep.scss b/ui/src/sources/components/DashboardStep.scss index 7123b9376..948891821 100644 --- a/ui/src/sources/components/DashboardStep.scss +++ b/ui/src/sources/components/DashboardStep.scss @@ -17,7 +17,6 @@ font-weight: 600; font-size: 14.5px; line-height: 1.55em; - color: #a4a8b6; - margin-bottom: 3px; - margin-left: 2px; + color: $g12-forge; + margin: $ix-marg-b 0 $ix-marg-a 2px; } \ No newline at end of file diff --git a/ui/src/sources/components/DashboardStep.tsx b/ui/src/sources/components/DashboardStep.tsx index e69b9de64..8679ce025 100644 --- a/ui/src/sources/components/DashboardStep.tsx +++ b/ui/src/sources/components/DashboardStep.tsx @@ -44,6 +44,7 @@ interface Props { notify: typeof notifyAction dashboardsCreated: Protoboard[] source: Source + countSelected: (selectedDashboards: number) => void } @ErrorHandling @@ -64,7 +65,8 @@ class DashboardStep extends Component { public async componentDidMount() { const protoboards = await getProtoboards() - this.setState({protoboards}) + this.props.countSelected(0) + this.setState({protoboards}, this.handleSuggest) } public next = async (): Promise => { @@ -106,12 +108,6 @@ class DashboardStep extends Component { placeholder="Filter by name..." onSearch={this.setSearchTerm} /> - {this.suggestedDashboardCards} {this.dashboardCards} @@ -194,21 +190,23 @@ class DashboardStep extends Component { const {protoboards} = this.state const {source, notify} = this.props - const suggestedProtoboardsList = await getSuggestedProtoboards( - source, - protoboards - ) + if (source) { + const suggestedProtoboardsList = await getSuggestedProtoboards( + source, + protoboards + ) - if (suggestedProtoboardsList.length === 0) { - notify(notifyNoSuggestedDashboards()) - return + if (suggestedProtoboardsList.length === 0) { + notify(notifyNoSuggestedDashboards()) + return + } + + const suggestedProtoboards = protoboards.filter(p => + suggestedProtoboardsList.includes(p.meta.name) + ) + + this.setState({suggestedProtoboards}) } - - const suggestedProtoboards = protoboards.filter(p => - suggestedProtoboardsList.includes(p.meta.name) - ) - - this.setState({suggestedProtoboards}) } private toggleChecked = (id: string) => () => { @@ -225,11 +223,22 @@ class DashboardStep extends Component { newSelected[id] = true } - this.setState({ - selected: newSelected, - }) + this.setState( + { + selected: newSelected, + }, + this.countSelectedDashboards + ) } } + + private countSelectedDashboards = () => { + const {countSelected} = this.props + const {selected} = this.state + const selectedDashboards = _.filter(selected, v => v === true).length + + countSelected(selectedDashboards) + } } const mdtp = { diff --git a/ui/src/sources/components/WelcomeStep.scss b/ui/src/sources/components/WelcomeStep.scss index 71f5081ef..77ff6f474 100644 --- a/ui/src/sources/components/WelcomeStep.scss +++ b/ui/src/sources/components/WelcomeStep.scss @@ -1,6 +1,7 @@ .wizard-step--bookend { text-align: center; + .auth-logo { - margin: $ix-marg-d auto; + margin: 0 auto $ix-marg-d auto; } } \ No newline at end of file diff --git a/ui/src/sources/containers/OnboardingWizard.tsx b/ui/src/sources/containers/OnboardingWizard.tsx index a9f2d9cdd..a0fd5018e 100644 --- a/ui/src/sources/containers/OnboardingWizard.tsx +++ b/ui/src/sources/containers/OnboardingWizard.tsx @@ -30,6 +30,7 @@ interface State { dashboardError: boolean dashboardsCreated: Protoboard[] hasNextOnDashboard: boolean + selectedDashboards: number } @ErrorHandling @@ -51,6 +52,7 @@ class OnboardingWizard extends PureComponent { dashboardError: false, dashboardsCreated: [], hasNextOnDashboard: false, + selectedDashboards: 0, } } @@ -68,7 +70,6 @@ class OnboardingWizard extends PureComponent { { tipText="Select dashboards you would like to create:" isComplete={this.isDashboardComplete} isErrored={dashboardError} + nextLabel={this.dashboardNextLabel} onNext={this.handleDashboardNext} previousLabel="Go Back" > @@ -116,6 +118,7 @@ class OnboardingWizard extends PureComponent { ref={c => (this.dashboardStepRef = c && c.getWrappedInstance())} dashboardsCreated={dashboardsCreated} source={source} + countSelected={this.countSelected} /> { return response } + private countSelected = (selectedDashboards: number) => { + this.setState({selectedDashboards}) + } + + private get dashboardNextLabel(): string { + const {selectedDashboards} = this.state + + if (selectedDashboards) { + return `Create ${selectedDashboards} Dashboard${ + selectedDashboards > 1 ? 's' : '' + }` + } + + return 'Next' + } + // KapacitorStep private isKapacitorComplete = () => { const {kapacitor} = this.state