From b6080d89c68f198d2450a5e9114789b30bfef233 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 09:51:20 -0500 Subject: [PATCH 01/12] intiial commit --- .../components/buttons/InfoIndicatorButton.js | 40 +++++++++++-------- .../src/models/enums/build-status.ts | 2 + 2 files changed, 26 insertions(+), 16 deletions(-) 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..4cdf28f2cb51b 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 => { + setButtonProps({ + ...initialButtonProps, + tooltip: { + testId: initialButtonProps.testId, + content: message, + overrideShow: false, + show: false, + hoverable: true, + }, + active: true, + hoverable: true, + }) + } 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,6 +219,10 @@ const InfoIndicatorButton = ({ onClick: onTooltipToogle, }) }, + [BuildStatus.BUILDING]: displaySimpleMessage(`Building your preview...`), + [BuildStatus.QUEUED]: () => + displaySimpleMessage(`Kicking off your build...`), + [BuildStatus.UPLOADING]: () => displaySimpleMessage(`Deploying...`), } // 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. 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`, } From 9555262987164d015df625545ace3cd093cf00c5 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 11:10:50 -0500 Subject: [PATCH 02/12] canary commit #1 --- .../src/components/buttons/InfoIndicatorButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 4cdf28f2cb51b..51763f107032e 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js @@ -222,7 +222,7 @@ const InfoIndicatorButton = ({ [BuildStatus.BUILDING]: displaySimpleMessage(`Building your preview...`), [BuildStatus.QUEUED]: () => displaySimpleMessage(`Kicking off your build...`), - [BuildStatus.UPLOADING]: () => displaySimpleMessage(`Deploying...`), + [BuildStatus.UPLOADING]: () => displaySimpleMessage(`Deploying.....`), } // 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. From 16a76d33e668c80041900aa67b52cb50ebb72271 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 11:14:04 -0500 Subject: [PATCH 03/12] canary commit #2 --- .../src/components/buttons/InfoIndicatorButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 51763f107032e..4cdf28f2cb51b 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js @@ -222,7 +222,7 @@ const InfoIndicatorButton = ({ [BuildStatus.BUILDING]: displaySimpleMessage(`Building your preview...`), [BuildStatus.QUEUED]: () => displaySimpleMessage(`Kicking off your build...`), - [BuildStatus.UPLOADING]: () => displaySimpleMessage(`Deploying.....`), + [BuildStatus.UPLOADING]: () => displaySimpleMessage(`Deploying...`), } // 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. From 5b3623fe085fb5bbee29e8eda307de324ee0b439 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 11:32:21 -0500 Subject: [PATCH 04/12] canary commit #3 --- .../src/components/Indicator.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js index c512b8baa1201..d0245c5817167 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js @@ -204,11 +204,7 @@ const Indicator = () => { isOnPrettyUrl, } - if (currentBuild?.buildStatus === BuildStatus.BUILDING) { - setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.BUILDING }) - } else if (currentBuild?.buildStatus === BuildStatus.ERROR) { - setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.ERROR }) - } else if (buildId && buildId === newBuildInfo?.currentBuild?.id) { + if (buildId && buildId === newBuildInfo?.currentBuild?.id) { setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.UPTODATE }) } else if ( buildId && @@ -238,6 +234,8 @@ const Indicator = () => { setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.UPTODATE }) } } + } else { + setBuildInfo({ ...newBuildInfo, buildStatus: currentBuild?.buildStatus }) } if (shouldPoll.current) { timeoutRef.current = setTimeout(pollData, POLLING_INTERVAL) From 2f005a165f7c0a4728281faafb8ff3005a0efef7 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 11:39:59 -0500 Subject: [PATCH 05/12] tmp From 91b8e8cc2518e1908e1b7a64189c4b4ea798af04 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 11:40:50 -0500 Subject: [PATCH 06/12] canary commit #4 --- packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js index d0245c5817167..89dc612da0982 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" From badc6860cc370c92915582f1483fe976b39c2583 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 12:11:51 -0500 Subject: [PATCH 07/12] update #4 --- .../src/components/Indicator.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js index 89dc612da0982..cba1cdfa4f6cf 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js @@ -203,8 +203,13 @@ const Indicator = () => { siteInfo, isOnPrettyUrl, } - - if (buildId && buildId === newBuildInfo?.currentBuild?.id) { + if ( + [BuildStatus.BUILDING, BuildStatus.ERROR, BuildStatus.QUEUED].includes( + currentBuild?.buildStatus + ) + ) { + setBuildInfo({ ...newBuildInfo, buildStatus: currentBuild?.buildStatus }) + } else if (buildId && buildId === newBuildInfo?.currentBuild?.id) { setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.UPTODATE }) } else if ( buildId && @@ -234,8 +239,6 @@ const Indicator = () => { setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.UPTODATE }) } } - } else { - setBuildInfo({ ...newBuildInfo, buildStatus: currentBuild?.buildStatus }) } if (shouldPoll.current) { timeoutRef.current = setTimeout(pollData, POLLING_INTERVAL) From 4e646f94f5315f2a880fde135b53aa41f603dfc3 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 12:17:28 -0500 Subject: [PATCH 08/12] update #5 --- .../src/components/Indicator.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js index cba1cdfa4f6cf..ba48dc08c7c8b 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js @@ -204,9 +204,12 @@ const Indicator = () => { isOnPrettyUrl, } if ( - [BuildStatus.BUILDING, BuildStatus.ERROR, BuildStatus.QUEUED].includes( - currentBuild?.buildStatus - ) + [ + BuildStatus.BUILDING, + BuildStatus.ERROR, + BuildStatus.QUEUED, + BuildStatus.UPLOADING, + ].includes(currentBuild?.buildStatus) ) { setBuildInfo({ ...newBuildInfo, buildStatus: currentBuild?.buildStatus }) } else if (buildId && buildId === newBuildInfo?.currentBuild?.id) { From f65fe7e07ae15b3a97822a39f9c9235ed5bd92a8 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 12:21:45 -0500 Subject: [PATCH 09/12] made sure messages are seen and removed code for idle state --- .../components/buttons/InfoIndicatorButton.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) 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 4cdf28f2cb51b..dc23819d2977c 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js @@ -125,14 +125,14 @@ const InfoIndicatorButton = ({ } useEffect(() => { - const displaySimpleMessage = message => { + const displaySimpleMessage = (message, show = false) => { setButtonProps({ ...initialButtonProps, tooltip: { testId: initialButtonProps.testId, content: message, overrideShow: false, - show: false, + show, hoverable: true, }, active: true, @@ -219,18 +219,15 @@ const InfoIndicatorButton = ({ onClick: onTooltipToogle, }) }, - [BuildStatus.BUILDING]: displaySimpleMessage(`Building your preview...`), + [BuildStatus.BUILDING]: displaySimpleMessage( + `Building your preview...`, + true + ), [BuildStatus.QUEUED]: () => - displaySimpleMessage(`Kicking off your build...`), - [BuildStatus.UPLOADING]: () => displaySimpleMessage(`Deploying...`), + 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 => { From 7cf61deb1f3dcf912e3bef5b84787c136ad76f47 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 12:29:00 -0500 Subject: [PATCH 10/12] fixed issue with BUILDING status --- .../src/components/buttons/InfoIndicatorButton.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) 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 dc23819d2977c..cf38fde0f12ee 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js @@ -131,7 +131,7 @@ const InfoIndicatorButton = ({ tooltip: { testId: initialButtonProps.testId, content: message, - overrideShow: false, + overrideShow: show, show, hoverable: true, }, @@ -219,10 +219,8 @@ const InfoIndicatorButton = ({ onClick: onTooltipToogle, }) }, - [BuildStatus.BUILDING]: displaySimpleMessage( - `Building your preview...`, - true - ), + [BuildStatus.BUILDING]: () => + displaySimpleMessage(`Building your preview...`, true), [BuildStatus.QUEUED]: () => displaySimpleMessage(`Kicking off your build...`, true), [BuildStatus.UPLOADING]: () => displaySimpleMessage(`Deploying...`, true), From 7ceff26fc7dff73b399b4633d04e8cb79d29b78c Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 12:29:24 -0500 Subject: [PATCH 11/12] temp From 8724b2b6884b43a04fcac81b011c33979c0149e2 Mon Sep 17 00:00:00 2001 From: Leithon English Date: Thu, 10 Mar 2022 12:39:42 -0500 Subject: [PATCH 12/12] made sure tooltip stays visible --- .../src/components/buttons/InfoIndicatorButton.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 cf38fde0f12ee..9f1353985c42e 100644 --- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js +++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js @@ -133,10 +133,10 @@ const InfoIndicatorButton = ({ content: message, overrideShow: show, show, - hoverable: true, + hoverable: !show, }, active: true, - hoverable: true, + hoverable: !show, }) } const buildStatusActions = {