From 3231a43509747a75898ff01d1329f4132e683f04 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 8 Jan 2024 11:33:04 +0200
Subject: [PATCH] DataViews: Add duplicate template pattern action

---
 .../create-template-part-modal/index.js       | 165 +++++++++---------
 .../dataviews-pattern-actions.js              |  46 +++++
 .../page-patterns/dataviews-patterns.js       |   2 +
 .../src/components/page-patterns/style.scss   |  12 +-
 4 files changed, 140 insertions(+), 85 deletions(-)

diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js
index 31f12b6cab56d3..b44446da0c0686 100644
--- a/packages/edit-site/src/components/create-template-part-modal/index.js
+++ b/packages/edit-site/src/components/create-template-part-modal/index.js
@@ -39,11 +39,25 @@ import {
 } from '../../utils/template-part-create';
 
 export default function CreateTemplatePartModal( {
+	modalTitle = __( 'Create template part' ),
+	...restProps
+} ) {
+	return (
+		<Modal
+			title={ modalTitle }
+			onRequestClose={ restProps.closeModal }
+			overlayClassName="edit-site-create-template-part-modal"
+		>
+			<CreateTemplatePartModalContents { ...restProps } />
+		</Modal>
+	);
+}
+
+export function CreateTemplatePartModalContents( {
 	defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
 	blocks = [],
 	confirmLabel = __( 'Create' ),
 	closeModal,
-	modalTitle = __( 'Create template part' ),
 	onCreate,
 	onError,
 	defaultTitle = '',
@@ -62,7 +76,6 @@ export default function CreateTemplatePartModal( {
 			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
 		[]
 	);
-
 	async function createTemplatePart() {
 		if ( ! title || isSubmitting ) {
 			return;
@@ -105,91 +118,79 @@ export default function CreateTemplatePartModal( {
 			setIsSubmitting( false );
 		}
 	}
-
 	return (
-		<Modal
-			title={ modalTitle }
-			onRequestClose={ closeModal }
-			overlayClassName="edit-site-create-template-part-modal"
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				await createTemplatePart();
+			} }
 		>
-			<form
-				onSubmit={ async ( event ) => {
-					event.preventDefault();
-					await createTemplatePart();
-				} }
-			>
-				<VStack spacing="4">
-					<TextControl
-						__nextHasNoMarginBottom
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						required
-					/>
-					<BaseControl
+			<VStack spacing="4">
+				<TextControl
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					required
+				/>
+				<BaseControl
+					label={ __( 'Area' ) }
+					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
+					className="edit-site-create-template-part-modal__area-base-control"
+				>
+					<RadioGroup
 						label={ __( 'Area' ) }
+						className="edit-site-create-template-part-modal__area-radio-group"
 						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-						className="edit-site-create-template-part-modal__area-base-control"
+						onChange={ setArea }
+						checked={ area }
 					>
-						<RadioGroup
-							label={ __( 'Area' ) }
-							className="edit-site-create-template-part-modal__area-radio-group"
-							id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-							onChange={ setArea }
-							checked={ area }
-						>
-							{ templatePartAreas.map(
-								( {
-									icon,
-									label,
-									area: value,
-									description,
-								} ) => (
-									<Radio
-										key={ label }
-										value={ value }
-										className="edit-site-create-template-part-modal__area-radio"
-									>
-										<Flex align="start" justify="start">
-											<FlexItem>
-												<Icon icon={ icon } />
-											</FlexItem>
-											<FlexBlock className="edit-site-create-template-part-modal__option-label">
-												{ label }
-												<div>{ description }</div>
-											</FlexBlock>
+						{ templatePartAreas.map(
+							( { icon, label, area: value, description } ) => (
+								<Radio
+									key={ label }
+									value={ value }
+									className="edit-site-create-template-part-modal__area-radio"
+								>
+									<Flex align="start" justify="start">
+										<FlexItem>
+											<Icon icon={ icon } />
+										</FlexItem>
+										<FlexBlock className="edit-site-create-template-part-modal__option-label">
+											{ label }
+											<div>{ description }</div>
+										</FlexBlock>
 
-											<FlexItem className="edit-site-create-template-part-modal__checkbox">
-												{ area === value && (
-													<Icon icon={ check } />
-												) }
-											</FlexItem>
-										</Flex>
-									</Radio>
-								)
-							) }
-						</RadioGroup>
-					</BaseControl>
-					<HStack justify="right">
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							type="submit"
-							aria-disabled={ ! title || isSubmitting }
-							isBusy={ isSubmitting }
-						>
-							{ confirmLabel }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
+										<FlexItem className="edit-site-create-template-part-modal__checkbox">
+											{ area === value && (
+												<Icon icon={ check } />
+											) }
+										</FlexItem>
+									</Flex>
+								</Radio>
+							)
+						) }
+					</RadioGroup>
+				</BaseControl>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ () => {
+							closeModal();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSubmitting }
+						isBusy={ isSubmitting }
+					>
+						{ confirmLabel }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
 	);
 }
diff --git a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
index e49238495b5f3c..19d4c93bb685fe 100644
--- a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
+++ b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
@@ -35,6 +35,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_DEFAULT_CATEGORY,
 } from '../../utils/constants';
+import { CreateTemplatePartModalContents } from '../create-template-part-modal';
 
 const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModalContents, useDuplicatePatternProps } =
