Social | Update connections modal UI (#37420)

* Create services related UI

* Clean up

* Update connection list components

* Add changelog

* Add EOL

* Improve styling

* Remove unused import

* Fix connectin name underline

* Add optimistic update for connection update

* Reduce opacity for disabled items

* Fix chevron flip when panel is open

* Fix mastodon connection form

* Fix tooltip position

* EOL

* Hide inline connect button for mastodon on panel open

* Clean up

* Fix font size for account names

---------

Co-authored-by: Gergely Juhasz <gergely.juhasz@automattic.com>

projects/js-packages/publicize-components/changelog/update-social-connections-modal-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social | Updated connection modal UI

projects/js-packages/publicize-components/src/components/add-connection-modal/confirmation-form/index.tsx

@@ -10,7 +10,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { store as socialStore } from '../../../social-store';
 import { KeyringResult } from '../../../social-store/types';
-import { useSupportedServices } from '../use-supported-services';
+import { useSupportedServices } from '../../services/use-supported-services';
 import styles from './style.module.scss';
 
 type ConfirmationFormProps = {
@@ -36,9 +36,9 @@ function AccountInfo( { label, profile_picture }: AccountInfoProps ) {
 	return (
 		<div className={ styles[ 'account-info' ] }>
 			{ profile_picture ? (
-				<img className={ styles[ 'propfile-pic' ] } src={ profile_picture } alt={ label } />
+				<img className={ styles[ 'profile-pic' ] } src={ profile_picture } alt={ label } />
 			) : null }
-			{ label }&nbsp;
+			<span>{ label }</span>
 		</div>
 	);
 }
@@ -161,7 +161,7 @@ export function ConfirmationForm( { keyringResult, onComplete }: ConfirmationFor
 	return (
 		<section className={ styles.confirmation }>
 			{ ! accounts.not_connected.length ? (
-				<div>
+				<p className={ styles[ 'header-text' ] }>
 					{
 						// TODO Make this more useful. For example, in case of Instagram, we could show a message that only Instagra business accounts are supported.
 						accounts.connected.length
@@ -172,10 +172,10 @@ export function ConfirmationForm( { keyringResult, onComplete }: ConfirmationFor
 							  )
 							: __( 'No accounts/pages found.', 'jetpack' )
 					}
-				</div>
+				</p>
 			) : (
 				<div>
-					<p>
+					<p className={ styles[ 'header-text' ] }>
 						{ __(
 							`Select the account you'd like to connect. All your new blog posts will be automatically shared to this account. You'll be able to change this option in the editor sidebar when you're writing a post.`,
 							'jetpack'

projects/js-packages/publicize-components/src/components/add-connection-modal/confirmation-form/style.module.scss

@@ -1,4 +1,8 @@
 .confirmation {
+	.header-text {
+		font-size: 1rem;
+	}
+
 	.form {
 		margin-top: 2rem;
 		display: flex;
@@ -31,14 +35,15 @@
 		justify-content: end;
 	}
 
-	.propfile-pic {
+	.profile-pic {
 		width: 2rem;
 		height: 2rem;
 	}
 
 	.account-info {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem
+		gap: 0.5rem;
+		font-size: 1rem;
 	}
-}
+}

projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx

@@ -1,34 +1,27 @@
 import { useBreakpointMatch } from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { KeyringResult } from '../../social-store/types';
+import { ServicesList } from '../services/services-list';
+import { SupportedService } from '../services/use-supported-services';
 import { ConfirmationForm } from './confirmation-form';
-import { ConnectPage } from './connect-page/connect-page';
-import { ServicesList } from './services-list';
 import styles from './style.module.scss';
-import { SupportedService } from './use-supported-services';
 
 type AddConnectionModalProps = {
 	onCloseModal: VoidFunction;
-	currentService: SupportedService | null;
-	setCurrentService: ( service: SupportedService | null ) => void;
+	defaultExpandedService: SupportedService | null;
 };
 
 const AddConnectionModal = ( {
 	onCloseModal,
-	currentService,
-	setCurrentService,
+	defaultExpandedService,
 }: AddConnectionModalProps ) => {
 	const [ keyringResult, setKeyringResult ] = useState< KeyringResult | null >( null );
 
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
-	const onBackClicked = useCallback( () => {
-		setCurrentService( null );
-	}, [ setCurrentService ] );
-
 	const onConfirm = useCallback( ( result: KeyringResult ) => {
 		setKeyringResult( result );
 	}, [] );
@@ -40,27 +33,14 @@ const AddConnectionModal = ( {
 
 	const hasKeyringResult = Boolean( keyringResult?.ID );
 
-	// Use IIFE to avoid nested ternary and messed up minification
-	const title = ( selectedService => {
-		if ( hasKeyringResult ) {
-			return __( 'Connection confirmation', 'jetpack' );
-		}
-
-		if ( selectedService ) {
-			return sprintf(
-				// translators: %s: Name of the service the user connects to.
-				__( 'Connecting a new %s account', 'jetpack' ),
-				selectedService.label
-			);
-		}
-
-		return __( 'Add a new connection to Jetpack Social', 'jetpack' );
-	} )( currentService );
+	const title = hasKeyringResult
+		? __( 'Connection confirmation', 'jetpack' )
+		: _x( 'Add a new connection to Jetpack Social', '', 'jetpack' );
 
 	return (
 		<Modal
 			className={ classNames( styles.modal, {
-				[ styles[ 'service-selector' ] ]: ! currentService,
+				[ styles[ 'service-selector' ] ]: ! defaultExpandedService,
 				[ styles.small ]: isSmall,
 			} ) }
 			onRequestClose={ onCloseModal }
@@ -73,17 +53,12 @@ const AddConnectionModal = ( {
 						return <ConfirmationForm keyringResult={ keyringResult } onComplete={ onComplete } />;
 					}
 
-					if ( currentService ) {
-						return (
-							<ConnectPage
-								service={ currentService }
-								onBackClicked={ onBackClicked }
-								onConfirm={ onConfirm }
-							/>
-						);
-					}
-
-					return <ServicesList onSelectService={ setCurrentService } onConfirm={ onConfirm } />;
+					return (
+						<ServicesList
+							onConfirm={ onConfirm }
+							defaultExpandedService={ defaultExpandedService }
+						/>
+					);
 				} )()
 			}
 		</Modal>