Suggest regeneration when foundation pages list was updated

projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/critical-css-state.ts

@@ -152,8 +152,8 @@ export function useSetProviderErrorsAction() {
  * Hook which creates a callable action for regenerating Critical CSS.
  */
 export function useRegenerateCriticalCssAction() {
-	const [ , resetReason ] = useRegenerationReason();
-	return useCriticalCssAction( 'request-regenerate', z.void(), resetReason );
+	const [ , updateReason ] = useRegenerationReason();
+	return useCriticalCssAction( 'request-regenerate', z.void(), () => updateReason( null ) );
 }
 
 /**

projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/suggest-regenerate.ts

@@ -8,23 +8,27 @@ const allowedSuggestions = [
 	'switched_theme',
 	'plugin_change',
 	'foundation_page_saved',
+	'foundation_pages_list_updated',
 ] as const;
 
-export type RegenerationReason = ( typeof allowedSuggestions )[ number ];
+export type RegenerationReason = ( typeof allowedSuggestions )[ number ] | null;
 
 /**
  * Hook to get the reason why (if any) we should recommend users regenerate their Critical CSS.
  */
-export function useRegenerationReason(): [ RegenerationReason | null, () => void ] {
+export function useRegenerationReason(): [
+	RegenerationReason,
+	( reason: RegenerationReason ) => void,
+] {
 	const [ { data }, { mutate } ] = useDataSync(
 		'jetpack_boost_ds',
 		'critical_css_suggest_regenerate',
 		z.enum( allowedSuggestions ).nullable()
 	);
 
-	function reset() {
-		mutate( null );
-	}
+	const updateReason = ( reason: RegenerationReason ) => {
+		mutate( reason );
+	};
 
-	return [ data || null, reset ];
+	return [ data || null, updateReason ];
 }

projects/plugins/boost/app/assets/src/js/features/critical-css/regenerate-critical-css-suggestion/regenerate-critical-css-suggestion.tsx

@@ -20,6 +20,7 @@ const suggestionMap: { [ key: string ]: string } = {
 		'jetpack-boost'
 	),
 	foundation_page_saved: __( 'A Foundation page was updated.', 'jetpack-boost' ),
+	foundation_pages_list_updated: __( 'The list of Foundation pages was updated.', 'jetpack-boost' ),
 };
 
 const getSuggestionMessage = ( type: RegenerationReason | null ) => {

projects/plugins/boost/app/assets/src/js/features/foundation-pages/meta/meta.tsx

@@ -9,16 +9,21 @@ import { useFoundationPages, useFoundationPagesProperties } from '../lib/stores/
 import { createInterpolateElement } from '@wordpress/element';
 import { recordBoostEvent } from '$lib/utils/analytics';
 import getSupportLink from '$lib/utils/get-support-link';
+import { useRegenerationReason } from '$features/critical-css/lib/stores/suggest-regenerate';
 
 const Meta = () => {
 	const [ isExpanded, setIsExpanded ] = useState( false );
 	const [ foundationPages, setFoundationPages ] = useFoundationPages();
 	const foundationPagesProperties = useFoundationPagesProperties();
+	const [ , updateRegenerateReason ] = useRegenerationReason();
 
 	const updateFoundationPages = ( newValue: string ) => {
 		const newItems = newValue.split( '\n' ).map( line => line.trim() );
 
 		setFoundationPages( newItems );
+		// @todo - Running setFoundationPages does not necessarily mean that the value was updated.
+		// This should happen only IF the value got updated.
+		updateRegenerateReason( 'foundation_pages_list_updated' );
 	};
 
 	let content = null;

projects/plugins/boost/app/data-sync/Foundation_Pages_Entry.php

@@ -4,6 +4,7 @@
 
 use Automattic\Jetpack\WP_JS_Data_Sync\Contracts\Entry_Can_Get;
 use Automattic\Jetpack\WP_JS_Data_Sync\Contracts\Entry_Can_Set;
+use Automattic\Jetpack_Boost\Lib\Environment_Change_Detector;
 
 class Foundation_Pages_Entry implements Entry_Can_Get, Entry_Can_Set {
 
@@ -26,7 +27,10 @@ public function get( $fallback_value = false ) {
 	public function set( $value ) {
 		$value = $this->sanitize_value( $value );
 
-		update_option( $this->option_key, $value );
+		$updated = update_option( $this->option_key, $value );
+		if ( $updated ) {
+			( new Environment_Change_Detector() )->handle_foundation_pages_list_update();
+		}
 	}
 
 	private function sanitize_value( $value ) {

projects/plugins/boost/app/lib/Environment_Change_Detector.php

@@ -14,12 +14,13 @@
  */
 class Environment_Change_Detector {
 
-	const ENV_CHANGE_LEGACY                = '1';
-	const ENV_CHANGE_PAGE_SAVED            = 'page_saved';
-	const ENV_CHANGE_POST_SAVED            = 'post_saved';
-	const ENV_CHANGE_SWITCHED_THEME        = 'switched_theme';
-	const ENV_CHANGE_PLUGIN_CHANGE         = 'plugin_change';
-	const ENV_CHANGE_FOUNDATION_PAGE_SAVED = 'foundation_page_saved';
+	const ENV_CHANGE_LEGACY                        = '1';
+	const ENV_CHANGE_PAGE_SAVED                    = 'page_saved';
+	const ENV_CHANGE_POST_SAVED                    = 'post_saved';
+	const ENV_CHANGE_SWITCHED_THEME                = 'switched_theme';
+	const ENV_CHANGE_PLUGIN_CHANGE                 = 'plugin_change';
+	const ENV_CHANGE_FOUNDATION_PAGE_SAVED         = 'foundation_page_saved';
+	const ENV_CHANGE_FOUNDATION_PAGES_LIST_UPDATED = 'foundation_pages_list_updated';
 
 	/**
 	 * Initialize the change detection hooks.
@@ -58,6 +59,10 @@ public function handle_plugin_change() {
 		$this->do_action( false, $this::ENV_CHANGE_PLUGIN_CHANGE );
 	}
 
+	public function handle_foundation_pages_list_update() {
+		$this->do_action( false, $this::ENV_CHANGE_FOUNDATION_PAGES_LIST_UPDATED );
+	}
+
 	/**
 	 * Fire the environment change action.
 	 *

projects/plugins/boost/wp-js-data-sync.php

@@ -177,6 +177,7 @@ function jetpack_boost_initialize_datasync() {
 		'switched_theme',
 		'plugin_change',
 		'foundation_page_saved',
+		'foundation_pages_list_updated',
 	)
 )->nullable();