Add help icon to recent button

MAILPOET-6331

packages/js/email-editor/src/components/template-select/template-categories-list-sidebar.tsx

@@ -1,15 +1,25 @@
 import { Button } from '@wordpress/components';
+import { info } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { TemplateCategory } from '../../store';
+
+type Props = {
+	selectedCategory?: TemplateCategory;
+	templateCategories: Array< { name: TemplateCategory; label: string } >;
+	onClickCategory: ( name: TemplateCategory ) => void;
+};
 
 export function TemplateCategoriesListSidebar( {
 	selectedCategory,
 	templateCategories,
 	onClickCategory,
-                                               } ) {
+}: Props ) {
 	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
 	return (
 		<div className={ baseClassName }>
 			<div className={ `${ baseClassName }__categories-list` }>
 				{ templateCategories.map( ( { name, label } ) => {
+					const isRecentButton = name === 'recent';
 					return (
 						<Button
 							key={ name }
@@ -19,6 +29,19 @@ export function TemplateCategoriesListSidebar( {
 							onClick={ () => {
 								onClickCategory( name );
 							} }
+							showTooltip={ isRecentButton }
+							tooltipPosition="top"
+							aria-label="This is some content"
+							icon={ isRecentButton ? info : null }
+							iconPosition="right"
+							describedBy={
+								isRecentButton
+									? __(
+											'Templates created on the legacy editor will not appear here',
+											'mailpoet'
+									  )
+									: null
+							}
 						>
 							{ label }
 						</Button>

packages/js/email-editor/src/components/template-select/template-list.tsx

@@ -6,8 +6,15 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Async } from './async';
+import { TemplateCategory, TemplatePreview } from '../../store';
 
-function TemplateListBox( { templates, onTemplateSelection } ) {
+type Props = {
+	templates: TemplatePreview[];
+	onTemplateSelection: ( template: TemplatePreview ) => void;
+	selectedCategory?: TemplateCategory;
+};
+
+function TemplateListBox( { templates, onTemplateSelection }: Props ) {
 	return (
 		<div className="block-editor-block-patterns-list" role="listbox">
 			{ templates.map( ( template ) => (
@@ -63,7 +70,7 @@ export function TemplateList( {
 	templates,
 	onTemplateSelection,
 	selectedCategory,
-} ) {
+}: Props ) {
 	const filteredTemplates = useMemo(
 		() =>
 			templates.filter(