Add help icon to recent button

MAILPOET-6331

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

@@ -1,30 +1,53 @@
 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,
-                                               } ) {
-  const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
-  return (
-    <div className={baseClassName}>
-      <div className={`${baseClassName}__categories-list`}>
-        {templateCategories.map(({ name, label }) => {
-          return (
-            <Button
-              key={name}
-              label={label}
-              className={`${baseClassName}__categories-list__item`}
-              isPressed={selectedCategory === name}
-              onClick={() => {
-                onClickCategory(name);
-              }}
-            >
-              {label}
-            </Button>
-          );
-        })}
-      </div>
-    </div>
-  );
+	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 }
+							label={ label }
+							className={ `${ baseClassName }__categories-list__item` }
+							isPressed={ selectedCategory === name }
+							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>
+					);
+				} ) }
+			</div>
+		</div>
+	);
 }

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(