@@ -281,3 +282,48 @@ export const duplicatePatternAction = {
 		);
 	},
 };
+
+export const duplicateTemplatePartAction = {
+	id: 'duplicate-template-part',
+	label: __( 'Duplicate' ),
+	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
+	modalHeader: __( 'Duplicate template part' ),
+	RenderModal: ( { item, closeModal } ) => {
+		const { createSuccessNotice } = useDispatch( noticesStore );
+		const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
+			window.location.href
+		);
+		const history = useHistory();
+		async function onTemplatePartSuccess( templatePart ) {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" duplicated.' ),
+					item.title
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
+			history.push( {
+				postType: TEMPLATE_PART_POST_TYPE,
+				postId: templatePart?.id,
+				categoryType: TEMPLATE_PART_POST_TYPE,
+				categoryId,
+			} );
+			closeModal();
+		}
+		return (
+			<CreateTemplatePartModalContents
+				blocks={ item.blocks }
+				defaultArea={ item.templatePart.area }
+				defaultTitle={ sprintf(
+					/* translators: %s: Existing template part title */
+					__( '%s (Copy)' ),
+					item.title
+				) }
+				onCreate={ onTemplatePartSuccess }
+				onError={ closeModal }
+				confirmLabel={ __( 'Duplicate' ) }
+			/>
+		);
+	},
+};
diff --git a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
index f7e86b8e2e23b1..bf18e0ffed1119 100644
--- a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
@@ -55,6 +55,7 @@ import {
 	resetAction,
 	deleteAction,
 	duplicatePatternAction,
+	duplicateTemplatePartAction,
 } from './dataviews-pattern-actions';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
@@ -318,6 +319,7 @@ export default function DataviewsPatterns() {
 		() => [
 			renameAction,
 			duplicatePatternAction,
+			duplicateTemplatePartAction,
 			exportJSONaction,
 			resetAction,
 			deleteAction,
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index cce14e8067122d..dd3c52ef08c1a3 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -225,7 +225,7 @@
 }
 
 /**
- * DataViews patterns styles
+ * DataViews patterns styles.
  * TODO: when this becomes stable, consolidate styles with the above.
  */
 .edit-site-page-patterns-dataviews {
@@ -256,8 +256,6 @@
 	}
 }
 
-// TODO: this is duplicated from `patterns-menu-items__convert-modal` styles,
-// except for the `z-index`. Need to check if this is still needed.
 .dataviews-action-modal__duplicate-pattern {
 	// Fix the modal width to prevent added categories from stretching the modal.
 	[role="dialog"] > [role="document"] {
@@ -283,3 +281,11 @@
 		max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
 	}
 }
+
+.dataviews-action-modal__duplicate-template-part {
+	.components-modal__frame {
+		@include break-small {
+			max-width: 500px;
+		}
+	}
+}