| @@ -5,15 +5,16 @@ | ||
| 5 | 5 | import classNames from 'classnames'; |
| 6 | 6 | import { Cta } from '../Cta'; |
| 7 | 7 | import { |
| 8 | 8 | bannerButtonVariables, |
| 9 | + barIconVariables, | |
| 9 | 10 | barVariables, |
| 10 | 11 | buttonHoverClasses, |
| 11 | 12 | colorsOf, |
| 12 | 13 | } from '../colors'; |
| 14 | +import { ctaActionFor, runCtaAction } from '../cta-action'; | |
| 13 | 15 | import { DismissButton } from '../DismissButton'; |
| 14 | 16 | import { iconFor } from '../icons'; |
| 15 | -import { publishAndReload, publishesSite } from '../publish-site'; | |
| 16 | 17 | |
| 17 | 18 | export const Bar = ({ |
| 18 | 19 | notification, |
| 19 | 20 | href, |
| @@ -26,20 +27,20 @@ | ||
| 26 | 27 | const ctaLabel = notification['cta-label']; |
| 27 | 28 | const icon = iconFor(notification.icon); |
| 28 | 29 | const colors = colorsOf(notification); |
| 29 | 30 | const ref = useRef(null); |
| 30 | - const [publishing, setPublishing] = useState(false); | |
| 31 | - const publishes = publishesSite(notification); | |
| 31 | + const [running, setRunning] = useState(false); | |
| 32 | + const action = ctaActionFor(notification); | |
| 32 | 33 | const ctaClassName = classNames( |
| 33 | 34 | 'inline-flex h-10 shrink-0 items-center gap-2 rounded-md bg-banner-main px-5 text-sm font-medium text-banner-text no-underline', |
| 34 | 35 | // Both cursor utilities in one layer would leave the winner to CSS source order. |
| 35 | - publishing ? 'cursor-not-allowed' : 'cursor-pointer', | |
| 36 | - !publishing && buttonHoverClasses(colors), | |
| 36 | + running ? 'cursor-not-allowed' : 'cursor-pointer', | |
| 37 | + !running && buttonHoverClasses(colors), | |
| 37 | 38 | ); |
| 38 | 39 | |
| 39 | - const publishNow = () => { | |
| 40 | - setPublishing(true); | |
| 41 | - publishAndReload(onClick); | |
| 40 | + const runAction = () => { | |
| 41 | + setRunning(true); | |
| 42 | + runCtaAction(action, onClick); | |
| 42 | 43 | }; |
| 43 | 44 | |
| 44 | 45 | // The agent reads this to keep its panel and the scaled page off the bar. |
| 45 | 46 | useEffect(() => { |
| @@ -74,8 +75,9 @@ | ||
| 74 | 75 | > |
| 75 | 76 | {icon && ( |
| 76 | 77 | <span |
| 77 | 78 | className="flex size-10 shrink-0 items-center justify-center rounded-full bg-banner-main text-banner-text" |
| 79 | + style={barIconVariables(colors)} | |
| 78 | 80 | data-test="notification-bar-icon" |
| 79 | 81 | > |
| 80 | 82 | <Icon icon={icon} size={24} className="fill-current" /> |
| 81 | 83 | </span> |
| @@ -83,23 +85,23 @@ | ||
| 83 | 85 | <div className="min-w-0 flex-1"> |
| 84 | 86 | <div className="text-[15px] font-bold">{title}</div> |
| 85 | 87 | <div className="mt-0.5 text-[13px]">{content}</div> |
| 86 | 88 | </div> |
| 87 | - {ctaLabel && publishes && ( | |
| 89 | + {ctaLabel && action && ( | |
| 88 | 90 | <button |
| 89 | 91 | type="button" |
| 90 | - onClick={publishNow} | |
| 91 | - disabled={publishing} | |
| 92 | - aria-busy={publishing} | |
| 92 | + onClick={runAction} | |
| 93 | + disabled={running} | |
| 94 | + aria-busy={running} | |
| 93 | 95 | className={ctaClassName} |
| 94 | 96 | style={bannerButtonVariables(colors)} |
| 95 | - data-test="notification-bar-publish" | |
| 97 | + data-test="notification-bar-action" | |
| 96 | 98 | > |
| 97 | 99 | {ctaLabel} |
| 98 | - {publishing && <Spinner className="m-0 h-4 text-banner-text" />} | |
| 100 | + {running && <Spinner className="m-0 h-4 text-banner-text" />} | |
| 99 | 101 | </button> |
| 100 | 102 | )} |
| 101 | - {!publishes && ( | |
| 103 | + {!action && ( | |
| 102 | 104 | <Cta |
| 103 | 105 | notification={notification} |
| 104 | 106 | href={href} |
| 105 | 107 | external={external} |
