Merge remote-tracking branch 'origin/trunk' into update/sso-use-package

Automattic · May 10, 2024 · c562446 · c562446
2 parents f4a1a59 + 6875975
commit c562446
Show file tree

Hide file tree

Showing 51 changed files with 313 additions and 119 deletions.
diff --git a/projects/js-packages/components/changelog/fix-social-icon-colours b/projects/js-packages/components/changelog/fix-social-icon-colours
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added --jp-gray-5 as an alias of --jp-gray to the theme
diff --git a/projects/js-packages/components/components/theme-provider/index.tsx b/projects/js-packages/components/components/theme-provider/index.tsx
@@ -25,6 +25,7 @@ export const colors = {
 	// Gray
 	'--jp-gray': '#dcdcde',
 	'--jp-gray-0': '#F6F7F7',
+	'--jp-gray-5': 'var(--jp-gray)',
 	'--jp-gray-10': '#C3C4C7',
 	'--jp-gray-20': '#A7AAAD',
 	'--jp-gray-40': '#787C82',

diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.53.1",
+	"version": "0.53.2-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

diff --git a/...ts/js-packages/publicize-components/changelog/add-social-connections-disconnection-dialog b/...ts/js-packages/publicize-components/changelog/add-social-connections-disconnection-dialog
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Social Connections: Added disconnection confirmation dialog
diff --git a/...-packages/publicize-components/src/components/connection-management/connection-status.tsx b/...-packages/publicize-components/src/components/connection-management/connection-status.tsx
@@ -36,6 +36,7 @@ export function ConnectionStatus( { connection, onReconnect }: ConnectionStatusP
 				onDisconnect={ onReconnect }
 				variant="link"
 				isDestructive={ false }
+				showConfirmation={ false }
 			/>
 		</div>
 	);

diff --git a/...ects/js-packages/publicize-components/src/components/connection-management/disconnect.tsx b/...ects/js-packages/publicize-components/src/components/connection-management/disconnect.tsx
@@ -1,9 +1,12 @@
 import { Button } from '@automattic/jetpack-components';
+// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
+import { createInterpolateElement, useCallback, useReducer } from '@wordpress/element';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as socialStore } from '../../social-store';
 import { Connection } from '../../social-store/types';
