← All changes | src/Notifications/templates/Bar.jsx +37 -12 3.1.6 → trunk View file →

		@@ -1,8 +1,10 @@
1		-import { useEffect, useRef } from '@wordpress/element';
	1	+import { Spinner } from '@wordpress/components';
	2	+import { useEffect, useRef, useState } from '@wordpress/element';
2	3	import { __ } from '@wordpress/i18n';
3	4	import { Icon } from '@wordpress/icons';
4	5	import classNames from 'classnames';
	6	+import { Cta } from '../Cta';
5	7	import {
6	8	bannerButtonVariables,
7	9	barVariables,
8	10	buttonHoverClasses,
		@@ -9,9 +11,9 @@
9	11	colorsOf,
10	12	} from '../colors';
11	13	import { DismissButton } from '../DismissButton';
12	14	import { iconFor } from '../icons';
13		-import { externalLinkProps } from '../notification-link';
	15	+import { publishAndReload, publishesSite } from '../publish-site';
14	16
15	17	export const Bar = ({
16	18	notification,
17	19	href,
		@@ -24,9 +26,22 @@
24	26	const ctaLabel = notification['cta-label'];
25	27	const icon = iconFor(notification.icon);
26	28	const colors = colorsOf(notification);
27	29	const ref = useRef(null);
	30	+ const [publishing, setPublishing] = useState(false);
	31	+ const publishes = publishesSite(notification);
	32	+ const ctaClassName = classNames(
	33	+ '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	+ // 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),
	37	+ );
28	38
	39	+ const publishNow = () => {
	40	+ setPublishing(true);
	41	+ publishAndReload(onClick);
	42	+ };
	43	+
29	44	// The agent reads this to keep its panel and the scaled page off the bar.
30	45	useEffect(() => {
31	46	const root = document.documentElement;
32	47	const publish = () =>
		@@ -68,21 +83,31 @@
68	83	<div className="min-w-0 flex-1">
69	84	<div className="text-[15px] font-bold">{title}</div>
70	85	<div className="mt-0.5 text-[13px]">{content}</div>
71	86	</div>
72		- {ctaLabel && href && (
73		- <a
74		- href={href}
75		- {...externalLinkProps(external)}
76		- onClick={onClick}
77		- className={classNames(
78		- 'inline-flex h-10 shrink-0 cursor-pointer items-center rounded-md bg-banner-main px-5 text-sm font-medium text-banner-text no-underline',
79		- buttonHoverClasses(colors),
80		- )}
	87	+ {ctaLabel && publishes && (
	88	+ <button
	89	+ type="button"
	90	+ onClick={publishNow}
	91	+ disabled={publishing}
	92	+ aria-busy={publishing}
	93	+ className={ctaClassName}
81	94	style={bannerButtonVariables(colors)}
	95	+ data-test="notification-bar-publish"
82	96	>
83	97	{ctaLabel}
84		- </a>
	98	+ {publishing && <Spinner className="m-0 h-4 text-banner-text" />}
	99	+ </button>
	100	+ )}
	101	+ {!publishes && (
	102	+ <Cta
	103	+ notification={notification}
	104	+ href={href}
	105	+ external={external}
	106	+ onClick={onClick}
	107	+ surface="banner"
	108	+ className="inline-flex h-10 shrink-0 cursor-pointer items-center rounded-md bg-banner-main px-5 text-sm font-medium text-banner-text no-underline"
	109	+ />
85	110	)}
86	111	{dismissible && (
87	112	<DismissButton
88	113	onClick={onDismiss}