From 84878b5ecfbc11fbbe7d3ac42da1c1a162a0bbde Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 17 Nov 2021 15:15:22 +0800
Subject: [PATCH] Add action to remove template from the list

---
 .../edit-site/src/components/list/table.js    | 48 ++++++++++++++++---
 packages/edit-site/src/store/actions.js       | 19 ++++----
 packages/edit-site/src/store/test/actions.js  | 29 ++++-------
 .../src/utils/is-template-removable.js        | 13 +++++
 4 files changed, 73 insertions(+), 36 deletions(-)
 create mode 100644 packages/edit-site/src/utils/is-template-removable.js

diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js
index eb3e87826c551..87df26fb46549 100644
--- a/packages/edit-site/src/components/list/table.js
+++ b/packages/edit-site/src/components/list/table.js
@@ -1,19 +1,44 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	VisuallyHidden,
-	Button,
 	FlexItem,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import isTemplateRemovable from '../../utils/is-template-removable';
+
+function Actions( { template, onClose } ) {
+	const { removeTemplate } = useDispatch( editSiteStore );
+
+	return (
+		<MenuGroup>
+			<MenuItem
+				onClick={ () => {
+					removeTemplate( template );
+					onClose();
+				} }
+			>
+				{ __( 'Remove template' ) }
+			</MenuItem>
+		</MenuGroup>
+	);
+}
+
 export default function Table( { templateType } ) {
 	const { templates, isLoading, postType } = useSelect(
 		( select ) => {
@@ -85,11 +110,20 @@ export default function Table( { templateType } ) {
 							{ template.theme }
 						</FlexItem>
 						<FlexItem className="edit-site-list-table-column">
-							<Button
-								icon={ moreVertical }
-								label={ __( 'Actions' ) }
-								iconSize={ 24 }
-							/>
+							{ isTemplateRemovable( template ) && (
+								<DropdownMenu
+									icon={ moreVertical }
+									label={ __( 'Actions' ) }
+									className="edit-site-list-table__actions"
+								>
+									{ ( { onClose } ) => (
+										<Actions
+											template={ template }
+											onClose={ onClose }
+										/>
+									) }
+								</DropdownMenu>
+							) }
 						</FlexItem>
 					</HStack>
 				</li>
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index ee1c36e348f4f..3b46c91ed2ead 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -106,17 +106,18 @@ export function* addTemplate( template ) {
 }
 
 /**
- * Removes a template, and updates the current page and template.
+ * Removes a template.
  *
- * @param {number} templateId The template ID.
+ * @param {Object} template The template object.
  */
-export function* removeTemplate( templateId ) {
-	yield apiFetch( {
-		path: `/wp/v2/templates/${ templateId }`,
-		method: 'DELETE',
-	} );
-	const page = yield controls.select( editSiteStoreName, 'getPage' );
-	yield controls.dispatch( editSiteStoreName, 'setPage', page );
+export function* removeTemplate( template ) {
+	yield controls.dispatch(
+		coreStore,
+		'deleteEntityRecord',
+		'postType',
+		template.type,
+		template.id
+	);
 }
 
 /**
diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js
index 747a65cb97b32..52532cbd612e1 100644
--- a/packages/edit-site/src/store/test/actions.js
+++ b/packages/edit-site/src/store/test/actions.js
@@ -77,29 +77,18 @@ describe( 'actions', () => {
 	} );
 
 	describe( 'removeTemplate', () => {
-		it( 'should issue a REST request to delete the template, then read the current page and then set the page with an updated template list', () => {
-			const templateId = 1;
-			const page = { path: '/' };
+		it( 'should issue a deleteEntityRecord request', () => {
+			const template = {
+				id: 'tt1-blocks//general',
+				type: 'wp_template_part',
+			};
 
-			const it = removeTemplate( templateId );
-			expect( it.next().value ).toEqual( {
-				type: 'API_FETCH',
-				request: {
-					path: `/wp/v2/templates/${ templateId }`,
-					method: 'DELETE',
-				},
-			} );
+			const it = removeTemplate( template );
 			expect( it.next().value ).toEqual( {
-				type: '@@data/SELECT',
-				storeKey: 'core/edit-site',
-				selectorName: 'getPage',
-				args: [],
-			} );
-			expect( it.next( page ).value ).toEqual( {
+				actionName: 'deleteEntityRecord',
+				args: [ 'postType', 'wp_template_part', 'tt1-blocks//general' ],
+				storeKey: 'core',
 				type: '@@data/DISPATCH',
-				storeKey: 'core/edit-site',
-				actionName: 'setPage',
-				args: [ page ],
 			} );
 			expect( it.next().done ).toBe( true );
 		} );
diff --git a/packages/edit-site/src/utils/is-template-removable.js b/packages/edit-site/src/utils/is-template-removable.js
new file mode 100644
index 0000000000000..7ec203a9e0db5
--- /dev/null
+++ b/packages/edit-site/src/utils/is-template-removable.js
@@ -0,0 +1,13 @@
+/**
+ * Check if a template is removable.
+ *
+ * @param {Object} template The template entity to check.
+ * @return {boolean} Whether the template is revertable.
+ */
+export default function isTemplateRemovable( template ) {
+	if ( ! template ) {
+		return false;
+	}
+
+	return template.source === 'custom' && ! template.has_theme_file;
+}