Social Connections: Select the reconnecting account by default on con…

…firmation screen (#38193)

* Social: Select the reconnecting account by default on confirmation screen

* Add changelog

* Fix up versions

* Prevent an account from being selected if it's already being created

* Fix unit tests

projects/js-packages/publicize-components/changelog/update-social-select-the-reconnecting-account-by-default-on-confirmation-screen

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Updated the connections cofirmation logic to preselect the reconnecting account by default on confirmation screen

projects/js-packages/publicize-components/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.55.1",
+	"version": "0.55.2-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx

@@ -21,7 +21,7 @@ export type ReconnectProps = {
  * @returns {import('react').ReactNode} - React element
  */
 export function Reconnect( { connection, service, variant = 'link' }: ReconnectProps ) {
-	const { deleteConnectionById, setKeyringResult, openConnectionsModal } =
+	const { deleteConnectionById, setKeyringResult, openConnectionsModal, setReconnectingAccount } =
 		useDispatch( socialStore );
 
 	const { isDisconnecting } = useSelect(
@@ -58,31 +58,35 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP
 			return;
 		}
 
+		await setReconnectingAccount(
+			// Join service name and external ID
+			// just in case the external ID alone is not unique.
+			`${ connection.service_name }:${ connection.external_id }`
+		);
+
 		const formData = new FormData();
 
 		if ( service.ID === 'mastodon' ) {
 			formData.set( 'instance', connection.external_display );
 		}
 
 		requestAccess( formData );
-	}, [ connection, deleteConnectionById, requestAccess, service.ID ] );
+	}, [ connection, deleteConnectionById, requestAccess, service.ID, setReconnectingAccount ] );
 
 	if ( ! connection.can_disconnect ) {
 		return null;
 	}
 
 	return (
-		<>
-			<Button
-				size="small"
-				onClick={ onClickReconnect }
-				disabled={ isDisconnecting }
-				variant={ variant }
-			>
-				{ isDisconnecting
-					? __( 'Disconnecting…', 'jetpack' )
-					: _x( 'Reconnect', 'Reconnect a social media account', 'jetpack' ) }
-			</Button>
-		</>
+		<Button
+			size="small"
+			onClick={ onClickReconnect }
+			disabled={ isDisconnecting }
+			variant={ variant }
+		>
+			{ isDisconnecting
+				? __( 'Disconnecting…', 'jetpack' )
+				: _x( 'Reconnect', 'Reconnect a social media account', 'jetpack' ) }
+		</Button>
 	);
 }

projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx

