Skip to content

Commit d54bd19

Browse files
ChitlangeSahasChitlangeSahas
authored
fix: first pass at firstmile bugs (#4460)
1 parent e9fdcc3 commit d54bd19

File tree

8 files changed

+201
-151
lines changed

8 files changed

+201
-151
lines changed

‎src/homepageExperience/components/HomepageExperience.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ h1#first-mile--header {
1212
height: 100%;
1313
width: 100%;
1414

15-
padding-top: 71px;
16-
padding-right: 85px;
17-
1815
overflow-y: scroll;
1916
}
2017

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const Finish = (props: OwnProps) => {
9292
</p>
9393
</ResourceCard>
9494
<ResourceCard className="homepage-wizard-next-steps">
95-
<SafeBlankLink href="https://docs.influxdata.com">
95+
<SafeBlankLink href="https://docs.influxdata.com/influxdb/v2.2/reference/key-concepts/">
9696
<h4>{BookIcon}Key Concepts</h4>
9797
</SafeBlankLink>
9898
<p>Learn about important concepts for writing time-series data.</p>

‎src/homepageExperience/components/steps/python/ExecuteQuery.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ for table in tables:
4747
onCopy={logCopyCodeSnippet}
4848
/>
4949
<p>
50-
In this query, we are looking for data points within last 10 minutes
50+
In this query, we are looking for data points within the last 10 minutes
5151
with field key of "field1".
5252
<br />
5353
<br />

‎src/homepageExperience/components/steps/python/WriteData.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ for value in range(5):
6868
<>
6969
<h1>Write Data</h1>
7070
<p>
71-
To start writing data, we need a place to our time-series store data. We
71+
To start writing data, we need a place to store our time-series data. We
7272
call these{' '}
7373
<SafeBlankLink
7474
href={`orgs/${org.id}/load-data/buckets`}
@@ -77,6 +77,7 @@ for value in range(5):
7777
buckets.
7878
</SafeBlankLink>
7979
</p>
80+
<p>Please select or create a new bucket:</p>
8081

8182
<Panel backgroundColor={InfluxColors.Grey15}>
8283
<Panel.Body size={ComponentSize.ExtraSmall}>

‎src/homepageExperience/containers/GoWizard.tsx‎

Lines changed: 63 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
ComponentColor,
77
ComponentSize,
88
ComponentStatus,
9+
Page,
910
SubwayNav,
1011
} from '@influxdata/clockface'
1112

@@ -24,6 +25,7 @@ import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
2425

2526
// Utils
2627
import {event} from 'src/cloud/utils/reporting'
28+
import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
2729

