Change the texts in the component with changes to save to match email context

This should be removed after the upstream
contextualize the template texts to match associated post types or uses more generic texts.
See https://github.com/WordPress/gutenberg/issues/67697
[MAILPOET-6342]

packages/js/email-editor/src/components/header/index.scss

@@ -44,3 +44,10 @@
 .editor-document-bar__shortcut {
   display: none !important;
 }
+
+// Temporarily hide text about amount of changes to save. The wording is not great for email context.
+.entities-saved-states__text-prompt {
+ p {
+   display: none;
+ }
+}

packages/js/email-editor/src/components/header/save-all-button.tsx

@@ -1,4 +1,4 @@
-import { useRef } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { Button, Dropdown } from '@wordpress/components';
 import {
 	// @ts-expect-error Our current version of packages doesn't have EntitiesSavedStates export
@@ -8,6 +8,33 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { storeName } from '../../store';
 
+const SaveAllContent = ( { onToggle } ) => {
+	// Hacky way to change the text in the templates row of the save dropdown
+	useEffect( () => {
+		const panels = document.querySelectorAll(
+			'.mailpoet-email-editor-save-button__dropdown  .components-panel__body'
+		);
+		panels.forEach( ( panel ) => {
+			const titleButton = panel.querySelector(
+				'.components-panel__body-title button'
+			);
+			if (
+				titleButton &&
+				titleButton.textContent.trim() === __( 'Templates', 'mailpoet' )
+			) {
+				const rows = panel.querySelectorAll( '.components-panel__row' );
+				if ( rows.length ) {
+					rows[ 0 ].textContent = __(
+						'This change will affect emails that use this template.',
+						'mailpoet'
+					);
+				}
+			}
+		} );
+	}, [] );
+	return <EntitiesSavedStates close={ onToggle } />;
+};
+
 export function SaveAllButton() {
 	const { isSaving } = useSelect(
 		( select ) => ( {
@@ -41,7 +68,7 @@ export function SaveAllButton() {
 					</Button>
 				) }
 				renderContent={ ( { onToggle } ) => (
-					<EntitiesSavedStates close={ onToggle } />
+					<SaveAllContent onToggle={ onToggle } />
 				) }
 			/>
 		</div>