Skip to content

Commit

Permalink
fix(ui): refactor wizard components to use hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
@mavarius
mavarius committed May 14, 2024
1 parent 730f98f commit 48668e1
Show file tree
Hide file tree
Showing 9 changed files with 558 additions and 1,438 deletions.
13 changes: 7 additions & 6 deletions src/homepageExperience/components/steps/Finish.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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
Expand All @@ -124,7 +125,7 @@ export const Finish = (props: OwnProps) => {
alignItems={AlignItems.Stretch}
direction={FlexDirection.Row}
>
{isFlagEnabled('ioxOnboarding') ? (
{isIOxOrg ? (
<ResourceCard className="homepage-wizard-next-steps">
<SafeBlankLink
href="https://docs.influxdata.com/influxdb/cloud-serverless/write-data/best-practices/"
Expand Down Expand Up @@ -154,7 +155,7 @@ export const Finish = (props: OwnProps) => {
</p>
</ResourceCard>
)}
{!isFlagEnabled('ioxOnboarding') && (
{!isIOxOrg && (
<ResourceCard className="homepage-wizard-next-steps">
<SafeBlankLink
href="https://university.influxdata.com/"
Expand Down Expand Up @@ -187,13 +188,13 @@ export const Finish = (props: OwnProps) => {
</FlexBox>
{props.wizardEventName !== 'cliWizard' &&
props.wizardEventName !== 'arduinoWizard' &&
!isFlagEnabled('ioxOnboarding') ? (
!isIOxOrg ? (
<SampleAppCard
handleNextStepEvent={handleNextStepEvent}
wizardEventName={props.wizardEventName}
/>
) : null}
{isFlagEnabled('ioxOnboarding') && (
{isIOxOrg && (
<DashboardIntegrations
handleNextStepEvent={handleNextStepEvent}
wizardEventName={props.wizardEventName}
Expand Down
255 changes: 54 additions & 201 deletions src/homepageExperience/containers/ArduinoWizard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,139 +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 {ArduinoIcon} from 'src/homepageExperience/components/HomepageIcons'
// Contexts
import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'

// Steps
import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/arduino/ExecuteAggregateQuery'
import {ExecuteQuery} from 'src/homepageExperience/components/steps/arduino/ExecuteQuery'
import {Finish} from 'src/homepageExperience/components/steps/Finish'
import {InitializeClient} from 'src/homepageExperience/components/steps/arduino/InitializeClient'
import {InstallDependencies} from 'src/homepageExperience/components/steps/arduino/InstallDependencies'
// Components
import {Overview} from 'src/homepageExperience/components/steps/Overview'
import {PrepareIde} from 'src/homepageExperience/components/steps/arduino/PrepareIde'
import {InstallDependencies} from 'src/homepageExperience/components/steps/arduino/InstallDependencies'
import {InitializeClient} from 'src/homepageExperience/components/steps/arduino/InitializeClient'
import {WriteData} from 'src/homepageExperience/components/steps/arduino/WriteData'
import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
import {ExecuteQuery} from 'src/homepageExperience/components/steps/arduino/ExecuteQuery'
import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/arduino/ExecuteAggregateQuery'
import {Finish} from 'src/homepageExperience/components/steps/Finish'

import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer'
import {ArduinoIcon} 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_ARDUINO,
HOMEPAGE_NAVIGATION_STEPS_ARDUINO_WRITE_ONLY,
} from 'src/homepageExperience/utils'
import {normalizeEventName} from 'src/cloud/utils/reporting'

interface State {
currentStep: number
selectedBucket: string
finishStepCompleted: boolean
tokenValue: string
finalFeedback: number
}
export const ArduinoWizard: FC<{}> = () => {
const [selectedBucket, setSelectedBucket] = useState<string>('my-bucket')
const [finishStepCompleted, setFinishStepCompleted] = useState<boolean>(false)
const [tokenValue, setTokenValue] = useState<string | null>(null)
const [finalFeedback, setFinalFeedback] = useState<number | null>(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 <Overview wizard="arduinoWizard" />
}
Expand All @@ -146,41 +56,41 @@ export class ArduinoWizard extends PureComponent<{}, State> {
case 4: {
return (
<InitializeClient
setTokenValue={this.setTokenValue}
tokenValue={this.state.tokenValue}
onSelectBucket={this.handleSelectBucket}
setTokenValue={setTokenValue}
tokenValue={tokenValue}
onSelectBucket={setSelectedBucket}
/>
)
}
case 5: {
return <WriteData bucket={this.state.selectedBucket} />
return <WriteData bucket={selectedBucket} />
}
case 6: {
if (isFlagEnabled('ioxOnboarding')) {
if (isIOxOrg) {
return (
<Finish
wizardEventName="arduinoWizard"
markStepAsCompleted={this.handleMarkStepAsCompleted}
finishStepCompleted={this.state.finishStepCompleted}
finalFeedback={this.state.finalFeedback}
setFinalFeedback={this.setFinalFeedback}
markStepAsCompleted={handleMarkStepAsCompleted}
finishStepCompleted={finishStepCompleted}
finalFeedback={finalFeedback}
setFinalFeedback={setFinalFeedback}
/>
)
} else {
return <ExecuteQuery bucket={this.state.selectedBucket} />
return <ExecuteQuery bucket={selectedBucket} />
}
}
case 7: {
return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
return <ExecuteAggregateQuery bucket={selectedBucket} />
}
case 8: {
return (
<Finish
wizardEventName="arduinoWizard"
markStepAsCompleted={this.handleMarkStepAsCompleted}
finishStepCompleted={this.state.finishStepCompleted}
finalFeedback={this.state.finalFeedback}
setFinalFeedback={this.setFinalFeedback}
markStepAsCompleted={handleMarkStepAsCompleted}
finishStepCompleted={finishStepCompleted}
finalFeedback={finalFeedback}
setFinalFeedback={setFinalFeedback}
/>
)
}
Expand All @@ -190,73 +100,16 @@ export class ArduinoWizard extends PureComponent<{}, State> {
}
}

render() {
return (
<Page>
<Page.Header fullWidth={false} />
<Page.Contents scrollable={true}>
<div className="homepage-wizard-container">
<aside className="homepage-wizard-container--subway">
<div
className="homepage-wizard-container--subway-inner"
data-testid="subway-nav"
>
<SubwayNav
currentStep={this.state.currentStep}
onStepClick={this.handleNavClick}
navigationSteps={this.subwayNavSteps}
settingUpIcon={ArduinoIcon}
settingUpText="Arduino"
setupTime="5 minutes"
/>
</div>
</aside>
<div className="homepage-wizard-container--main">
<div
className={classnames(
'homepage-wizard-container--main-wrapper',
{
verticallyCentered:
this.state.currentStep === 1 ||
this.state.currentStep === this.subwayNavSteps.length,
}
)}
>
<WriteDataDetailsContextProvider>
{this.renderStep()}
</WriteDataDetailsContextProvider>
</div>

<div className="homepage-wizard-container-footer">
<Button
onClick={this.handlePreviousClick}
text="Previous"
size={ComponentSize.Large}
color={ComponentColor.Tertiary}
status={
this.state.currentStep > 1
? ComponentStatus.Default
: ComponentStatus.Disabled
}
testID="arduino-prev-button"
/>
<Button
onClick={this.handleNextClick}
text="Next"
size={ComponentSize.Large}
color={ComponentColor.Primary}
status={
this.state.currentStep < this.subwayNavSteps.length
? ComponentStatus.Default
: ComponentStatus.Disabled
}
testID="arduino-next-button"
/>
</div>
</div>
</div>
</Page.Contents>
</Page>
)
}
return (
<WriteDataDetailsContextProvider>
<WizardContainer
icon={ArduinoIcon}
subwayNavSteps={subwayNavSteps}
language="arduino"
languageTitle="Arduino"
>
{currentStep => renderStep(currentStep)}
</WizardContainer>
</WriteDataDetailsContextProvider>
)
}
Loading

0 comments on commit 48668e1

Please sign in to comment.