2830
interface State {
2931
currentStep: number
@@ -113,56 +115,69 @@ export class GoWizard extends PureComponent<null, State> {
113115

114116
render() {
115117
return (
116-
<div className="homepage-wizard-container">
117-
<aside className="homepage-wizard-container--subway">
118-
<div style={{width: '100%'}}>
119-
<SubwayNav
120-
currentStep={this.state.currentStep}
121-
onStepClick={this.handleNavClick}
122-
navigationSteps={HOMEPAGE_NAVIGATION_STEPS}
123-
settingUpIcon={GoIcon}
124-
settingUpText="Go"
125-
setupTime="5 minutes"
126-
/>
127-
</div>
128-
</aside>
129-
<div className="homepage-wizard-container--main">
130-
<div
131-
className={classnames('homepage-wizard-container--main-wrapper', {
132-
verticallyCentered:
133-
this.state.currentStep === 1 ||
134-
this.state.currentStep === HOMEPAGE_NAVIGATION_STEPS.length,
135-
})}
136-
>
137-
{this.renderStep()}
138-
</div>
118+
<Page>
119+
<Page.Header fullWidth={false}>
120+
{/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
121+
<div />
122+
<RateLimitAlert location="firstMile.homepage" />
123+
</Page.Header>
124+
<Page.Contents>
125+
<div className="homepage-wizard-container">
126+
<aside className="homepage-wizard-container--subway">
127+
<div style={{width: '100%'}}>
128+
<SubwayNav
129+
currentStep={this.state.currentStep}
130+
onStepClick={this.handleNavClick}
131+
navigationSteps={HOMEPAGE_NAVIGATION_STEPS}
132+
settingUpIcon={GoIcon}
133+
settingUpText="Go"
134+
setupTime="5 minutes"
135+
/>
136+
</div>
137+
</aside>
138+
<div className="homepage-wizard-container--main">
139+
<div
140+
className={classnames(
141+
'homepage-wizard-container--main-wrapper',
142+
{
143+
verticallyCentered:
144+
this.state.currentStep === 1 ||
145+
this.state.currentStep ===
146+
HOMEPAGE_NAVIGATION_STEPS.length,
147+
}
148+
)}
149+
>
150+
{this.renderStep()}
151+
</div>
139152

140-
<div className="homepage-wizard-container-footer">
141-
<Button
142-
onClick={this.handlePreviousClick}
143-
text="Previous"
144-
size={ComponentSize.Large}
145-
color={ComponentColor.Tertiary}
146-
status={
147-
this.state.currentStep > 1
148-
? ComponentStatus.Default
149-
: ComponentStatus.Disabled
150-
}
151-
/>
152-
<Button
153-
onClick={this.handleNextClick}
154-
text="Next"
155-
size={ComponentSize.Large}
156-
color={ComponentColor.Primary}
157-
status={
158-
this.state.currentStep < 8
159-
? ComponentStatus.Default
160-
: ComponentStatus.Disabled
161-
}
162-
/>
153+
<div className="homepage-wizard-container-footer">
154+
<Button
155+
onClick={this.handlePreviousClick}
156+
text="Previous"
157+
size={ComponentSize.Large}
158+
color={ComponentColor.Tertiary}
159+
status={
160+
this.state.currentStep > 1
161+
? ComponentStatus.Default
162+
: ComponentStatus.Disabled
163+
}
164+
/>
165+
<Button
166+
onClick={this.handleNextClick}
167+
text="Next"
168+
size={ComponentSize.Large}
169+
color={ComponentColor.Primary}
170+
status={
171+
this.state.currentStep < 8
172+
? ComponentStatus.Default
173+
: ComponentStatus.Disabled
174+
}
175+
/>
176+
</div>
177+
</div>
163178
</div>
164-
</div>
165-
</div>
179+
</Page.Contents>
180+
</Page>
166181
)
167182
}
168183
}

‎src/homepageExperience/containers/HomepageContainer.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {event} from 'src/cloud/utils/reporting'
3636
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
3737
import UsageProvider from 'src/usage/context/usage'
3838
import Resources from 'src/me/components/Resources'
39+
import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
3940

4041
export const HomepageContainer: FC = () => {
4142
const org = useSelector(getOrg)
@@ -60,6 +61,11 @@ export const HomepageContainer: FC = () => {
6061
return (
6162
<>
6263
<Page titleTag={pageTitleSuffixer(['Get Started'])}>
64+
<Page.Header fullWidth={false}>
65+
{/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
66+
<div />
67+
<RateLimitAlert location="firstMile.homepage" />
68+
</Page.Header>
6369
<Page.Contents scrollable={true} fullWidth={false}>
6470
<Grid>
6571
<Grid.Row>

‎src/homepageExperience/containers/NodejsWizard.tsx‎

Lines changed: 64 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
ComponentColor,
77
ComponentSize,
88
ComponentStatus,
9+
Page,
910
SubwayNav,
1011
} from '@influxdata/clockface'
1112

@@ -24,6 +25,7 @@ import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
2425

2526
// Utils
2627
import {event} from 'src/cloud/utils/reporting'
28+
import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
2729

2830
interface State {
2931
currentStep: number
@@ -113,56 +115,70 @@ export class NodejsWizard extends PureComponent<null, State> {
113115

114116
render() {
115117
return (
116-
<div className="homepage-wizard-container">
117-
<aside className="homepage-wizard-container--subway">
118-
<div style={{width: '100%'}}>
119-
<SubwayNav
120-
currentStep={this.state.currentStep}
121-
onStepClick={this.handleNavClick}
122-
navigationSteps={HOMEPAGE_NAVIGATION_STEPS}
123-
settingUpIcon={NodejsIcon}
124-
settingUpText="Nodejs"
125-
setupTime="5 minutes"
126-
/>
127-
</div>
128-
</aside>
129-
<div className="homepage-wizard-container--main">
130-
<div
131-
className={classnames('homepage-wizard-container--main-wrapper', {
132-
verticallyCentered:
133-
this.state.currentStep === 1 ||
134-
this.state.currentStep === HOMEPAGE_NAVIGATION_STEPS.length,
135-
})}
136-
>
137-
{this.renderStep()}
138-
</div>
118+
<Page>
119+
<Page.Header fullWidth={false}>
120+
{/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
121+
<div />
122+
<RateLimitAlert location="firstMile.homepage" />
123+
</Page.Header>
124+
125+
<Page.Contents>
126+
<div className="homepage-wizard-container">
127+
<aside className="homepage-wizard-container--subway">
128+
<div style={{width: '100%'}}>
129+
<SubwayNav
130+
currentStep={this.state.currentStep}
131+
onStepClick={this.handleNavClick}
132+
navigationSteps={HOMEPAGE_NAVIGATION_STEPS}
133+
settingUpIcon={NodejsIcon}
134+
settingUpText="Nodejs"
135+
setupTime="5 minutes"
136+
/>
137+
</div>
138+
</aside>
139+
<div className="homepage-wizard-container--main">
140+
<div
141+
className={classnames(
142+
'homepage-wizard-container--main-wrapper',
143+
{
144+
verticallyCentered:
145+
this.state.currentStep === 1 ||
146+
this.state.currentStep ===
147+
HOMEPAGE_NAVIGATION_STEPS.length,
148+
}
149+
)}
150+
>
151+
{this.renderStep()}
152+
</div>
139153

140-
<div className="homepage-wizard-container-footer">
141-
<Button
142-
onClick={this.handlePreviousClick}
143-
text="Previous"
144-
size={ComponentSize.Large}
145-
color={ComponentColor.Tertiary}
146-
status={
147-
this.state.currentStep > 1
148-
? ComponentStatus.Default
149-
: ComponentStatus.Disabled
150-
}
151-
/>
152-
<Button
153-
onClick={this.handleNextClick}
154-
text="Next"
155-
size={ComponentSize.Large}
156-
color={ComponentColor.Primary}
157-
status={
158-
this.state.currentStep < 8
159-
? ComponentStatus.Default
160-
: ComponentStatus.Disabled
161-
}
162-
/>
154+
<div className="homepage-wizard-container-footer">
155+
<Button
156+
onClick={this.handlePreviousClick}
157+
text="Previous"
158+
size={ComponentSize.Large}
159+
color={ComponentColor.Tertiary}
160+
status={
161+
this.state.currentStep > 1
162+
? ComponentStatus.Default
163+
: ComponentStatus.Disabled
164+
}
165+
/>
166+
<Button
167+
onClick={this.handleNextClick}
168+
text="Next"
169+
size={ComponentSize.Large}
170+
color={ComponentColor.Primary}
171+
status={
172+
this.state.currentStep < 8
173+
? ComponentStatus.Default
174+
: ComponentStatus.Disabled
175+
}
176+
/>
177+
</div>
178+
</div>
163179
</div>
164-
</div>
165-
</div>
180+
</Page.Contents>
181+
</Page>
166182
)
167183
}
168184
}

0 commit comments

Comments
 (0)