preview 2.0 UI changes (#34440)

* Add preview 2.0 changes. * Add preview 2.0 changes. * Add preview 2.0 changes. * Fix link regression. * Fix link regression. * Undo package.json changes. * Undo package.json changes. * Feedback round 2. * Feedback round 2. * Linter issues, hover tracking. * Test failures.
gatsbyjs · Jan 11, 2022 · db188dc · db188dc
1 parent f5c8c20
commit db188dc
Show file tree

Hide file tree

Showing 9 changed files with 224 additions and 77 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
@@ -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/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
@@ -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
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react"
 import { IndicatorButtonTooltip } from "../tooltips"
-import { spinnerIcon } from "../icons"
+import { spinnerIcon, exitIcon } from "../icons"
 
 export default function IndicatorButton({
   buttonIndex,
@@ -13,14 +13,13 @@ export default function IndicatorButton({
   testId,
   onMouseEnter,
   hoverable,
+  showInfo = false,
 }) {
   const [showTooltip, setShowTooltip] = useState(false)
   const buttonRef = useRef(null)
   const isFirstButton = buttonIndex === 0
   const marginTop = isFirstButton ? `0px` : `8px`
 
-  const onMouseLeave = () => setShowTooltip(false)
-
   return (
     <>
       <button
@@ -34,15 +33,27 @@ export default function IndicatorButton({
       >
         <div
           data-testid={`${testId}-button`}
+          onClick={
+            hoverable
+              ? 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 && (
@@ -53,6 +64,18 @@ export default function IndicatorButton({
       {tooltipContent && (
         <IndicatorButtonTooltip
           tooltipContent={tooltipContent}
+          iconExit={
+            showInfo && (
+              <button
+                onClick={() => {
+                  setShowTooltip(false)
+                }}
+                data-gatsby-preview-indicator="tooltip-link"
+              >
+                {exitIcon}
+              </button>
+            )
+          }
           overrideShowTooltip={overrideShowTooltip}
           showTooltip={showTooltip}
           elementRef={buttonRef}

diff --git 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 { infoIcon, infoIconActive } from "../icons"
+import {
+  BuildErrorTooltipContent,
+  BuildSuccessTooltipContent,
+} from "../tooltips"
 
 const getButtonProps = props => {
-  const { createdAt, buildStatus } = props
+  const {
+    createdAt,
+    buildStatus,
+    erroredBuildId,
+    isOnPrettyUrl,
+    sitePrefix,
+    siteId,
+    buildId,
+    orgId,
+  } = props
+
   switch (buildStatus) {
     case `UPTODATE`: {
       return {
@@ -16,20 +30,71 @@ const getButtonProps = props => {
           { includeSeconds: true }
         )} ago`,
         active: true,
+        showInfo: false,
+        hoverable: true,
+      }
+    }
+    case `SUCCESS`: {
+      return {
+        tooltipContent: (
+          <BuildSuccessTooltipContent
+            isOnPrettyUrl={isOnPrettyUrl}
+            sitePrefix={sitePrefix}
+            buildId={buildId}
+            siteId={siteId}
+            orgId={orgId}
+          />
+        ),
+        active: true,
+        showInfo: true,
+        hoverable: false,
+      }
+    }
+    case `ERROR`: {
+      return {
+        tooltipContent: (
+          <BuildErrorTooltipContent
+            siteId={siteId}
+            orgId={orgId}
+            buildId={erroredBuildId}
+          />
+        ),
+        active: true,
+        showInfo: true,
+        hoverable: false,
+      }
+    }
+    case `BUILDING`: {
+      return {
+        tooltipContent: `Building a new preview`,
+        showSpinner: true,
+        overrideShowTooltip: true,
+        showInfo: false,
+        hoverable: true,
       }
     }
-    case `SUCCESS`:
-    case `ERROR`:
-    case `BUILDING`:
     default: {
-      return {}
+      return {
+        active: true,
+        showInfo: false,
+        hoverable: false,
+      }
     }
   }
 }
 
 export default function InfoIndicatorButton(props) {
   const { orgId, siteId, buildId } = props
   const buttonProps = getButtonProps(props)
+  const trackClick = () => {
+    trackEvent({
+      eventType: `PREVIEW_INDICATOR_CLICK`,
+      orgId,
+      siteId,
+      buildId,
+      name: `info click`,
+    })
+  }
   const trackHover = () => {
     trackEvent({
       eventType: `PREVIEW_INDICATOR_HOVER`,
@@ -39,14 +104,13 @@ export default function InfoIndicatorButton(props) {
       name: `info hover`,
     })
   }
-
   return (
     <IndicatorButton
       testId="info"
-      iconSvg={infoIcon}
+      iconSvg={buttonProps?.showInfo ? infoIconActive : infoIcon}
+      onClick={buttonProps?.active && trackClick}
       onMouseEnter={buttonProps?.active && trackHover}
       buttonIndex={props.buttonIndex}
-      hoverable={true}
       {...buttonProps}
     />
   )