Social: Create a social service connect button

This is currently a proof of concept where we get the available external
services and render a connect button, which in turn triggers the
authentication flow for each service.

To test it, the site must be sandboxed with D146389-code applied.

projects/js-packages/publicize-components/index.ts

@@ -5,6 +5,7 @@ import './src/social-store';
 
 export { default as Connection } from './src/components/connection';
 export { default as ConnectionVerify } from './src/components/connection-verify';
+export { default as ConnectButton } from './src/components/connect-button';
 export { default as Form } from './src/components/form';
 export { default as SocialPreviewsModal } from './src/components/social-previews/modal';
 export { default as SocialPreviewsPanel } from './src/components/social-previews/panel';

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

@@ -22,6 +22,7 @@
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
+		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/social-previews": "2.0.1-beta.13",
 		"@wordpress/annotations": "2.56.0",
 		"@wordpress/api-fetch": "6.53.0",

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

@@ -19,6 +19,7 @@ export interface Connection {
 	description: string;
 	name: string;
 	examples?: Array< React.ComponentType >;
+	connectUrl?: string;
 }
 
 export const getSupportedConnections = (): Connection[] => {

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

@@ -4,11 +4,34 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown } from '@wordpress/icons';
 import classNames from 'classnames';
 import { useCallback, useState } from 'react';
