Add console warning on Inbox notes character limit (https://github.com/woocommerce/woocommerce-admin/pull/7869)

* Add initial console warning

* Update warning to include permalink to post

* Fix formatting for multiple notes

* Changelog

* Add dompurify

* Add translation

plugins/woocommerce-admin/packages/data/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 -   Fix the batch fetch logic for the options data store. #7587
 -   Add backwards compability for old function format. #7688
+-   Add console warning for inbox note contents exceeding 320 characters and add dompurify dependency. #7869
 
 # 1.4.0
 

plugins/woocommerce-admin/packages/data/package.json

@@ -26,13 +26,14 @@
 		"@wordpress/api-fetch": "2.2.8",
 		"@wordpress/compose": "3.23.1",
 		"@wordpress/core-data": "3.0.0",
-		"@wordpress/element": "2.19.0",
-		"@wordpress/hooks": "2.11.0",
 		"@wordpress/data": "5.0.0",
 		"@wordpress/data-controls": "2.0.0",
 		"@wordpress/deprecated": "^3.1.1",
+		"@wordpress/element": "2.19.0",
+		"@wordpress/hooks": "2.11.0",
 		"@wordpress/i18n": "3.17.0",
 		"@wordpress/url": "2.21.0",
+		"dompurify": "^2.3.3",
 		"md5": "^2.3.0",
 		"qs": "6.9.6",
 		"rememo": "^3.0.0"

plugins/woocommerce-admin/packages/data/src/notes/resolvers.js

@@ -1,8 +1,10 @@
 /**
  * External dependencies
  */
+import { __, sprintf } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import { apiFetch } from '@wordpress/data-controls';
+import { sanitize } from 'dompurify';
 
 /**
  * Internal dependencies
@@ -10,6 +12,8 @@ import { apiFetch } from '@wordpress/data-controls';
 import { NAMESPACE } from '../constants';
 import { setNotes, setNotesQuery, setError } from './actions';
 
+let notesExceededWarningShown = false;
+
 export function* getNotes( query = {} ) {
 	const url = addQueryArgs( `${ NAMESPACE }/admin/notes`, query );
 
@@ -18,6 +22,40 @@ export function* getNotes( query = {} ) {
 			path: url,
 		} );
 
+		if ( ! notesExceededWarningShown ) {
+			const noteNames = notes.reduce( ( filtered, note ) => {
+				const content = sanitize( note.content, {
+					ALLOWED_TAGS: [],
+				} );
+				if ( content.length > 320 ) {
+					filtered.push( note.name );
+				}
+				return filtered;
+			}, [] );
+
+			if ( noteNames.length ) {
+				/* eslint-disable no-console */
+				console.warn(
+					sprintf(
+						/* translators: %s = link to developer blog */
+						__(
+							'WooCommerce Admin will soon limit inbox note contents to 320 characters. For more information, please visit %s. The following notes currently exceeds that limit:',
+							'woocommerce-admin'
+						),
+						'https://developer.woocommerce.com/?p=10749'
+					) +
+						'\n' +
+						noteNames
+							.map( ( name, idx ) => {
+								return `  ${ idx + 1 }. ${ name }`;
+							} )
+							.join( '\n' )
+				);
+				/* eslint-enable no-console */
+				notesExceededWarningShown = true;
+			}
+		}
+
 		yield setNotes( notes );
 		yield setNotesQuery(
 			query,