Replace/remove deprecated props usage

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

@@ -27,7 +27,7 @@ export function ConnectionInfo( { connection, service }: ConnectionInfoProps ) {
 			<div className={ styles[ 'connection-item' ] }>
 				<ConnectionIcon
 					serviceName={ connection.service_name }
-					label={ connection.display_name || connection.external_display }
+					label={ connection.display_name }
 					profilePicture={ connection.profile_picture }
 				/>
 				<div className={ styles[ 'connection-name-wrapper' ] }>

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

@@ -27,12 +27,10 @@ export function ConnectionName( { connection }: ConnectionNameProps ) {
 	return (
 		<div className={ styles[ 'connection-name' ] }>
 			{ ! connection.profile_link ? (
-				<span className={ styles[ 'profile-link' ] }>
-					{ connection.display_name || connection.external_name }
-				</span>
+				<span className={ styles[ 'profile-link' ] }>{ connection.display_name }</span>
 			) : (
 				<ExternalLink className={ styles[ 'profile-link' ] } href={ connection.profile_link }>
-					{ connection.display_name || connection.external_display || connection.external_name }
+					{ connection.display_name }
 				</ExternalLink>
 			) }
 			{ isUpdating ? (

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

@@ -63,7 +63,7 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP
 		const formData = new FormData();
 
 		if ( service.ID === 'mastodon' ) {
-			formData.set( 'instance', connection.external_display );
+			formData.set( 'instance', connection.external_handle );
 		}
 
 		if ( service.ID === 'bluesky' ) {

projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx

@@ -1,37 +1,31 @@
 import { Button } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { createInterpolateElement, Fragment } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
-import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store } from '../../social-store';
 import { Connection } from '../../social-store/types';
-import { checkConnectionCode } from '../../utils/connections';
 import { getSocialScriptData } from '../../utils/script-data';
 import Notice from '../notice';
 import { useServiceLabel } from '../services/use-service-label';
 import styles from './styles.module.scss';
 
 export const BrokenConnectionsNotice: React.FC = () => {
-	const { connections } = useSocialMediaConnections();
-
-	const brokenConnections = connections.filter( connection => {
-		return (
-			connection.status === 'broken' ||
-			// This is a legacy check for connections that are not healthy.
-			// TODO remove this check when we are sure that all connections have
-			// the status property (same schema for connections endpoints), e.g. on Simple/Atomic sites
-			checkConnectionCode( connection, 'broken' )
-		);
-	} );
+	const brokenConnections = useSelect( select => select( store ).getBrokenConnections(), [] );
 
 	const { connectionsPageUrl } = usePublicizeConfig();
 
-	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
-
 	const { openConnectionsModal } = useDispatch( store );
 
+	const getServiceLabel = useServiceLabel();
+
+	if ( ! brokenConnections.length ) {
+		return null;
+	}
+
+	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+
 	const fixLink = useAdminUiV1 ? (
 		<Button
 			variant="link"
@@ -42,12 +36,6 @@ export const BrokenConnectionsNotice: React.FC = () => {
 		<ExternalLink href={ connectionsPageUrl } />
 	);
 
-	const getServiceLabel = useServiceLabel();
-
-	if ( ! brokenConnections.length ) {
-		return null;
-	}
-
 	// Group broken connections by service
 	// Since Object.groupBy is not supported widely yet, we use a manual grouping
 	const brokenConnectionsList = brokenConnections.reduce< Record< string, Array< Connection > > >(
@@ -87,11 +75,9 @@ export const BrokenConnectionsNotice: React.FC = () => {
 									{
 										// Since Intl.ListFormat is not allowed in Jetpack yet,
 										// we join the connections with a comma and space
-										connectionsList.map( ( { display_name, external_display, id }, i ) => (
-											<Fragment key={ id }>
-												<span className={ styles[ 'broken-connection' ] }>
-													{ display_name || external_display }
-												</span>
+										connectionsList.map( ( { display_name, connection_id }, i ) => (
+											<Fragment key={ connection_id }>
+												<span className={ styles[ 'broken-connection' ] }>{ display_name }</span>
 												{ i < connectionsList.length - 1 &&
 													_x(
 														',',

projects/js-packages/publicize-components/src/components/form/connections-list.tsx

@@ -35,18 +35,17 @@ export const ConnectionsList: React.FC = () => {
 		<div>
 			<ul className={ styles[ 'connections-list' ] }>
 				{ connections.map( conn => {
-					const { display_name, id, service_name, profile_picture, connection_id } = conn;
-					const currentId = connection_id ? connection_id : id;
+					const { display_name, service_name, profile_picture, connection_id } = conn;
 
 					return (
 						<PublicizeConnection
 							disabled={ shouldBeDisabled( conn ) }
 							enabled={ canBeTurnedOn( conn ) && conn.enabled }
-							key={ currentId }
-							id={ currentId }
+							key={ connection_id }
+							id={ connection_id }
 							label={ display_name }
 							name={ service_name }
-							toggleConnection={ toggleConnection( currentId, conn ) }
+							toggleConnection={ toggleConnection( connection_id, conn ) }
 							profilePicture={ profile_picture }
 						/>
 					);

projects/js-packages/publicize-components/src/components/form/unsupported-connections-notice.tsx

@@ -3,16 +3,18 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { usePublicizeConfig } from '../../..';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
-import { checkConnectionCode } from '../../utils/connections';
 import Notice from '../notice';
+import { useService } from '../services/use-service';
 
 export const UnsupportedConnectionsNotice: React.FC = () => {
 	const { connections } = useSocialMediaConnections();
 
 	const { connectionsPageUrl } = usePublicizeConfig();
 
+	const getServices = useService();
+
 	const unsupportedConnections = connections.filter( connection =>
-		checkConnectionCode( connection, 'unsupported' )
+		getServices( connection.service_name )
 	);
 
 	return (

projects/js-packages/publicize-components/src/components/form/use-connection-state.ts

@@ -31,17 +31,16 @@ export const useConnectionState = () => {
 	 */
 	const isInGoodShape = useCallback(
 		( connection: Connection ) => {
-			const { id, is_healthy, connection_id, status } = connection;
-			const currentId = connection_id ? connection_id : id;
+			const { connection_id: id, status } = connection;
 
 			// 1. Be healthy
-			const isHealthy = false !== is_healthy && status !== 'broken';
+			const isHealthy = status !== 'broken';
 
 			// 2. Have no validation errors
-			const hasValidationErrors = validationErrors[ currentId ] !== undefined && ! isConvertible;
+			const hasValidationErrors = validationErrors[ id ] !== undefined && ! isConvertible;
 
 			// 3. Not have a NO_MEDIA_ERROR when media is required
-			const hasNoMediaError = validationErrors[ currentId ] === NO_MEDIA_ERROR;
+			const hasNoMediaError = validationErrors[ id ] === NO_MEDIA_ERROR;
 
 			return isHealthy && ! hasValidationErrors && ! hasNoMediaError;
 		},

projects/js-packages/publicize-components/src/components/services/custom-inputs.tsx

@@ -73,7 +73,7 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 						name="handle"
 						defaultValue={
 							reconnectingAccount?.service_name === 'bluesky'
-								? reconnectingAccount?.external_name
+								? reconnectingAccount?.external_handle
 								: undefined
 						}
 						autoComplete="off"

projects/js-packages/publicize-components/src/components/social-post-modal/post-preview.tsx

@@ -33,9 +33,9 @@ export type PostPreviewProps = {
 export function PostPreview( { connection }: PostPreviewProps ) {
 	const user = useMemo(
 		() => ( {
-			displayName: connection.display_name || connection.external_display,
+			displayName: connection.display_name,
 			profileImage: connection.profile_picture,
-			externalName: connection.external_name,
+			externalName: connection.external_handle,
 		} ),
 		[ connection ]
 	);

projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx

@@ -33,7 +33,7 @@ export function PreviewSection() {
 					// to avoid errors for old connections like Twitter
 					.filter( ( { service_name } ) => getService( service_name ) )
 					.map( connection => {
-						const title = connection.display_name || connection.external_display;
+						const title = connection.display_name;
 						const name = `${ connection.service_name }-${ connection.connection_id }`;
 						const icon = (
 							<ConnectionIcon

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

@@ -91,10 +91,8 @@ export function mergeConnections( freshConnections: Array< Connection > ) {
 		 * in order to refresh or update current connections.
 		 */
 		for ( const freshConnection of freshConnections ) {
-			const prevConnection = prevConnections.find( conn =>
-				conn.connection_id
-					? conn.connection_id === freshConnection.connection_id
-					: conn.id === freshConnection.id
+			const prevConnection = prevConnections.find(
+				conn => conn.connection_id === freshConnection.connection_id
 			);
 
 			const connection = {
@@ -386,7 +384,7 @@ export function createConnection(
 					sprintf(
 						/* translators: %s is the name of the social media platform e.g. "Facebook" */
 						__( '%s account connected successfully.', 'jetpack-publicize-components' ),
-						connection.label
+						connection.service_label
 					),
 					{
 						type: 'snackbar',

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

@@ -133,11 +133,7 @@ const connectionData = ( state: ConnectionData = { connections: [] }, action ) =
 			return {
 				...state,
 				connections: state.connections.map( connection => {
-					// If the connection has a connection_id, then give it priority.
-					// Otherwise, use the id.
-					const isTargetConnection = connection.connection_id
-						? connection.connection_id === action.connectionId
-						: connection.id === action.connectionId;
+					const isTargetConnection = connection.connection_id === action.connectionId;
 
 					if ( isTargetConnection ) {
 						return {

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

@@ -1,4 +1,3 @@
-import { checkConnectionCode } from '../../utils/connections';
 import { REQUEST_TYPE_DEFAULT } from '../actions/constants';
 
 /**
@@ -32,13 +31,7 @@ export function getConnectionById( state, connectionId ) {
  */
 export function getBrokenConnections( state ) {
 	return getConnections( state ).filter( connection => {
-		return (
-			connection.status === 'broken' ||
-			// This is a legacy check for connections that are not healthy.
-			// TODO remove this check when we are sure that all connections have
-			// the status property (same schema for connections endpoints), e.g. on Simple/Atomic sites
-			checkConnectionCode( connection, 'broken' )
-		);
+		return connection.status === 'broken';
 	} );
 }