From 7811535e72b05f9519b9c92c78b13e1c605585ee Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta.wolny@automattic.com>
Date: Tue, 3 Dec 2024 14:44:14 +0100
Subject: [PATCH] Add dropdown with edit and swap template buttons

[MAILPOET-6336]
---
 .../components/sidebar/email-type-info.tsx    | 75 ++++++++++++++++++-
 .../js/email-editor/src/store/selectors.ts    |  2 +-
 2 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/packages/js/email-editor/src/components/sidebar/email-type-info.tsx b/packages/js/email-editor/src/components/sidebar/email-type-info.tsx
index e7adb09264..e5d7f0f5aa 100644
--- a/packages/js/email-editor/src/components/sidebar/email-type-info.tsx
+++ b/packages/js/email-editor/src/components/sidebar/email-type-info.tsx
@@ -1,8 +1,34 @@
-import { Panel, PanelBody, PanelRow } from '@wordpress/components';
+/**
+ * WordPress dependencies
+ */
+import {
+	Panel,
+	PanelBody,
+	PanelRow,
+	Flex,
+	FlexItem,
+	DropdownMenu,
+	MenuItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, megaphone } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { storeName } from '../../store';
+import { EditTemplateModal } from './edit-template-modal';
 
 export function EmailTypeInfo() {
+	const template = useSelect(
+		( select ) => select( storeName ).getCurrentTemplate(),
+		[]
+	);
+	const [ isEditTemplateModalOpen, setEditTemplateModalOpen ] =
+		useState( false );
+
 	return (
 		<Panel className="mailpoet-email-sidebar__email-type-info">
 			<PanelBody>
@@ -20,6 +46,53 @@ export function EmailTypeInfo() {
 						</span>
 					</div>
 				</PanelRow>
+				{ template && (
+					<PanelRow>
+						<Flex justify={ 'start' }>
+							<FlexItem className="editor-post-panel__row-label">
+								Template
+							</FlexItem>
+							<FlexItem>
+								<DropdownMenu
+									icon={ null }
+									text={ template?.title }
+									label={ __(
+										'Template actions',
+										'mailpoet'
+									) }
+								>
+									{ ( { onClose } ) => (
+										<>
+											<MenuItem
+												onClick={ () => {
+													setEditTemplateModalOpen(
+														true
+													);
+													onClose();
+												} }
+											>
+												{ __(
+													'Edit template',
+													'mailpoet'
+												) }
+											</MenuItem>
+											<MenuItem
+												onClick={ () => {
+													onClose();
+												} }
+											>
+												{ __(
+													'Swap template',
+													'mailpoet'
+												) }
+											</MenuItem>
+										</>
+									) }
+								</DropdownMenu>
+							</FlexItem>
+						</Flex>
+					</PanelRow>
+				) }
 			</PanelBody>
 		</Panel>
 	);
diff --git a/packages/js/email-editor/src/store/selectors.ts b/packages/js/email-editor/src/store/selectors.ts
index 2921e9a2ee..efc8aa21a3 100644
--- a/packages/js/email-editor/src/store/selectors.ts
+++ b/packages/js/email-editor/src/store/selectors.ts
@@ -204,7 +204,7 @@ export const getCurrentTemplate = createRegistrySelector( ( select ) => () => {
 			'wp_template',
 			// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 			templateId
-		);
+		) as unknown as EmailTemplate;
 	}
 	return getEditedPostTemplate();
 } );