From 67482bf13633ad7b67d89ea338098cf098849f3b Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Thu, 6 Jan 2022 09:26:27 -0800
Subject: [PATCH 01/11] Add preview 2.0 changes.

---
 .../gatsby-plugin-gatsby-cloud/package.json   |  4 +-
 .../src/components/Indicator.js               |  2 +-
 .../buttons/GatsbyIndicatorButton.js          | 44 ++-------
 .../src/components/buttons/IndicatorButton.js | 34 +++++--
 .../components/buttons/InfoIndicatorButton.js | 47 ++++++++--
 .../src/components/icons.js                   | 90 +++++++++++++++++++
 .../tooltips/BuildSuccessTooltipContent.js    |  6 +-
 .../tooltips/IndicatorButtonTooltip.js        |  3 +-
 8 files changed, 171 insertions(+), 59 deletions(-)

diff --git a/packages/gatsby-plugin-gatsby-cloud/package.json b/packages/gatsby-plugin-gatsby-cloud/package.json
index 4c60d3b69c35a..4ad78440cf1f3 100644
--- a/packages/gatsby-plugin-gatsby-cloud/package.json
+++ b/packages/gatsby-plugin-gatsby-cloud/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-gatsby-cloud",
   "description": "A Gatsby plugin which optimizes working with Gatsby Cloud",
