From c95797e82434330a4952c7151560d2b337258b9d Mon Sep 17 00:00:00 2001 From: "Paolo L. Scala" Date: Mon, 30 Sep 2024 15:39:18 +0200 Subject: [PATCH 01/19] Extract toggleAlertVisibility symbol to be reused --- packages/js/src/dashboard/constants/index.js | 3 +++ packages/js/src/dashboard/store/alert-center.js | 4 +--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/js/src/dashboard/constants/index.js b/packages/js/src/dashboard/constants/index.js index fa08f25daa4..7a2321be59e 100644 --- a/packages/js/src/dashboard/constants/index.js +++ b/packages/js/src/dashboard/constants/index.js @@ -3,3 +3,6 @@ */ export const STORE_NAME = "@yoast/dashboard"; +export const TOGGLE_ALERT_VISIBILITY = "toggleAlertVisibility"; + +export const alertTypes = { NOTIFICATION: "notification", PROBLEM: "problem" }; diff --git a/packages/js/src/dashboard/store/alert-center.js b/packages/js/src/dashboard/store/alert-center.js index 38ae8281b86..61f543a5774 100644 --- a/packages/js/src/dashboard/store/alert-center.js +++ b/packages/js/src/dashboard/store/alert-center.js @@ -2,12 +2,10 @@ import { createSlice, createSelector } from "@reduxjs/toolkit"; import { get } from "lodash"; import { ASYNC_ACTION_NAMES, ASYNC_ACTION_STATUS } from "../../shared-admin/constants"; import { select } from "@wordpress/data"; -import { STORE_NAME } from "../constants"; +import { STORE_NAME, TOGGLE_ALERT_VISIBILITY } from "../constants"; export const ALERT_CENTER_NAME = "alertCenter"; -const TOGGLE_ALERT_VISIBILITY = "toggleAlertVisibility"; - /** * @param {string} id The id of the alert. * @param {string} nonce The nonce of the alert. From 3565375703e198227c7537b8f1391f6bdff096ff Mon Sep 17 00:00:00 2001 From: "Paolo L. Scala" Date: Mon, 30 Sep 2024 15:39:56 +0200 Subject: [PATCH 02/19] Add alert type to context --- packages/js/src/dashboard/contexts/alerts-context.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/js/src/dashboard/contexts/alerts-context.js b/packages/js/src/dashboard/contexts/alerts-context.js index a8ab3c90e50..232b8fbab8a 100644 --- a/packages/js/src/dashboard/contexts/alerts-context.js +++ b/packages/js/src/dashboard/contexts/alerts-context.js @@ -3,4 +3,4 @@ import { createContext } from "@wordpress/element"; /** * The context for the alerts. */ -export const AlertsContext = createContext( { Icon: null, bulletClass: "", iconClass: "" } ); +export const AlertsContext = createContext( { Icon: null, bulletClass: "", iconClass: "", type: "" } ); From 81b5a7c019c59b77ccc83f5a8a934bf5cfc1e0e2 Mon Sep 17 00:00:00 2001 From: "Paolo L. Scala" Date: Mon, 30 Sep 2024 15:41:11 +0200 Subject: [PATCH 03/19] Specify alerts type --- packages/js/src/dashboard/components/notifications.js | 3 ++- packages/js/src/dashboard/components/problems.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/js/src/dashboard/components/notifications.js b/packages/js/src/dashboard/components/notifications.js index 2afc6a7bab6..b24d0a589dd 100644 --- a/packages/js/src/dashboard/components/notifications.js +++ b/packages/js/src/dashboard/components/notifications.js @@ -5,6 +5,7 @@ import { Paper } from "@yoast/ui-library"; import { AlertsList } from "./alerts-list"; import { AlertsTitle } from "./alerts-title"; import { Collapsible } from "./collapsible"; +import { alertTypes } from "../constants"; import { AlertsContext } from "../contexts/alerts-context"; /** @@ -31,7 +32,7 @@ export const Notifications = () => { return ( - + { notificationsAlertsList.length === 0 &&

{ __( "No new notifications.", "wordpress-seo" ) }

} diff --git a/packages/js/src/dashboard/components/problems.js b/packages/js/src/dashboard/components/problems.js index 564b24f4c97..4a0fec40a05 100644 --- a/packages/js/src/dashboard/components/problems.js +++ b/packages/js/src/dashboard/components/problems.js @@ -5,6 +5,7 @@ import { Paper } from "@yoast/ui-library"; import { AlertsList } from "./alerts-list"; import { AlertsTitle } from "./alerts-title"; import { Collapsible } from "./collapsible"; +import { alertTypes } from "../constants"; import { AlertsContext } from "../contexts/alerts-context"; /** @@ -32,7 +33,7 @@ export const Problems = () => { return ( - +

{ __( "We have detected the following issues that affect the SEO of your site.", "wordpress-seo" ) }

 From 9e4abf649a88f36172ae5e0f63c9f18ed640b46f Mon Sep 17 00:00:00 2001 From: "Paolo L. Scala" Date: Mon, 30 Sep 2024 15:41:29 +0200 Subject: [PATCH 04/19] Add error notification --- .../src/dashboard/components/alerts-list.js | 76 +++++++++++++------ 1 file changed, 51 insertions(+), 25 deletions(-) diff --git a/packages/js/src/dashboard/components/alerts-list.js b/packages/js/src/dashboard/components/alerts-list.js index fe14a9a5904..45075cc1f7c 100644 --- a/packages/js/src/dashboard/components/alerts-list.js +++ b/packages/js/src/dashboard/components/alerts-list.js @@ -1,11 +1,13 @@ -import { useContext, useCallback } from "@wordpress/element"; +import { Fragment, useContext, useCallback, useState } from "@wordpress/element"; import { useDispatch } from "@wordpress/data"; +import { __ } from "@wordpress/i18n"; import PropTypes from "prop-types"; -import { Button } from "@yoast/ui-library"; +import { Button, Notifications } from "@yoast/ui-library"; import { EyeOffIcon, EyeIcon } from "@heroicons/react/outline"; import classNames from "classnames"; +import { TOGGLE_ALERT_VISIBILITY } from "../constants"; import { AlertsContext } from "../contexts/alerts-context"; - +import { ASYNC_ACTION_NAMES } from "../../shared-admin/constants"; /** * The alert item object. @@ -18,34 +20,58 @@ import { AlertsContext } from "../contexts/alerts-context"; * @returns {JSX.Element} The alert item component. */ const AlertItem = ( { id, nonce, dismissed, message } ) => { - const { bulletClass = "" } = useContext( AlertsContext ); + const { bulletClass = "", type = "" } = useContext( AlertsContext ); const { toggleAlertStatus } = useDispatch( "@yoast/dashboard" ); const Eye = dismissed ? EyeOffIcon : EyeIcon; + const [ toggleError, setToggleError ] = useState( false ); - const toggleAlert = useCallback( () => { - toggleAlertStatus( id, nonce, dismissed ); - }, [ id, nonce, dismissed, toggleAlertStatus ] ); + const onToggleErrorDismiss = useCallback( () => { + setToggleError( false ); + }, [ setToggleError ] ); - return
  • -
    -
    - - - -
    -
    + const toggleAlert = useCallback( async() => { + const status = await toggleAlertStatus( id, nonce, dismissed ); + setToggleError( status.type === `${ TOGGLE_ALERT_VISIBILITY }/${ ASYNC_ACTION_NAMES.error }` ); + }, [ id, nonce, dismissed, toggleAlertStatus, setToggleError ] ); + return +
  • +
    +
    + + + +
    +
    - -
    -
    • ; + + + + + + { toggleError && + { __( `This ${type} can't be hidden at this time. Please try again later.`, "wordpress-seo" ) } + } + + ; }; AlertItem.propTypes = { From 5aa241ac95bbe34cc3bed700a4c725afaadefb64 Mon Sep 17 00:00:00 2001 From: "Paolo L. Scala" Date: Mon, 30 Sep 2024 15:41:49 +0200 Subject: [PATCH 05/19] Update tests --- .../__snapshots__/alerts-list.test.js.snap | 12 ++++++++++++ .../__snapshots__/notifications.test.js.snap | 12 ++++++++++++ .../components/__snapshots__/problems.test.js.snap | 12 ++++++++++++ 3 files changed, 36 insertions(+) diff --git a/packages/js/tests/dashboard/components/__snapshots__/alerts-list.test.js.snap b/packages/js/tests/dashboard/components/__snapshots__/alerts-list.test.js.snap index 2f725cdd0a2..5b6e0f668b0 100644 --- a/packages/js/tests/dashboard/components/__snapshots__/alerts-list.test.js.snap +++ b/packages/js/tests/dashboard/components/__snapshots__/alerts-list.test.js.snap @@ -58,6 +58,9 @@ exports[`AlertsList should match snapshot 1`] = ` +