(feat Preview UI): Added more build status messages (#35103)

* intiial commit * canary commit #1 * canary commit #2 * canary commit #3 * tmp * canary commit #4 * update #4 * update #5 * made sure messages are seen and removed code for idle state * fixed issue with BUILDING status * temp * made sure tooltip stays visible
gatsbyjs · Mar 11, 2022 · 79d5463 · 79d5463
1 parent 796800f
commit 79d5463
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git 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
@@ -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
@@ -3,4 +3,6 @@ export enum BuildStatus {
   UPTODATE = `UPTODATE`,
   ERROR = `ERROR`,
   BUILDING = `BUILDING`,
+  QUEUED = `QUEUED`,
+  UPLOADING = `UPLOADING`,
 }