Skip to content

Commit

Permalink
[Data Views]: Add confirmation modal for clearing customizations in t…
Browse files Browse the repository at this point in the history 
…emplates (#60119)

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: kathrynwp <zoonini@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
  • Loading branch information
@ntsekouras @jameskoster @annezazu
6 people authored Mar 22, 2024
1 parent 9beaf48 commit 3230a61
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 87 deletions.
179 changes: 95 additions & 84 deletions packages/edit-site/src/components/page-templates-template-parts/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
<VStack spacing="5">
<Text>
{ __(
'Are you sure you want to clear these customizations?'
) }
</Text>
<HStack justify="right">
<Button variant="tertiary" onClick={ closeModal }>
{ __( 'Cancel' ) }
</Button>
<Button
variant="primary"
onClick={ async () => {
await onConfirm( items );
onPerform?.();
closeModal();
} }
>
{ __( 'Clear' ) }
</Button>
</HStack>
</VStack>
);
},
};

export const deleteTemplateAction = {
id: 'delete-template',
Expand Down Expand Up @@ -145,9 +160,7 @@ export const deleteTemplateAction = {
await removeTemplates( templates, {
allowUndo: false,
} );
if ( onPerform ) {
onPerform();
}
onPerform?.();
closeModal();
} }
>
Expand Down Expand Up @@ -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.' )
Expand Down
5 changes: 2 additions & 3 deletions packages/edit-site/src/components/page-templates-template-parts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import {
LAYOUT_LIST,
} from '../../utils/constants';
import {
useResetTemplateAction,
resetTemplateAction,
deleteTemplateAction,
renameTemplateAction,
} from './actions';
Expand Down Expand Up @@ -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(
() => [
Expand All @@ -348,7 +347,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
postRevisionsAction,
deleteTemplateAction,
],
[ resetTemplateAction ]
[ editTemplateAction ]
);

const onChangeView = useCallback(
Expand Down

0 comments on commit 3230a61

Please sign in to comment.