Boost: Add "load default strings" to excludes in concatenate UI (#40496)

Co-authored-by: Adnan Haque <[email protected]>
Automattic · Dec 17, 2024 · cf6b2de · cf6b2de
1 parent f16ae49
commit cf6b2de
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 77 deletions.
diff --git a/projects/plugins/boost/app/assets/src/js/features/minify-meta/lib/stores.ts b/projects/plugins/boost/app/assets/src/js/features/minify-meta/lib/stores.ts
@@ -0,0 +1,17 @@
+import { z } from 'zod';
+import { useDataSync } from '@automattic/jetpack-react-data-sync-client';
+
+const MinifyDefaults = z.array( z.string() );
+type MinifyDefaults = z.infer< typeof MinifyDefaults >;
+
+export function useMinifyDefaults(
+	preferenceDSKey: 'minify_js_excludes' | 'minify_css_excludes'
+): MinifyDefaults | undefined {
+	const [ { data } ] = useDataSync(
+		'jetpack_boost_ds',
+		`${ preferenceDSKey }_default`,
+		MinifyDefaults
+	);
+
+	return data;
+}
diff --git a/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.module.scss b/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.module.scss
@@ -5,6 +5,10 @@
 	font-size: 14px;
 	line-height: 22px;
 
+	:global(button ~ button) {
+		margin-left: 20px !important;
+	}
+
 	.summary {
 		flex-grow: 1;
 	}
@@ -35,34 +39,20 @@
 		}
 	}
 