-  "version": "3.1.0-next.0",
+  "version": "4.4.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
@@ -41,7 +41,7 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": "^3.0.0-next.0"
+    "gatsby": "^4.0.0"
   },
   "repository": {
     "type": "git",
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 (
     <PreviewIndicator>
       <GatsbyIndicatorButton {...buttonProps} />
-      <LinkIndicatorButton {...buttonProps} />
       <InfoIndicatorButton {...buttonProps} />
+      <LinkIndicatorButton {...buttonProps} />
     </PreviewIndicator>
   )
 }
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: (
-          <BuildSuccessTooltipContent
-            isOnPrettyUrl={isOnPrettyUrl}
-            sitePrefix={sitePrefix}
-            buildId={buildId}
-            siteId={siteId}
-            orgId={orgId}
-          />
-        ),
-        overrideShowTooltip: true,
-        active: true,
-      }
-    }
-    case `ERROR`: {
-      return {
-        tooltipContent: (
-          <BuildErrorTooltipContent
-            siteId={siteId}
-            orgId={orgId}
-            buildId={erroredBuildId}
-          />
-        ),
-        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 223286bbcd0d4..af7f57536d944 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, { useState } from "react"
 import { IndicatorButtonTooltip } from "../tooltips"
-import { spinnerIcon } from "../icons"
+import { spinnerIcon, exitIcon } from "../icons"
 
 export default function IndicatorButton({
   buttonIndex,
@@ -13,6 +13,7 @@ export default function IndicatorButton({
   testId,
   onMouseEnter,
   hoverable,
+  exitButton,
 }) {
   const [showTooltip, setShowTooltip] = useState(false)
   const isFirstButton = buttonIndex === 0
@@ -32,15 +33,23 @@ export default function IndicatorButton({
       >
         <div
           data-testid={`${testId}-button`}
+          onClick={() => {
+            setShowTooltip(!showTooltip)
+          }}
           onMouseEnter={() => {
-            setShowTooltip(true)
+            if (hoverable) {
+              setShowTooltip(true)
 
-            if (onMouseEnter) {
-              onMouseEnter()
+              if (onMouseEnter) {
+                onMouseEnter()
+              }
+            }
+          }}
+          onMouseLeave={() => {
+            if (hoverable) {
+              setShowTooltip(false)
             }
           }}
-          onMouseLeave={onMouseLeave}
-          onClick={active ? onClick : null}
         >
           {iconSvg}
           {showSpinner && (
@@ -51,6 +60,19 @@ export default function IndicatorButton({
       {tooltipContent && (
         <IndicatorButtonTooltip
           tooltipContent={tooltipContent}
+          iconExit={
+            !hoverable &&
+            exitButton && (
+              <button
+                onClick={() => {
+                  setShowTooltip(false)
+                }}
+                data-gatsby-preview-indicator="tooltip-link"
+              >
+                {exitIcon}
+              </button>
+            )
+          }
           overrideShowTooltip={overrideShowTooltip}
           showTooltip={showTooltip}
           buttonIndex={buttonIndex}
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..1d6701e9736f1 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 { exitIcon, infoIcon, infoIconActive } from "../icons"
+import {
+  BuildErrorTooltipContent,
+  BuildSuccessTooltipContent,
+} from "../tooltips"
 
 const getButtonProps = props => {
-  const { createdAt, buildStatus } = props
+  const {
+    createdAt,
+    buildStatus,
+    isOnPrettyUrl,
+    sitePrefix,
+    siteId,
+    buildId,
+    orgId,
+  } = props
+
+  const foo = `SUCCESS`
   switch (buildStatus) {
     case `UPTODATE`: {
       return {
@@ -16,13 +30,30 @@ const getButtonProps = props => {
           { includeSeconds: true }
         )} ago`,
         active: true,
+        exitButton: false,
+        hoverable: true,
+      }
+    }
+    case `SUCCESS`: {
+      return {
+        tooltipContent: (
+          <BuildSuccessTooltipContent
+            isOnPrettyUrl={isOnPrettyUrl}
+            sitePrefix={sitePrefix}
+            buildId={buildId}
+            siteId={siteId}
+            orgId={orgId}
+          />
+        ),
+        overrideShowTooltip: false,
+        active: true,
+        showInfo: true,
+        exitButton: true,
       }
     }
-    case `SUCCESS`:
-    case `ERROR`:
     case `BUILDING`:
+    case `ERROR`:
     default: {
-      return {}
     }
   }
 }
@@ -43,10 +74,10 @@ export default function InfoIndicatorButton(props) {
   return (
     <IndicatorButton
       testId="info"
-      iconSvg={infoIcon}
-      onMouseEnter={buttonProps?.active && trackHover}
+      iconSvg={buttonProps?.showInfo ? infoIconActive : infoIcon}
+      onClick={buttonProps?.active && trackHover}
       buttonIndex={props.buttonIndex}
-      hoverable={true}
+      hoverable={false}
       {...buttonProps}
     />
   )
diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js b/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js
index be2f23b40fe31..65da88903675d 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 = (
   </svg>
 )
 
+export const exitIcon = (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.6667 1.175L10.4917 0L5.83333 4.65833L1.175 0L0 1.175L4.65833 5.83333L0 10.4917L1.175 11.6667L5.83333 7.00833L10.4917 11.6667L11.6667 10.4917L7.00833 5.83333L11.6667 1.175Z"
+      fill="white"
+      fill-opacity="0.6"
+    />
+  </svg>
+)
+
+export const infoIconActive = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="20" height="20" fill="#E5E5E5" />
+    <rect
+      width="1026"
+      height="1515"
+      transform="translate(-553 -459)"
+      fill="white"
+    />
+    <g filter="url(#filter0_d_1456_1573)">
+      <rect x="-14" y="-54" width="48" height="128" rx="5" fill="white" />
+    </g>
+    <path
+      d="M9 5H11L11 7H9L9 5ZM9 9H11V15H9V9ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z"
+      fill="#232129"
+    />
+    <circle cx="17" cy="4" r="3.5" fill="#EC1818" stroke="white" />
+    <defs>
+      <filter
+        id="filter0_d_1456_1573"
+        x="-34"
+        y="-70"
+        width="88"
+        height="168"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="4" />
+        <feGaussianBlur stdDeviation="10" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1456_1573"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1456_1573"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+)
+
+export const notificationIcon = (
+  <svg
+    width="38"
+    height="28"
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="5" cy="0" r="3.5" fill="#EC1818" stroke="white" />
+  </svg>
+)
+
 export const spinnerIcon = (
   <svg
     width="28"
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. `}
       <button
         onClick={() => {
           newPreviewAvailableClick({
@@ -59,7 +59,9 @@ export default function BuildSuccessTooltipContent({
         }}
         data-gatsby-preview-indicator="tooltip-link"
       >
-        <p data-gatsby-preview-indicator="tooltip-link-text">{`Click to view`}</p>
+        <p data-gatsby-preview-indicator="tooltip-link-text">
+          {`View Changes `}
+        </p>
       </button>
     </>
   )
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 50a74bc8151bf..f64193b8b7071 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js
@@ -6,6 +6,7 @@ export default function IndicatorButtonTooltip({
   showTooltip,
   buttonIndex,
   testId,
+  iconExit,
 }) {
   return (
     <div
@@ -20,7 +21,7 @@ export default function IndicatorButtonTooltip({
       }`}
       data-testid={`${testId}-tooltip`}
     >
-      {tooltipContent}
+      {tooltipContent} {iconExit}
     </div>
   )
 }

From 31737ea5b20b9c7351a6fad58040cde48b4dc062 Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Thu, 6 Jan 2022 09:28:04 -0800
Subject: [PATCH 02/11] Add preview 2.0 changes.

---
 .../src/components/buttons/InfoIndicatorButton.js          | 7 ++-----
 1 file changed, 2 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 1d6701e9736f1..a7ef23d779ce5 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
@@ -3,11 +3,8 @@ import { formatDistance } from "date-fns"
 import trackEvent from "../../utils/trackEvent"
 
 import IndicatorButton from "./IndicatorButton"
-import { exitIcon, infoIcon, infoIconActive } from "../icons"
-import {
-  BuildErrorTooltipContent,
-  BuildSuccessTooltipContent,
-} from "../tooltips"
+import { infoIcon, infoIconActive } from "../icons"
+import { BuildSuccessTooltipContent } from "../tooltips"
 
 const getButtonProps = props => {
   const {

From 0fc75091e12d9448a54141fb985d127769ad68b0 Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Thu, 6 Jan 2022 09:29:55 -0800
Subject: [PATCH 03/11] Add preview 2.0 changes.

---
 .../src/components/buttons/InfoIndicatorButton.js             | 4 +++-
 1 file changed, 3 insertions(+), 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 a7ef23d779ce5..2d5461a5f128c 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
@@ -17,7 +17,6 @@ const getButtonProps = props => {
     orgId,
   } = props
 
-  const foo = `SUCCESS`
   switch (buildStatus) {
     case `UPTODATE`: {
       return {
@@ -51,6 +50,9 @@ const getButtonProps = props => {
     case `BUILDING`:
     case `ERROR`:
     default: {
+      return {
+        active: true,
+      }
     }
   }
 }

From de6be1770e8d83206d4e119afe541b586d196710 Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Thu, 6 Jan 2022 11:14:40 -0800
Subject: [PATCH 04/11] Fix link regression.

---
 .../src/components/buttons/IndicatorButton.js | 14 +++++++-----
 .../components/buttons/InfoIndicatorButton.js | 22 ++++++++++++++++---
 .../components/buttons/LinkIndicatorButton.js |  1 +
 .../tooltips/BuildErrorTooltipContent.js      |  2 +-
 .../tooltips/IndicatorButtonTooltip.js        |  3 ++-
 5 files changed, 31 insertions(+), 11 deletions(-)

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 af7f57536d944..d08d0987d9af8 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js
@@ -13,14 +13,13 @@ export default function IndicatorButton({
   testId,
   onMouseEnter,
   hoverable,
+  clickable,
   exitButton,
 }) {
   const [showTooltip, setShowTooltip] = useState(false)
   const isFirstButton = buttonIndex === 0
   const marginTop = isFirstButton ? `0px` : `8px`
 
-  const onMouseLeave = () => setShowTooltip(false)
-
   return (
     <>
       <button
@@ -33,9 +32,13 @@ export default function IndicatorButton({
       >
         <div
           data-testid={`${testId}-button`}
-          onClick={() => {
-            setShowTooltip(!showTooltip)
-          }}
+          onClick={
+            hoverable
+              ? onClick
+              : () => {
+                  setShowTooltip(!showTooltip)
+                }
+          }
           onMouseEnter={() => {
             if (hoverable) {
               setShowTooltip(true)
@@ -61,7 +64,6 @@ export default function IndicatorButton({
         <IndicatorButtonTooltip
           tooltipContent={tooltipContent}
           iconExit={
-            !hoverable &&
             exitButton && (
               <button
                 onClick={() => {
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 2d5461a5f128c..dbb425f78cb06 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
@@ -4,12 +4,16 @@ import trackEvent from "../../utils/trackEvent"
 
 import IndicatorButton from "./IndicatorButton"
 import { infoIcon, infoIconActive } from "../icons"
-import { BuildSuccessTooltipContent } from "../tooltips"
+import {
+  BuildErrorTooltipContent,
+  BuildSuccessTooltipContent,
+} from "../tooltips"
 
 const getButtonProps = props => {
   const {
     createdAt,
     buildStatus,
+    erroredBuildId,
     isOnPrettyUrl,
     sitePrefix,
     siteId,
@@ -41,14 +45,26 @@ const getButtonProps = props => {
             orgId={orgId}
           />
         ),
-        overrideShowTooltip: false,
+        active: true,
+        showInfo: true,
+        exitButton: true,
+      }
+    }
+    case `ERROR`: {
+      return {
+        tooltipContent: (
+          <BuildErrorTooltipContent
+            siteId={siteId}
+            orgId={orgId}
+            buildId={erroredBuildId}
+          />
+        ),
         active: true,
         showInfo: true,
         exitButton: true,
       }
     }
     case `BUILDING`:
-    case `ERROR`:
     default: {
       return {
         active: true,
diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js
index 0817b50a864d0..f8d9e01b0a82c 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js
@@ -61,6 +61,7 @@ export default function LinkIndicatorButton(props) {
     }, 2400)
 
     if (window) {
+      console.log(`copied`)
       navigator.clipboard.writeText(window.location.href)
     }
   }
diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildErrorTooltipContent.js b/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildErrorTooltipContent.js
index aee2f395f335a..2e50e8b5f81c6 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildErrorTooltipContent.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildErrorTooltipContent.js
@@ -37,7 +37,7 @@ export default function BuildErrorTooltipContent({ siteId, orgId, buildId }) {
         data-gatsby-preview-indicator="tooltip-link"
       >
         <p data-gatsby-preview-indicator="tooltip-link-text">{`View logs`}</p>
-        <div data-gatsby-preview-indicator="tooltip-svg">{logsIcon}</div>
+        <div data-gatsby-preview-indicator="tooltip-svg">{logsIcon} </div>
       </a>
     </>
   )
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 f64193b8b7071..447b67b9562f6 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js
@@ -21,7 +21,8 @@ export default function IndicatorButtonTooltip({
       }`}
       data-testid={`${testId}-tooltip`}
     >
-      {tooltipContent} {iconExit}
+      {tooltipContent}
+      {iconExit}
     </div>
   )
 }

From 09050a8839127d4352def0710c369112d8ddeec2 Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Thu, 6 Jan 2022 12:03:53 -0800
Subject: [PATCH 05/11] Fix link regression.

---
 .../src/components/buttons/IndicatorButton.js                | 2 +-
 .../src/components/buttons/InfoIndicatorButton.js            | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

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 d08d0987d9af8..db088c23f05ea 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,7 @@
 import React, { useState } from "react"
 import { IndicatorButtonTooltip } from "../tooltips"
 import { spinnerIcon, exitIcon } from "../icons"
+import { props } from "bluebird"
 
 export default function IndicatorButton({
   buttonIndex,
@@ -13,7 +14,6 @@ export default function IndicatorButton({
   testId,
   onMouseEnter,
   hoverable,
-  clickable,
   exitButton,
 }) {
   const [showTooltip, setShowTooltip] = useState(false)
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 dbb425f78cb06..f6be1c1b5226a 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
@@ -48,6 +48,7 @@ const getButtonProps = props => {
         active: true,
         showInfo: true,
         exitButton: true,
+        hoverable: false,
       }
     }
     case `ERROR`: {
@@ -62,12 +63,14 @@ const getButtonProps = props => {
         active: true,
         showInfo: true,
         exitButton: true,
+        hoverable: false,
       }
     }
     case `BUILDING`:
     default: {
       return {
         active: true,
+        hoverable: false,
       }
     }
   }
@@ -85,14 +88,12 @@ export default function InfoIndicatorButton(props) {
       name: `info hover`,
     })
   }
-
   return (
     <IndicatorButton
       testId="info"
       iconSvg={buttonProps?.showInfo ? infoIconActive : infoIcon}
       onClick={buttonProps?.active && trackHover}
       buttonIndex={props.buttonIndex}
-      hoverable={false}
       {...buttonProps}
     />
   )

From 96b911657aabf3e923aae62104a649071ad3daea Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Mon, 10 Jan 2022 16:17:45 -0800
Subject: [PATCH 06/11] Undo package.json changes.

---
 packages/gatsby-plugin-gatsby-cloud/package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-plugin-gatsby-cloud/package.json b/packages/gatsby-plugin-gatsby-cloud/package.json
index 4ad78440cf1f3..d0e068deb2962 100644
--- a/packages/gatsby-plugin-gatsby-cloud/package.json
+++ b/packages/gatsby-plugin-gatsby-cloud/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-gatsby-cloud",
   "description": "A Gatsby plugin which optimizes working with Gatsby Cloud",
-  "version": "4.4.0",
+  "version": "3.1.0-next.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
@@ -41,7 +41,8 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": "^4.0.0"
+    "gatsby": "^3.1.0-next.0",
+    "webpack": "*"
   },
   "repository": {
     "type": "git",

From 636dc986f948c85a855ad2235f233276e84926df Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Mon, 10 Jan 2022 16:20:30 -0800
Subject: [PATCH 07/11] Undo package.json changes.

---
 packages/gatsby-plugin-gatsby-cloud/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/gatsby-plugin-gatsby-cloud/package.json b/packages/gatsby-plugin-gatsby-cloud/package.json
index d0e068deb2962..4c60d3b69c35a 100644
--- a/packages/gatsby-plugin-gatsby-cloud/package.json
+++ b/packages/gatsby-plugin-gatsby-cloud/package.json
@@ -41,8 +41,7 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": "^3.1.0-next.0",
-    "webpack": "*"
+    "gatsby": "^3.0.0-next.0"
   },
   "repository": {
     "type": "git",

From 52a141baac25f3ac4ac87ead77be24523268ef23 Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Tue, 11 Jan 2022 09:12:20 -0800
Subject: [PATCH 08/11] Feedback round 2.

---
 .../src/components/buttons/IndicatorButton.js                | 5 ++---
 .../src/components/buttons/InfoIndicatorButton.js            | 5 ++---
 .../src/components/buttons/LinkIndicatorButton.js            | 1 -
 3 files changed, 4 insertions(+), 7 deletions(-)

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 db088c23f05ea..f7bc40873ba1a 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js
@@ -1,7 +1,6 @@
 import React, { useState } from "react"
 import { IndicatorButtonTooltip } from "../tooltips"
 import { spinnerIcon, exitIcon } from "../icons"
-import { props } from "bluebird"
 
 export default function IndicatorButton({
   buttonIndex,
@@ -14,7 +13,7 @@ export default function IndicatorButton({
   testId,
   onMouseEnter,
   hoverable,
-  exitButton,
+  showInfo = false,
 }) {
   const [showTooltip, setShowTooltip] = useState(false)
   const isFirstButton = buttonIndex === 0
@@ -64,7 +63,7 @@ export default function IndicatorButton({
         <IndicatorButtonTooltip
           tooltipContent={tooltipContent}
           iconExit={
-            exitButton && (
+            showInfo && (
               <button
                 onClick={() => {
                   setShowTooltip(false)
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 f6be1c1b5226a..420150d5fbfde 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
@@ -30,7 +30,7 @@ const getButtonProps = props => {
           { includeSeconds: true }
         )} ago`,
         active: true,
-        exitButton: false,
+        showInfo: false,
         hoverable: true,
       }
     }
@@ -47,7 +47,6 @@ const getButtonProps = props => {
         ),
         active: true,
         showInfo: true,
-        exitButton: true,
         hoverable: false,
       }
     }
@@ -62,7 +61,6 @@ const getButtonProps = props => {
         ),
         active: true,
         showInfo: true,
-        exitButton: true,
         hoverable: false,
       }
     }
@@ -70,6 +68,7 @@ const getButtonProps = props => {
     default: {
       return {
         active: true,
+        showInfo: false,
         hoverable: false,
       }
     }
diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js
index f8d9e01b0a82c..0817b50a864d0 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js
@@ -61,7 +61,6 @@ export default function LinkIndicatorButton(props) {
     }, 2400)
 
     if (window) {
-      console.log(`copied`)
       navigator.clipboard.writeText(window.location.href)
     }
   }

From ad93c030ac418c2fc1f04d2b91af35343ade5f8b Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Tue, 11 Jan 2022 09:26:50 -0800
Subject: [PATCH 09/11] Feedback round 2.

---
 .../src/components/buttons/InfoIndicatorButton.js         | 8 ++++----
 1 file changed, 4 insertions(+), 4 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 420150d5fbfde..b5580452190a1 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
@@ -78,20 +78,20 @@ const getButtonProps = props => {
 export default function InfoIndicatorButton(props) {
   const { orgId, siteId, buildId } = props
   const buttonProps = getButtonProps(props)
-  const trackHover = () => {
+  const trackClick = () => {
     trackEvent({
-      eventType: `PREVIEW_INDICATOR_HOVER`,
+      eventType: `PREVIEW_INDICATOR_CLICK`,
       orgId,
       siteId,
       buildId,
-      name: `info hover`,
+      name: `info click`,
     })
   }
   return (
     <IndicatorButton
       testId="info"
       iconSvg={buttonProps?.showInfo ? infoIconActive : infoIcon}
-      onClick={buttonProps?.active && trackHover}
+      onClick={buttonProps?.active && trackClick}
       buttonIndex={props.buttonIndex}
       {...buttonProps}
     />

From dab41d4cdd3c19979686583a8b9fc31a8861d4dc Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Tue, 11 Jan 2022 10:34:35 -0800
Subject: [PATCH 10/11] Linter issues, hover tracking.

---
 .../src/components/buttons/InfoIndicatorButton.js      | 10 ++++++++++
 .../gatsby-plugin-gatsby-cloud/src/components/icons.js |  6 +++---
 2 files changed, 13 insertions(+), 3 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 b5580452190a1..4347b41d3f1b2 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
@@ -87,11 +87,21 @@ export default function InfoIndicatorButton(props) {
       name: `info click`,
     })
   }
+  const trackHover = () => {
+    trackEvent({
+      eventType: `PREVIEW_INDICATOR_HOVER`,
+      orgId,
+      siteId,
+      buildId,
+      name: `info hover`,
+    })
+  }
   return (
     <IndicatorButton
       testId="info"
       iconSvg={buttonProps?.showInfo ? infoIconActive : infoIcon}
       onClick={buttonProps?.active && trackClick}
+      onHover={!buttonProps?.showInfo && trackHover}
       buttonIndex={props.buttonIndex}
       {...buttonProps}
     />
diff --git a/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js b/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js
index 65da88903675d..fdc68332dbff1 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/icons.js
@@ -100,7 +100,7 @@ export const exitIcon = (
     <path
       d="M11.6667 1.175L10.4917 0L5.83333 4.65833L1.175 0L0 1.175L4.65833 5.83333L0 10.4917L1.175 11.6667L5.83333 7.00833L10.4917 11.6667L11.6667 10.4917L7.00833 5.83333L11.6667 1.175Z"
       fill="white"
-      fill-opacity="0.6"
+      fillOpacity="0.6"
     />
   </svg>
 )
@@ -136,9 +136,9 @@ export const infoIconActive = (
         width="88"
         height="168"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feColorMatrix
           in="SourceAlpha"
           type="matrix"

From 728a8615571cfbac98a30e3d357f0ee9bfe6a6c7 Mon Sep 17 00:00:00 2001
From: Polina Vorozheykina <vorozheykinap@gmail.com>
Date: Tue, 11 Jan 2022 11:42:43 -0800
Subject: [PATCH 11/11] Test failures.

---
 .../src/__tests__/gatsby-browser.js           | 34 +++++++++----------
 .../components/buttons/InfoIndicatorButton.js | 12 +++++--
 2 files changed, 27 insertions(+), 19 deletions(-)

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/buttons/InfoIndicatorButton.js b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
index 4347b41d3f1b2..55f7bf11e4e27 100644
--- a/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
+++ b/packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
@@ -64,7 +64,15 @@ const getButtonProps = props => {
         hoverable: false,
       }
     }
-    case `BUILDING`:
+    case `BUILDING`: {
+      return {
+        tooltipContent: `Building a new preview`,
+        showSpinner: true,
+        overrideShowTooltip: true,
+        showInfo: false,
+        hoverable: true,
+      }
+    }
     default: {
       return {
         active: true,
@@ -101,7 +109,7 @@ export default function InfoIndicatorButton(props) {
       testId="info"
       iconSvg={buttonProps?.showInfo ? infoIconActive : infoIcon}
       onClick={buttonProps?.active && trackClick}
-      onHover={!buttonProps?.showInfo && trackHover}
+      onMouseEnter={buttonProps?.active && trackHover}
       buttonIndex={props.buttonIndex}
       {...buttonProps}
     />