Skip to content

Commit 4945957

Browse files
hoorayimhelpinghoorayimhelping
authored
feat: firstMile homepage experience structure (#3982)
1 parent 47634b1 commit 4945957

File tree

9 files changed

+336
-27
lines changed

9 files changed

+336
-27
lines changed

‎src/homepageExperience/components/HomepageExperience.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.homepage-container {
2+
color: $cf-grey-95;
3+
display: flex;
4+
height: 100%;
5+
justify-content: space-between;
6+
width: 100%;
7+
}
8+
9+
.homepage-container--subway {
10+
display: flex;
11+
flex-direction: column;
12+
width: 30%;
13+
}
14+
15+
.subway-navigation-container {
16+
display: flex;
17+
justify-content: center;
18+
}
19+
20+
.subway-navigation-flex-wrapper {
21+
display: flex;
22+
flex-direction: column;
23+
}
24+
25+
.subway-navigation-step {
26+
display: flex;
27+
flex-direction: row;
28+
justify-content: left;
29+
}
30+
31+
.subway-navigation-step-icon-container {
32+
border: $cf-grey-95 solid 2px;
33+
border-radius: 50%;
34+
color: rgba(0, 0, 0, 0);
35+
height: 24px;
36+
width: 24px;
37+
}
38+
39+
.active .subway-navigation-step-icon-container {
40+
border-color: $c-pool;
41+
}
42+
43+
.subway-navigation-step-icon {
44+
height: 16px;
45+
left: 2px;
46+
position: relative;
47+
top: 2px;
48+
width: 16px;
49+
}
50+
51+
.homepage-container--main {
52+
display: flex;
53+
flex-direction: column;
54+
justify-content: center;
55+
width: 70%;
56+
}
57+
58+
.homepage-container--main-wrapper {
59+
display: flex;
60+
justify-content: center;
61+
width: 100%;
62+
}

‎src/homepageExperience/components/HomepageIcons.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React from 'react'
2+
3+
export const OverviewIcon = props => {
4+
return (
5+
<svg
6+
className="subway-navigation-step-icon"
7+
xmlns="http://www.w3.org/2000/svg"
8+
viewBox="0 0 24 24"
9+
width="16"
10+
height="16"
11+
>
12+
<path fill="none" d="M0 0h24v24H0z" />
13+
<path
14+
fill={props.fill}
15+
d="M3 18.5V5a3 3 0 0 1 3-3h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5A3.5 3.5 0 0 1 3 18.5zM19 20v-3H6.5a1.5 1.5 0 0 0 0 3H19zM5 15.337A3.486 3.486 0 0 1 6.5 15H19V4H6a1 1 0 0 0-1 1v10.337z"
16+
/>
17+
</svg>
18+
)
19+
}
20+
21+
export const InstallDependenciesIcon = props => {
22+
return (
23+
<svg
24+
xmlns="http://www.w3.org/2000/svg"
25+
viewBox="0 0 24 24"
26+
width="16"
27+
height="16"
28+
>
29+
<path fill="none" d="M0 0h24v24H0z" />
30+
<path
31+
fill={props.fill}
32+
d="M9 2v2H5l-.001 10h14L19 4h-4V2h5a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h5zm9.999 14h-14L5 20h14l-.001-4zM17 17v2h-2v-2h2zM13 2v5h3l-4 4-4-4h3V2h2z"
33+
/>
34+
</svg>
35+
)
36+
}
37+
38+
export const ExecuteQueryIcon = props => {
39+
return (
40+
<svg
41+
xmlns="http://www.w3.org/2000/svg"
42+
viewBox="0 0 24 24"
43+
width="16"
44+
height="16"
45+
>
46+
<path fill="none" d="M0 0h24v24H0z" />
47+
<path
48+
fill={props.fill}
49+
d="M16.394 12L10 7.737v8.526L16.394 12zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832z"
50+
/>
51+
</svg>
52+
)
53+
}
54+
55+
export const FinishIcon = props => {
56+
return (
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
viewBox="0 0 24 24"
60+
width="16"
61+
height="16"
62+
>
63+
<path fill="none" d="M0 0h24v24H0z" />
64+
<path
65+
fill={props.fill}
66+
d="M12 .5l4.226 6.183 7.187 2.109-4.575 5.93.215 7.486L12 19.69l-7.053 2.518.215-7.486-4.575-5.93 7.187-2.109L12 .5zm0 3.544L9.022 8.402 3.957 9.887l3.225 4.178-.153 5.275L12 17.566l4.97 1.774-.152-5.275 3.224-4.178-5.064-1.485L12 4.044zM10 12a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z"
67+
/>
68+
</svg>
69+
)
70+
}
71+
72+
export const InitializeClientIcon = props => {
73+
return (
74+
<svg
75+
xmlns="http://www.w3.org/2000/svg"
76+
viewBox="0 0 24 24"
77+
width="16"
78+
height="16"
79+
>
80+
<path fill="none" d="M0 0h24v24H0z" />
81+
<path
82+
fill={props.fill}
83+
d="M8.595 12.812a3.51 3.51 0 0 1 0-1.623l-.992-.573 1-1.732.992.573A3.496 3.496 0 0 1 11 8.645V7.5h2v1.145c.532.158 1.012.44 1.405.812l.992-.573 1 1.732-.992.573a3.51 3.51 0 0 1 0 1.622l.992.573-1 1.732-.992-.573a3.496 3.496 0 0 1-1.405.812V16.5h-2v-1.145a3.496 3.496 0 0 1-1.405-.812l-.992.573-1-1.732.992-.572zM12 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM15 4H5v16h14V8h-4V4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z"
84+
/>
85+
</svg>
86+
)
87+
}
88+
89+
export const TokenIcon = props => {
90+
return (
91+
<svg
92+
xmlns="http://www.w3.org/2000/svg"
93+
viewBox="0 0 24 24"
94+
width="16"
95+
height="16"
96+
>
97+
<path fill="none" d="M0 0h24v24H0z" />
98+
<path
99+
fill={props.fill}
100+
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-12.95L16.95 12 12 16.95 7.05 12 12 7.05zm0 2.829L9.879 12 12 14.121 14.121 12 12 9.879z"
101+
/>
102+
</svg>
103+
)
104+
}
105+
106+
export const WriteDataIcon = props => {
107+
return (
108+
<svg
109+
xmlns="http://www.w3.org/2000/svg"
110+
viewBox="0 0 24 24"
111+
width="16"
112+
height="16"
113+
>
114+
<path fill="none" d="M0 0h24v24H0z" />
115+
<path
116+
fill={props.fill}
117+
d="M5 19h1.414l9.314-9.314-1.414-1.414L5 17.586V19zm16 2H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L9.243 19H21v2zM15.728 6.858l1.414 1.414 1.414-1.414-1.414-1.414-1.414 1.414z"
118+
/>
119+
</svg>
120+
)
121+
}

‎src/homepageExperience/components/Navigation.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, {PureComponent} from 'react'
2+
import classnames from 'classnames'
3+
4+
import {InfluxColors} from '@influxdata/clockface'
5+
6+
import {OverviewIcon} from 'src/homepageExperience/components/HomepageIcons'
7+
8+
interface OwnProps {
9+
currentStep: number
10+
}
11+
12+
const defaultFillColor = InfluxColors.Grey95
13+
const activeFillColor = '#0098f0'
14+
15+
export class Navigation extends PureComponent<OwnProps> {
16+
render() {
17+
return (
18+
<div className="subway-navigation-container">
19+
<div className="subway-navigation-flex-wrapper">
20+
<h2>Setting Up</h2>
21+
<h3>5 minutes</h3>
22+
<div
23+
className={classnames('subway-navigation-step', {
24+
active: this.props.currentStep === 1,
25+
})}
26+
>
27+
<span className="subway-navigation-step-icon-container">
28+
<OverviewIcon
29+
fill={
30+
this.props.currentStep === 1
31+
? activeFillColor
32+
: defaultFillColor
33+
}
34+
/>
35+
</span>
36+
Overview
37+
</div>
38+
<div
39+
className={classnames('subway-navigation-step', {
40+
active: this.props.currentStep === 2,
41+
})}
42+
>
43+
<span>icon</span>
44+
<p>Install Dependencies</p>
45+
</div>
46+
</div>
47+
</div>
48+
)
49+
}
50+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React, {PureComponent} from 'react'
2+
3+
export class InstallDependencies extends PureComponent {
4+
render() {
5+
return <h1>Install Dependencies</h1>
6+
}
7+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React, {PureComponent} from 'react'
2+
3+
export class Overview extends PureComponent {
4+
render() {
5+
return <h1>Overview</h1>
6+
}
7+
}

‎src/homepageExperience/containers/HomepageContainer.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, {PureComponent} from 'react'
2+
3+
import {Button} 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+
9+
interface State {
10+
currentStep: number
11+
}
12+
13+
export default class HomepageContainer extends PureComponent<null, State> {
14+
state = {
15+
currentStep: 1,
16+
}
17+
18+
handleNextClick = () => {
19+
this.setState({currentStep: this.state.currentStep + 1})
20+
}
21+
22+
renderStep = () => {
23+
switch (this.state.currentStep) {
24+
case 1: {
25+
return <Overview />
26+
}
27+
case 2: {
28+
return <InstallDependencies />
29+
}
30+
default: {
31+
return <Overview />
32+
}
33+
}
34+
}
35+
36+
render() {
37+
return (
38+
<div className="homepage-container">
39+
<aside className="homepage-container--subway">
40+
<div style={{width: '100%'}}>
41+
<Navigation currentStep={this.state.currentStep} />
42+
</div>
43+
</aside>
44+
<main className="homepage-container--main">
45+
<div className="homepage-container--main-wrapper">
46+
{this.renderStep()}
47+
</div>
48+
<Button onClick={this.handleNextClick} text="Next" />
49+
</main>
50+
</div>
51+
)
52+
}
53+
}

‎src/shared/containers/SetOrg.tsx‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,42 @@ import {Route, Switch, useHistory, useParams} from 'react-router-dom'
77
import {CommunityTemplatesIndex} from 'src/templates/containers/CommunityTemplatesIndex'
88
import PageSpinner from 'src/perf/components/PageSpinner'
99
import {
10-
UserAccountPage,
11-
MePage,
12-
TasksPage,
13-
TaskPage,
14-
TaskRunsPage,
15-
TaskEditPage,
10+
AlertHistoryIndex,
11+
AlertingIndex,
12+
BillingPage,
13+
BucketsIndex,
14+
BucketsIndexPaginated,
15+
CheckHistory,
16+
ClientLibrariesPage,
17+
DashboardContainer,
1618
DashboardsIndex,
1719
DashboardsIndexPaginated,
1820
DataExplorerPage,
19-
DashboardContainer,
21+
FileUploadsPage,
2022
FlowPage,
21-
BucketsIndex,
22-
BucketsIndexPaginated,
23-
TokensIndex,
24-
TelegrafsPage,
25-
ScrapersIndex,
26-
WriteDataPage,
27-
VariablesIndex,
23+
FlowsIndex,
24+
HomepageContainer,
2825
LabelsIndex,
29-
SecretsIndex,
30-
OrgProfilePage,
31-
AlertingIndex,
32-
AlertHistoryIndex,
33-
CheckHistory,
3426
MembersIndex,
35-
RouteToDashboardList,
36-
FlowsIndex,
27+
MePage,
3728
NotFound,
38-
UsersPage,
39-
UsagePage,
40-
BillingPage,
41-
FileUploadsPage,
42-
ClientLibrariesPage,
29+
OrgProfilePage,
30+
RouteToDashboardList,
31+
ScrapersIndex,
32+
SecretsIndex,
33+
TaskEditPage,
34+
TaskPage,
35+
TaskRunsPage,
36+
TasksPage,
4337
TelegrafPluginsPage,
38+
TelegrafsPage,
39+
TokensIndex,
40+
UsagePage,
41+
UserAccountPage,
42+
UsersPage,
43+
VariablesIndex,
4444
VersionPage,
45+
WriteDataPage,
4546
} from 'src/shared/containers'
4647

4748
// Types
@@ -272,7 +273,11 @@ const SetOrg: FC = () => {
272273
/>
273274

274275
{/* Getting Started */}
275-
<Route exact path="/orgs/:orgID" component={MePage} />
276+
{isFlagEnabled('firstMile') ? (
277+
<Route exact path="/orgs/:orgID" component={HomepageContainer} />
278+
) : (
279+
<Route exact path="/orgs/:orgID" component={MePage} />
280+
)}
276281

277282
<Route component={NotFound} />
278283
</Switch>

‎src/shared/containers/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ export const DataExplorerPage = lazy(() =>
55
)
66

77
export const MePage = lazy(() => import('src/me/containers/MePage'))
8+
export const HomepageContainer = lazy(() =>
9+
import('src/homepageExperience/containers/HomepageContainer')
10+
)
811
export const TasksPage = lazy(() => import('src/tasks/containers/TasksPage'))
912
export const TaskPage = lazy(() => import('src/tasks/containers/TaskPage'))
1013
export const TaskRunsPage = lazy(() =>

0 commit comments

Comments
 (0)