Themes: Fix stuck spinner and broken retry after canceling a theme update from the details overlay

src/js/_enqueues/wp/theme.js

@@ -683,7 +683,7 @@ themes.view.Details = wp.Backbone.View.extend({
 
 	render: function() {
 		var data = this.model.toJSON();
-		this.$el.html( this.html( data ) );
+		this.$el.html( this.html( data ) ).attr( 'data-slug', data.id );
 		// Renders active theme styles.
 		this.activeTheme();
 		// Set up navigation events.

src/js/_enqueues/wp/updates.js

@@ -1567,17 +1567,21 @@
 			$notice = $notice.addClass( 'updating-message' ).find( 'p' );
 
 		} else {
-			$notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
+			$notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-large' );
 
 			$notice.find( 'h3' ).remove();
 
-			$notice = $notice.add( $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ) );
 			$notice = $notice.addClass( 'updating-message' ).find( 'p' );
 		}
 
-		if ( $notice.html() !== __( 'Updating...' ) ) {
-			$notice.data( 'originaltext', $notice.html() );
-		}
+		// Store each notice's own original text; $notice can match more than one notice (e.g. the theme details overlay and its grid card).
+		$notice.each( function() {
+			var $text = $( this );
+
+			if ( $text.html() !== __( 'Updating...' ) ) {
+				$text.data( 'originaltext', $text.html() );
+			}
+		} );
 
 		wp.a11y.speak( __( 'Updating... please wait.' ) );
 		$notice.text( __( 'Updating...' ) );
@@ -2502,7 +2506,7 @@
 		 */
 		$document.on( 'credential-modal-cancel', function( event, job ) {
 			var $updatingMessage = $( '.updating-message' ),
-				$message, originalText;
+				$message;
 
 			if ( 'import' === pagenow ) {
 				$updatingMessage.removeClass( 'updating-message' );
@@ -2524,38 +2528,49 @@
 				$message = $updatingMessage;
 			}
 
-			if ( $message && $message.hasClass( 'updating-message' ) ) {
-				originalText = $message.data( 'originaltext' );
+			if ( $message && $message.length ) {
 
-				if ( 'undefined' === typeof originalText ) {
-					originalText = $( '<p>' ).html( $message.find( 'p' ).data( 'originaltext' ) );
-				}
+				// Reset each matched notice with its own original content; $message can match more than one notice (e.g. the theme details overlay and its grid card).
+				$message.each( function() {
+					var $notice = $( this ),
+						originalText;
 
-				$message
-					.removeClass( 'updating-message' )
-					.html( originalText );
+					if ( ! $notice.hasClass( 'updating-message' ) ) {
+						return;
+					}
 
-				if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) {
-					if ( 'update-plugin' === job.action ) {
-						$message.attr(
-							'aria-label',
-							sprintf(
-								/* translators: %s: Plugin name and version. */
-								_x( 'Update %s now', 'plugin' ),
-								$message.data( 'name' )
-							)
-						);
-					} else if ( 'install-plugin' === job.action ) {
-						$message.attr(
-							'aria-label',
-							sprintf(
-								/* translators: %s: Plugin name. */
-								_x( 'Install %s now', 'plugin' ),
-								$message.data( 'name' )
-							)
-						);
+					originalText = $notice.data( 'originaltext' );
+
+					if ( 'undefined' === typeof originalText ) {
+						originalText = $( '<p>' ).html( $notice.find( 'p' ).data( 'originaltext' ) );
 					}
-				}
+
+					$notice
+						.removeClass( 'updating-message' )
+						.html( originalText );
+
+					if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) {
+						if ( 'update-plugin' === job.action ) {
+							$notice.attr(
+								'aria-label',
+								sprintf(
+									/* translators: %s: Plugin name and version. */
+									_x( 'Update %s now', 'plugin' ),
+									$notice.data( 'name' )
+								)
+							);
+						} else if ( 'install-plugin' === job.action ) {
+							$notice.attr(
+								'aria-label',
+								sprintf(
+									/* translators: %s: Plugin name. */
+									_x( 'Install %s now', 'plugin' ),
+									$notice.data( 'name' )
+								)
+							);
+						}
+					}
+				} );
 			}
 
 			wp.a11y.speak( __( 'Update canceled.' ) );

src/wp-admin/themes.php

@@ -1153,7 +1153,7 @@ function wp_theme_auto_update_setting_template() {
 
 				<# if ( data.hasUpdate ) { #>
 					<# if ( data.updateResponse.compatibleWP && data.updateResponse.compatiblePHP ) { #>
-						<div class="notice notice-warning notice-alt notice-large">
+						<div class="notice notice-warning notice-alt notice-large update-message">
 							<h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
 							{{{ data.update }}}
 						</div>

tests/qunit/wp-admin/js/updates.js

@@ -136,6 +136,8 @@ jQuery( function( $ ) {
 			window.pagenow = this.oldPagenow;
 			wp.updates.ajaxLocked = false;
 			wp.updates.queue = [];
+			wp.updates.shouldRequestFilesystemCredentials = false;
+			wp.updates.filesystemCredentials.available = false;
 			jQuery.ajax.restore();
 		}
 	} );
@@ -174,6 +176,51 @@ jQuery( function( $ ) {
 		assert.equal( jQuery.ajax.getCall( 0 ).args[0].data.slug, 'twentyeleven' );
 	} );
 
+	QUnit.test( 'Canceling the credentials modal restores both the theme details overlay and the grid card, each with its own original content', function( assert ) {
+		var $overlayNotice = $(
+				'<div class="theme-overlay" data-slug="twentyeleven">' +
+					'<div class="theme-info">' +
+						'<div class="notice notice-warning notice-alt notice-large update-message">' +
+							'<h3 class="notice-title">Update Available</h3>' +
+							'<p><strong>There is a new version of Twenty Eleven available. <a id="update-theme" data-slug="twentyeleven" href="#">update now</a>.</strong></p>' +
+						'</div>' +
+					'</div>' +
+				'</div>'
+			).appendTo( '#qunit-fixture' ),
+			$rowNotice = $(
+				'<div class="theme" data-slug="twentyeleven">' +
+					'<div class="update-message notice inline notice-warning notice-alt">' +
+						'<p>New version available. <button class="button-link" type="button">Update now</button></p>' +
+					'</div>' +
+				'</div>'
+			).appendTo( '#qunit-fixture' ),
+			eventTarget = $overlayNotice.find( '#update-theme' );
+
+		$( '<div id="request-filesystem-credentials-dialog"><form id="request-filesystem-credentials-form"></form></div>' )
+			.appendTo( '#qunit-fixture' );
+
+		wp.updates.shouldRequestFilesystemCredentials = true;
+		wp.updates.filesystemCredentials.available = false;
+
+		wp.updates.maybeRequestFilesystemCredentials( $.Event( 'click', {
+			target: eventTarget[0]
+		} ) );
+
+		wp.updates.updateTheme( { slug: 'twentyeleven' } );
+
+		assert.strictEqual( wp.updates.queue.length, 1, 'Theme update waits for credentials.' );
+		assert.true( $overlayNotice.find( '.notice' ).hasClass( 'updating-message' ), 'Overlay notice is marked as updating.' );
+		assert.true( $rowNotice.find( '.update-message' ).hasClass( 'updating-message' ), 'Theme row notice is marked as updating.' );
+
+		wp.updates.requestForCredentialsModalCancel();
+
+		assert.false( $overlayNotice.find( '.notice' ).hasClass( 'updating-message' ), 'Overlay notice resets after cancel.' );
+		assert.false( $rowNotice.find( '.update-message' ).hasClass( 'updating-message' ), 'Theme row notice resets after cancel.' );
+		assert.strictEqual( $overlayNotice.find( '#update-theme' ).length, 1, 'Overlay notice keeps its own "update now" link, so a retry click still works.' );
+		assert.strictEqual( $rowNotice.find( '#update-theme' ).length, 0, 'Row notice does not receive the overlay\'s link markup.' );
+		assert.strictEqual( $rowNotice.find( '.button-link' ).length, 1, 'Row notice keeps its own "Update now" button after cancel.' );
+	} );
+
 	// QUnit.test( 'A successful update changes the message?', function( assert ) {} );
 	// QUnit.test( 'A failed update changes the message?', function( assert ) {} );
 });