feat(gatsby-plugin-gatsby-cloud): request customer feedback

.eslintignore

@@ -27,8 +27,8 @@ packages/gatsby-admin/public
 packages/gatsby/gatsby-admin-public
 packages/gatsby-codemods/transforms
 packages/gatsby-source-graphql/batching
-packages/gatsby-plugin-gatsby-cloud/components
-packages/gatsby-plugin-gatsby-cloud/utils
+packages/gatsby-plugin-gatsby-cloud/**/*.js
+!packages/gatsby-plugin-gatsby-cloud/src/**/*.js
 packages/gatsby-plugin-preact/fast-refresh
 
 packages/gatsby-source-wordpress/test-site/**

packages/gatsby-plugin-gatsby-cloud/.gitignore

@@ -1,7 +1,10 @@
 yarn.lock
-/*.js
+/**/*.js
+/**/*.map
+!/src/**/*.js
 !index.js
 
 /components/
+/models/
 assets/
-utils/
+# utils/

packages/gatsby-plugin-gatsby-cloud/package.json

@@ -10,6 +10,7 @@
     "@babel/runtime": "^7.15.4",
     "date-fns": "^2.28.0",
     "fs-extra": "^10.0.0",
+    "js-cookie": "^3.0.1",
     "gatsby-core-utils": "^3.6.0-next.0",
     "gatsby-telemetry": "^3.6.0-next.0",
     "kebab-hash": "^0.1.2",
@@ -51,11 +52,11 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "babel src --out-dir . --ignore \"**/__tests__\" && npm run clean && npm run copy-type-declarations",
+    "build": "babel src --out-dir . --ignore \"**/__tests__\" --extensions \".tsx,.ts,.js\" --source-maps && npm run clean && npm run copy-type-declarations",
     "clean": "del-cli ./components/index.d.ts",
-    "copy-type-declarations": "cpy src/components/index.d.ts components/",
+    "copy-type-declarations": "cpy src/components/index.d.ts components",
     "prepare": "cross-env NODE_ENV=production npm run build",
