Settings screen: allow showing success notice multiple times (#5265)

Author: johnwatkins0

assets/src/components/amp-notice/index.js

@@ -75,17 +75,19 @@ function getNoticeIcon( type ) {
  * @param {string} props.size The notice size.
  * @param {string} props.type The notice type.
  */
-export function AMPNotice( { children, className, size = NOTICE_SIZE_LARGE, type = NOTICE_TYPE_INFO } ) {
+export function AMPNotice( { children, className, size = NOTICE_SIZE_LARGE, type = NOTICE_TYPE_INFO, ...props } ) {
 	const noticeIcon = getNoticeIcon( type );
 
 	return (
-		<div className={
-			classnames(
-				className,
-				'amp-notice',
-				`amp-notice--${ type }`,
-				`amp-notice--${ size }`,
-			) }
+		<div
+			className={
+				classnames(
+					className,
+					'amp-notice',
+					`amp-notice--${ type }`,
+					`amp-notice--${ size }`,
+				) }
+			{ ...props }
 		>
 			<div className="amp-notice__icon">
 				{ noticeIcon }

assets/src/components/options-context-provider/index.js

@@ -162,6 +162,7 @@ export function OptionsContextProvider( { children, optionsRestPath, populateDef
 			return;
 		}
 
+		setUpdates( {} );
 		setDidSaveOptions( true );
 		setSavingOptions( false );
 	}, [ delaySave, hasErrorBoundary, optionsRestPath, setAsyncError, originalOptions, setError, updates ] );

assets/src/settings-page/index.js

@@ -122,29 +122,45 @@ function scrollFocusedSectionIntoView( focusedSectionId ) {
 function Root() {
 	const [ focusedSection, setFocusedSection ] = useState( global.location.hash.replace( /^#/, '' ) );
 
-	const { didSaveOptions, fetchingOptions, saveOptions } = useContext( Options );
+	const { didSaveOptions, fetchingOptions, hasOptionsChanges, saveOptions } = useContext( Options );
 	const { error } = useContext( ErrorContext );
 	const { downloadingTheme } = useContext( ReaderThemes );
-	const [ saved, setSaved ] = useState( false );
+	const [ savedNoticeClass, setSavedNoticeClass ] = useState( '' );
 
 	/**
-	 * Shows a saved notice on success.
+	 * Show the success notice after options have saved.
 	 */
 	useEffect( () => {
-		if ( true === didSaveOptions && ! downloadingTheme ) {
-			setSaved( true );
+		if ( didSaveOptions && ! downloadingTheme ) {
+			setSavedNoticeClass( 'visible' );
+		}
+	}, [ didSaveOptions, downloadingTheme ] );
+
+	/**
+	 * If the success notice is showing and updates have been made, hide the notice.
+	 */
+	useEffect( () => {
+		if ( 'visible' === savedNoticeClass && hasOptionsChanges ) {
+			setSavedNoticeClass( 'dismissed' );
+		}
+	}, [ savedNoticeClass, hasOptionsChanges ] );
 
-			const timeout = setTimeout( () => [
-				setSaved( false ),
-			], 9000 );
+	/**
+	 * Hide the success notice after several seconds.
+	 */
+	useEffect( () => {
+		if ( 'visible' === savedNoticeClass ) {
+			const timeout = setTimeout( () => {
+				setSavedNoticeClass( 'dismissed' );
+			}, 9000 );
 
 			return () => {
 				clearTimeout( timeout );
 			};
 		}
 
 		return () => undefined;
-	}, [ didSaveOptions, downloadingTheme ] );
+	}, [ savedNoticeClass ] );
 
 	/**
 	 * Scroll to the focused element on load or when it changes.
@@ -237,13 +253,15 @@ function Root() {
 			</form>
 			<UnsavedChangesWarning excludeUserContext={ true } />
 			{ error && <ErrorNotice errorMessage={ error.message || __( 'An error occurred. You might be offline or logged out.', 'amp' ) } /> }
-			{ saved && (
-				<AMPNotice className={ `amp-save-success-notice` } type={ NOTICE_TYPE_SUCCESS }>
-					<p>
-						{ __( 'Settings saved', 'amp' ) }
-					</p>
-				</AMPNotice>
-			) }
+			<AMPNotice
+				className={ `amp-save-success-notice ${ savedNoticeClass }` }
+				type={ NOTICE_TYPE_SUCCESS }
+				aria-hidden={ 'visible' !== savedNoticeClass }
+			>
+				<p>
+					{ __( 'Settings saved', 'amp' ) }
+				</p>
+			</AMPNotice>
 		</>
 	);
 }

assets/src/settings-page/style.css

@@ -308,22 +308,32 @@ li.error-kept {
 	}
 }
 
-@keyframes fadeOut {
+@keyframes slideOut {
 
 	from {
-		opacity: 1;
+		transform: translate3d(0, 0, 0);
 	}
 
 	to {
-		opacity: 0;
+		transform: translate3d(300px, 0, 0);
 	}
 }
 
+.amp .amp-save-success-notice.amp-notice:not(.dismissed):not(.visible) {
+	transform: translate3d(300px, 0, 0);
+}
 
-.amp .amp-save-success-notice.amp-notice {
-	animation: slideIn, fadeOut;
-	animation-delay: 0s, 8s;
-	animation-duration: 0.5s, 0.5s;
+.amp .amp-save-success-notice.amp-notice.visible {
+	animation: slideIn;
+	animation-delay: 0s;
+	animation-duration: 0.5s;
+	animation-fill-mode: both;
+}
+
+.amp .amp-save-success-notice.amp-notice.dismissed {
+	animation: slideOut;
+	animation-delay: 0s;
+	animation-duration: 0.5s;
 	animation-fill-mode: both;
 }