From 9e7a8661487b9ae8cff731e3bcdf1f9e831186a7 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 22 Mar 2024 17:08:21 +0200 Subject: [PATCH] [Data Views]: Add confirmation modal for clearing customizations in templates --- .../page-templates-template-parts/actions.js | 179 ++++++++++-------- .../page-templates-template-parts/index.js | 5 +- 2 files changed, 97 insertions(+), 87 deletions(-) diff --git a/packages/edit-site/src/components/page-templates-template-parts/actions.js b/packages/edit-site/src/components/page-templates-template-parts/actions.js index 3a84473f7c76a4..0e9bbd3f1ab2dc 100644 --- a/packages/edit-site/src/components/page-templates-template-parts/actions.js +++ b/packages/edit-site/src/components/page-templates-template-parts/actions.js @@ -3,7 +3,7 @@ */ import { __, sprintf, _n } from '@wordpress/i18n'; import { useDispatch } from '@wordpress/data'; -import { useMemo, useState } from '@wordpress/element'; +import { useState } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; import { store as noticesStore } from '@wordpress/notices'; import { decodeEntities } from '@wordpress/html-entities'; @@ -24,87 +24,102 @@ import isTemplateRevertable from '../../utils/is-template-revertable'; import isTemplateRemovable from '../../utils/is-template-removable'; import { TEMPLATE_POST_TYPE } from '../../utils/constants'; -export function useResetTemplateAction() { - const { revertTemplate } = useDispatch( editSiteStore ); - const { saveEditedEntityRecord } = useDispatch( coreStore ); - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - return useMemo( - () => ( { - id: 'reset-template', - label: __( 'Clear customizations' ), - isEligible: isTemplateRevertable, - supportsBulk: true, - async callback( templates ) { - try { - for ( const template of templates ) { - await revertTemplate( template, { - allowUndo: false, - } ); - await saveEditedEntityRecord( - 'postType', - template.type, - template.id - ); - } - - createSuccessNotice( - templates.length > 1 - ? sprintf( - /* translators: The number of items. */ - __( '%s items reverted.' ), - templates.length - ) - : sprintf( - /* translators: The template/part's name. */ - __( '"%s" reverted.' ), - decodeEntities( - templates[ 0 ].title.rendered - ) - ), - { - type: 'snackbar', - id: 'edit-site-template-reverted', - } +export const resetTemplateAction = { + id: 'reset-template', + label: __( 'Clear customizations' ), + isEligible: isTemplateRevertable, + supportsBulk: true, + hideModalHeader: true, + RenderModal: ( { items, closeModal, onPerform } ) => { + const { revertTemplate } = useDispatch( editSiteStore ); + const { saveEditedEntityRecord } = useDispatch( coreStore ); + const { createSuccessNotice, createErrorNotice } = + useDispatch( noticesStore ); + const onConfirm = async () => { + try { + for ( const template of items ) { + await revertTemplate( template, { + allowUndo: false, + } ); + await saveEditedEntityRecord( + 'postType', + template.type, + template.id ); - } catch ( error ) { - let fallbackErrorMessage; - if ( templates[ 0 ].type === TEMPLATE_POST_TYPE ) { - fallbackErrorMessage = - templates.length === 1 - ? __( - 'An error occurred while reverting the template.' - ) - : __( - 'An error occurred while reverting the templates.' - ); - } else { - fallbackErrorMessage = - templates.length === 1 - ? __( - 'An error occurred while reverting the template part.' - ) - : __( - 'An error occurred while reverting the template parts.' - ); - } - const errorMessage = - error.message && error.code !== 'unknown_error' - ? error.message - : fallbackErrorMessage; + } - createErrorNotice( errorMessage, { type: 'snackbar' } ); + createSuccessNotice( + items.length > 1 + ? sprintf( + /* translators: The number of items. */ + __( '%s items reverted.' ), + items.length + ) + : sprintf( + /* translators: The template/part's name. */ + __( '"%s" reverted.' ), + decodeEntities( items[ 0 ].title.rendered ) + ), + { + type: 'snackbar', + id: 'edit-site-template-reverted', + } + ); + } catch ( error ) { + let fallbackErrorMessage; + if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) { + fallbackErrorMessage = + items.length === 1 + ? __( + 'An error occurred while reverting the template.' + ) + : __( + 'An error occurred while reverting the templates.' + ); + } else { + fallbackErrorMessage = + items.length === 1 + ? __( + 'An error occurred while reverting the template part.' + ) + : __( + 'An error occurred while reverting the template parts.' + ); } - }, - } ), - [ - createErrorNotice, - createSuccessNotice, - revertTemplate, - saveEditedEntityRecord, - ] - ); -} + const errorMessage = + error.message && error.code !== 'unknown_error' + ? error.message + : fallbackErrorMessage; + + createErrorNotice( errorMessage, { type: 'snackbar' } ); + } + }; + return ( + + + { __( + 'Are you sure you want to clear these customizations?' + ) } + + + + + + + ); + }, +}; export const deleteTemplateAction = { id: 'delete-template', @@ -145,9 +160,7 @@ export const deleteTemplateAction = { await removeTemplates( templates, { allowUndo: false, } ); - if ( onPerform ) { - onPerform(); - } + onPerform?.(); closeModal(); } } > @@ -207,8 +220,6 @@ export const renameTemplateAction = { throwOnError: true, } ); - // TODO: this action will be reused in template parts list, so - // let's keep this for a bit, even it's always a `template` now. createSuccessNotice( template.type === TEMPLATE_POST_TYPE ? __( 'Template renamed.' ) diff --git a/packages/edit-site/src/components/page-templates-template-parts/index.js b/packages/edit-site/src/components/page-templates-template-parts/index.js index e2b9bff335aa54..c0bfb8a26fcb05 100644 --- a/packages/edit-site/src/components/page-templates-template-parts/index.js +++ b/packages/edit-site/src/components/page-templates-template-parts/index.js @@ -41,7 +41,7 @@ import { LAYOUT_LIST, } from '../../utils/constants'; import { - useResetTemplateAction, + resetTemplateAction, deleteTemplateAction, renameTemplateAction, } from './actions'; @@ -338,7 +338,6 @@ export default function PageTemplatesTemplateParts( { postType } ) { return filterSortAndPaginate( records, view, fields ); }, [ records, view, fields ] ); - const resetTemplateAction = useResetTemplateAction(); const editTemplateAction = useEditPostAction(); const actions = useMemo( () => [ @@ -348,7 +347,7 @@ export default function PageTemplatesTemplateParts( { postType } ) { postRevisionsAction, deleteTemplateAction, ], - [ resetTemplateAction ] + [ editTemplateAction ] ); const onChangeView = useCallback(