Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

preview 2.0 UI changes #34440

Merged
merged 12 commits into from
Jan 11, 2022
Merged

preview 2.0 UI changes #34440

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
67482bf
Add preview 2.0 changes.
pvorozhe Jan 6, 2022
31737ea
Add preview 2.0 changes.
pvorozhe Jan 6, 2022
0fc7509
Add preview 2.0 changes.
pvorozhe Jan 6, 2022
de6be17
Fix link regression.
pvorozhe Jan 6, 2022
09050a8
Fix link regression.
pvorozhe Jan 6, 2022
96b9116
Undo package.json changes.
pvorozhe Jan 11, 2022
636dc98
Undo package.json changes.
pvorozhe Jan 11, 2022
52a141b
Feedback round 2.
pvorozhe Jan 11, 2022
ad93c03
Feedback round 2.
pvorozhe Jan 11, 2022
a03144f
Merge branch 'master' into pvorozhe/preview2-changes
pvorozhe Jan 11, 2022
dab41d4
Linter issues, hover tracking.
pvorozhe Jan 11, 2022
728a861
Test failures.
pvorozhe Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-gatsby-cloud/src/components/Indicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,8 +131,8 @@ export default function Indicator() {
return (
<PreviewIndicator>
<GatsbyIndicatorButton {...buttonProps} />
<LinkIndicatorButton {...buttonProps} />
<InfoIndicatorButton {...buttonProps} />
<LinkIndicatorButton {...buttonProps} />
</PreviewIndicator>
)
}
44 changes: 5 additions & 39 deletions packages/gatsby-plugin-gatsby-cloud/src/components/buttons/GatsbyIndicatorButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}
}
}
}

Expand Down
40 changes: 32 additions & 8 deletions packages/gatsby-plugin-gatsby-cloud/src/components/buttons/IndicatorButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState } from "react"
import { IndicatorButtonTooltip } from "../tooltips"
import { spinnerIcon } from "../icons"
import { spinnerIcon, exitIcon } from "../icons"
import { props } from "bluebird"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this for? we don't use it anywhere


export default function IndicatorButton({
buttonIndex,
Expand All @@ -13,13 +14,12 @@ export default function IndicatorButton({
testId,
onMouseEnter,
hoverable,
exitButton,
}) {
const [showTooltip, setShowTooltip] = useState(false)
const isFirstButton = buttonIndex === 0
const marginTop = isFirstButton ? `0px` : `8px`

const onMouseLeave = () => setShowTooltip(false)

return (
<>
<button
Expand All @@ -32,15 +32,27 @@ export default function IndicatorButton({
>
<div
data-testid={`${testId}-button`}
onClick={
hoverable
? onClick
: () => {
setShowTooltip(!showTooltip)
}
Comment on lines +39 to +41
Copy link
Contributor

@DanielSLew DanielSLew Jan 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a nit but not a huge fan of inlining functions like this with a ternary op, I think it makes it harder to read even if they're straightforward

}
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 && (
Expand All @@ -51,6 +63,18 @@ export default function IndicatorButton({
{tooltipContent && (
<IndicatorButtonTooltip
tooltipContent={tooltipContent}
iconExit={
exitButton && (
<button
onClick={() => {
setShowTooltip(false)
}}
data-gatsby-preview-indicator="tooltip-link"
>
{exitIcon}
</button>
)
}
overrideShowTooltip={overrideShowTooltip}
showTooltip={showTooltip}
buttonIndex={buttonIndex}
Expand Down
65 changes: 56 additions & 9 deletions packages/gatsby-plugin-gatsby-cloud/src/components/buttons/InfoIndicatorButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -16,13 +30,48 @@ 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}
/>
),
active: true,
showInfo: true,
smthomas marked this conversation as resolved.
Show resolved Hide resolved
exitButton: true,
hoverable: false,
}
}
case `ERROR`: {
return {
tooltipContent: (
<BuildErrorTooltipContent
siteId={siteId}
orgId={orgId}
buildId={erroredBuildId}
/>
),
active: true,
showInfo: true,
exitButton: true,
hoverable: false,
}
}
case `SUCCESS`:
case `ERROR`:
case `BUILDING`:
default: {
return {}
return {
active: true,
hoverable: false,
}
}
}
}
Expand All @@ -39,14 +88,12 @@ export default function InfoIndicatorButton(props) {
name: `info hover`,
})
}

return (
<IndicatorButton
testId="info"
iconSvg={infoIcon}
onMouseEnter={buttonProps?.active && trackHover}
iconSvg={buttonProps?.showInfo ? infoIconActive : infoIcon}
onClick={buttonProps?.active && trackHover}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this make sense? We're tracking the hover when the button is being clicked now?

buttonIndex={props.buttonIndex}
hoverable={true}
{...buttonProps}
/>
)
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-plugin-gatsby-cloud/src/components/buttons/LinkIndicatorButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export default function LinkIndicatorButton(props) {
}, 2400)

if (window) {
console.log(`copied`)
smthomas marked this conversation as resolved.
Show resolved Hide resolved
navigator.clipboard.writeText(window.location.href)
}
}
Expand Down
90 changes: 90 additions & 0 deletions packages/gatsby-plugin-gatsby-cloud/src/components/icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildErrorTooltipContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
)
Expand Down
6 changes: 4 additions & 2 deletions packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/BuildSuccessTooltipContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function BuildSuccessTooltipContent({
}) {
return (
<>
{`New preview available`}
{`This page has been updated. `}
<button
onClick={() => {
newPreviewAvailableClick({
Expand All @@ -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>
</>
)
Expand Down
2 changes: 2 additions & 0 deletions packages/gatsby-plugin-gatsby-cloud/src/components/tooltips/IndicatorButtonTooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default function IndicatorButtonTooltip({
showTooltip,
buttonIndex,
testId,
iconExit,
}) {
return (
<div
Expand All @@ -21,6 +22,7 @@ export default function IndicatorButtonTooltip({
data-testid={`${testId}-tooltip`}
>
{tooltipContent}
{iconExit}
</div>
)
}