Skip to content

Commit db188dc

Browse files
pvorozhepvorozhe
authored
preview 2.0 UI changes (#34440)
* Add preview 2.0 changes. * Add preview 2.0 changes. * Add preview 2.0 changes. * Fix link regression. * Fix link regression. * Undo package.json changes. * Undo package.json changes. * Feedback round 2. * Feedback round 2. * Linter issues, hover tracking. * Test failures.
1 parent f5c8c20 commit db188dc

File tree

9 files changed

+224
-77
lines changed

9 files changed

+224
-77
lines changed

‎packages/gatsby-plugin-gatsby-cloud/src/__tests__/gatsby-browser.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const copyLinkMessage = `Copy link`
1717
const copyLinkSuccessMessage = `Link copied`
1818
const infoButtonMessage = `Preview updated`
1919
const errorLogMessage = `View logs`
20-
const newPreviewMessage = `New preview available`
20+
const newPreviewMessage = `This page has been updated.`
2121
const initialStateMessage = `Fetching preview info...`
2222
const buildingPreviewMessage = `Building a new preview`
2323

@@ -268,14 +268,6 @@ describe(`Preview status indicator`, () => {
268268
})
269269

270270
describe(`Gatsby Button`, () => {
271-
it(`should show a more recent succesful build when available`, async () => {
272-
await assertTooltipText({
273-
route: `success`,
274-
text: newPreviewMessage,
275-
matcherType: `get`,
276-
})
277-
})
278-
279271
it(`should show an error message when most recent build fails`, async () => {
280272
await assertTooltipText({
281273
route: `error`,
@@ -284,14 +276,6 @@ describe(`Preview status indicator`, () => {
284276
})
285277
})
286278

287-
it(`should show a preview building message when most recent build is building`, async () => {
288-
await assertTooltipText({
289-
route: `building`,
290-
text: buildingPreviewMessage,
291-
matcherType: `get`,
292-
})
293-
})
294-
295279
it(`should have no tooltip when preview is up to date`, async () => {
296280
await assertTooltipText({
297281
route: `uptodate`,
@@ -407,6 +391,22 @@ describe(`Preview status indicator`, () => {
407391
})
408392

409393
describe(`Info Button`, () => {
394+
it(`should show a more recent succesful build when available`, async () => {
395+
await assertTooltipText({
396+
route: `success`,
397+
text: newPreviewMessage,
398+
matcherType: `get`,
399+
})
400+
})
401+
402+
it(`should show a preview building message when most recent build is building`, async () => {
403+
await assertTooltipText({
404+
route: `building`,
405+
text: buildingPreviewMessage,
406+
matcherType: `get`,
407+
})
408+
})
409+
410410
it(`should have no tooltip when successful`, async () => {
411411
await assertTooltipText({
412412
route: `success`,

‎packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,8 @@ export default function Indicator() {
131131
return (
132132
<PreviewIndicator>
133133
<GatsbyIndicatorButton {...buttonProps} />
134-
<LinkIndicatorButton {...buttonProps} />
135134
<InfoIndicatorButton {...buttonProps} />
135+
<LinkIndicatorButton {...buttonProps} />
136136
</PreviewIndicator>
137137
)
138138
}

‎packages/gatsby-plugin-gatsby-cloud/src/components/buttons/GatsbyIndicatorButton.js

Lines changed: 5 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,49 +16,15 @@ const getButtonProps = ({
1616
erroredBuildId,
1717
}) => {
1818
switch (buildStatus) {
19-
case `SUCCESS`: {
20-
return {
21-
tooltipContent: (
22-
<BuildSuccessTooltipContent
23-
isOnPrettyUrl={isOnPrettyUrl}
24-
sitePrefix={sitePrefix}
25-
buildId={buildId}
26-
siteId={siteId}
27-
orgId={orgId}
28-
/>
29-
),
30-
overrideShowTooltip: true,
31-
active: true,
32-
}
33-
}
34-
case `ERROR`: {
35-
return {
36-
tooltipContent: (
37-
<BuildErrorTooltipContent
38-
siteId={siteId}
39-
orgId={orgId}
40-
buildId={erroredBuildId}
41-
/>
42-
),
43-
overrideShowTooltip: true,
44-
active: true,
45-
}
46-
}
47-
case `BUILDING`: {
48-
return {
49-
tooltipContent: `Building a new preview`,
50-
showSpinner: true,
51-
overrideShowTooltip: true,
52-
}
53-
}
54-
case `UPTODATE`: {
19+
case `BUILDING`:
20+
case `ERROR`:
21+
case `SUCCESS`:
22+
case `UPTODATE`:
23+
default: {
5524
return {
5625
active: true,
5726
}
5827
}
59-
default: {
60-
return {}
61-
}
6228
}
6329
}
6430

‎packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useRef, useState } from "react"
22
import { IndicatorButtonTooltip } from "../tooltips"
3-
import { spinnerIcon } from "../icons"
3+
import { spinnerIcon, exitIcon } from "../icons"
44

55
export default function IndicatorButton({
66
buttonIndex,
@@ -13,14 +13,13 @@ export default function IndicatorButton({
1313
testId,
1414
onMouseEnter,
1515
hoverable,
16+
showInfo = false,
1617
}) {
1718
const [showTooltip, setShowTooltip] = useState(false)
1819
const buttonRef = useRef(null)
1920
const isFirstButton = buttonIndex === 0
2021
const marginTop = isFirstButton ? `0px` : `8px`
2122

22-
const onMouseLeave = () => setShowTooltip(false)
23-
2423
return (
2524
<>
2625
<button
@@ -34,15 +33,27 @@ export default function IndicatorButton({
3433
>
3534
<div
3635
data-testid={`${testId}-button`}
36+
onClick={
37+
hoverable
38+
? onClick
39+
: () => {
40+
setShowTooltip(!showTooltip)
41+
}
42+
}
3743
onMouseEnter={() => {
38-
setShowTooltip(true)
44+
if (hoverable) {
45+
setShowTooltip(true)
3946

40-
if (onMouseEnter) {
41-
onMouseEnter()
47+
if (onMouseEnter) {
48+
onMouseEnter()
49+
}
50+
}
51+
}}
52+
onMouseLeave={() => {
53+
if (hoverable) {
54+
setShowTooltip(false)
4255
}
4356
}}
44-
onMouseLeave={onMouseLeave}
45-
onClick={active ? onClick : null}
4657
>
4758
{iconSvg}
4859
{showSpinner && (
@@ -53,6 +64,18 @@ export default function IndicatorButton({
5364
{tooltipContent && (
5465
<IndicatorButtonTooltip
5566
tooltipContent={tooltipContent}
67+
iconExit={
68+
showInfo && (
69+
<button
70+
onClick={() => {
71+
setShowTooltip(false)
72+
}}
73+
data-gatsby-preview-indicator="tooltip-link"
74+
>
75+
{exitIcon}
76+
</button>
77+
)
78+
}
5679
overrideShowTooltip={overrideShowTooltip}
5780
showTooltip={showTooltip}
5881
elementRef={buttonRef}

‎packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js

Lines changed: 73 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,24 @@ import { formatDistance } from "date-fns"
33
import trackEvent from "../../utils/trackEvent"
44

55
import IndicatorButton from "./IndicatorButton"
6-
import { infoIcon } from "../icons"
6+
import { infoIcon, infoIconActive } from "../icons"
7+
import {
8+
BuildErrorTooltipContent,
9+
BuildSuccessTooltipContent,
10+
} from "../tooltips"
711

812
const getButtonProps = props => {
9-
const { createdAt, buildStatus } = props
13+
const {
14+
createdAt,
15+
buildStatus,
16+
erroredBuildId,
17+
isOnPrettyUrl,
18+
sitePrefix,
19+
siteId,
20+
buildId,
21+
orgId,
22+
} = props
23+
1024
switch (buildStatus) {
1125
case `UPTODATE`: {
1226
return {
@@ -16,20 +30,71 @@ const getButtonProps = props => {
1630
{ includeSeconds: true }
1731
)} ago`,
1832
active: true,
33+
showInfo: false,
34+
hoverable: true,
35+
}
36+
}
37+
case `SUCCESS`: {
38+
return {
39+
tooltipContent: (
40+
<BuildSuccessTooltipContent
41+
isOnPrettyUrl={isOnPrettyUrl}
42+
sitePrefix={sitePrefix}
43+
buildId={buildId}
44+
siteId={siteId}
45+
orgId={orgId}
46+
/>
47+
),
48+
active: true,
49+
showInfo: true,
50+
hoverable: false,
51+
}
52+
}
53+
case `ERROR`: {
54+
return {
55+
tooltipContent: (
56+
<BuildErrorTooltipContent
57+
siteId={siteId}
58+
orgId={orgId}
59+
buildId={erroredBuildId}
60+
/>
61+
),
62+
active: true,
63+
showInfo: true,
64+
hoverable: false,
65+
}
66+
}
67+
case `BUILDING`: {
68+
return {
69+
tooltipContent: `Building a new preview`,
70+
showSpinner: true,
71+
overrideShowTooltip: true,
72+
showInfo: false,
73+
hoverable: true,
1974
}
2075
}
21-
case `SUCCESS`:
22-
case `ERROR`:
23-
case `BUILDING`:
2476
default: {
25-
return {}
77+
return {
78+
active: true,
79+
showInfo: false,
80+
hoverable: false,
81+
}
2682
}
2783
}
2884
}
2985

3086
export default function InfoIndicatorButton(props) {
3187
const { orgId, siteId, buildId } = props
3288
const buttonProps = getButtonProps(props)
89+
const trackClick = () => {
90+
trackEvent({
91+
eventType: `PREVIEW_INDICATOR_CLICK`,
92+
orgId,
93+
siteId,
94+
buildId,
95+
name: `info click`,
96+
})
97+
}
3398
const trackHover = () => {
3499
trackEvent({
35100
eventType: `PREVIEW_INDICATOR_HOVER`,
@@ -39,14 +104,13 @@ export default function InfoIndicatorButton(props) {
39104
name: `info hover`,
40105
})
41106
}
42-
43107
return (
44108
<IndicatorButton
45109
testId="info"
46-
iconSvg={infoIcon}
110+
iconSvg={buttonProps?.showInfo ? infoIconActive : infoIcon}
111+
onClick={buttonProps?.active && trackClick}
47112
onMouseEnter={buttonProps?.active && trackHover}
48113
buttonIndex={props.buttonIndex}
49-
hoverable={true}
50114
{...buttonProps}
51115
/>
52116
)

0 commit comments

Comments
 (0)