f58711a939378578f715cfb5ab966e6d6a91bfa2

Committed 21 Nov 2024 12:49PM CUT coverage: 54.68% (-0.008%) from 54.688%

Build # f58711a939378578f715cfb5ab966e6d6a91bfa2

Build Type

Pull #21833

github

Committed by

web-flow

Commit Message

Merge e68dfd5f1 into 6774f0888

Pull Request Pull Request #21833: Fix admin notices in alert center

Run Details

7594 of 13598 branches covered (55.85%)

Branch coverage included in aggregate %.

0 of 25 new or added lines in 4 files covered. (0.0%)

22 existing lines in 4 files now uncovered.

29746 of 54690 relevant lines covered (54.39%)

41965.17 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/js/src/general/app.js

/* eslint-disable complexity */

import { Transition } from "@headlessui/react";
import { AdjustmentsIcon, BellIcon } from "@heroicons/react/outline";
import { useDispatch, useSelect } from "@wordpress/data";
import { useCallback, useEffect } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { addQueryArgs } from "@wordpress/url";
import { Notifications, SidebarNavigation, useSvgAria } from "@yoast/ui-library";
import PropTypes from "prop-types";
import { Link, Outlet, useLocation } from "react-router-dom";
import { Notice } from "./components";
import { STORE_NAME } from "./constants";
import WebinarPromoNotification from "../components/WebinarPromoNotification";
import { deleteMigratingNotices } from "../helpers/migrateNotices";
import { shouldShowWebinarPromotionNotificationInDashboard } from "../helpers/shouldShowWebinarPromotionNotification";
import { useNotificationCountSync, useSelectGeneralPage } from "./hooks";
import { MenuItemLink, YoastLogo } from "../shared-admin/components";

/**
 * @param {string} [idSuffix] Extra id suffix. Can prevent double IDs on the page.
 * @returns {JSX.Element} The menu element.
 */
const Menu = ( { idSuffix = "" } ) => {
        const svgAriaProps = useSvgAria();
        const isPremium = useSelectGeneralPage( "selectPreference", [], "isPremium" );

        return <>
                <header className="yst-px-3 yst-mb-6 yst-space-y-6">
                        <Link
                                id={ `link-yoast-logo${ idSuffix }` }
                                to="/"
                                className="yst-inline-block yst-rounded-md focus:yst-ring-primary-500"
                                aria-label={ `Yoast SEO${ isPremium ? " Premium" : "" }` }
                        >
                                <YoastLogo className="yst-w-40" { ...svgAriaProps } />
                        </Link>
                </header>
                <div className="yst-px-0.5 yst-space-y-6">
                        <ul className="yst-mt-1 yst-space-y-1">
                                <MenuItemLink
                                        to="/"
                                        label={ <>
                                                <BellIcon className="yst-sidebar-navigation__icon yst-w-6 yst-h-6" />
                                                { __( "Alert center", "wordpress-seo" ) }
                                        </> }
                                        idSuffix={ idSuffix }
                                        className="yst-gap-3"
                                />
                                <MenuItemLink
                                        to="/first-time-configuration"
                                        label={ <>
                                                <AdjustmentsIcon className="yst-sidebar-navigation__icon yst-w-6 yst-h-6" />
                                                { __( "First-time configuration", "wordpress-seo" ) }
                                        </> }
                                        idSuffix={ idSuffix }
                                        className="yst-gap-3"
                                />
                        </ul>
                </div>
        </>;
};
Menu.propTypes = {
        idSuffix: PropTypes.string,
};

/**
 * @returns {JSX.Element} The app component.
 */
