Skip to content

Commit ffccb22

Browse files
hoorayimhelpinghoorayimhelping
authored
feat(firstMile): add landing page (#4017)
1 parent 10aa6a2 commit ffccb22

File tree

8 files changed

+218
-133
lines changed

8 files changed

+218
-133
lines changed

‎src/homepageExperience/components/HomepageExperience.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
$pool-fill: #00a3ff;
44

5-
.homepage-container {
5+
.homepage-wizard-container {
66
color: $cf-grey-95;
77
display: flex;
88
height: 100%;
@@ -12,13 +12,13 @@ $pool-fill: #00a3ff;
1212
padding-right: 85px;
1313
}
1414

15-
.homepage-container--subway {
15+
.homepage-wizard-container--subway {
1616
display: flex;
1717
flex-direction: column;
1818
width: 30%;
1919
}
2020

21-
.homepage-container--main {
21+
.homepage-wizard-container--main {
2222
display: flex;
2323
flex-direction: column;
2424
width: 70%;
@@ -27,7 +27,7 @@ $pool-fill: #00a3ff;
2727
padding-bottom: 64px;
2828
}
2929

30-
.homepage-container--main-wrapper {
30+
.homepage-wizard-container--main-wrapper {
3131
h1 {
3232
margin-top: 0;
3333
font-weight: normal;
@@ -42,7 +42,7 @@ $pool-fill: #00a3ff;
4242
}
4343
}
4444

45-
.homepage-container-footer {
45+
.homepage-wizard-container-footer {
4646
display: flex;
4747
justify-content: flex-end;
4848
margin-top: auto;

‎src/homepageExperience/components/Navigation.tsx‎

Lines changed: 4 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,16 @@
11
import React, {PureComponent} from 'react'
22
import {
3-
AlertIcon,
43
ClockIcon,
5-
ExecuteQueryIcon,
6-
FinishIcon,
7-
InitializeClientIcon,
8-
InstallDependenciesIcon,
9-
OverviewIcon,
104
PythonIcon,
11-
TokenIcon,
12-
WriteDataIcon,
135
} from 'src/homepageExperience/components/HomepageIcons'
14-
import Step from './steps/Step'
6+
import Step from 'src/homepageExperience/components/steps/Step'
7+
8+
import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
159

1610
interface OwnProps {
1711
currentStep: number
1812
}
1913

20-
const steps = [
21-
{
22-
name: 'Overview',
23-
icon: OverviewIcon,
24-
},
25-
{
26-
name: 'Install \n Dependencies',
27-
icon: InstallDependenciesIcon,
28-
},
29-
{
30-
name: 'Create a \n Token',
31-
icon: TokenIcon,
32-
},
33-
{
34-
name: 'Initialize \n Client',
35-
icon: InitializeClientIcon,
36-
},
37-
{
38-
name: 'Write \n Data',
39-
icon: WriteDataIcon,
40-
},
41-
{
42-
name: 'Execute a \n Simple Query',
43-
icon: ExecuteQueryIcon,
44-
},
45-
{
46-
name: 'Execute an \n Aggregate Query',
47-
icon: ExecuteQueryIcon,
48-
},
49-
{
50-
name: '(Optional) \n Set up Alerts',
51-
icon: AlertIcon,
52-
},
53-
{
54-
name: 'Finish',
55-
icon: FinishIcon,
56-
},
57-
]
58-
5914
export class Navigation extends PureComponent<OwnProps> {
6015
render() {
6116
return (
@@ -72,7 +27,7 @@ export class Navigation extends PureComponent<OwnProps> {
7227
{ClockIcon}
7328
<h5> 5 minutes</h5>
7429
</div>
75-
{steps.map((value, index) => (
30+
{HOMEPAGE_NAVIGATION_STEPS.map((value, index) => (
7631
<Step
7732
stepIsActive={index === this.props.currentStep - 1}
7833
stepIsComplete={index < this.props.currentStep - 1}

‎src/homepageExperience/components/steps/Step.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import classnames from 'classnames'
22
import React from 'react'
3+
34
import {InfluxColors} from '@influxdata/clockface'
4-
import {StepCompleteIcon} from '../HomepageIcons'
5+
6+
import {StepCompleteIcon} from 'src/homepageExperience/components/HomepageIcons'
57

68
type StepProps = {
79
stepIsActive: boolean

‎src/homepageExperience/containers/HomepageContainer.tsx‎

Lines changed: 53 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,54 @@
1-
import React, {PureComponent} from 'react'
2-
3-
import {Button, ComponentColor, ComponentSize} from '@influxdata/clockface'
4-
5-
import {InstallDependencies} from 'src/homepageExperience/components/steps/InstallDependencies'
6-
import {Overview} from 'src/homepageExperience/components/steps/Overview'
7-
import {Navigation} from 'src/homepageExperience/components/Navigation'
8-
import classnames from 'classnames'
9-
10-
interface State {
11-
currentStep: number
12-
}
13-
14-
export default class HomepageContainer extends PureComponent<null, State> {
15-
state = {
16-
currentStep: 1,
17-
}
18-
19-
handleNextClick = () => {
20-
this.setState({currentStep: this.state.currentStep + 1})
21-
}
22-
23-
handlePreviousClick = () => {
24-
this.setState({currentStep: this.state.currentStep - 1})
25-
}
26-
27-
renderStep = () => {
28-
switch (this.state.currentStep) {
29-
case 1: {
30-
return <Overview />
31-
}
32-
case 2: {
33-
return <InstallDependencies />
34-
}
35-
default: {
36-
return <Overview />
37-
}
38-
}
39-
}
40-
41-
render() {
42-
return (
43-
<div className="homepage-container">
44-
<aside className="homepage-container--subway">
45-
<div style={{width: '100%'}}>
46-
<Navigation currentStep={this.state.currentStep} />
47-
</div>
48-
</aside>
49-
<div className="homepage-container--main">
50-
<div
51-
className={classnames('homepage-container--main-wrapper', {
52-
overviewSection: this.state.currentStep === 1,
53-
})}
54-
>
55-
{this.renderStep()}
56-
</div>
57-
58-
<div className="homepage-container-footer">
59-
<Button
60-
onClick={this.handlePreviousClick}
61-
text="Previous"
62-
size={ComponentSize.Large}
63-
color={ComponentColor.Tertiary}
64-
/>
65-
<Button
66-
onClick={this.handleNextClick}
67-
text="Next"
68-
size={ComponentSize.Large}
69-
color={ComponentColor.Primary}
70-
/>
71-
</div>
72-
</div>
73-
</div>
74-
)
75-
}
1+
import React, {FC} from 'react'
2+
import {useSelector} from 'react-redux'
3+
import {Link} from 'react-router-dom'
4+
5+
import {Columns, Grid, InfluxColors, Page, Panel} from '@influxdata/clockface'
6+
7+
import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
8+
import {getOrg} from 'src/organizations/selectors'
9+
10+
export const HomepageContainer: FC = () => {
11+
const org = useSelector(getOrg)
12+
const pythonWizardLink = `/orgs/${org.id}/new-user-wizard/python`
13+
14+
return (
15+
<>
16+
<Page titleTag={pageTitleSuffixer(['Get Started'])}>
17+
<Page.Header fullWidth={true} testID="alerts-page--header">
18+
<Page.Title title="Get Started" />
19+
</Page.Header>
20+
<Page.Contents>
21+
<p>
22+
Write and query data using the programming language of your choice
23+
</p>
24+
<Grid>
25+
<Grid.Row>
26+
<Grid.Column widthSM={Columns.Two}>
27+
<Panel backgroundColor={InfluxColors.Pepper}>
28+
<Panel.Body>
29+
<Link to={pythonWizardLink}>Python</Link>
30+
</Panel.Body>
31+
</Panel>
32+
</Grid.Column>
33+
<Grid.Column widthSM={Columns.Two}>
34+
<Panel backgroundColor={InfluxColors.Pepper}>
35+
<Panel.Body>JavaScript/Node.js</Panel.Body>
36+
</Panel>
37+
</Grid.Column>
38+
<Grid.Column widthSM={Columns.Two}>
39+
<Panel backgroundColor={InfluxColors.Pepper}>
40+
<Panel.Body>Go</Panel.Body>
41+
</Panel>
42+
</Grid.Column>
43+
<Grid.Column widthSM={Columns.Two}>
44+
<Panel backgroundColor={InfluxColors.Pepper}>
45+
<Panel.Body>More</Panel.Body>
46+
</Panel>
47+
</Grid.Column>
48+
</Grid.Row>
49+
</Grid>
50+
</Page.Contents>
51+
</Page>
52+
</>
53+
)
7654
}

‎src/homepageExperience/containers/HomepagePythonWizard.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, {PureComponent} from 'react'
2+
import classnames from 'classnames'
3+
4+
import {Button, ComponentColor, ComponentSize} from '@influxdata/clockface'
5+
6+
import {InstallDependencies} from 'src/homepageExperience/components/steps/InstallDependencies'
7+
import {Overview} from 'src/homepageExperience/components/steps/Overview'
8+
import {Navigation} from 'src/homepageExperience/components/Navigation'
9+
10+
import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
11+
12+
interface State {
13+
currentStep: number
14+
}
15+
16+
export class HomepagePythonWizard extends PureComponent<null, State> {
17+
state = {
18+
currentStep: 1,
19+
}
20+
21+
handleNextClick = () => {
22+
this.setState({
23+
currentStep: Math.min(
24+
this.state.currentStep + 1,
25+
HOMEPAGE_NAVIGATION_STEPS.length
26+
),
27+
})
28+
}
29+
30+
handlePreviousClick = () => {
31+
this.setState({currentStep: Math.max(this.state.currentStep - 1, 1)})
32+
}
33+
34+
renderStep = () => {
35+
switch (this.state.currentStep) {
36+
case 1: {
37+
return <Overview />
38+
}
39+
case 2: {
40+
return <InstallDependencies />
41+
}
42+
default: {
43+
return <Overview />
44+
}
45+
}
46+
}
47+
48+
render() {
49+
return (
50+
<div className="homepage-wizard-container">
51+
<aside className="homepage-wizard-container--subway">
52+
<div style={{width: '100%'}}>
53+
<Navigation currentStep={this.state.currentStep} />
54+
</div>
55+
</aside>
56+
<div className="homepage-wizard-container--main">
57+
<div
58+
className={classnames('homepage-wizard-container--main-wrapper', {
59+
overviewSection: this.state.currentStep === 1,
60+
})}
61+
>
62+
{this.renderStep()}
63+
</div>
64+
65+
<div className="homepage-wizard-container-footer">
66+
<Button
67+
onClick={this.handlePreviousClick}
68+
text="Previous"
69+
size={ComponentSize.Large}
70+
color={ComponentColor.Tertiary}
71+
/>
72+
<Button
73+
onClick={this.handleNextClick}
74+
text="Next"
75+
size={ComponentSize.Large}
76+
color={ComponentColor.Primary}
77+
/>
78+
</div>
79+
</div>
80+
</div>
81+
)
82+
}
83+
}

‎src/homepageExperience/utils.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
AlertIcon,
3+
ExecuteQueryIcon,
4+
FinishIcon,
5+
InitializeClientIcon,
6+
InstallDependenciesIcon,
7+
OverviewIcon,
8+
TokenIcon,
9+
WriteDataIcon,
10+
} from 'src/homepageExperience/components/HomepageIcons'
11+
12+
export const HOMEPAGE_NAVIGATION_STEPS = [
13+
{
14+
name: 'Overview',
15+
icon: OverviewIcon,
16+
},
17+
{
18+
name: 'Install \n Dependencies',
19+
icon: InstallDependenciesIcon,
20+
},
21+
{
22+
name: 'Create a \n Token',
23+
icon: TokenIcon,
24+
},
25+
{
26+
name: 'Initialize \n Client',
27+
icon: InitializeClientIcon,
28+
},
29+
{
30+
name: 'Write \n Data',
31+
icon: WriteDataIcon,
32+
},
33+
{
34+
name: 'Execute a \n Simple Query',
35+
icon: ExecuteQueryIcon,
36+
},
37+
{
38+
name: 'Execute an \n Aggregate Query',
39+
icon: ExecuteQueryIcon,
40+
},
41+
{
42+
name: '(Optional) \n Set up Alerts',
43+
icon: AlertIcon,
44+
},
45+
{
46+
name: 'Finish',
47+
icon: FinishIcon,
48+
},
49+
]

0 commit comments

Comments
 (0)