Forms: Fix plugin button activating state (#45471)

Author: edanzer

projects/packages/forms/changelog/fix-form-plugin-install-load-state

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Forms: fix plugin activation state.

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/integration-card/integration-card-header.tsx

@@ -140,6 +140,7 @@ const IntegrationCardHeader = ( {
 							slug={ cardData.slug }
 							pluginFile={ cardData.pluginFile }
 							isInstalled={ isInstalled }
+							isActive={ isActive }
 							refreshStatus={ cardData.refreshStatus }
 							trackEventName={ cardData.trackEventName }
 						/>

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/integration-card/plugin-action-button.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { Button, Spinner, Tooltip } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -13,6 +14,7 @@ type PluginActionButtonProps = {
 	slug: string;
 	pluginFile: string;
 	isInstalled: boolean;
+	isActive: boolean;
 	refreshStatus: () => void;
 	trackEventName: string;
 };
@@ -21,6 +23,7 @@ const PluginActionButton = ( {
 	slug,
 	pluginFile,
 	isInstalled,
+	isActive,
 	refreshStatus,
 	trackEventName,
 }: PluginActionButtonProps ) => {
@@ -31,13 +34,13 @@ const PluginActionButton = ( {
 		trackEventName
 	);
 
-	// Permissions from consolidated Forms config (shared across editor and dashboard)
 	const config = useFormsConfig();
 	const canUserInstallPlugins = Boolean( config?.canInstallPlugins );
 	const canUserActivatePlugins = Boolean( config?.canActivatePlugins );
 
 	const canPerformAction = isInstalled ? canUserActivatePlugins : canUserInstallPlugins;
-	const isDisabled = isInstalling || ! canPerformAction;
+	const [ isReconcilingStatus, setIsReconcilingStatus ] = useState( false );
+	const isDisabled = isInstalling || isReconcilingStatus || ! canPerformAction;
 
 	const handleAction = async ( event: MouseEvent ) => {
 		event.stopPropagation();
@@ -47,14 +50,23 @@ const PluginActionButton = ( {
 		const success = await installPlugin();
 
 		if ( success && refreshStatus ) {
+			setIsReconcilingStatus( true ); // Keeps button in loading state until integrations refresh.
 			refreshStatus();
 		}
 	};
 
+	useEffect( () => {
+		if ( isReconcilingStatus && isActive ) {
+			setIsReconcilingStatus( false ); // Removes button loading state when integratoin status is recevied and isActive.
+		}
+	}, [ isReconcilingStatus, isActive ] );
+
 	const getButtonText = () => {
 		return (
-			( isInstalling && isInstalled && __( 'Activating…', 'jetpack-forms' ) ) ||
-			( isInstalling && __( 'Installing…', 'jetpack-forms' ) ) ||
+			( ( isInstalling || isReconcilingStatus ) &&
+				isInstalled &&
+				__( 'Activating…', 'jetpack-forms' ) ) ||
+			( ( isInstalling || isReconcilingStatus ) && __( 'Installing…', 'jetpack-forms' ) ) ||
 			( isInstalled && __( 'Activate', 'jetpack-forms' ) ) ||
 			__( 'Install', 'jetpack-forms' )
 		);
@@ -89,7 +101,7 @@ const PluginActionButton = ( {
 					onClick={ handleAction }
 					disabled={ isDisabled }
 					style={ isDisabled ? { pointerEvents: 'none' } : undefined }
-					icon={ isInstalling ? <Spinner /> : undefined }
+					icon={ isInstalling || isReconcilingStatus ? <Spinner /> : undefined }
 					__next40pxDefaultSize
 				>
 					{ getButtonText() }

projects/plugins/jetpack/changelog/fix-form-plugin-install-load-state

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Forms: fix plugin activation state.