const App = () => {
        const notices = useSelect( select => select( STORE_NAME ).selectNotices(), [] );

        useEffect( () => {
                deleteMigratingNotices( notices );
        }, [ notices ] );

        const { pathname } = useLocation();
        const alertToggleError = useSelectGeneralPage( "selectAlertToggleError", [], [] );
        const { setAlertToggleError } = useDispatch( STORE_NAME );
        useNotificationCountSync();

        const handleDismiss = useCallback( () => {
                setAlertToggleError( null );
        }, [ setAlertToggleError ] );

        const linkParams = useSelect( select => select( STORE_NAME ).selectLinkParams(), [] );
        const webinarIntroSettingsUrl = addQueryArgs( "https://yoa.st/webinar-intro-settings", linkParams );

        return (
                <>
                        <SidebarNavigation activePath={ pathname }>
                                <SidebarNavigation.Mobile
                                        openButtonId="button-open-dashboard-navigation-mobile"
                                        closeButtonId="button-close-dashboard-navigation-mobile"
                                        /* translators: Hidden accessibility text. */
                                        openButtonScreenReaderText={ __( "Open dashboard navigation", "wordpress-seo" ) }
                                        /* translators: Hidden accessibility text. */
                                        closeButtonScreenReaderText={ __( "Close dashboard navigation", "wordpress-seo" ) }
                                        aria-label={ __( "Dashboard navigation", "wordpress-seo" ) }
                                >
                                        <Menu idSuffix="-mobile" />
                                </SidebarNavigation.Mobile>
                                <div className="yst-p-4 min-[783px]:yst-p-8 yst-flex yst-gap-4">
                                        <aside className="yst-sidebar yst-sidebar-nav yst-shrink-0 yst-hidden min-[783px]:yst-block yst-pb-6 yst-bottom-0 yst-w-56">
                                                <SidebarNavigation.Sidebar>
                                                        <Menu />
                                                </SidebarNavigation.Sidebar>
                                        </aside>
                                        <div className="yst-grow">
                                                <div className="yst-space-y-6 yst-mb-8 xl:yst-mb-0">
                                                        <main>
                                                                <Transition
                                                                        key={ pathname }
                                                                        appear={ true }
                                                                        show={ true }
                                                                        enter="yst-transition-opacity yst-delay-100 yst-duration-300"
                                                                        enterFrom="yst-opacity-0"
                                                                        enterTo="yst-opacity-100"
                                                                >

                                                                        { pathname !== "/first-time-configuration" && <div>
                                                                                { shouldShowWebinarPromotionNotificationInDashboard( STORE_NAME ) &&
                                                                                        <WebinarPromoNotification store={ STORE_NAME } url={ webinarIntroSettingsUrl } image={ null } />
                                                                                }
                                                                                { notices.filter( notice => ! notice.isDismissed ).length > 0 && <div className="yst-space-y-3 yoast-general-page-notices"> {
                                                                                        notices.filter( notice => ! notice.isDismissed ).map( ( notice, index ) =>
                                                                                                <Notice
                                                                                                        key={ index }
                                                                                                        id={ notice.id || "yoast-general-page-notice-" + index }
                                                                                                        title={ notice.header }
                                                                                                        isDismissable={ notice.isDismissable }
                                                                                                        isDismissed={ notice.isDismissed }
                                                                                                >
                                                                                                        { notice.content }
                                                                                                </Notice>
                                                                                                 )
                                                                                }
                                                                                </div> }
                                                                        </div> }
                                                                        <Outlet />
                                                                </Transition>
                                                        </main>
                                                </div>
                                        </div>
                                </div>
                        </SidebarNavigation>
                        <Notifications
                                className="yst-mx-[calc(50%-50vw)] yst-transition-all lg:yst-left-44"
                                position="bottom-left"
                        >
                                { alertToggleError && <Notifications.Notification
                                        id="toggle-alert-error"
                                        title={ __( "Something went wrong", "wordpress-seo" ) }
                                        variant="error"
                                        dismissScreenReaderLabel={ __( "Dismiss", "wordpress-seo" ) }
                                        size="large"
                                        autoDismiss={ 4000 }
                                        onDismiss={ handleDismiss }
                                >
                                        { alertToggleError.type === "error"
                                                ? __( "This problem can't be hidden at this time. Please try again later.", "wordpress-seo" )
                                                : __( "This notification can't be hidden at this time. Please try again later.", "wordpress-seo" )
                                        }
                                </Notifications.Notification>
                                }
                        </Notifications>
                </>
        );
};

