From 48668e1565d4090e133d06f0a10cc47f9b80f6a3 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Tue, 14 May 2024 11:40:02 -0700 Subject: [PATCH] fix(ui): refactor wizard components to use hooks --- .../components/steps/Finish.tsx | 13 +- .../containers/ArduinoWizard.tsx | 255 ++++------------ .../containers/CSharpWizard.tsx | 267 ++++------------- .../containers/CliWizard.tsx | 263 ++++------------- .../containers/GoWizard.tsx | 250 ++++------------ .../containers/JavaWizard.tsx | 267 ++++------------- .../containers/NodejsWizard.tsx | 261 ++++------------ .../containers/PythonWizard.tsx | 278 ++++-------------- .../containers/WizardContainer.tsx | 142 +++++++++ 9 files changed, 558 insertions(+), 1438 deletions(-) create mode 100644 src/homepageExperience/containers/WizardContainer.tsx diff --git a/src/homepageExperience/components/steps/Finish.tsx b/src/homepageExperience/components/steps/Finish.tsx index 845372b91a..f9970d0759 100644 --- a/src/homepageExperience/components/steps/Finish.tsx +++ b/src/homepageExperience/components/steps/Finish.tsx @@ -21,7 +21,6 @@ import DashboardIntegrations from 'src/homepageExperience/components/steps/Dashb // Utils import {event} from 'src/cloud/utils/reporting' import {SafeBlankLink} from 'src/utils/SafeBlankLink' -import {isFlagEnabled} from 'src/shared/utils/featureFlag' import {isOrgIOx} from 'src/organizations/selectors' type OwnProps = { @@ -96,8 +95,10 @@ export const Finish = (props: OwnProps) => { } }, [finishStepCompleted, markStepAsCompleted, wizardEventName]) + const isIOxOrg = useSelector(isOrgIOx) + const writeOnly = - useSelector(isOrgIOx) && + isIOxOrg && (wizardEventName === 'arduinoWizard' || wizardEventName === 'nodejsWizard') const outroContent = writeOnly @@ -124,7 +125,7 @@ export const Finish = (props: OwnProps) => { alignItems={AlignItems.Stretch} direction={FlexDirection.Row} > - {isFlagEnabled('ioxOnboarding') ? ( + {isIOxOrg ? ( {

)} - {!isFlagEnabled('ioxOnboarding') && ( + {!isIOxOrg && ( { {props.wizardEventName !== 'cliWizard' && props.wizardEventName !== 'arduinoWizard' && - !isFlagEnabled('ioxOnboarding') ? ( + !isIOxOrg ? ( ) : null} - {isFlagEnabled('ioxOnboarding') && ( + {isIOxOrg && ( = () => { + const [selectedBucket, setSelectedBucket] = useState('my-bucket') + const [finishStepCompleted, setFinishStepCompleted] = useState(false) + const [tokenValue, setTokenValue] = useState(null) + const [finalFeedback, setFinalFeedback] = useState(null) -export class ArduinoWizard extends PureComponent<{}, State> { - state = { - currentStep: 1, - selectedBucket: 'sample-bucket', - finishStepCompleted: false, - tokenValue: null, - finalFeedback: null, - } - - private handleSelectBucket = (bucketName: string) => { - this.setState({selectedBucket: bucketName}) - } - - private handleMarkStepAsCompleted = () => { - this.setState({finishStepCompleted: true}) - } - - private setTokenValue = (tokenValue: string) => { - this.setState({tokenValue: tokenValue}) - } - - private setFinalFeedback = (feedbackValue: number) => { - this.setState({finalFeedback: feedbackValue}) - } - - subwayNavSteps = isFlagEnabled('ioxOnboarding') + const isIOxOrg = useSelector(isOrgIOx) + const subwayNavSteps = isIOxOrg ? HOMEPAGE_NAVIGATION_STEPS_ARDUINO_WRITE_ONLY : HOMEPAGE_NAVIGATION_STEPS_ARDUINO - handleNextClick = () => { - this.setState( - { - currentStep: Math.min( - this.state.currentStep + 1, - this.subwayNavSteps.length - ), - }, - () => { - event( - 'firstMile.arduinoWizard.next.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 2].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) - } - - handlePreviousClick = () => { - this.setState( - {currentStep: Math.max(this.state.currentStep - 1, 1)}, - () => { - event( - 'firstMile.arduinoWizard.previous.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) - } - - handleNavClick = (clickedStep: number) => { - this.setState({currentStep: clickedStep}) - event( - 'firstMile.arduinoWizard.subNav.clicked', - {}, - { - currentStep: normalizeEventName( - this.subwayNavSteps[clickedStep - 1].name - ), - } - ) - scrollNextPageIntoView() + const handleMarkStepAsCompleted = () => { + setFinishStepCompleted(true) } - renderStep = () => { - switch (this.state.currentStep) { + const renderStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -146,41 +56,41 @@ export class ArduinoWizard extends PureComponent<{}, State> { case 4: { return ( ) } case 5: { - return + return } case 6: { - if (isFlagEnabled('ioxOnboarding')) { + if (isIOxOrg) { return ( ) } else { - return + return } } case 7: { - return + return } case 8: { return ( ) } @@ -190,73 +100,16 @@ export class ArduinoWizard extends PureComponent<{}, State> { } } - render() { - return ( - - - -
- -
-
- - {this.renderStep()} - -
- -
-
-
-
- - - ) - } + return ( + + + {currentStep => renderStep(currentStep)} + + + ) } diff --git a/src/homepageExperience/containers/CSharpWizard.tsx b/src/homepageExperience/containers/CSharpWizard.tsx index 77a886f0bc..7e3ed98d39 100644 --- a/src/homepageExperience/containers/CSharpWizard.tsx +++ b/src/homepageExperience/containers/CSharpWizard.tsx @@ -1,141 +1,53 @@ -import React, {PureComponent} from 'react' -import classnames from 'classnames' - -import { - Button, - ComponentColor, - ComponentSize, - ComponentStatus, - Page, - SubwayNav, -} from '@influxdata/clockface' +// Libraries +import React, {FC, useState} from 'react' +import {useSelector} from 'react-redux' +// Contexts import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' -import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/csharp/InstallDependenciesSql' +// Components import {Overview} from 'src/homepageExperience/components/steps/Overview' +import {InstallDependencies} from 'src/homepageExperience/components/steps/csharp/InstallDependencies' +import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/csharp/InstallDependenciesSql' import {Tokens} from 'src/homepageExperience/components/steps/Tokens' +import {InitializeClient} from 'src/homepageExperience/components/steps/csharp/InitializeClient' import {InitializeClientSql} from 'src/homepageExperience/components/steps/csharp/InitializeClientSql' +import {WriteData} from 'src/homepageExperience/components/steps/csharp/WriteData' import {WriteDataSql} from 'src/homepageExperience/components/steps/csharp/WriteDataSql' +import {ExecuteQuery} from 'src/homepageExperience/components/steps/csharp/ExecuteQuery' import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/csharp/ExecuteQuerySql' +import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/csharp/ExecuteAggregateQuery' import {Finish} from 'src/homepageExperience/components/steps/Finish' -// Utils -import {event, normalizeEventName} from 'src/cloud/utils/reporting' +import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer' import {CSharpIcon} from 'src/homepageExperience/components/HomepageIcons' +// Selectors +import {isOrgIOx} from 'src/organizations/selectors' + +// Utils import { HOMEPAGE_NAVIGATION_STEPS, HOMEPAGE_NAVIGATION_STEPS_SQL, - scrollNextPageIntoView, } from 'src/homepageExperience/utils' -import {isFlagEnabled} from '../../shared/utils/featureFlag' -import {InstallDependencies} from '../components/steps/csharp/InstallDependencies' -import {InitializeClient} from '../components/steps/csharp/InitializeClient' -import {WriteData} from '../components/steps/csharp/WriteData' -import {ExecuteQuery} from '../components/steps/csharp/ExecuteQuery' -import {ExecuteAggregateQuery} from '../components/steps/csharp/ExecuteAggregateQuery' -interface State { - currentStep: number - selectedBucket: string - finishStepCompleted: boolean - tokenValue: string - finalFeedback: number -} +export const CSharpWizard: FC<{}> = () => { + const [selectedBucket, setSelectedBucket] = useState('my-bucket') + const [finishStepCompleted, setFinishStepCompleted] = useState(false) + const [tokenValue, setTokenValue] = useState(null) + const [finalFeedback, setFinalFeedback] = useState(null) -export class CSharpWizard extends PureComponent { - state = { - currentStep: 1, - selectedBucket: 'my-bucket', - finishStepCompleted: false, - tokenValue: null, - finalFeedback: null, - } - - subwayNavSteps = isFlagEnabled('ioxOnboarding') + const isIOxOrg = useSelector(isOrgIOx) + const subwayNavSteps = isIOxOrg ? HOMEPAGE_NAVIGATION_STEPS_SQL : HOMEPAGE_NAVIGATION_STEPS - private handleSelectBucket = (bucketName: string) => { - this.setState({selectedBucket: bucketName}) - } - - private handleMarkStepAsCompleted = () => { - this.setState({finishStepCompleted: true}) - } - - private setTokenValue = (tokenValue: string) => { - this.setState({tokenValue}) - } - - private setFinalFeedback = (feedbackValue: number) => { - this.setState({finalFeedback: feedbackValue}) - } - - handleNextClick = () => { - this.setState( - { - currentStep: Math.min( - this.state.currentStep + 1, - this.subwayNavSteps.length - ), - }, - () => { - event( - 'firstMile.csharpWizard.next.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 2].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) + const handleMarkStepAsCompleted = () => { + setFinishStepCompleted(true) } - handlePreviousClick = () => { - this.setState( - {currentStep: Math.max(this.state.currentStep - 1, 1)}, - () => { - event( - 'firstMile.csharpWizard.previous.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) - } - - handleNavClick = (clickedStep: number) => { - this.setState({currentStep: clickedStep}) - event( - 'firstMile.csharpWizard.subNav.clicked', - {}, - { - currentStep: normalizeEventName( - this.subwayNavSteps[clickedStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - - renderSqlStep = () => { - switch (this.state.currentStep) { + const renderSqlStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -146,8 +58,8 @@ export class CSharpWizard extends PureComponent { return ( ) } @@ -155,19 +67,19 @@ export class CSharpWizard extends PureComponent { return } case 5: { - return + return } case 6: { - return + return } case 7: { return ( ) } @@ -177,8 +89,8 @@ export class CSharpWizard extends PureComponent { } } - renderFluxStep = () => { - switch (this.state.currentStep) { + const renderFluxStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -189,8 +101,8 @@ export class CSharpWizard extends PureComponent { return ( ) } @@ -198,22 +110,22 @@ export class CSharpWizard extends PureComponent { return } case 5: { - return + return } case 6: { - return + return } case 7: { - return + return } case 8: { return ( ) } @@ -223,77 +135,18 @@ export class CSharpWizard extends PureComponent { } } - render() { - const {currentStep} = this.state - - return ( - - - -
- -
-
- - {isFlagEnabled('ioxOnboarding') - ? this.renderSqlStep() - : this.renderFluxStep()} - -
- -
-
-
-
- - - ) - } + return ( + + + {isIOxOrg + ? currentStep => renderSqlStep(currentStep) + : currentStep => renderFluxStep(currentStep)} + + + ) } diff --git a/src/homepageExperience/containers/CliWizard.tsx b/src/homepageExperience/containers/CliWizard.tsx index 6c9fb0f9dc..d60b5cb16e 100644 --- a/src/homepageExperience/containers/CliWizard.tsx +++ b/src/homepageExperience/containers/CliWizard.tsx @@ -1,141 +1,49 @@ // Libraries -import React, {PureComponent} from 'react' -import classnames from 'classnames' +import React, {FC, useState} from 'react' +import {useSelector} from 'react-redux' -// Components -import { - Button, - ComponentColor, - ComponentSize, - ComponentStatus, - Page, - SubwayNav, -} from '@influxdata/clockface' -import {CLIIcon} from 'src/homepageExperience/components/HomepageIcons' +// Contexts +import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' -// Steps -import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/cli/ExecuteAggregateQuery' -import {ExecuteQuery} from 'src/homepageExperience/components/steps/cli/ExecuteQuery' -import {Finish} from 'src/homepageExperience/components/steps/Finish' -import {InitializeClient} from 'src/homepageExperience/components/steps/cli/InitializeClient' -import {InstallDependencies} from 'src/homepageExperience/components/steps/cli/InstallDependencies' +// Components import {Overview} from 'src/homepageExperience/components/steps/Overview' +import {InstallDependencies} from 'src/homepageExperience/components/steps/cli/InstallDependencies' +import {InitializeClient} from 'src/homepageExperience/components/steps/cli/InitializeClient' import {WriteData} from 'src/homepageExperience/components/steps/cli/WriteData' -import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' +import {ExecuteQuery} from 'src/homepageExperience/components/steps/cli/ExecuteQuery' +import {ExecuteQuerySql} from '../components/steps/cli/ExecuteQuerySql' +import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/cli/ExecuteAggregateQuery' +import {Finish} from 'src/homepageExperience/components/steps/Finish' + +import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer' +import {CLIIcon} from 'src/homepageExperience/components/HomepageIcons' + +// Selectors +import {isOrgIOx} from 'src/organizations/selectors' // Utils -import {event} from 'src/cloud/utils/reporting' import { - scrollNextPageIntoView, HOMEPAGE_NAVIGATION_STEPS_SHORT, HOMEPAGE_NAVIGATION_STEPS_SHORT_SQL, } from 'src/homepageExperience/utils' -import {normalizeEventName} from 'src/cloud/utils/reporting' -import {isFlagEnabled} from 'src/shared/utils/featureFlag' -import {ExecuteQuerySql} from '../components/steps/cli/ExecuteQuerySql' -interface State { - currentStep: number - selectedBucket: string - finishStepCompleted: boolean - tokenValue: string - finalFeedback: number -} +export const CliWizard: FC<{}> = () => { + const [selectedBucket, setSelectedBucket] = useState('my-bucket') + const [finishStepCompleted, setFinishStepCompleted] = useState(false) + const [tokenValue, setTokenValue] = useState(null) + const [finalFeedback, setFinalFeedback] = useState(null) -export class CliWizard extends PureComponent<{}, State> { - state = { - currentStep: 1, - selectedBucket: 'sample-bucket', - finishStepCompleted: false, - tokenValue: null, - finalFeedback: null, - } - - subwayNavSteps = isFlagEnabled('ioxOnboarding') + const isIOxOrg = useSelector(isOrgIOx) + const subwayNavSteps = isIOxOrg ? HOMEPAGE_NAVIGATION_STEPS_SHORT_SQL : HOMEPAGE_NAVIGATION_STEPS_SHORT - private handleSelectBucket = (bucketName: string) => { - this.setState({selectedBucket: bucketName}) - } - - private handleMarkStepAsCompleted = () => { - this.setState({finishStepCompleted: true}) - } - - private setTokenValue = (tokenValue: string) => { - this.setState({tokenValue: tokenValue}) - } - - private setFinalFeedback = (feedbackValue: number) => { - this.setState({finalFeedback: feedbackValue}) - } - - handleNextClick = () => { - this.setState( - { - currentStep: Math.min( - this.state.currentStep + 1, - this.subwayNavSteps.length - ), - }, - () => { - event( - 'firstMile.cliWizard.next.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 2].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - - scrollNextPageIntoView() - } - ) - } - - handlePreviousClick = () => { - this.setState( - {currentStep: Math.max(this.state.currentStep - 1, 1)}, - () => { - event( - 'firstMile.cliWizard.previous.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - - scrollNextPageIntoView() - } - ) + const handleMarkStepAsCompleted = () => { + setFinishStepCompleted(true) } - handleNavClick = (clickedStep: number) => { - this.setState({currentStep: clickedStep}) - event( - 'firstMile.cliWizard.subNav.clicked', - {}, - { - currentStep: normalizeEventName( - this.subwayNavSteps[clickedStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - - renderStep = () => { - switch (this.state.currentStep) { + const renderStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -145,45 +53,45 @@ export class CliWizard extends PureComponent<{}, State> { case 3: { return ( ) } case 4: { - return + return } case 5: { - if (isFlagEnabled('ioxOnboarding')) { - return + if (isIOxOrg) { + return } else { - return + return } } case 6: { - if (isFlagEnabled('ioxOnboarding')) { + if (isIOxOrg) { return ( ) } else { - return + return } } case 7: { return ( ) } @@ -193,73 +101,16 @@ export class CliWizard extends PureComponent<{}, State> { } } - render() { - return ( - - - -
- -
-
- - {this.renderStep()} - -
- -
-
-
-
- - - ) - } + return ( + + + {currentStep => renderStep(currentStep)} + + + ) } diff --git a/src/homepageExperience/containers/GoWizard.tsx b/src/homepageExperience/containers/GoWizard.tsx index f1c2f00096..497748c36b 100644 --- a/src/homepageExperience/containers/GoWizard.tsx +++ b/src/homepageExperience/containers/GoWizard.tsx @@ -1,140 +1,52 @@ -import React, {PureComponent} from 'react' -import classnames from 'classnames' +// Libraries +import React, {FC, useState} from 'react' +import {useSelector} from 'react-redux' -import { - Button, - ComponentColor, - ComponentSize, - ComponentStatus, - Page, - SubwayNav, -} from '@influxdata/clockface' +// Contexts +import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' +// Components +import {Overview} from 'src/homepageExperience/components/steps/Overview' import {InstallDependencies} from 'src/homepageExperience/components/steps/go/InstallDependencies' import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/go/InstallDependenciesSql' -import {Overview} from 'src/homepageExperience/components/steps/Overview' import {Tokens} from 'src/homepageExperience/components/steps/Tokens' import {InitializeClient} from 'src/homepageExperience/components/steps/go/InitializeClient' import {WriteData} from 'src/homepageExperience/components/steps/go/WriteData' import {WriteDataSql} from 'src/homepageExperience/components/steps/go/WriteDataSql' import {ExecuteQuery} from 'src/homepageExperience/components/steps/go/ExecuteQuery' import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/go/ExecuteQuerySql' -import {Finish} from 'src/homepageExperience/components/steps/Finish' import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/go/ExecuteAggregateQuery' -import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' -import {normalizeEventName} from 'src/cloud/utils/reporting' +import {Finish} from 'src/homepageExperience/components/steps/Finish' +import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer' import {GoIcon} from 'src/homepageExperience/components/HomepageIcons' +// Selectors +import {isOrgIOx} from 'src/organizations/selectors' + // Utils -import {event} from 'src/cloud/utils/reporting' -import {isFlagEnabled} from 'src/shared/utils/featureFlag' import { - scrollNextPageIntoView, HOMEPAGE_NAVIGATION_STEPS, HOMEPAGE_NAVIGATION_STEPS_GO_SQL, } from 'src/homepageExperience/utils' -interface State { - currentStep: number - selectedBucket: string - finishStepCompleted: boolean - tokenValue: string - finalFeedback: number -} - -export class GoWizard extends PureComponent { - state = { - currentStep: 1, - selectedBucket: 'my-bucket', - finishStepCompleted: false, - tokenValue: null, - finalFeedback: null, - } - - private handleSelectBucket = (bucketName: string) => { - this.setState({selectedBucket: bucketName}) - } - - private handleMarkStepAsCompleted = () => { - this.setState({finishStepCompleted: true}) - } - - private setTokenValue = (tokenValue: string) => { - this.setState({tokenValue}) - } - - private setFinalFeedback = (feedbackValue: number) => { - this.setState({finalFeedback: feedbackValue}) - } +export const GoWizard: FC<{}> = () => { + const [selectedBucket, setSelectedBucket] = useState('my-bucket') + const [finishStepCompleted, setFinishStepCompleted] = useState(false) + const [tokenValue, setTokenValue] = useState(null) + const [finalFeedback, setFinalFeedback] = useState(null) - subwayNavSteps = isFlagEnabled('ioxOnboarding') + const isIOxOrg = useSelector(isOrgIOx) + const subwayNavSteps = isIOxOrg ? HOMEPAGE_NAVIGATION_STEPS_GO_SQL : HOMEPAGE_NAVIGATION_STEPS - handleNextClick = () => { - this.setState( - { - currentStep: Math.min( - this.state.currentStep + 1, - this.subwayNavSteps.length - ), - }, - () => { - event( - 'firstMile.goWizard.next.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 2].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) + const handleMarkStepAsCompleted = () => { + setFinishStepCompleted(true) } - handlePreviousClick = () => { - this.setState( - {currentStep: Math.max(this.state.currentStep - 1, 1)}, - () => { - event( - 'firstMile.goWizard.previous.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) - } - - handleNavClick = (clickedStep: number) => { - this.setState({currentStep: clickedStep}) - event( - 'firstMile.goWizard.subNav.clicked', - {}, - { - currentStep: normalizeEventName( - this.subwayNavSteps[clickedStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - - renderSqlStep = () => { - switch (this.state.currentStep) { + const renderSqlStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -145,13 +57,13 @@ export class GoWizard extends PureComponent { return ( ) } case 4: { - return + return } case 5: { return @@ -160,10 +72,10 @@ export class GoWizard extends PureComponent { return ( ) } @@ -173,8 +85,8 @@ export class GoWizard extends PureComponent { } } - renderFluxStep = () => { - switch (this.state.currentStep) { + const renderFluxStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -185,8 +97,8 @@ export class GoWizard extends PureComponent { return ( ) } @@ -194,22 +106,22 @@ export class GoWizard extends PureComponent { return } case 5: { - return + return } case 6: { - return + return } case 7: { - return + return } case 8: { return ( ) } @@ -219,70 +131,18 @@ export class GoWizard extends PureComponent { } } - render() { - return ( - - - -
- -
-
- - {isFlagEnabled('ioxOnboarding') - ? this.renderSqlStep() - : this.renderFluxStep()} - {' '} -
- -
-
-
-
- - - ) - } + return ( + + {currentStep => ( + + {isIOxOrg ? renderSqlStep(currentStep) : renderFluxStep(currentStep)} + + )} + + ) } diff --git a/src/homepageExperience/containers/JavaWizard.tsx b/src/homepageExperience/containers/JavaWizard.tsx index e12f9a0417..55002761fc 100644 --- a/src/homepageExperience/containers/JavaWizard.tsx +++ b/src/homepageExperience/containers/JavaWizard.tsx @@ -1,141 +1,53 @@ -import React, {PureComponent} from 'react' -import classnames from 'classnames' - -import { - Button, - ComponentColor, - ComponentSize, - ComponentStatus, - Page, - SubwayNav, -} from '@influxdata/clockface' +// Libraries +import React, {FC, useState} from 'react' +import {useSelector} from 'react-redux' +// Contexts import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' -import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/java/InstallDependenciesSql' +// Components import {Overview} from 'src/homepageExperience/components/steps/Overview' +import {InstallDependencies} from 'src/homepageExperience/components/steps/java/InstallDependencies' +import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/java/InstallDependenciesSql' import {Tokens} from 'src/homepageExperience/components/steps/Tokens' +import {InitializeClient} from 'src/homepageExperience/components/steps/java/InitializeClient' import {InitializeClientSql} from 'src/homepageExperience/components/steps/java/InitializeClientSql' +import {WriteData} from 'src/homepageExperience/components/steps/java/WriteData' import {WriteDataSql} from 'src/homepageExperience/components/steps/java/WriteDataSql' +import {ExecuteQuery} from 'src/homepageExperience/components/steps/java/ExecuteQuery' import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/java/ExecuteQuerySql' +import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/java/ExecuteAggregateQuery' import {Finish} from 'src/homepageExperience/components/steps/Finish' -// Utils -import {event, normalizeEventName} from 'src/cloud/utils/reporting' +import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer' import {JavaIcon} from 'src/homepageExperience/components/HomepageIcons' +// Selectors +import {isOrgIOx} from 'src/organizations/selectors' + +// Utils import { HOMEPAGE_NAVIGATION_STEPS, HOMEPAGE_NAVIGATION_STEPS_SQL, - scrollNextPageIntoView, } from 'src/homepageExperience/utils' -import {isFlagEnabled} from '../../shared/utils/featureFlag' -import {InitializeClient} from '../components/steps/java/InitializeClient' -import {WriteData} from '../components/steps/java/WriteData' -import {ExecuteQuery} from '../components/steps/java/ExecuteQuery' -import {ExecuteAggregateQuery} from '../components/steps/java/ExecuteAggregateQuery' -import {InstallDependencies} from '../components/steps/java/InstallDependencies' -interface State { - currentStep: number - selectedBucket: string - finishStepCompleted: boolean - tokenValue: string - finalFeedback: number -} +export const JavaWizard: FC<{}> = () => { + const [selectedBucket, setSelectedBucket] = useState('my-bucket') + const [finishStepCompleted, setFinishStepCompleted] = useState(false) + const [tokenValue, setTokenValue] = useState(null) + const [finalFeedback, setFinalFeedback] = useState(null) -export class JavaWizard extends PureComponent { - state = { - currentStep: 1, - selectedBucket: 'my-bucket', - finishStepCompleted: false, - tokenValue: null, - finalFeedback: null, - } - - subwayNavSteps = isFlagEnabled('ioxOnboarding') + const isIOxOrg = useSelector(isOrgIOx) + const subwayNavSteps = isIOxOrg ? HOMEPAGE_NAVIGATION_STEPS_SQL : HOMEPAGE_NAVIGATION_STEPS - private handleSelectBucket = (bucketName: string) => { - this.setState({selectedBucket: bucketName}) - } - - private handleMarkStepAsCompleted = () => { - this.setState({finishStepCompleted: true}) - } - - private setTokenValue = (tokenValue: string) => { - this.setState({tokenValue}) - } - - private setFinalFeedback = (feedbackValue: number) => { - this.setState({finalFeedback: feedbackValue}) - } - - handleNextClick = () => { - this.setState( - { - currentStep: Math.min( - this.state.currentStep + 1, - this.subwayNavSteps.length - ), - }, - () => { - event( - 'firstMile.javaWizard.next.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 2].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) + const handleMarkStepAsCompleted = () => { + setFinishStepCompleted(true) } - handlePreviousClick = () => { - this.setState( - {currentStep: Math.max(this.state.currentStep - 1, 1)}, - () => { - event( - 'firstMile.javaWizard.previous.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) - } - - handleNavClick = (clickedStep: number) => { - this.setState({currentStep: clickedStep}) - event( - 'firstMile.javaWizard.subNav.clicked', - {}, - { - currentStep: normalizeEventName( - this.subwayNavSteps[clickedStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - - renderSqlStep = () => { - switch (this.state.currentStep) { + const renderSqlStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -146,8 +58,8 @@ export class JavaWizard extends PureComponent { return ( ) } @@ -155,19 +67,19 @@ export class JavaWizard extends PureComponent { return } case 5: { - return + return } case 6: { - return + return } case 7: { return ( ) } @@ -177,8 +89,8 @@ export class JavaWizard extends PureComponent { } } - renderFluxStep = () => { - switch (this.state.currentStep) { + const renderFluxStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -189,8 +101,8 @@ export class JavaWizard extends PureComponent { return ( ) } @@ -198,22 +110,22 @@ export class JavaWizard extends PureComponent { return } case 5: { - return + return } case 6: { - return + return } case 7: { - return + return } case 8: { return ( ) } @@ -223,77 +135,18 @@ export class JavaWizard extends PureComponent { } } - render() { - const {currentStep} = this.state - - return ( - - - -
- -
-
- - {isFlagEnabled('ioxOnboarding') - ? this.renderSqlStep() - : this.renderFluxStep()} - -
- -
-
-
-
- - - ) - } + return ( + + + {isIOxOrg + ? currentStep => renderSqlStep(currentStep) + : currentStep => renderFluxStep(currentStep)} + + + ) } diff --git a/src/homepageExperience/containers/NodejsWizard.tsx b/src/homepageExperience/containers/NodejsWizard.tsx index c908c7ccad..1dc08eb16e 100644 --- a/src/homepageExperience/containers/NodejsWizard.tsx +++ b/src/homepageExperience/containers/NodejsWizard.tsx @@ -1,142 +1,53 @@ -import React, {PureComponent} from 'react' -import classnames from 'classnames' +// Libraries +import React, {FC, useState} from 'react' +import {useSelector} from 'react-redux' -import { - Button, - ComponentColor, - ComponentSize, - ComponentStatus, - Page, - SubwayNav, -} from '@influxdata/clockface' +// Contexts +import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' -import {InstallDependencies} from 'src/homepageExperience/components/steps/nodejs/InstallDependencies' +// Components import {Overview} from 'src/homepageExperience/components/steps/Overview' +import {InstallDependencies} from 'src/homepageExperience/components/steps/nodejs/InstallDependencies' +import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/nodejs/InstallDependenciesSql' import {Tokens} from 'src/homepageExperience/components/steps/Tokens' import {InitializeClient} from 'src/homepageExperience/components/steps/nodejs/InitializeClient' +import {InitializeClientSql} from 'src/homepageExperience/components/steps/nodejs/InitializeClientSql' import {WriteData} from 'src/homepageExperience/components/steps/nodejs/WriteData' +import {WriteDataSql} from 'src/homepageExperience/components/steps/nodejs/WriteDataSql' import {ExecuteQuery} from 'src/homepageExperience/components/steps/nodejs/ExecuteQuery' -import {Finish} from 'src/homepageExperience/components/steps/Finish' +import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/nodejs/ExecuteQuerySql' import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/nodejs/ExecuteAggregateQuery' -import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' -import {normalizeEventName} from 'src/cloud/utils/reporting' +import {Finish} from 'src/homepageExperience/components/steps/Finish' +import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer' import {NodejsIcon} from 'src/homepageExperience/components/HomepageIcons' -// Utils -import {event} from 'src/cloud/utils/reporting' +// Selectors +import {isOrgIOx} from 'src/organizations/selectors' +// Utils import { - scrollNextPageIntoView, HOMEPAGE_NAVIGATION_STEPS, HOMEPAGE_NAVIGATION_STEPS_SQL, } from 'src/homepageExperience/utils' -import {isFlagEnabled} from 'src/shared/utils/featureFlag' -import {InstallDependenciesSql} from '../components/steps/nodejs/InstallDependenciesSql' -import {InitializeClientSql} from '../components/steps/nodejs/InitializeClientSql' -import {WriteDataSql} from '../components/steps/nodejs/WriteDataSql' -import {ExecuteQuerySql} from '../components/steps/nodejs/ExecuteQuerySql' - -interface State { - currentStep: number - selectedBucket: string - finishStepCompleted: boolean - tokenValue: string - finalFeedback: number -} - -export class NodejsWizard extends PureComponent { - state = { - currentStep: 1, - selectedBucket: 'my-bucket', - finishStepCompleted: false, - tokenValue: null, - finalFeedback: null, - } - - private handleSelectBucket = (bucketName: string) => { - this.setState({selectedBucket: bucketName}) - } - private handleMarkStepAsCompleted = () => { - this.setState({finishStepCompleted: true}) - } +export const NodejsWizard: FC<{}> = () => { + const [selectedBucket, setSelectedBucket] = useState('my-bucket') + const [finishStepCompleted, setFinishStepCompleted] = useState(false) + const [tokenValue, setTokenValue] = useState(null) + const [finalFeedback, setFinalFeedback] = useState(null) - private setTokenValue = (tokenValue: string) => { - this.setState({tokenValue}) - } - - private setFinalFeedback = (feedbackValue: number) => { - this.setState({finalFeedback: feedbackValue}) - } - - subwayNavSteps = isFlagEnabled('ioxOnboarding') + const isIOxOrg = useSelector(isOrgIOx) + const subwayNavSteps = isIOxOrg ? HOMEPAGE_NAVIGATION_STEPS_SQL : HOMEPAGE_NAVIGATION_STEPS - handleNextClick = () => { - this.setState( - { - currentStep: Math.min( - this.state.currentStep + 1, - this.subwayNavSteps.length - ), - }, - () => { - event( - 'firstMile.nodejsWizard.next.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 2].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) + const handleMarkStepAsCompleted = () => { + setFinishStepCompleted(true) } - handlePreviousClick = () => { - this.setState( - {currentStep: Math.max(this.state.currentStep - 1, 1)}, - () => { - event( - 'firstMile.nodejsWizard.previous.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) - } - - handleNavClick = (clickedStep: number) => { - this.setState({currentStep: clickedStep}) - event( - 'firstMile.nodejsWizard.subNav.clicked', - {}, - { - currentStep: normalizeEventName( - this.subwayNavSteps[clickedStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - - renderSqlStep = () => { - switch (this.state.currentStep) { + const renderSqlStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -147,8 +58,8 @@ export class NodejsWizard extends PureComponent { return ( ) } @@ -156,19 +67,19 @@ export class NodejsWizard extends PureComponent { return } case 5: { - return + return } case 6: { - return + return } case 7: { return ( ) } @@ -178,8 +89,8 @@ export class NodejsWizard extends PureComponent { } } - renderFluxStep = () => { - switch (this.state.currentStep) { + const renderFluxStep = currentStep => { + switch (currentStep) { case 1: { return } @@ -190,8 +101,8 @@ export class NodejsWizard extends PureComponent { return ( ) } @@ -199,22 +110,22 @@ export class NodejsWizard extends PureComponent { return } case 5: { - return + return } case 6: { - return + return } case 7: { - return + return } case 8: { return ( ) } @@ -224,70 +135,18 @@ export class NodejsWizard extends PureComponent { } } - render() { - return ( - - - -
- -
-
- - {isFlagEnabled('ioxOnboarding') - ? this.renderSqlStep() - : this.renderFluxStep()} - -
- -
-
-
-
- - - ) - } + return ( + + + {isIOxOrg + ? currentStep => renderSqlStep(currentStep) + : currentStep => renderFluxStep(currentStep)} + + + ) } diff --git a/src/homepageExperience/containers/PythonWizard.tsx b/src/homepageExperience/containers/PythonWizard.tsx index 14388b5c2b..68f54229cc 100644 --- a/src/homepageExperience/containers/PythonWizard.tsx +++ b/src/homepageExperience/containers/PythonWizard.tsx @@ -1,20 +1,14 @@ -import React, {PureComponent} from 'react' -import classnames from 'classnames' - -import { - Button, - ComponentColor, - ComponentSize, - ComponentStatus, - Page, - SubwayNav, -} from '@influxdata/clockface' +// Libraries +import React, {FC, useState} from 'react' +import {useSelector} from 'react-redux' +// Contexts import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext' +// Components +import {Overview} from 'src/homepageExperience/components/steps/Overview' import {InstallDependencies} from 'src/homepageExperience/components/steps/python/InstallDependencies' import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/python/InstallDependenciesSql' -import {Overview} from 'src/homepageExperience/components/steps/Overview' import {Tokens} from 'src/homepageExperience/components/steps/Tokens' import {InitializeClient} from 'src/homepageExperience/components/steps/python/InitializeClient' import {InitializeClientSql} from 'src/homepageExperience/components/steps/python/InitializeClientSql' @@ -22,156 +16,69 @@ import {WriteData} from 'src/homepageExperience/components/steps/python/WriteDat import {WriteDataSql} from 'src/homepageExperience/components/steps/python/WriteDataSql' import {ExecuteQuery} from 'src/homepageExperience/components/steps/python/ExecuteQuery' import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/python/ExecuteQuerySql' -import {Finish} from 'src/homepageExperience/components/steps/Finish' import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuery' import {ExecuteAggregateQuerySql} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuerySql' +import {Finish} from 'src/homepageExperience/components/steps/Finish' -import {normalizeEventName} from 'src/cloud/utils/reporting' - +import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer' import {PythonIcon} from 'src/homepageExperience/components/HomepageIcons' -// Utils -import {event} from 'src/cloud/utils/reporting' -import {isFlagEnabled} from 'src/shared/utils/featureFlag' - -import { - scrollNextPageIntoView, - HOMEPAGE_NAVIGATION_STEPS, -} from 'src/homepageExperience/utils' - -interface State { - currentStep: number - selectedBucket: string - finishStepCompleted: boolean - tokenValue: string - finalFeedback: number -} - -export class PythonWizard extends PureComponent { - state = { - currentStep: 1, - selectedBucket: 'my-bucket', - finishStepCompleted: false, - tokenValue: null, - finalFeedback: null, - } - - subwayNavSteps = HOMEPAGE_NAVIGATION_STEPS +// Selectors +import {isOrgIOx} from 'src/organizations/selectors' - private handleSelectBucket = (bucketName: string) => { - this.setState({selectedBucket: bucketName}) - } +// Utils +import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils' - private handleMarkStepAsCompleted = () => { - this.setState({finishStepCompleted: true}) - } +export const PythonWizard: FC<{}> = () => { + const [selectedBucket, setSelectedBucket] = useState('my-bucket') + const [finishStepCompleted, setFinishStepCompleted] = useState(false) + const [tokenValue, setTokenValue] = useState(null) + const [finalFeedback, setFinalFeedback] = useState(null) - private setTokenValue = (tokenValue: string) => { - this.setState({tokenValue}) - } + const isIOxOrg = useSelector(isOrgIOx) + const subwayNavSteps = HOMEPAGE_NAVIGATION_STEPS - private setFinalFeedback = (feedbackValue: number) => { - this.setState({finalFeedback: feedbackValue}) + const handleMarkStepAsCompleted = () => { + setFinishStepCompleted(true) } - handleNextClick = () => { - this.setState( - { - currentStep: Math.min( - this.state.currentStep + 1, - this.subwayNavSteps.length - ), - }, - () => { - event( - 'firstMile.pythonWizard.next.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 2].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) - } - - handlePreviousClick = () => { - this.setState( - {currentStep: Math.max(this.state.currentStep - 1, 1)}, - () => { - event( - 'firstMile.pythonWizard.previous.clicked', - {}, - { - clickedButtonAtStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep].name - ), - currentStep: normalizeEventName( - this.subwayNavSteps[this.state.currentStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - ) - } - - handleNavClick = (clickedStep: number) => { - this.setState({currentStep: clickedStep}) - event( - 'firstMile.pythonWizard.subNav.clicked', - {}, - { - currentStep: normalizeEventName( - this.subwayNavSteps[clickedStep - 1].name - ), - } - ) - scrollNextPageIntoView() - } - - renderStep = () => { - switch (this.state.currentStep) { + const renderSqlStep = currentStep => { + switch (currentStep) { case 1: { return } case 2: { - return + return } case 3: { return ( ) } case 4: { - return + return } case 5: { - return + return } case 6: { - return + return } case 7: { - return + return } case 8: { return ( ) } @@ -181,43 +88,43 @@ export class PythonWizard extends PureComponent { } } - renderSqlStep = () => { - switch (this.state.currentStep) { + const renderFluxStep = currentStep => { + switch (currentStep) { case 1: { return } case 2: { - return + return } case 3: { return ( ) } case 4: { - return + return } case 5: { - return + return } case 6: { - return + return } case 7: { - return + return } case 8: { return ( ) } @@ -227,77 +134,18 @@ export class PythonWizard extends PureComponent { } } - render() { - const {currentStep} = this.state - - return ( - - - -
- -
-
- - {isFlagEnabled('ioxOnboarding') - ? this.renderSqlStep() - : this.renderStep()} - -
- -
-
-
-
- - - ) - } + return ( + + + {isIOxOrg + ? currentStep => renderSqlStep(currentStep) + : currentStep => renderFluxStep(currentStep)} + + + ) } diff --git a/src/homepageExperience/containers/WizardContainer.tsx b/src/homepageExperience/containers/WizardContainer.tsx new file mode 100644 index 0000000000..c932a460e6 --- /dev/null +++ b/src/homepageExperience/containers/WizardContainer.tsx @@ -0,0 +1,142 @@ +// Libraries +import React, {FC, ReactChild, useState} from 'react' +import classnames from 'classnames' + +// Components +import { + Button, + ComponentColor, + ComponentSize, + ComponentStatus, + Page, + SubwayNav, +} from '@influxdata/clockface' + +// Utils +import {event, normalizeEventName} from 'src/cloud/utils/reporting' +import {scrollNextPageIntoView} from 'src/homepageExperience/utils' + +interface Props { + children: (currentStep: number) => ReactChild + icon?: JSX.Element + language: string + languageTitle: string + subwayNavSteps: any[] +} + +export const WizardContainer: FC = ({ + children, + icon, + language, + languageTitle, + subwayNavSteps, +}) => { + const [currentStep, setCurrentStep] = useState(1) + + const handleNavClick = (clickedStep: number) => { + setCurrentStep(clickedStep) + event( + `firstMile.${language}Wizard.subNav.clicked`, + {}, + { + clickedButtonAtStep: normalizeEventName( + subwayNavSteps[currentStep].name + ), + currentStep: normalizeEventName(subwayNavSteps[clickedStep - 1].name), + } + ) + console.log('currentStep', subwayNavSteps[clickedStep - 1].name) + scrollNextPageIntoView() + } + + const handleNextClick = () => { + const newStep = Math.min(currentStep + 1, subwayNavSteps.length) + setCurrentStep(newStep) + event( + `firstMile.${language}Wizard.next.clicked`, + {}, + { + clickedButtonAtStep: normalizeEventName( + subwayNavSteps[newStep - 2].name + ), + currentStep: normalizeEventName(subwayNavSteps[newStep - 1].name), + } + ) + scrollNextPageIntoView() + } + + const handlePreviousClick = () => { + const newStep = Math.max(currentStep - 1, 1) + setCurrentStep(newStep) + event( + `firstMile.${language}Wizard.previous.clicked`, + {}, + { + clickedButtonAtStep: normalizeEventName(subwayNavSteps[newStep].name), + currentStep: normalizeEventName(subwayNavSteps[newStep - 1].name), + } + ) + scrollNextPageIntoView() + } + + return ( + + + +
+ +
+
+ {children(currentStep)} +
+
+
+
+
+ + + ) +}