-	.manage-excludes {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		width: 100%;
-
-		.help {
-			font-size: 14px;
-			line-height: 1.5;
-			color: var( --gray-60 );
-			font-weight: 400;
-		}
+	.description {
+		margin-top: 8px;
+		font-size: 14px;
+		line-height: 1.5;
+		color: var( --gray-60 );
+		font-weight: 400;
 	}
 
-	.manage-excludes label {
-		display: block;
-		text-align: left;
-		margin-bottom: 16px;
-		font-weight: 600;
-		width: 100%;
-		font-size: 16px;
-		line-height: 1;
+	.button {
+		margin-top: 16px;
 	}
 
-	.manage-excludes span {
+	.manage-excludes label {
 		display: block;
-		text-align: left;
-		width: 100%;
 		margin-bottom: 16px;
 		line-height: 1.5;
 	}
@@ -72,37 +62,6 @@
 		padding: 10px;
 		border-radius: 4px;
 		border: 1px solid $gray_10;
-		margin-bottom: 16px;
-	}
-
-	.buttons-container {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		width: 100%;
-
-		button {
-			margin-right: 10px;
-			padding: 8px 24px;
-			border: 1px solid $primary-black;
-			border-radius: 4px;
-			cursor: pointer;
-			color: $primary-black;
-
-		}
-		button[disabled] {
-			border-color: $gray-5;
-			background-color: $gray-5;
-			color: $gray-20;
-			cursor: not-allowed;
-		}
-		button:not([disabled]) {
-			background-color: $primary-black;
-			color: $primary-white;
-		}
-		button:not([disabled]):hover {
-			background-color: lighten($primary-black, 10%);
-		}
 	}
 
 	.edit-button svg {

diff --git a/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx b/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx
@@ -1,17 +1,25 @@
 import { useEffect, useState } from 'react';
+import { Button } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { type Props, useMetaQuery } from '$lib/stores/minify';
 import { recordBoostEvent } from '$lib/utils/analytics';
 import styles from './minify-meta.module.scss';
 import CollapsibleMeta from '$features/ui/collapsible-meta/collapsible-meta';
+import { useMinifyDefaults } from './lib/stores';
 
 const MetaComponent = ( { buttonText, placeholder, datasyncKey }: Props ) => {
 	const [ values, updateValues ] = useMetaQuery( datasyncKey );
 	const [ inputValue, setInputValue ] = useState( () => values.join( ', ' ) );
+	const minifyDefaults = useMinifyDefaults( datasyncKey );
 
 	const concatenateType = datasyncKey === 'minify_js_excludes' ? 'js' : 'css';
 	const togglePanelTracksEvent = 'concatenate_' + concatenateType + '_panel_toggle'; // possible events: concatenate_js_panel_toggle, concatenate_css_panel_toggle
 
+	let defaultValue = '';
+	if ( minifyDefaults !== undefined ) {
+		defaultValue = minifyDefaults.join( ', ' );
+	}
+
 	useEffect( () => {
 		setInputValue( values.join( ', ' ) );
 	}, [ values ] );
@@ -35,28 +43,44 @@ const MetaComponent = ( { buttonText, placeholder, datasyncKey }: Props ) => {
 
 	const htmlId = `jb-minify-meta-${ datasyncKey }`;
 
-	const summary =
-		values.length > 0
-			? /* Translators: %s refers to the list of excluded items. */
-			  sprintf( __( 'Except: %s', 'jetpack-boost' ), values.join( ', ' ) )
-			: '';
-
 	// Be explicit about this because the optimizer breaks the linter otherwise.
+	let summary;
+	if ( values.length > 0 ) {
+		/* Translators: %s refers to the list of excluded items. */
+		summary = sprintf( __( 'Except: %s', 'jetpack-boost' ), values.join( ', ' ) );
+	}
+
+	if ( values.length === 0 ) {
+		summary = __( 'No exceptions.', 'jetpack-boost' );
+	}
+
 	let subHeaderText = '';
 	if ( datasyncKey === 'minify_js_excludes' ) {
-		subHeaderText = __( 'Exclude JS Strings:', 'jetpack-boost' );
+		subHeaderText = __( 'Exclude JS handles:', 'jetpack-boost' );
 	}
 
 	if ( datasyncKey === 'minify_css_excludes' ) {
-		subHeaderText = __( 'Exclude CSS Strings:', 'jetpack-boost' );
+		subHeaderText = __( 'Exclude CSS handles:', 'jetpack-boost' );
+	}
+
+	function loadDefaultValue() {
+		setInputValue( defaultValue );
+		/*
+		 * Possible Events:
+		 * minify_js_exceptions_load_default
+		 * minify_css_exceptions_load_default
+		 */
+		recordBoostEvent( 'minify_' + concatenateType + '_exceptions_load_default', {} );
 	}
 
 	const content = (
 		<div className={ styles.body }>
 			<div className={ styles.section }>
 				<div className={ styles.title }>{ __( 'Exceptions', 'jetpack-boost' ) }</div>
 				<div className={ styles[ 'manage-excludes' ] }>
-					<span className={ styles[ 'sub-header' ] }>{ subHeaderText }</span>
+					<label className={ styles[ 'sub-header' ] } htmlFor={ htmlId }>
+						{ subHeaderText }
+					</label>
 					<input
 						type="text"
 						value={ inputValue }
@@ -69,14 +93,24 @@ const MetaComponent = ( { buttonText, placeholder, datasyncKey }: Props ) => {
 							}
 						} }
 					/>
-					<span className={ styles.help }>
-						{ __( 'Use a comma (,) to separate the strings.', 'jetpack-boost' ) }
-					</span>
-					<div className={ styles[ 'buttons-container' ] }>
-						<button disabled={ values.join( ', ' ) === inputValue } onClick={ save }>
-							{ __( 'Save', 'jetpack-boost' ) }
-						</button>
+					<div className={ styles.description }>
+						{ __( 'Use a comma (,) to separate the handles.', 'jetpack-boost' ) }
 					</div>
+					<Button
+						disabled={ values.join( ', ' ) === inputValue }
+						className={ styles.button }
+						onClick={ save }
+					>
+						{ __( 'Save', 'jetpack-boost' ) }
+					</Button>
+					<Button
+						disabled={ inputValue === defaultValue }
+						onClick={ loadDefaultValue }
+						className={ styles.button }
+						variant="link"
+					>
+						{ __( 'Load default handles', 'jetpack-boost' ) }
+					</Button>
 				</div>
 			</div>
 		</div>

diff --git a/projects/plugins/boost/app/assets/src/js/pages/index/index.tsx b/projects/plugins/boost/app/assets/src/js/pages/index/index.tsx
@@ -184,8 +184,8 @@ const Index = () => {
 			>
 				<MinifyMeta
 					datasyncKey="minify_js_excludes"
-					buttonText={ __( 'Exclude JS Strings', 'jetpack-boost' ) }
-					placeholder={ __( 'Comma separated list of JS scripts to exclude', 'jetpack-boost' ) }
+					buttonText={ __( 'Exclude JS handles', 'jetpack-boost' ) }
+					placeholder={ __( 'Comma separated list of JS handles to exclude', 'jetpack-boost' ) }
 				/>
 			</Module>
 			<Module
@@ -202,11 +202,8 @@ const Index = () => {
 			>
 				<MinifyMeta
 					datasyncKey="minify_css_excludes"
-					buttonText={ __( 'Exclude CSS Strings', 'jetpack-boost' ) }
-					placeholder={ __(
-						'Comma separated list of CSS stylesheets to exclude',
-						'jetpack-boost'
-					) }
+					buttonText={ __( 'Exclude CSS handles', 'jetpack-boost' ) }
+					placeholder={ __( 'Comma separated list of CSS handles to exclude', 'jetpack-boost' ) }
 				/>
 			</Module>
 			<Module

diff --git a/projects/plugins/boost/changelog/update-concat-exclude-ui b/projects/plugins/boost/changelog/update-concat-exclude-ui
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Concatenate JS/CSS: Add a button that allows loading default excludes.
diff --git a/projects/plugins/boost/wp-js-data-sync.php b/projects/plugins/boost/wp-js-data-sync.php
@@ -246,6 +246,19 @@ function jetpack_boost_initialize_datasync() {
 $css_excludes_entry = new Minify_Excludes_State_Entry( 'minify_css_excludes' );
 jetpack_boost_register_option( 'minify_js_excludes', Schema::as_array( Schema::as_string() )->fallback( Minify_JS::$default_excludes ), $js_excludes_entry );
 jetpack_boost_register_option( 'minify_css_excludes', Schema::as_array( Schema::as_string() )->fallback( Minify_CSS::$default_excludes ), $css_excludes_entry );
+jetpack_boost_register_readonly_option(
+	'minify_js_excludes_default',
+	function () {
+		return Minify_JS::$default_excludes;
+	}
+);
+jetpack_boost_register_readonly_option(
+	'minify_css_excludes_default',
+	function () {
+		return Minify_CSS::$default_excludes;
+	}
+);
+
 jetpack_boost_register_option(
 	'image_cdn_quality',
 	Schema::as_assoc_array(