From f03551cb0c43ae7b08ef00ae3860028ab35c7019 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 22 Mar 2024 17:44:27 +1000
Subject: [PATCH] Refactor rename template part modal after dataview changes

---
 .../rename-template-part-modal/index.js       | 125 ------------------
 .../components/template-part-modal/rename.js  | 119 ++++++++++++++++-
 2 files changed, 112 insertions(+), 132 deletions(-)
 delete mode 100644 packages/edit-site/src/components/rename-template-part-modal/index.js

diff --git a/packages/edit-site/src/components/rename-template-part-modal/index.js b/packages/edit-site/src/components/rename-template-part-modal/index.js
deleted file mode 100644
index a839bac7ad66c5..00000000000000
--- a/packages/edit-site/src/components/rename-template-part-modal/index.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	Modal,
-	TextControl,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
-import { __ } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-
-export default function RenameTemplatePartModal( {
-	onClose,
-	onError,
-	onSuccess,
-	templatePart,
-	...props
-} ) {
-	const originalName =
-		typeof templatePart.title === 'string'
-			? templatePart.title
-			: templatePart.title.raw;
-	const [ name, setName ] = useState( decodeEntities( originalName ) );
-	const [ isSaving, setIsSaving ] = useState( false );
-
-	const {
-		editEntityRecord,
-		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-	} = useDispatch( coreStore );
-
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
-	const onRename = async ( event ) => {
-		event.preventDefault();
-
-		if ( ! name || name === templatePart.title || isSaving ) {
-			return;
-		}
-
-		try {
-			await editEntityRecord(
-				'postType',
-				templatePart.type,
-				templatePart.id,
-				{
-					title: name,
-				}
-			);
-
-			setIsSaving( true );
-			setName( '' );
-			onClose?.();
-
-			const savedRecord = await saveSpecifiedEntityEdits(
-				'postType',
-				templatePart.type,
-				templatePart.id,
-				[ 'title' ],
-				{ throwOnError: true }
-			);
-
-			onSuccess?.( savedRecord );
-
-			createSuccessNotice( __( 'Template part renamed' ), {
-				type: 'snackbar',
-				id: 'template-part-update',
-			} );
-		} catch ( error ) {
-			onError?.();
-
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __(
-							'An error occurred while renaming the template part.'
-					  );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-				id: 'template-part-update',
-			} );
-		} finally {
-			setIsSaving( false );
-			setName( '' );
-		}
-	};
-
-	const onRequestClose = () => {
-		onClose?.();
-		setName( '' );
-	};
-
-	return (
-		<Modal title={ __( 'Rename' ) } { ...props } onRequestClose={ onClose }>
-			<form onSubmit={ onRename }>
-				<VStack spacing="5">
-					<TextControl
-						__nextHasNoMarginBottom
-						label={ __( 'Name' ) }
-						value={ name }
-						onChange={ setName }
-						required
-					/>
-
-					<HStack justify="right">
-						<Button variant="tertiary" onClick={ onRequestClose }>
-							{ __( 'Cancel' ) }
-						</Button>
-
-						<Button variant="primary" type="submit">
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
-	);
-}
diff --git a/packages/edit-site/src/components/template-part-modal/rename.js b/packages/edit-site/src/components/template-part-modal/rename.js
index b333473a80cdb6..a5b3410ff4cb59 100644
--- a/packages/edit-site/src/components/template-part-modal/rename.js
+++ b/packages/edit-site/src/components/template-part-modal/rename.js
@@ -1,16 +1,126 @@
 /**
  * WordPress dependencies
  */
+import {
+	Button,
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
-import RenameTemplatePartModal from '../rename-template-part-modal';
 import { TEMPLATE_PART_MODALS } from './';
 import useEditedEntityRecord from '../use-edited-entity-record';
 
+function RenameModal( { onClose, templatePart, ...props } ) {
+	const originalName =
+		typeof templatePart.title === 'string'
+			? templatePart.title
+			: templatePart.title.raw;
+	const [ name, setName ] = useState( decodeEntities( originalName ) );
+	const [ isSaving, setIsSaving ] = useState( false );
+
+	const {
+		editEntityRecord,
+		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+	} = useDispatch( coreStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const onRename = async ( event ) => {
+		event.preventDefault();
+
+		if ( ! name || name === templatePart.title || isSaving ) {
+			return;
+		}
+
+		try {
+			await editEntityRecord(
+				'postType',
+				templatePart.type,
+				templatePart.id,
+				{
+					title: name,
+				}
+			);
+
+			setIsSaving( true );
+			setName( '' );
+			onClose?.();
+
+			await saveSpecifiedEntityEdits(
+				'postType',
+				templatePart.type,
+				templatePart.id,
+				[ 'title' ],
+				{ throwOnError: true }
+			);
+
+			createSuccessNotice( __( 'Template part renamed' ), {
+				type: 'snackbar',
+				id: 'template-part-update',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while renaming the template part.'
+					  );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'template-part-update',
+			} );
+		} finally {
+			setIsSaving( false );
+			setName( '' );
+		}
+	};
+
+	const onRequestClose = () => {
+		onClose?.();
+		setName( '' );
+	};
+
+	return (
+		<Modal title={ __( 'Rename' ) } { ...props } onRequestClose={ onClose }>
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ name }
+						onChange={ setName }
+						required
+					/>
+
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ onRequestClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button variant="primary" type="submit">
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
+
 export default function TemplatePartRenameModal() {
 	const { record } = useEditedEntityRecord();
 	const { closeModal } = useDispatch( interfaceStore );
@@ -22,10 +132,5 @@ export default function TemplatePartRenameModal() {
 		return null;
 	}
 
-	return (
-		<RenameTemplatePartModal
-			onClose={ closeModal }
-			templatePart={ record }
-		/>
-	);
+	return <RenameModal onClose={ closeModal } templatePart={ record } />;
 }