Social: Clean up the creating connection spinner for confirm button (#…

…37734) * Clean up the creating connection spinner for confirm button * Fix tests
Automattic · Jun 7, 2024 · f944539 · f944539
1 parent 8f59b54
commit f944539
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 56 deletions.
diff --git a/...packages/publicize-components/changelog/update-clean-up-creating-connection-spinner-logic b/...packages/publicize-components/changelog/update-clean-up-creating-connection-spinner-logic
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Clean up the creating connection spinner for confirm button
diff --git a/.../publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx b/.../publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx
@@ -53,12 +53,11 @@ function AccountInfo( { label, profile_picture }: AccountInfoProps ) {
  */
 export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: ConfirmationFormProps ) {
 	const supportedServices = useSupportedServices();
-	const { existingConnections, isCreatingConnection } = useSelect( select => {
+	const { existingConnections } = useSelect( select => {
 		const store = select( socialStore );
 
 		return {
 			existingConnections: store.getConnections(),
-			isCreatingConnection: store.isCreatingConnection(),
 		};
 	}, [] );
 
@@ -146,10 +145,14 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 				shared: formData.get( 'shared' ) === '1' ? true : undefined,
 			};
 
+			const accountInfo = accounts.not_connected.find(
+				option => option.value === external_user_ID
+			);
+
 			// Do not await the connection creation to unblock the UI
 			createConnection( data, {
-				display_name: formData.get( 'display_name' ),
-				profile_picture: formData.get( 'profile_picture' ),
+				display_name: accountInfo?.label,
+				profile_picture: accountInfo?.profile_picture,
 				service_name: service.ID,
 			} );
 
@@ -162,6 +165,7 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 			onComplete,
 			service.multiple_external_user_ID_support,
 			service.ID,
+			accounts.not_connected,
 		]
 	);
 
@@ -211,12 +215,6 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 											className={ styles[ 'account-input' ] }
 											required
 										/>
-										<input type="hidden" name="display_name" value={ option.label } />
-										<input
-											type="hidden"
-											name="profile_picture"
-											value={ option.profile_picture || '' }
-										/>
 										<AccountInfo
 											label={ option.label }
 											profile_picture={ option.profile_picture }
@@ -271,15 +269,8 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 					{ __( 'Cancel', 'jetpack' ) }
 				</Button>
 				{ accounts.not_connected.length ? (
-					<Button
-						form="connection-confirmation-form"
-						type="submit"
-						disabled={ isCreatingConnection }
-						isLoading={ isCreatingConnection }
-					>
-						{ isCreatingConnection
-							? _x( 'Connecting…', 'Connecting a social media account', 'jetpack' )
-							: __( 'Confirm', 'jetpack' ) }
+					<Button form="connection-confirmation-form" type="submit">
+						{ __( 'Confirm', 'jetpack' ) }
 					</Button>
 				) : null }
 			</div>

diff --git a/...licize-components/src/components/manage-connections-modal/tests/confirmation-form.test.js b/...licize-components/src/components/manage-connections-modal/tests/confirmation-form.test.js
@@ -78,8 +78,8 @@ describe( 'ConfirmationForm', () => {
 					shared: undefined,
 				},
 				{
-					display_name: 'Additional User 1',
-					profile_picture: 'https://example.com/additional1.jpg',
+					display_name: 'Additional User 2',
+					profile_picture: 'https://example.com/additional2.jpg',
 					service_name: 'service-1',
 				}
 			)

diff --git a/projects/js-packages/publicize-components/src/social-store/actions/connection-data.js b/projects/js-packages/publicize-components/src/social-store/actions/connection-data.js
@@ -5,7 +5,6 @@ import { store as editorStore } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	ADD_CONNECTION,
-	CREATING_CONNECTION,
 	DELETE_CONNECTION,
 	DELETING_CONNECTION,
 	SET_CONNECTIONS,
@@ -193,19 +192,6 @@ export function deletingConnection( connectionId, deleting = true ) {
 	};
 }
 
-/**
- * Whether a connection is being created.
- *
- * @param {boolean} creating - Whether the connection is being creating.
- * @returns {object} Creating connection action.
- */
-export function creatingConnection( creating = true ) {
-	return {
-		type: CREATING_CONNECTION,
-		creating,
-	};
-}
-
 /**
  * Deletes a connection by disconnecting it.
  *
@@ -275,7 +261,6 @@ export function createConnection( data, optimisticData = {} ) {
 		try {
 			const path = `/jetpack/v4/social/connections/`;
 
-			dispatch( creatingConnection() );
 			dispatch(
 				addConnection( {
 					connection_id: tempId,
@@ -327,7 +312,6 @@ export function createConnection( data, optimisticData = {} ) {
 
 			createErrorNotice( message, { type: 'snackbar', isDismissible: true } );
 		} finally {
-			dispatch( creatingConnection( false ) );
 			dispatch( updatingConnection( tempId, false ) );
 			// If the connection was not created, delete it.
 			dispatch( deleteConnection( tempId ) );

diff --git a/projects/js-packages/publicize-components/src/social-store/actions/constants.ts b/projects/js-packages/publicize-components/src/social-store/actions/constants.ts
@@ -8,8 +8,6 @@ export const DELETE_CONNECTION = 'DELETE_CONNECTION';
 
 export const DELETING_CONNECTION = 'DELETING_CONNECTION';
 
-export const CREATING_CONNECTION = 'CREATING_CONNECTION';
-
 export const UPDATE_CONNECTION = 'UPDATE_CONNECTION';
 
 export const UPDATING_CONNECTION = 'UPDATING_CONNECTION';

diff --git a/projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js b/projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js
@@ -1,6 +1,5 @@
 import {
 	ADD_CONNECTION,
-	CREATING_CONNECTION,
 	DELETE_CONNECTION,
 	DELETING_CONNECTION,
 	SET_CONNECTIONS,
@@ -51,12 +50,6 @@ const connectionData = ( state = {}, action ) => {
 			};
 		}
 
-		case CREATING_CONNECTION:
-			return {
-				...state,
-				creatingConnection: action.creating,
-			};
-
 		case UPDATE_CONNECTION:
 			return {
 				...state,

diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
@@ -151,15 +151,6 @@ export function getUpdatingConnections( state ) {
 	return state.connectionData?.updatingConnections ?? [];
 }
 
-/**
- * Whether a connection is being created.
- * @param {import("../types").SocialStoreState} state - State object.
- * @returns {boolean} Whether a connection is being created.
- */
-export function isCreatingConnection( state ) {
-	return state.connectionData?.creatingConnection ?? false;
-}
-
 /**
  * Whether a mastodon account is already connected.
  *

diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts
@@ -43,7 +43,6 @@ export type ConnectionData = {
 	connections: Connection[];
 	deletingConnections?: Array< number | string >;
 	updatingConnections?: Array< number | string >;
-	creatingConnection?: boolean;
 	keyringResult?: KeyringResult;
 };