export default App;

1	/* eslint-disable complexity */
2
3	import { Transition } from "@headlessui/react";
4	import { AdjustmentsIcon, BellIcon } from "@heroicons/react/outline";
5	import { useDispatch, useSelect } from "@wordpress/data";
6	import { useCallback, useEffect } from "@wordpress/element";
7	import { __ } from "@wordpress/i18n";
8	import { addQueryArgs } from "@wordpress/url";
9	import { Notifications, SidebarNavigation, useSvgAria } from "@yoast/ui-library";
10	import PropTypes from "prop-types";
11	import { Link, Outlet, useLocation } from "react-router-dom";
12	import { Notice } from "./components";
13	import { STORE_NAME } from "./constants";
14	import WebinarPromoNotification from "../components/WebinarPromoNotification";
15	import { deleteMigratingNotices } from "../helpers/migrateNotices";
16	import { shouldShowWebinarPromotionNotificationInDashboard } from "../helpers/shouldShowWebinarPromotionNotification";
17	import { useNotificationCountSync, useSelectGeneralPage } from "./hooks";
18	import { MenuItemLink, YoastLogo } from "../shared-admin/components";
19
20	/**
21	* @param {string} [idSuffix] Extra id suffix. Can prevent double IDs on the page.
22	* @returns {JSX.Element} The menu element.
23	*/
24	const Menu = ( { idSuffix = "" } ) => {	×
25	const svgAriaProps = useSvgAria();	×
26	const isPremium = useSelectGeneralPage( "selectPreference", [], "isPremium" );	×
27
28	return <>	×
29	<header className="yst-px-3 yst-mb-6 yst-space-y-6">
30	<Link
31	id={ `link-yoast-logo${ idSuffix }` }
32	to="/"
33	className="yst-inline-block yst-rounded-md focus:yst-ring-primary-500"
34	aria-label={ `Yoast SEO${ isPremium ? " Premium" : "" }` }	×
35	>
36	<YoastLogo className="yst-w-40" { ...svgAriaProps } />
37	</Link>
38	</header>
39	<div className="yst-px-0.5 yst-space-y-6">
40	<ul className="yst-mt-1 yst-space-y-1">
41	<MenuItemLink
42	to="/"
43	label={ <>
44	<BellIcon className="yst-sidebar-navigation__icon yst-w-6 yst-h-6" />
45	{ __( "Alert center", "wordpress-seo" ) }
46	</> }
47	idSuffix={ idSuffix }
48	className="yst-gap-3"
49	/>
50	<MenuItemLink
51	to="/first-time-configuration"
52	label={ <>
53	<AdjustmentsIcon className="yst-sidebar-navigation__icon yst-w-6 yst-h-6" />
54	{ __( "First-time configuration", "wordpress-seo" ) }
55	</> }
56	idSuffix={ idSuffix }
57	className="yst-gap-3"
58	/>
59	</ul>
60	</div>
61	</>;
62	};
63	Menu.propTypes = {	×
64	idSuffix: PropTypes.string,
65	};
66
67	/**
68	* @returns {JSX.Element} The app component.
69	*/
70	const App = () => {	×
NEW 71	const notices = useSelect( select => select( STORE_NAME ).selectNotices(), [] );	×
72
73	useEffect( () => {	×
74	deleteMigratingNotices( notices );	×
75	}, [ notices ] );
76
77	const { pathname } = useLocation();	×
78	const alertToggleError = useSelectGeneralPage( "selectAlertToggleError", [], [] );	×
79	const { setAlertToggleError } = useDispatch( STORE_NAME );	×
80	useNotificationCountSync();	×
81
82	const handleDismiss = useCallback( () => {	×
83	setAlertToggleError( null );	×
84	}, [ setAlertToggleError ] );
85
86	const linkParams = useSelect( select => select( STORE_NAME ).selectLinkParams(), [] );	×
87	const webinarIntroSettingsUrl = addQueryArgs( "https://yoa.st/webinar-intro-settings", linkParams );	×
88
89	return (	×
90	<>
91	<SidebarNavigation activePath={ pathname }>
92	<SidebarNavigation.Mobile
93	openButtonId="button-open-dashboard-navigation-mobile"
94	closeButtonId="button-close-dashboard-navigation-mobile"
95	/* translators: Hidden accessibility text. */
96	openButtonScreenReaderText={ __( "Open dashboard navigation", "wordpress-seo" ) }
97	/* translators: Hidden accessibility text. */
98	closeButtonScreenReaderText={ __( "Close dashboard navigation", "wordpress-seo" ) }
99	aria-label={ __( "Dashboard navigation", "wordpress-seo" ) }
100	>
101	<Menu idSuffix="-mobile" />
102	</SidebarNavigation.Mobile>
103	<div className="yst-p-4 min-[783px]:yst-p-8 yst-flex yst-gap-4">
104	<aside className="yst-sidebar yst-sidebar-nav yst-shrink-0 yst-hidden min-[783px]:yst-block yst-pb-6 yst-bottom-0 yst-w-56">
105	<SidebarNavigation.Sidebar>
106	<Menu />
107	</SidebarNavigation.Sidebar>
108	</aside>
109	<div className="yst-grow">
110	<div className="yst-space-y-6 yst-mb-8 xl:yst-mb-0">
111	<main>
112	<Transition
113	key={ pathname }
114	appear={ true }
115	show={ true }
116	enter="yst-transition-opacity yst-delay-100 yst-duration-300"
117	enterFrom="yst-opacity-0"
118	enterTo="yst-opacity-100"
119	>
120
121	{ pathname !== "/first-time-configuration" && <div>	×
122	{ shouldShowWebinarPromotionNotificationInDashboard( STORE_NAME ) &&	×
123	<WebinarPromoNotification store={ STORE_NAME } url={ webinarIntroSettingsUrl } image={ null } />
124	}
NEW 125	{ notices.filter( notice => ! notice.isDismissed ).length > 0 && <div className="yst-space-y-3 yoast-general-page-notices"> {	×
NEW 126	notices.filter( notice => ! notice.isDismissed ).map( ( notice, index ) =>	×
NEW 127	<Notice	×
128	key={ index }
129	id={ notice.id \|\| "yoast-general-page-notice-" + index }	×
130	title={ notice.header }
131	isDismissable={ notice.isDismissable }
132	isDismissed={ notice.isDismissed }
133	>
134	{ notice.content }
135	</Notice>
136	)
137	}
138	</div> }
139	</div> }
140	<Outlet />
141	</Transition>
142	</main>
143	</div>
144	</div>
145	</div>
146	</SidebarNavigation>
147	<Notifications
148	className="yst-mx-[calc(50%-50vw)] yst-transition-all lg:yst-left-44"
149	position="bottom-left"
150	>
151	{ alertToggleError && <Notifications.Notification	×
152	id="toggle-alert-error"
153	title={ __( "Something went wrong", "wordpress-seo" ) }
154	variant="error"
155	dismissScreenReaderLabel={ __( "Dismiss", "wordpress-seo" ) }
156	size="large"
157	autoDismiss={ 4000 }
158	onDismiss={ handleDismiss }
159	>
160	{ alertToggleError.type === "error"	×
161	? __( "This problem can't be hidden at this time. Please try again later.", "wordpress-seo" )
162	: __( "This notification can't be hidden at this time. Please try again later.", "wordpress-seo" )
163	}
164	</Notifications.Notification>
165	}
166	</Notifications>
167	</>
168	);
169	};
170
171	export default App;

Yoast / wordpress-seo / f58711a939378578f715cfb5ab966e6d6a91bfa2

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous