diff --git a/projects/js-packages/publicize-components/changelog/update-social-select-the-reconnecting-account-by-default-on-confirmation-screen b/projects/js-packages/publicize-components/changelog/update-social-select-the-reconnecting-account-by-default-on-confirmation-screen new file mode 100644 index 0000000000000..ff27efceca7cc --- /dev/null +++ b/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 diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json index a9bcad791a093..da26ff630a94c 100644 --- a/projects/js-packages/publicize-components/package.json +++ b/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": { diff --git a/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx b/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx index bab4d746457b3..7dedd9865b39d 100644 --- a/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx +++ b/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,6 +58,12 @@ 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' ) { @@ -65,24 +71,22 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP } requestAccess( formData ); - }, [ connection, deleteConnectionById, requestAccess, service.ID ] ); + }, [ connection, deleteConnectionById, requestAccess, service.ID, setReconnectingAccount ] ); if ( ! connection.can_disconnect ) { return null; } return ( - <> - - + ); } diff --git a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx index b59d5db91e616..ee578ef4b0349 100644 --- a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx +++ b/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,6 +213,12 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir }
{ 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