diff --git a/packages/gatsby-plugin-gatsby-cloud/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-gatsby-cloud/src/__tests__/gatsby-browser.js index 7b9bc743f3401..5583010c03f1a 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/__tests__/gatsby-browser.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/__tests__/gatsby-browser.js @@ -17,7 +17,7 @@ const copyLinkMessage = `Copy link` const copyLinkSuccessMessage = `Link copied` const infoButtonMessage = `Preview updated` const errorLogMessage = `View logs` -const newPreviewMessage = `New preview available` +const newPreviewMessage = `This page has been updated.` const initialStateMessage = `Fetching preview info...` const buildingPreviewMessage = `Building a new preview` @@ -268,14 +268,6 @@ describe(`Preview status indicator`, () => { }) describe(`Gatsby Button`, () => { - it(`should show a more recent succesful build when available`, async () => { - await assertTooltipText({ - route: `success`, - text: newPreviewMessage, - matcherType: `get`, - }) - }) - it(`should show an error message when most recent build fails`, async () => { await assertTooltipText({ route: `error`, @@ -284,14 +276,6 @@ describe(`Preview status indicator`, () => { }) }) - it(`should show a preview building message when most recent build is building`, async () => { - await assertTooltipText({ - route: `building`, - text: buildingPreviewMessage, - matcherType: `get`, - }) - }) - it(`should have no tooltip when preview is up to date`, async () => { await assertTooltipText({ route: `uptodate`, @@ -407,6 +391,22 @@ describe(`Preview status indicator`, () => { }) describe(`Info Button`, () => { + it(`should show a more recent succesful build when available`, async () => { + await assertTooltipText({ + route: `success`, + text: newPreviewMessage, + matcherType: `get`, + }) + }) + + it(`should show a preview building message when most recent build is building`, async () => { + await assertTooltipText({ + route: `building`, + text: buildingPreviewMessage, + matcherType: `get`, + }) + }) + it(`should have no tooltip when successful`, async () => { await assertTooltipText({ route: `success`, diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js index d4cfc8687954d..274f7031afd87 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js @@ -131,8 +131,8 @@ export default function Indicator() { return ( - + ) } diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/GatsbyIndicatorButton.js b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/GatsbyIndicatorButton.js index d541dc8b646b3..19455f3f41ebc 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/GatsbyIndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/GatsbyIndicatorButton.js @@ -16,49 +16,15 @@ const getButtonProps = ({ erroredBuildId, }) => { switch (buildStatus) { - case `SUCCESS`: { - return { - tooltipContent: ( - - ), - overrideShowTooltip: true, - active: true, - } - } - case `ERROR`: { - return { - tooltipContent: ( - - ), - overrideShowTooltip: true, - active: true, - } - } - case `BUILDING`: { - return { - tooltipContent: `Building a new preview`, - showSpinner: true, - overrideShowTooltip: true, - } - } - case `UPTODATE`: { + case `BUILDING`: + case `ERROR`: + case `SUCCESS`: + case `UPTODATE`: + default: { return { active: true, } } - default: { - return {} - } } } diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js index b23c49d6942c1..704307fbcc9e3 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js @@ -1,6 +1,6 @@ import React, { useRef, useState } from "react" import { IndicatorButtonTooltip } from "../tooltips" -import { spinnerIcon } from "../icons" +import { spinnerIcon, exitIcon } from "../icons" export default function IndicatorButton({ buttonIndex, @@ -13,14 +13,13 @@ export default function IndicatorButton({ testId, onMouseEnter, hoverable, + showInfo = false, }) { const [showTooltip, setShowTooltip] = useState(false) const buttonRef = useRef(null) const isFirstButton = buttonIndex === 0 const marginTop = isFirstButton ? `0px` : `8px` - const onMouseLeave = () => setShowTooltip(false) - return ( <> + ) + } overrideShowTooltip={overrideShowTooltip} showTooltip={showTooltip} elementRef={buttonRef} diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js index 4113c0d37ad66..55f7bf11e4e27 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js @@ -3,10 +3,24 @@ import { formatDistance } from "date-fns" import trackEvent from "../../utils/trackEvent" import IndicatorButton from "./IndicatorButton" -import { infoIcon } from "../icons" +import { infoIcon, infoIconActive } from "../icons" +import { + BuildErrorTooltipContent, + BuildSuccessTooltipContent, +} from "../tooltips" const getButtonProps = props => { - const { createdAt, buildStatus } = props + const { + createdAt, + buildStatus, + erroredBuildId, + isOnPrettyUrl, + sitePrefix, + siteId, + buildId, + orgId, + } = props + switch (buildStatus) { case `UPTODATE`: { return { @@ -16,13 +30,55 @@ const getButtonProps = props => { { includeSeconds: true } )} ago`, active: true, + showInfo: false, + hoverable: true, + } + } + case `SUCCESS`: { + return { + tooltipContent: ( + + ), + active: true, + showInfo: true, + hoverable: false, + } + } + case `ERROR`: { + return { + tooltipContent: ( + + ), + active: true, + showInfo: true, + hoverable: false, + } + } + case `BUILDING`: { + return { + tooltipContent: `Building a new preview`, + showSpinner: true, + overrideShowTooltip: true, + showInfo: false, + hoverable: true, } } - case `SUCCESS`: - case `ERROR`: - case `BUILDING`: default: { - return {} + return { + active: true, + showInfo: false, + hoverable: false, + } } } } @@ -30,6 +86,15 @@ const getButtonProps = props => { export default function InfoIndicatorButton(props) { const { orgId, siteId, buildId } = props const buttonProps = getButtonProps(props) + const trackClick = () => { + trackEvent({ + eventType: `PREVIEW_INDICATOR_CLICK`, + orgId, + siteId, + buildId, + name: `info click`, + }) + } const trackHover = () => { trackEvent({ eventType: `PREVIEW_INDICATOR_HOVER`, @@ -39,14 +104,13 @@ export default function InfoIndicatorButton(props) { name: `info hover`, }) } - return ( ) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js b/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js index be2f23b40fe31..fdc68332dbff1 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js @@ -89,6 +89,96 @@ export const successIcon = ( ) +export const exitIcon = ( + + + +) + +export const infoIconActive = ( + + + + + + + + + + + + + + + + + + + + +) + +export const notificationIcon = ( + + + +) + export const spinnerIcon = (

{`View logs`}

-
{logsIcon}
+
{logsIcon}
) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildSuccessTooltipContent.js b/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildSuccessTooltipContent.js index 3c2844240a03b..90219f70aa63b 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildSuccessTooltipContent.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildSuccessTooltipContent.js @@ -46,7 +46,7 @@ export default function BuildSuccessTooltipContent({ }) { return ( <> - {`New preview available`} + {`This page has been updated. `} ) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js b/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js index 0bf48e9a9a0f9..10b2d6eff0e98 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js @@ -5,6 +5,7 @@ export default function IndicatorButtonTooltip({ overrideShowTooltip, showTooltip, testId, + iconExit, elementRef, }) { const elmOffsetTop = () => { @@ -24,6 +25,7 @@ export default function IndicatorButtonTooltip({ style={{ top: `${elmOffsetTop()}px` }} > {tooltipContent} + {iconExit} ) }