diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js index c512b8baa1201..ba48dc08c7c8b 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback, useRef } from "react" +import React, { useState, useEffect, useRef } from "react" import IndicatorProvider from "../context/indicatorProvider" import { BuildStatus } from "../models/enums" import { useTrackEvent, getBuildInfo } from "../utils" @@ -203,11 +203,15 @@ const Indicator = () => { siteInfo, isOnPrettyUrl, } - - if (currentBuild?.buildStatus === BuildStatus.BUILDING) { - setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.BUILDING }) - } else if (currentBuild?.buildStatus === BuildStatus.ERROR) { - setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.ERROR }) + if ( + [ + BuildStatus.BUILDING, + BuildStatus.ERROR, + BuildStatus.QUEUED, + BuildStatus.UPLOADING, + ].includes(currentBuild?.buildStatus) + ) { + setBuildInfo({ ...newBuildInfo, buildStatus: currentBuild?.buildStatus }) } else if (buildId && buildId === newBuildInfo?.currentBuild?.id) { setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.UPTODATE }) } else if ( 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 3101e5ac8d686..9f1353985c42e 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js @@ -125,6 +125,20 @@ const InfoIndicatorButton = ({ } useEffect(() => { + const displaySimpleMessage = (message, show = false) => { + setButtonProps({ + ...initialButtonProps, + tooltip: { + testId: initialButtonProps.testId, + content: message, + overrideShow: show, + show, + hoverable: !show, + }, + active: true, + hoverable: !show, + }) + } const buildStatusActions = { [BuildStatus.UPTODATE]: () => { if (shouldShowFeedback) { @@ -151,22 +165,12 @@ const InfoIndicatorButton = ({ hoverable: true, }) } else { - setButtonProps({ - ...initialButtonProps, - tooltip: { - testId: initialButtonProps.testId, - content: `Preview updated ${formatDistance( - Date.now(), - new Date(createdAt), - { includeSeconds: true } - )} ago`, - overrideShow: false, - show: false, - hoverable: true, - }, - active: true, - hoverable: true, - }) + const message = `Preview updated ${formatDistance( + Date.now(), + new Date(createdAt), + { includeSeconds: true } + )} ago` + displaySimpleMessage(message) } }, [BuildStatus.SUCCESS]: () => { @@ -215,14 +219,13 @@ const InfoIndicatorButton = ({ onClick: onTooltipToogle, }) }, + [BuildStatus.BUILDING]: () => + displaySimpleMessage(`Building your preview...`, true), + [BuildStatus.QUEUED]: () => + displaySimpleMessage(`Kicking off your build...`, true), + [BuildStatus.UPLOADING]: () => displaySimpleMessage(`Deploying...`, true), } - // this is because the build status enum is used for ui state - so we can't have 1 ui state that covers multiple build statuses. - // If we don't have content sync info (pollForNodeManifest), we have to assume that a currently building build isn't applicable to the current user. So we default to the least noisy state which is UPTODATE. - // @todo refactor and decouple build states from UI states - this state should be something like uiState === `IDLE` - buildStatusActions[BuildStatus.BUILDING] = - buildStatusActions[BuildStatus.UPTODATE] - const contentSyncSuccessAction = nodeManifestRedirectUrl ? () => { setButtonProps(btnProps => { diff --git a/packages/gatsby-plugin-gatsby-cloud/src/models/enums/build-status.ts b/packages/gatsby-plugin-gatsby-cloud/src/models/enums/build-status.ts index 5bf26a1834088..dc01814b0b9b3 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/models/enums/build-status.ts +++ b/packages/gatsby-plugin-gatsby-cloud/src/models/enums/build-status.ts @@ -3,4 +3,6 @@ export enum BuildStatus { UPTODATE = `UPTODATE`, ERROR = `ERROR`, BUILDING = `BUILDING`, + QUEUED = `QUEUED`, + UPLOADING = `UPLOADING`, }