+import { store } from '../../social-store';
+import ConnectButton from '../connect-button';
 import { ConnectPage } from './connect-page/connect-page';
 import { getSupportedConnections } from './constants';
 import styles from './style.module.scss';
 
 const AddConnectionModal = ( { onCloseModal } ) => {
+	const supportedServices = useSelect( select => {
+		const supportedConnections = getSupportedConnections();
+		const services = select( store )
+			.getServices()
+			.filter( service => service.type === 'publicize' )
+			.reduce(
+				( serviceData, service ) => ( {
+					...serviceData,
+					[ service.ID ]: service.connect_Url,
+				} ),
+				{}
+			);
+
+		return supportedConnections
+			.filter( connection => Object.hasOwn( services, connection.name ) )
+			.map( connection => {
+				connection.connectUrl = services[ connection.name ];
+				return connection;
+			} );
+	}, [] );
+
 	const [ currentService, setCurrentService ] = useState( null );
 
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
@@ -53,7 +76,7 @@ const AddConnectionModal = ( { onCloseModal } ) => {
 						</tr>
 					</thead>
 					<tbody>
-						{ getSupportedConnections().map( service => (
+						{ supportedServices.map( service => (
 							<tr key={ service.name }>
 								<td>
 									<service.icon iconSize={ isSmall ? 36 : 48 } />
@@ -70,9 +93,12 @@ const AddConnectionModal = ( { onCloseModal } ) => {
 								</td>
 								<td>
 									<div className={ styles[ 'column-actions' ] }>
-										<Button type="submit" variant="primary" size={ isSmall ? 'small' : 'normal' }>
-											{ __( 'Connect', 'jetpack' ) }
-										</Button>
+										<ConnectButton
+											connectUrl={ service.connectUrl }
+											onClose={ res => console.log( res ) }
+											key={ service.name }
+											size={ isSmall ? 'small' : 'normal' }
+										/>
 										<Button
 											size={ isSmall ? 'small' : 'normal' }
 											className={ styles[ 'chevron-button' ] }

projects/js-packages/publicize-components/src/components/connect-button/index.js

@@ -0,0 +1,18 @@
+import { Button } from '@automattic/jetpack-components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { requestExternalAccess } from '../../utils/request-external-access.js';
+
+const ConnectButton = ( { connectUrl, onClose, className = null, size = 'normal' } ) => {
+	const requestConnection = useCallback(
+		() => requestExternalAccess( connectUrl, onClose ),
+		[ connectUrl, onClose ]
+	);
+	return (
+		<Button className={ className } variant="primary" onClick={ requestConnection } size={ size }>
+			{ __( 'Connect', 'jetpack' ) }
+		</Button>
+	);
+};
+
+export default ConnectButton;

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

@@ -106,3 +106,14 @@ export function getConnectionProfileDetails( state, service, { forceDefaults = f
 
 	return { displayName, profileImage, username };
 }
+
+/**
+ * Returns the services list from the store.
+ *
+ * @param {import("../types").SocialStoreState} state - State object.
+ *
+ * @returns {Array} The services list
+ */
+export function getServices( state ) {
+	return state.connectionData?.services ?? [];
+}

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

@@ -12,6 +12,7 @@ type JetpackSettingsSelectors = {
 
 type ConnectionDataSelectors = {
 	getConnections: () => Array< object >;
+	getServices: () => Array< object >;
 	getConnectionsAdminUrl: () => string;
 	hasConnections: () => boolean;
 };

projects/js-packages/publicize-components/src/utils/index.js

@@ -1,3 +1,4 @@
 export * from './get-share-message-max-length';
 export * from './get-supported-additional-connections';
+export * from './request-external-access';
 export * from './types';

projects/js-packages/publicize-components/src/utils/request-external-access.js

@@ -0,0 +1,34 @@
+import PopupMonitor from '@automattic/popup-monitor';
+
+/**
+ * The callback function of the requestExternalAccess utility.
+ * @callback requestCallback
+ * @param {object} result - Received authentication data.
+ * @param {number} result.keyring_id
+ * @param {string} result.id_token
+ * @param {object} result.user
+ */
+
+/**
+ * Utility for requesting authorization of sharing services.
+ * @param {string} url - The URL to be loaded in the newly opened window.
+ * @param {requestCallback} cb - The callback that handles the response.
+ */
+export const requestExternalAccess = ( url, cb ) => {
+	const popupMonitor = new PopupMonitor();
+	let lastMessage;
+
+	popupMonitor.open(
+		url,
+		null,
+		'toolbar=0,location=0,status=0,menubar=0,' + popupMonitor.getScreenCenterSpecs( 780, 700 )
+	);
+
+	popupMonitor.once( 'close', () => {
+		cb( lastMessage?.ID ? lastMessage : {} );
+	} );
+
+	popupMonitor.on( 'message', message => {
+		lastMessage = message?.data;
+	} );
+};

projects/plugins/social/src/class-jetpack-social.php

@@ -11,6 +11,7 @@
 
 use Automattic\Jetpack\Admin_UI\Admin_Menu;
 use Automattic\Jetpack\Assets;
+use Automattic\Jetpack\Connection\Client;
 use Automattic\Jetpack\Connection\Initial_State as Connection_Initial_State;
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Automattic\Jetpack\Connection\Rest_Authentication as Connection_Rest_Authentication;
@@ -256,6 +257,7 @@ public function initial_state() {
 					'connectionData'  => array(
 						'connections' => $publicize->get_all_connections_for_user(), // TODO: Sanitize the array
 						'adminUrl'    => esc_url_raw( $publicize->publicize_connections_url( 'jetpack-social-connections-admin-page' ) ),
+						'services'    => $this->get_services(),
 					),
 					'sharesData'      => $publicize->get_publicize_shares_info( Jetpack_Options::get_option( 'id' ) ),
 				),
@@ -266,6 +268,20 @@ public function initial_state() {
 		return $state;
 	}
 
+	public function get_services() {
+		$site_id = Connection_Manager::get_site_id();
+		if ( is_wp_error( $site_id ) ) {
+			return [];
+		}
+		$path     = sprintf( '/sites/%d/external-services', $site_id );
+		$response = Client::wpcom_json_api_request_as_user( $path );
+		if ( is_wp_error( $response ) ) {
+			return [];
+		}
+		$body = json_decode( wp_remote_retrieve_body( $response ) );
+		return array_values( (array) $body->services ) ?? [];
+	}
+
 	/**
 	 * Returns a boolean as to whether we have a plan that supports
 	 * sharing beyond the free limit.