Boost: Add tooltip for cache exceptions UI (#35903)

* Add exceptions tooltip * add changelog * Reduce tooltip width * Update bypass patterns component to show the children it's wrapping * Make bypass patterns component children optional
Automattic · Feb 27, 2024 · 7b9aec0 · 7b9aec0
1 parent 8ce8660
commit 7b9aec0
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 5 deletions.
diff --git a/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.module.scss b/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.module.scss
@@ -91,3 +91,24 @@
 		}
 	}
 }
+
+.example-wrapper {
+	position: relative;
+	display: inline;
+
+	.example-button {
+		position: relative;
+		z-index: 10;
+	}
+
+	.tooltip-wrapper {
+		position: absolute;
+		top: 0;
+		left: -10px;
+		z-index: 9;
+
+		.tooltip :global(.icon-tooltip-container .components-popover__content) {
+			width: 150px;
+		}
+	}
+}
diff --git a/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx b/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx
@@ -1,4 +1,4 @@
-import { Button, Notice } from '@automattic/jetpack-components';
+import { Button, IconTooltip, Notice } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import ChevronDown from '$svg/chevron-down';
@@ -179,7 +179,7 @@ const BypassPatterns = ( {
 			<p className={ classNames( styles.description, styles[ 'error-message' ] ) }>
 				{ __( 'Error: Invalid format', 'jetpack-boost' ) }
 			</p>
-			<p className={ styles.description }>
+			<div className={ styles.description }>
 				{ __(
 					'Use (.*) to address multiple URLs under a given path. Be sure each URL path is in its own line.',
 					'jetpack-boost'
@@ -188,13 +188,12 @@ const BypassPatterns = ( {
 				{ createInterpolateElement(
 					__( '<help>See an example</help> or <link>learn more</link>.', 'jetpack-boost' ),
 					{
-						// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid
-						help: <a href="#" target="_blank" rel="noreferrer" />,
+						help: <BypassPatternsExample />, // children are passed after the interpolation.
 						// eslint-disable-next-line jsx-a11y/anchor-has-content
 						link: <a href={ exclusionsLink } target="_blank" rel="noreferrer" />,
 					}
 				) }
-			</p>
+			</div>
 			{ showNotice && (
 				<Notice
 					level="error"
@@ -210,3 +209,44 @@ const BypassPatterns = ( {
 		</div>
 	);
 };
+
+type BypassPatternsExampleProps = {
+	children?: React.ReactNode;
+};
+
+const BypassPatternsExample = ( { children }: BypassPatternsExampleProps ) => {
+	const [ show, setShow ] = useState( false );
+
+	return (
+		<div className={ styles[ 'example-wrapper' ] }>
+			{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
+			<a
+				href="#"
+				className={ styles[ 'example-button' ] }
+				onClick={ e => {
+					e.preventDefault();
+					setShow( ! show );
+				} }
+			>
+				{ children }
+			</a>
+			<div className={ styles[ 'tooltip-wrapper' ] }>
+				<IconTooltip
+					placement="bottom-start"
+					popoverAnchorStyle="wrapper"
+					forceShow={ show }
+					offset={ -10 }
+					className={ styles.tooltip }
+				>
+					<strong>{ __( 'Example:', 'jetpack-boost' ) }</strong>
+					<br />
+					checkout
+					<br />
+					gallery/.*
+					<br />
+					specific-page
+				</IconTooltip>
+			</div>
+		</div>
+	);
+};
diff --git a/projects/plugins/boost/changelog/update-exceptions-ui b/projects/plugins/boost/changelog/update-exceptions-ui
@@ -0,0 +1,5 @@
+Significance: patch
+Type: added
+Comment: Update cache exceptions UI to include an example tooltip.
+
+