@@ -53,11 +53,12 @@ function AccountInfo( { label, profile_picture }: AccountInfoProps ) {
  */
 export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: ConfirmationFormProps ) {
 	const supportedServices = useSupportedServices();
-	const { existingConnections } = useSelect( select => {
+	const { existingConnections, reconnectingAccount } = useSelect( select => {
 		const store = select( socialStore );
 
 		return {
 			existingConnections: store.getConnections(),
+			reconnectingAccount: store.getReconnectingAccount(),
 		};
 	}, [] );
 
@@ -121,7 +122,7 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 		return { connected, not_connected };
 	}, [ isAlreadyConnected, keyringResult, service ] );
 
-	const { createConnection } = useDispatch( socialStore );
+	const { createConnection, setReconnectingAccount } = useDispatch( socialStore );
 
 	const onConfirm = useCallback(
 		async ( event: React.FormEvent ) => {
@@ -149,17 +150,24 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 				option => option.value === external_user_ID
 			);
 
+			if ( reconnectingAccount ) {
+				setReconnectingAccount( '' );
+			}
+
 			// Do not await the connection creation to unblock the UI
 			createConnection( data, {
 				display_name: accountInfo?.label,
 				profile_picture: accountInfo?.profile_picture,
 				service_name: service.ID,
+				external_id: external_user_ID,
 			} );
 
 			onComplete();
 		},
 		[
 			createConnection,
+			reconnectingAccount,
+			setReconnectingAccount,
 			createErrorNotice,
 			keyringResult.ID,
 			onComplete,
@@ -205,14 +213,20 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 						 }
 						<div className={ styles[ 'accounts-list' ] }>
 							{ accounts.not_connected.map( ( option, index ) => {
+								// If we are reconnecting an account, preselect it,
+								// otherwise, preselect the first account
+								const defaultChecked = reconnectingAccount
+									? reconnectingAccount === `${ service?.ID }:${ option.value }`
+									: index === 0;
+
 								return (
 									// eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/869
 									<label key={ option.value } className={ styles[ 'account-label' ] } aria-required>
 										<input
 											type="radio"
 											name="external_user_ID"
 											value={ option.value }
-											defaultChecked={ index === 0 }
+											defaultChecked={ defaultChecked }
 											className={ styles[ 'account-input' ] }
 											required
 										/>

projects/js-packages/publicize-components/src/components/manage-connections-modal/tests/confirmation-form.test.js

@@ -81,6 +81,7 @@ describe( 'ConfirmationForm', () => {
 					display_name: 'Additional User 2',
 					profile_picture: 'https://example.com/additional2.jpg',
 					service_name: 'service-1',
+					external_id: 'additional-2',
 				}
 			)
 		);
@@ -103,6 +104,7 @@ describe( 'ConfirmationForm', () => {
 					display_name: 'Additional User 1',
 					profile_picture: 'https://example.com/additional1.jpg',
 					service_name: 'service-1',
+					external_id: 'additional-1',
 				}
 			)
 		);

projects/js-packages/publicize-components/src/social-store/actions/connection-data.js

@@ -7,6 +7,7 @@ import {
 	ADD_CONNECTION,
 	DELETE_CONNECTION,
 	DELETING_CONNECTION,
+	SET_RECONNECTING_ACCOUNT,
 	SET_CONNECTIONS,
 	SET_KEYRING_RESULT,
 	TOGGLE_CONNECTION,
@@ -352,6 +353,20 @@ export function updatingConnection( connectionId, updating = true ) {
 	};
 }
 
+/**
+ * Sets the reconnecting account.
+ *
+ * @param {string} reconnectingAccount - Account being reconnected.
+ *
+ * @returns {object} Reconnecting account action.
+ */
+export function setReconnectingAccount( reconnectingAccount ) {
+	return {
+		type: SET_RECONNECTING_ACCOUNT,
+		reconnectingAccount,
+	};
+}
+
 /**
  * Updates a connection.
  *

projects/js-packages/publicize-components/src/social-store/actions/constants.ts

@@ -12,6 +12,8 @@ export const UPDATE_CONNECTION = 'UPDATE_CONNECTION';
 
 export const UPDATING_CONNECTION = 'UPDATING_CONNECTION';
 
+export const SET_RECONNECTING_ACCOUNT = 'SET_RECONNECTING_ACCOUNT';
+
 export const SET_KEYRING_RESULT = 'SET_KEYRING_RESULT';
 
 export const TOGGLE_CONNECTIONS_MODAL = 'TOGGLE_CONNECTIONS_MODAL';

projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js

@@ -2,6 +2,7 @@ import {
 	ADD_CONNECTION,
 	DELETE_CONNECTION,
 	DELETING_CONNECTION,
+	SET_RECONNECTING_ACCOUNT,
 	SET_CONNECTIONS,
 	SET_KEYRING_RESULT,
 	TOGGLE_CONNECTION,
@@ -56,6 +57,13 @@ const connectionData = ( state = {}, action ) => {
 			};
 		}
 
+		case SET_RECONNECTING_ACCOUNT: {
+			return {
+				...state,
+				reconnectingAccount: action.reconnectingAccount,
+			};
+		}
+
 		case UPDATE_CONNECTION:
 			return {
 				...state,

projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js

@@ -151,6 +151,16 @@ export function getUpdatingConnections( state ) {
 	return state.connectionData?.updatingConnections ?? [];
 }
 
+/**
+ * Get the account being reconnected
+ *
+ * @param {import("../types").SocialStoreState} state - State object.
+ * @returns {import("../types").ConnectionData['reconnectingAccount']} The account being reconnected.
+ */
+export function getReconnectingAccount( state ) {
+	return state.connectionData?.reconnectingAccount ?? '';
+}
+
 /**
  * Whether a mastodon account is already connected.
  *

projects/js-packages/publicize-components/src/social-store/types.ts

@@ -43,6 +43,7 @@ export type ConnectionData = {
 	connections: Connection[];
 	deletingConnections?: Array< number | string >;
 	updatingConnections?: Array< number | string >;
+	reconnectingAccount?: string;
 	keyringResult?: KeyringResult;
 };