Add dropdown with edit and swap template buttons

[MAILPOET-6336]

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>
 	);

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();
 } );