+import styles from './style.module.scss';
 
 export type DisconnectProps = {
 	connection: Connection;
@@ -12,6 +15,7 @@ export type DisconnectProps = {
 	showSuccessNotice?: boolean;
 	variant?: React.ComponentProps< typeof Button >[ 'variant' ];
 	isDestructive?: boolean;
+	showConfirmation?: boolean;
 };
 
 /**
@@ -28,7 +32,10 @@ export function Disconnect( {
 	showSuccessNotice = true,
 	variant = 'secondary',
 	isDestructive = true,
+	showConfirmation = true,
 }: DisconnectProps ) {
+	const [ isConfirmOpen, toggleConfirm ] = useReducer( state => ! state, false );
+
 	const { deleteConnectionById } = useDispatch( socialStore );
 
 	const { isDisconnecting } = useSelect(
@@ -43,6 +50,8 @@ export function Disconnect( {
 	);
 
 	const onClickDisconnect = useCallback( async () => {
+		toggleConfirm();
+
 		await deleteConnectionById( {
 			connectionId: connection.connection_id,
 			showSuccessNotice,
@@ -56,16 +65,37 @@ export function Disconnect( {
 	}
 
 	return (
-		<Button
-			size="small"
-			onClick={ onClickDisconnect }
-			disabled={ isDisconnecting }
-			variant={ variant }
-			isDestructive={ isDestructive }
-		>
-			{ isDisconnecting
-				? __( 'Disconnecting…', 'jetpack' )
-				: label || _x( 'Disconnect', 'Disconnect a social media account', 'jetpack' ) }
-		</Button>
+		<>
+			{ showConfirmation && (
+				<ConfirmDialog
+					className={ styles.confirmDialog }
+					isOpen={ isConfirmOpen }
+					onConfirm={ onClickDisconnect }
+					onCancel={ toggleConfirm }
+					cancelButtonText={ __( 'Cancel', 'jetpack' ) }
+					confirmButtonText={ __( 'Yes', 'jetpack' ) }
+				>
+					{ createInterpolateElement(
+						sprintf(
+							// translators: %s: The name of the connection the user is disconnecting.
+							__( 'Are you sure you want to disconnect <strong>%s</strong>?', 'jetpack' ),
+							connection.display_name
+						),
+						{ strong: <strong></strong> }
+					) }
+				</ConfirmDialog>
+			) }
+			<Button
+				size="small"
+				onClick={ showConfirmation ? toggleConfirm : onClickDisconnect }
+				disabled={ isDisconnecting }
+				variant={ variant }
+				isDestructive={ isDestructive }
+			>
+				{ isDisconnecting
+					? __( 'Disconnecting…', 'jetpack' )
+					: label || _x( 'Disconnect', 'Disconnect a social media account', 'jetpack' ) }
+			</Button>
+		</>
 	);
 }
diff --git a/...s/js-packages/publicize-components/src/components/connection-management/style.module.scss b/...s/js-packages/publicize-components/src/components/connection-management/style.module.scss
@@ -33,7 +33,9 @@
 	cursor: default;
 }
 
-
+.confirmDialog span {
+	font-size: 15px;
+}
 
 // Table padding
 td {

diff --git a/projects/packages/connection/changelog/update-invite-user-error-response-logging b/projects/packages/connection/changelog/update-invite-user-error-response-logging
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+SSO: Improve user invite error logging
diff --git a/projects/packages/connection/changelog/update-jetpack-sso-tooltip-accessibility b/projects/packages/connection/changelog/update-jetpack-sso-tooltip-accessibility
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+SSO: Ensuring tooltips are accessible
diff --git a/projects/packages/connection/composer.json b/projects/packages/connection/composer.json
@@ -69,7 +69,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-connection/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "2.7.x-dev"
+			"dev-trunk": "2.8.x-dev"
 		},
 		"dependencies": {
 			"test-only": [

diff --git a/projects/packages/connection/src/class-package-version.php b/projects/packages/connection/src/class-package-version.php
@@ -12,7 +12,7 @@
  */
 class Package_Version {
 
-	const PACKAGE_VERSION = '2.7.8-alpha';
+	const PACKAGE_VERSION = '2.8.0-alpha';
 
 	const PACKAGE_SLUG = 'connection';
 

diff --git a/projects/packages/connection/src/sso/class-user-admin.php b/projects/packages/connection/src/sso/class-user-admin.php
@@ -112,12 +112,18 @@ public function revoke_user_invite( $user_id ) {
 				$event    = 'sso_user_invite_revoked';
 
 				if ( 200 !== wp_remote_retrieve_response_code( $response ) ) {
+					$body                = json_decode( wp_remote_retrieve_body( $response ) );
+					$tracking_event_data = array(
+						'success'    => 'false',
+						'error_code' => 'invalid-revoke-api-error',
+					);
+
+					if ( ! empty( $body ) && ! empty( $body->message ) ) {
+						$tracking_event_data['error_message'] = $body->message;
+					}
 					self::$tracking->record_user_event(
 						$event,
-						array(
-							'success'       => 'false',
-							'error_message' => 'invalid-revoke-api-error',
-						)
+						$tracking_event_data
 					);
 					return $response;
 				}
@@ -171,6 +177,10 @@ public function handle_invitation_results() {
 			return wp_admin_notice( __( 'User invite revoked successfully.', 'jetpack-connection' ), array( 'type' => 'success' ) );
 		}
 
+		if ( $_GET['jetpack-sso-invite-user'] === 'failed' && isset( $_GET['jetpack-sso-api-error-message'] ) ) {
+			return wp_admin_notice( wp_kses( wp_unslash( $_GET['jetpack-sso-api-error-message'] ), array() ), array( 'type' => 'error' ) );
+		}
+
 		if ( $_GET['jetpack-sso-invite-user'] === 'failed' && isset( $_GET['jetpack-sso-invite-error'] ) ) {
 			switch ( $_GET['jetpack-sso-invite-error'] ) {
 				case 'invalid-user':
@@ -261,19 +271,27 @@ public function invite_user_to_wpcom() {
 			);
 
 			if ( 200 !== wp_remote_retrieve_response_code( $response ) ) {
-				$error        = 'invalid-invite-api-error';
+				$error_code   = 'invalid-invite-api-error';
 				$query_params = array(
 					'jetpack-sso-invite-user'  => 'failed',
-					'jetpack-sso-invite-error' => $error,
+					'jetpack-sso-invite-error' => $error_code,
 					'_wpnonce'                 => $nonce,
 				);
 
+				$tracking_event_data = array(
+					'success'    => 'false',
+					'error_code' => $error_code,
+				);
+
+				$body = json_decode( wp_remote_retrieve_body( $response ) );
+				if ( ! empty( $body ) && ! empty( $body->message ) ) {
+					$query_params['jetpack-sso-api-error-message'] = $body->message;
+					$tracking_event_data['error_message']          = $body->message;
+				}
+
 				self::$tracking->record_user_event(
 					$event,
-					array(
-						'success'       => 'false',
-						'error_message' => $error,
-					)
+					$tracking_event_data
 				);
 				return self::create_error_notice_and_redirect( $query_params );
 			}
@@ -410,12 +428,21 @@ public function handle_request_revoke_invite() {
 					'jetpack-sso-invite-error' => $error, // general error message
 					'_wpnonce'                 => $nonce,
 				);
+
+				$tracking_event_data = array(
+					'success'    => 'false',
+					'error_code' => $error,
+				);
+
+				$body = json_decode( wp_remote_retrieve_body( $response ) );
+				if ( ! empty( $body ) && ! empty( $body->message ) ) {
+					$query_params['jetpack-sso-api-error-message'] = $body->message;
+					$tracking_event_data['error_message']          = $body->message;
+				}
+
 				self::$tracking->record_user_event(
 					$event,
-					array(
-						'success'       => 'false',
-						'error_message' => $error,
-					)
+					$tracking_event_data
 				);
 				return self::create_error_notice_and_redirect( $query_params );
 			}
@@ -1173,8 +1200,11 @@ public function jetpack_show_connection_status( $val, $col, $user_id ) {
 				$nonce           = wp_create_nonce( 'jetpack-sso-invite-user' );
 				$connection_html = sprintf(
 				// Using formmethod and formaction because we can't nest forms and have to submit using the main form.
-					'<a href="%1$s" class="jetpack-sso-invitation sso-disconnected-user">%2$s</a><span tabindex="0" role="tooltip" aria-label="%4$s: %3$s" class="sso-disconnected-user-icon dashicons dashicons-warning jetpack-sso-invitation-tooltip-icon">
-						<span class="jetpack-sso-invitation-tooltip jetpack-sso-td-tooltip" tabindex="0">%3$s</span>
+					'<span tabindex="0" role="tooltip" aria-label="%4$s: %3$s" class="jetpack-sso-invitation-tooltip-icon sso-disconnected-user">
+						<a href="%1$s" class="jetpack-sso-invitation sso-disconnected-user">%2$s</a>
+						<span class="sso-disconnected-user-icon dashicons dashicons-warning">
+							<span class="jetpack-sso-invitation-tooltip jetpack-sso-td-tooltip" tabindex="0">%3$s</span>
+						</span>
 					</span>',
 					add_query_arg(
 						array(

diff --git a/projects/packages/connection/src/sso/jetpack-sso-users.js b/projects/packages/connection/src/sso/jetpack-sso-users.js
@@ -1,6 +1,6 @@
 document.addEventListener( 'DOMContentLoaded', function () {
 	document
-		.querySelectorAll( '.jetpack-sso-invitation-tooltip-icon:not(.sso-disconnected-user-icon)' )
+		.querySelectorAll( '.jetpack-sso-invitation-tooltip-icon:not(.sso-disconnected-user)' )
 		.forEach( function ( tooltip ) {
 			tooltip.innerHTML += ' [?]';
 
@@ -10,22 +10,46 @@ document.addEventListener( 'DOMContentLoaded', function () {
 			const tooltipString = window.Jetpack_SSOTooltip.tooltipString;
 			tooltipTextbox.innerHTML += tooltipString;
 
-			tooltip.addEventListener( 'mouseenter', function () {
+			tooltip.addEventListener( 'mouseenter', appendTooltip );
+			tooltip.addEventListener( 'focus', appendTooltip );
+			tooltip.addEventListener( 'mouseleave', removeTooltip );
+			tooltip.addEventListener( 'blur', removeTooltip );
+
+			/**
+			 * Display the tooltip textbox.
+			 */
+			function appendTooltip() {
 				tooltip.appendChild( tooltipTextbox );
 				tooltipTextbox.style.display = 'block';
-			} );
-			tooltip.addEventListener( 'mouseleave', function () {
+			}
+
+			/**
+			 * Remove the tooltip textbox.
+			 */
+			function removeTooltip() {
 				tooltip.removeChild( tooltipTextbox );
-			} );
+			}
 		} );
 	document
 		.querySelectorAll( '.jetpack-sso-invitation-tooltip-icon:not(.jetpack-sso-status-column)' )
 		.forEach( function ( tooltip ) {
-			tooltip.addEventListener( 'mouseenter', function () {
-				this.querySelector( '.jetpack-sso-invitation-tooltip' ).style.display = 'block';
-			} );
-			tooltip.addEventListener( 'mouseleave', function () {
-				this.querySelector( '.jetpack-sso-invitation-tooltip' ).style.display = 'none';
-			} );
+			tooltip.addEventListener( 'mouseenter', appendSSOInvitationTooltip );
+			tooltip.addEventListener( 'focus', appendSSOInvitationTooltip );
+			tooltip.addEventListener( 'mouseleave', removeSSOInvitationTooltip );
+			tooltip.addEventListener( 'blur', removeSSOInvitationTooltip );
 		} );
+
+	/**
+	 * Display the SSO invitation tooltip textbox.
+	 */
+	function appendSSOInvitationTooltip() {
+		this.querySelector( '.jetpack-sso-invitation-tooltip' ).style.display = 'block';
+	}
+
+	/**
+	 * Remove the SSO invitation tooltip textbox.
+	 */
+	function removeSSOInvitationTooltip() {
+		this.querySelector( '.jetpack-sso-invitation-tooltip' ).style.display = 'none';
+	}
 } );
diff --git a/projects/packages/publicize/changelog/add-social-connections-disconnection-dialog b/projects/packages/publicize/changelog/add-social-connections-disconnection-dialog
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Social Connections: Added disconnection confirmation dialog
diff --git a/projects/packages/publicize/composer.json b/projects/packages/publicize/composer.json
@@ -67,7 +67,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-publicize/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "0.43.x-dev"
+			"dev-trunk": "0.44.x-dev"
 		}
 	},
 	"config": {

diff --git a/projects/packages/publicize/package.json b/projects/packages/publicize/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize",
-	"version": "0.43.1-alpha",
+	"version": "0.44.0-alpha",
 	"description": "Publicize makes it easy to share your site’s posts on several social media networks automatically when you publish a new post.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/publicize/#readme",
 	"bugs": {

diff --git a/...lugins/automattic-for-agencies-client/changelog/update-invite-user-error-response-logging b/...lugins/automattic-for-agencies-client/changelog/update-invite-user-error-response-logging
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/automattic-for-agencies-client/composer.lock b/projects/plugins/automattic-for-agencies-client/composer.lock
diff --git a/projects/plugins/backup/changelog/update-invite-user-error-response-logging b/projects/plugins/backup/changelog/update-invite-user-error-response-logging
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/backup/composer.json b/projects/plugins/backup/composer.json
@@ -34,7 +34,7 @@
 	"minimum-stability": "dev",
 	"prefer-stable": true,
 	"config": {
-		"autoloader-suffix": "9559eef123208b7d1b9c15b978567267_backupⓥ2_6",
+		"autoloader-suffix": "9559eef123208b7d1b9c15b978567267_backupⓥ2_7_alpha",
 		"allow-plugins": {
 			"automattic/jetpack-autoloader": true,
 			"automattic/jetpack-composer-plugin": true