-    "watch": "babel -w src --out-dir . --ignore \"**/__tests__\""
+    "watch": "babel -w src --out-dir . --ignore \"**/__tests__\" --extensions \".tsx,.ts,.js\" --source-maps"
   },
   "engines": {
     "node": ">=14.15.0"

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

@@ -1,40 +1,39 @@
 import React, { useState, useEffect, useCallback, useRef } from "react"
-import getBuildInfo from "../utils/getBuildInfo"
-import trackEvent from "../utils/trackEvent"
+import IndicatorProvider from "../context/indicatorProvider"
+import { BuildStatus } from "../models/enums"
+import { useTrackEvent, getBuildInfo } from "../utils"
 import {
   LinkIndicatorButton,
   InfoIndicatorButton,
   GatsbyIndicatorButton,
 } from "./buttons"
 import Style from "./Style"
 
-const POLLING_INTERVAL = process.env.GATSBY_PREVIEW_POLL_INTERVAL || 3000
-
-export function PreviewIndicator({ children }) {
-  return (
-    <>
-      <Style />
-      <div
-        data-testid="preview-status-indicator"
-        data-gatsby-preview-indicator="root"
-        aria-live="assertive"
-      >
-        {React.Children.map(children, (child, i) =>
-          React.cloneElement(child, { ...child.props, buttonIndex: i })
-        )}
-      </div>
-    </>
-  )
-}
-
-let buildId
-
-export default function Indicator() {
+const POLLING_INTERVAL = process.env.GATSBY_PREVIEW_POLL_INTERVAL
+  ? parseInt(process.env.GATSBY_PREVIEW_POLL_INTERVAL)
+  : 3000
+
+const PreviewIndicator = ({ children }) => (
+  <>
+    <Style />
+    <div
+      data-testid="preview-status-indicator"
+      data-gatsby-preview-indicator="root"
+      aria-live="assertive"
+    >
+      {children}
+    </div>
+  </>
+)
+
+let buildId = ``
+
+const Indicator = () => {
   const [buildInfo, setBuildInfo] = useState()
-
-  const timeoutRef = useRef()
+  const timeoutRef = useRef(null)
   const shouldPoll = useRef(false)
   const trackedInitialLoad = useRef(false)
+  const { track } = useTrackEvent()
 
   const { siteInfo, currentBuild } = buildInfo || {
     siteInfo: {},
@@ -71,18 +70,18 @@ export default function Indicator() {
       isOnPrettyUrl,
     }
 
-    if (currentBuild?.buildStatus === `BUILDING`) {
-      setBuildInfo({ ...newBuildInfo, buildStatus: `BUILDING` })
-    } else if (currentBuild?.buildStatus === `ERROR`) {
-      setBuildInfo({ ...newBuildInfo, buildStatus: `ERROR` })
+    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) {
-      setBuildInfo({ ...newBuildInfo, buildStatus: `UPTODATE` })
+      setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.UPTODATE })
     } else if (
       buildId &&
       buildId !== newBuildInfo?.latestBuild?.id &&
-      currentBuild?.buildStatus === `SUCCESS`
+      currentBuild?.buildStatus === BuildStatus.SUCCESS
     ) {
-      setBuildInfo({ ...newBuildInfo, buildStatus: `SUCCESS` })
+      setBuildInfo({ ...newBuildInfo, buildStatus: BuildStatus.SUCCESS })
     }
 
     if (shouldPoll.current) {
@@ -92,7 +91,7 @@ export default function Indicator() {
 
   useEffect(() => {
     if (buildInfo?.siteInfo && !trackedInitialLoad.current) {
-      trackEvent({
+      track({
         eventType: `PREVIEW_INDICATOR_LOADED`,
         buildId,
         orgId,
@@ -107,7 +106,7 @@ export default function Indicator() {
     shouldPoll.current = true
     pollData()
 
-    return function cleanup() {
+    return () => {
       shouldPoll.current = false
 
       if (timeoutRef.current) {
@@ -129,10 +128,15 @@ export default function Indicator() {
   }
 
   return (
-    <PreviewIndicator>
-      <GatsbyIndicatorButton {...buttonProps} />
-      <InfoIndicatorButton {...buttonProps} />
-      <LinkIndicatorButton {...buttonProps} />
-    </PreviewIndicator>
+    <IndicatorProvider>
+      <PreviewIndicator>
+        <GatsbyIndicatorButton {...buttonProps} buttonIndex={1} />
+        <InfoIndicatorButton {...buttonProps} buttonIndex={2} />
+        <LinkIndicatorButton {...buttonProps} buttonIndex={3} />
+      </PreviewIndicator>
+    </IndicatorProvider>
   )
 }
+
+export { PreviewIndicator }
+export default Indicator

packages/gatsby-plugin-gatsby-cloud/src/components/Style.js

@@ -17,6 +17,7 @@ const Style = () => (
           --gatsby: var(--purple-60);
           --purple-40: #b17acc;
           --purple-20: #f1defa;
+          --purple-10: #f6edfa;
           --dimmedWhite: rgba(255, 255, 255, 0.8);
           --white: #ffffff;
           --black: #000000;
@@ -53,6 +54,7 @@ const Style = () => (
         }
 
         [data-gatsby-preview-indicator="button"] {
+          position: relative;
           width: 32px;
           height: 32px;
           padding: 4px;
@@ -72,31 +74,57 @@ const Style = () => (
           transition: all 0.3s ease-in-out;
         }
 
+        [data-gatsby-preview-indicator-highlighted-button="true"] {
+          background: var(--purple-10);
+        }
+
         [data-gatsby-preview-indicator-active-button="false"] {
           opacity: 0.3;
           transition: all 0.3s ease-in-out;
         }
 
         [data-gatsby-preview-indicator="spinner"] {
           position: absolute;
-          top: 10px;
-          left: 10px;
-          animation: spin 1s linear infinite;
+          top: 50%;
+          left: 50%;
+          transform: translateX(-50%) translateY(-50%);
           height: 28px;
         }
-
+        [data-gatsby-preview-indicator="spinner"] svg {
+          animation: spin 1s linear infinite;
+        }
         [data-gatsby-preview-indicator="tooltip"] {
-          position: fixed;
-          margin-left: 48px;
+          position: absolute;
+          padding-left: 35px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        [data-gatsby-preview-indicator="tooltip-inner"] {
+          position: relative;
           line-height: 12px;
           background: black;
           opacity: 1;
           color: white;
-          display: inline;
+          display: flex;
+          align-items: center;
           padding: 10px 13px;
           border-radius: 4px;
           user-select: none;
           white-space: nowrap;
+          cursor: default;
+        }
+        [data-gatsby-preview-indicator="tooltip-inner"]:before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: -6px;
+          width: 0;
+          height: 0;
+          transform: translateY(-50%);
+          border-style: solid;
+          border-width: 10px 10px 10px 0;
+          border-color: transparent black transparent transparent;
         }
 
         [data-gatsby-preview-indicator-visible="false"] {
@@ -111,6 +139,13 @@ const Style = () => (
           transition: all 0.2s ease-in-out;
         }
 
+        [data-gatsby-preview-indicator-removed="false"] {
+          display: inline;
+        }
+        [data-gatsby-preview-indicator-removed="true"] {
+          display: none;
+        }
+
         [data-gatsby-preview-indicator="tooltip-link"] {
           background: none;
           border: none;
@@ -126,6 +161,34 @@ const Style = () => (
           font-size: 0.8rem;
           display: inline;
           cursor: pointer;
+          text-decoration: none;
+        }
+
+        [data-gatsby-preview-indicator="tooltip-link-text"]:hover {
+          text-decoration: underline;
+        }
+
+        [data-gatsby-preview-indicator="tooltip-close-btn"] {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: none;
+          border: none;
+          padding: 0;
+          margin-left: 0.8rem;
+          cursor: pointer;
+        }
+
+        [data-gatsby-preview-indicator="tooltip-close-btn"] svg {
+          color: white;
+          opacity: 0.6;
+          transition-property: color, opacity;
+          transition-duration: 0.3s;
+          transition-easing-function: ease-in-out;
+        }
+
+        [data-gatsby-preview-indicator="tooltip-close-btn"]:hover svg {
+          opacity: 1;
         }
 
         [data-gatsby-preview-indicator="tooltip-svg"] {

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

@@ -1,40 +1,32 @@
 import React from "react"
 import IndicatorButton from "./IndicatorButton"
-import {
-  BuildErrorTooltipContent,
-  BuildSuccessTooltipContent,
-} from "../tooltips"
 import { gatsbyIcon } from "../icons"
+import { BuildStatus } from "../../models/enums"
 
-const getButtonProps = ({
-  buildStatus,
-  orgId,
-  siteId,
-  buildId,
-  isOnPrettyUrl,
-  sitePrefix,
-  erroredBuildId,
-}) => {
-  switch (buildStatus) {
-    case `BUILDING`:
-    case `ERROR`:
-    case `SUCCESS`:
-    case `UPTODATE`:
-    default: {
-      return {
-        active: true,
-      }
-    }
+const getButtonProps = ({ buildStatus, buttonIndex }) => {
+  const baseProps = {
+    testId: `gatsby`,
+    buttonIndex,
+    iconSvg: gatsbyIcon,
   }
-}
 
-export default function GatsbyIndicatorButton(props) {
-  return (
-    <IndicatorButton
-      testId="gatsby"
-      iconSvg={gatsbyIcon}
-      {...getButtonProps(props)}
-      buttonIndex={props.buttonIndex}
-    />
-  )
+  const propsByBuildStatus = {
+    [BuildStatus.SUCCESS]: null,
+    [BuildStatus.ERROR]: null,
+    [BuildStatus.BUILDING]: null,
+    [BuildStatus.UPTODATE]: {
+      active: true,
+    },
+  }
+  const props = buildStatus ? propsByBuildStatus[buildStatus] : null
+  if (props) {
+    return { ...baseProps, ...props }
+  }
+  return baseProps
 }
+
+const GatsbyIndicatorButton = props => (
+  <IndicatorButton {...getButtonProps(props)} />
+)
+
+export default GatsbyIndicatorButton