@automattic/jetpack-connection 0.36.7 → 0.37.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [0.37.0] - 2025-02-24
+### Added
+- Warn that disconnecting owner account will disconnect all other users first. [#41923]
+
+### Changed
+- Move the API endpoint for unlinking the user to the automattic/jetpack-connection package. [#41398]
+- Update package dependencies. [#41955]
+
 ## [0.36.7] - 2025-02-17
 ### Changed
 - Update dependencies.
@@ -934,6 +942,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[0.37.0]: https://github.com/Automattic/jetpack-connection-js/compare/v0.36.7...v0.37.0
 [0.36.7]: https://github.com/Automattic/jetpack-connection-js/compare/v0.36.6...v0.36.7
 [0.36.6]: https://github.com/Automattic/jetpack-connection-js/compare/v0.36.5...v0.36.6
 [0.36.5]: https://github.com/Automattic/jetpack-connection-js/compare/v0.36.4...v0.36.5

package/components/manage-connection-dialog/index.jsx

@@ -1,6 +1,8 @@
 /**
  * External dependencies
  */
+import jetpackAnalytics from '@automattic/jetpack-analytics';
+import restApi from '@automattic/jetpack-api';
 import { Button, getRedirectUrl, Text } from '@automattic/jetpack-components';
 import { ExternalLink, Modal } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
@@ -8,11 +10,13 @@ import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 /**
  * Internal dependencies
  */
+import ConnectionErrorNotice from '../connection-error-notice/index.jsx';
 import DisconnectDialog from '../disconnect-dialog';
+import OwnerDisconnectDialog from '../owner-disconnect-dialog';
 import './style.scss';
 
 /**
@@ -28,6 +32,7 @@ const ManageConnectionDialog = props => {
 		apiNonce,
 		connectedPlugins,
 		onDisconnected,
+		onUnlinked,
 		context = 'jetpack-dashboard',
 		connectedUser = {}, // Pass empty object to avoid undefined errors.
 		connectedSiteId,
@@ -36,6 +41,17 @@ const ManageConnectionDialog = props => {
 	} = props;
 
 	const [ isDisconnectDialogOpen, setIsDisconnectDialogOpen ] = useState( false );
+	const [ isDisconnectingUser, setIsDisconnectingUser ] = useState( false );
+	const [ unlinkError, setUnlinkError ] = useState( '' );
+	const [ isOwnerDisconnectDialogOpen, setIsOwnerDisconnectDialogOpen ] = useState( false );
+
+	/**
+	 * Initialize the REST API.
+	 */
+	useEffect( () => {
+		restApi.setApiRoot( apiRoot );
+		restApi.setApiNonce( apiNonce );
+	}, [ apiRoot, apiNonce ] );
 
 	/**
 	 * Open the Disconnect Dialog.
@@ -59,6 +75,82 @@ const ManageConnectionDialog = props => {
 		[ setIsDisconnectDialogOpen ]
 	);
 
+	const isCurrentUserAdmin = useMemo( () => {
+		return !! connectedUser.currentUser?.permissions?.manage_options;
+	}, [ connectedUser.currentUser ] );
+
+	const _disconnectUser = useCallback( () => {
+		// Not connected to WPCOM? bail.
+		if ( ! connectedUser.currentUser?.isConnected ) {
+			return;
+		}
+
+		setIsDisconnectingUser( true );
+		setUnlinkError( '' );
+
+		restApi
+			// Passing true to unlink will force the user disconnection
+			// This is needed for an admin to disconnect themselves
+			.unlinkUser( isCurrentUserAdmin )
+			.then( () => {
+				setIsDisconnectingUser( false );
+				onClose();
+				onUnlinked();
+			} )
+			.catch( () => {
+				let errorMessage = __(
+					'There was some trouble disconnecting your user account, your Jetpack plugin(s) may be outdated. Please visit your plugins page and make sure all Jetpack plugins are updated.',
+					'jetpack-connection-js'
+				);
+				if ( ! isCurrentUserAdmin ) {
+					errorMessage = __(
+						'There was some trouble disconnecting your user account, your Jetpack plugin(s) may be outdated. Please ask a site admin to update Jetpack',
+						'jetpack-connection-js'
+					);
+				}
+				setUnlinkError( errorMessage );
+				setIsDisconnectingUser( false );
+			} );
+	}, [
+		setIsDisconnectingUser,
+		setUnlinkError,
+		isCurrentUserAdmin,
+		onUnlinked,
+		onClose,
+		connectedUser,
+	] );
+
+	const handleDisconnectUser = useCallback(
+		e => {
+			e && e.preventDefault();
+
+			// If user is connection owner, show warning modal instead of disconnecting
+			if ( connectedUser.currentUser?.isMaster ) {
+				setIsOwnerDisconnectDialogOpen( true );
+				return;
+			}
+
+			// Existing disconnect logic for non-owners
+			jetpackAnalytics.tracks.recordEvent(
+				'jetpack_manage_connection_dialog_disconnect_user_click',
+				{ context: context }
+			);
+			_disconnectUser();
+		},
+		[ _disconnectUser, context, connectedUser ]
+	);
+
+	const isControlsDisabled = useMemo( () => {
+		return isDisconnectingUser;
+	}, [ isDisconnectingUser ] );
+
+	// This is silly, but it's an optimizer workaround
+	const disconnectingText = __( 'Disconnecting…', 'jetpack-connection-js' );
+
+	const handleCloseOwnerDialog = useCallback( () => {
+		setIsOwnerDisconnectDialogOpen( false );
+	}, [ setIsOwnerDisconnectDialogOpen ] );
+
 	return (
 		<>
 			{ isOpen && (
@@ -82,22 +174,47 @@ const ManageConnectionDialog = props => {
 									'jetpack-connection-js'
 								) }
 							</Text>
-							<ManageConnectionActionCard
-								title={ __( 'Transfer ownership to another admin', 'jetpack-connection-js' ) }
-								link={ getRedirectUrl( 'calypso-settings-manage-connection', {
-									site: window?.myJetpackInitialState?.siteSuffix,
-								} ) }
-								key="transfer"
-								action="transfer"
-							/>
-							<ManageConnectionActionCard
-								title={ __( 'Disconnect Jetpack', 'jetpack-connection-js' ) }
-								onClick={ openDisconnectDialog }
-								key="disconnect"
-								action="disconnect"
-							/>
+							{ isCurrentUserAdmin &&
+								connectedUser.currentUser?.isConnected &&
+								connectedUser.currentUser?.isMaster && (
+									<ManageConnectionActionCard
+										title={ __( 'Transfer ownership to another admin', 'jetpack-connection-js' ) }
+										link={ getRedirectUrl( 'calypso-settings-manage-connection', {
+											site: window?.myJetpackInitialState?.siteSuffix,
+										} ) }
+										isExternal={ true }
+										key="transfer"
+										action="transfer"
+										disabled={ isControlsDisabled }
+									/>
+								) }
+							{ connectedUser.currentUser?.isConnected && (
+								<>
+									{ '' !== unlinkError && <ConnectionErrorNotice message={ unlinkError } /> }
+									<ManageConnectionActionCard
+										title={
+											isDisconnectingUser
+												? disconnectingText
+												: __( 'Disconnect my user account', 'jetpack-connection-js' )
+										}
+										onClick={ handleDisconnectUser }
+										key="unlink"
+										action="unlink"
+										disabled={ isControlsDisabled }
+									/>
+								</>
+							) }
+							{ isCurrentUserAdmin && (
+								<ManageConnectionActionCard
+									title={ __( 'Disconnect Jetpack', 'jetpack-connection-js' ) }
+									onClick={ openDisconnectDialog }
+									key="disconnect"
+									action="disconnect"
+									disabled={ isControlsDisabled }
+								/>
+							) }
 						</div>
-						<HelpFooter onClose={ onClose } />
+						<HelpFooter onClose={ onClose } disabled={ isControlsDisabled } />
 					</Modal>
 
 					<DisconnectDialog
@@ -111,24 +228,48 @@ const ManageConnectionDialog = props => {
 						onClose={ closeDisconnectDialog }
 						context={ context }
 					/>
+
+					<OwnerDisconnectDialog
+						isOpen={ isOwnerDisconnectDialogOpen }
+						onClose={ handleCloseOwnerDialog }
+						apiRoot={ apiRoot }
+						apiNonce={ apiNonce }
+						onDisconnected={ onDisconnected }
+						onUnlinked={ onUnlinked }
+					/>
 				</>
 			) }
 		</>
 	);
 };
 
-const ManageConnectionActionCard = ( { title, onClick = () => null, link = '#', action } ) => {
+const ManageConnectionActionCard = ( {
+	title,
+	onClick = () => null,
+	isExternal = false,
+	link = '#',
+	action,
+	disabled = false,
+} ) => {
+	const disabledCallback = useCallback( e => e.preventDefault(), [] );
+
 	return (
-		<div className="jp-connection__manage-dialog__action-card card">
+		<div
+			className={
+				'jp-connection__manage-dialog__action-card card' + ( disabled ? ' disabled' : '' )
+			}
+		>
 			<div className="jp-connection__manage-dialog__action-card__card-content">
 				<a
 					href={ link }
 					className={ clsx( 'jp-connection__manage-dialog__action-card__card-headline', action ) }
-					onClick={ onClick }
+					onClick={ ! disabled ? onClick : disabledCallback }
+					target={ isExternal ? '_blank' : '_self' }
+					rel={ 'noopener noreferrer' }
 				>
 					{ title }
 					<Icon
-						icon={ action === 'disconnect' ? chevronRight : external }
+						icon={ isExternal ? external : chevronRight }
 						className="jp-connection__manage-dialog__action-card__icon"
 					/>
 				</a>
@@ -137,7 +278,7 @@ const ManageConnectionActionCard = ( { title, onClick = () => null, link = '#',
 	);
 };
 
-const HelpFooter = ( { onClose } ) => {
+const HelpFooter = ( { onClose, disabled } ) => {
 	return (
 		<div className="jp-row jp-connection__manage-dialog__actions">
 			<div className="jp-connection__manage-dialog__text-wrap lg-col-span-9 md-col-span-7 sm-col-span-3">
@@ -175,6 +316,7 @@ const HelpFooter = ( { onClose } ) => {
 					variant="secondary"
 					onClick={ onClose }
 					className="jp-connection__manage-dialog__btn-dismiss"
+					disabled={ disabled }
 				>
 					{ __( 'Cancel', 'jetpack-connection-js' ) }
 				</Button>
@@ -194,6 +336,8 @@ ManageConnectionDialog.propTypes = {
 	connectedPlugins: PropTypes.oneOfType( [ PropTypes.array, PropTypes.object ] ),
 	/** The callback to be called upon disconnection success. */
 	onDisconnected: PropTypes.func,
+	/** The callback to be called upon user unlink success. */
+	onUnlinked: PropTypes.func,
 	/** The context in which this component is being used. */
 	context: PropTypes.string,
 	/** An object representing the connected user. */

package/components/manage-connection-dialog/style.scss

@@ -23,7 +23,8 @@
 		}
 	}
 
-	&__large-text {
+	// shorthand intentionally not used here for overriding the .reset class
+	.jp-connection__manage-dialog__large-text {
 		margin-top: calc( var( --spacing-base ) * 3 );
 		margin-bottom: calc( var( --spacing-base ) * 4 );
 		max-width: 60%;
@@ -70,6 +71,7 @@
 		margin: var( --spacing-base ) auto;
 		text-align: left;
 		border: none;
+		position: relative;
 
 		&__card-headline {
 			font-size: var( --font-body );
@@ -82,7 +84,20 @@
 			float:right;
 		}
 
-		.transfer {
+		&.disabled:before {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 25%;
+			border-radius: 3px;
+			background: var( --jp-black );
+		}
+
+		.transfer, .unlink {
 			color:var( --jp-black );
 			fill: var( --jp-black );
 		}
@@ -91,6 +106,14 @@
 			color: var( --jp-red );
 			fill: var( --jp-red );
 		}
+
+	}
+
+	.components-notice {
+		width: 750px;
+		max-width: 100%;
+		margin: var( --spacing-base ) auto;
+		text-align: left;
 	}
 
 	.components-modal {

package/components/owner-disconnect-dialog/index.jsx

@@ -0,0 +1,233 @@
+/**
+ * External dependencies
+ */
+import jetpackAnalytics from '@automattic/jetpack-analytics';
+import restApi from '@automattic/jetpack-api';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { ExternalLink, Modal, Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronRight, external } from '@wordpress/icons';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import React, { useCallback, useState, useEffect } from 'react';
+import './style.scss';
+
+/**
+ * The Owner Disconnect Dialog component.
+ *
+ * @param {object}   props                - Component props.
+ * @param {boolean}  props.isOpen         - Whether the dialog is open.
+ * @param {Function} props.onClose        - Callback for when the dialog is closed.
+ * @param {string}   props.apiRoot        - API root URL.
+ * @param {string}   props.apiNonce       - API nonce.
+ * @param {Function} props.onDisconnected - Callback after successful disconnection.
+ * @param {Function} props.onUnlinked     - Callback after user is unlinked.
+ * @return {React.Component} The OwnerDisconnectDialog component.
+ */
+const OwnerDisconnectDialog = ( {
+	isOpen,
+	onClose,
+	apiRoot,
+	apiNonce,
+	onDisconnected,
+	onUnlinked,
+} ) => {
+	// Add state for disconnect status and error
+	const [ isDisconnecting, setIsDisconnecting ] = useState( false );
+	const [ disconnectError, setDisconnectError ] = useState( '' );
+
+	// Add these string constants
+	const disconnectingText = __( 'Disconnecting…', 'jetpack-connection-js' );
+	const disconnectText = __( 'Disconnect', 'jetpack-connection-js' );
+
+	// Initialize the REST API
+	useEffect( () => {
+		restApi.setApiRoot( apiRoot );
+		restApi.setApiNonce( apiNonce );
+	}, [ apiRoot, apiNonce ] );
+
+	const handleStayConnected = useCallback( () => {
+		onClose();
+	}, [ onClose ] );
+
+	const handleDisconnectAnyway = useCallback( () => {
+		// Track disconnect click
+		jetpackAnalytics.tracks.recordEvent(
+			'jetpack_manage_connection_dialog_owner_disconnect_click'
+		);
+
+		setIsDisconnecting( true );
+		setDisconnectError( '' );
+
+		// Disconnect owner with force and disconnect-all-users parameters
+		restApi
+			.unlinkUser( true, { disconnectAllUsers: true } )
+			.then( () => {
+				// Track successful disconnect
+				jetpackAnalytics.tracks.recordEvent(
+					'jetpack_manage_connection_dialog_owner_disconnect_success'
+				);
+				// Don't close modal or change state since page will reload
+				onDisconnected && onDisconnected();
+				onUnlinked && onUnlinked();
+			} )
+			.catch( () => {
+				// Track failed disconnect
+				jetpackAnalytics.tracks.recordEvent(
+					'jetpack_manage_connection_dialog_owner_disconnect_error'
+				);
+				setDisconnectError(
+					__(
+						'There was a problem disconnecting your account. Please try again.',
+						'jetpack-connection-js'
+					)
+				);
+				setIsDisconnecting( false );
+			} );
+	}, [ onDisconnected, onUnlinked ] );
+
+	return (
+		isOpen && (
+			<Modal
+				title=""
+				contentLabel={ __( 'Disconnect Owner Account', 'jetpack-connection-js' ) }
+				aria={ {
+					labelledby: 'jp-connection__disconnect-dialog__heading',
+				} }
+				onRequestClose={ handleStayConnected }
+				className="jp-connection__disconnect-dialog"
+			>
+				<div className="jp-connection__disconnect-dialog__content">
+					<h1 id="jp-connection__disconnect-dialog__heading">
+						{ __( 'Disconnect Owner Account', 'jetpack-connection-js' ) }
+					</h1>
+					<p className="jp-connection__disconnect-dialog__large-text">
+						{ __(
+							'Disconnecting the owner account will remove the Jetpack connection for all users on this site. The site will remain connected.',
+							'jetpack-connection-js'
+						) }
+					</p>
+					<ManageConnectionActionCard
+						title={ __( 'Transfer ownership to another admin', 'jetpack-connection-js' ) }
+						link={ getRedirectUrl( 'calypso-settings-manage-connection', {
+							site: window?.myJetpackInitialState?.siteSuffix,
+						} ) }
+						isExternal={ true }
+						action="transfer"
+					/>
+					<ManageConnectionActionCard
+						title={ __( 'View other connected accounts', 'jetpack-connection-js' ) }
+						link="users.php"
+						action="check-users"
+					/>
+				</div>
+
+				<div className="jp-connection__disconnect-dialog__actions">
+					<div className="jp-row">
+						<div className="lg-col-span-8 md-col-span-9 sm-col-span-4">
+							<p>
+								{ createInterpolateElement(
+									__(
+										'<strong>Need help?</strong> Learn more about the <connectionInfoLink>Jetpack connection</connectionInfoLink> or <supportLink>contact Jetpack support</supportLink>',
+										'jetpack-connection-js'
+									),
+									{
+										strong: <strong></strong>,
+										connectionInfoLink: (
+											<ExternalLink
+												href={ getRedirectUrl(
+													'why-the-wordpress-com-connection-is-important-for-jetpack'
+												) }
+												className="jp-connection__disconnect-dialog__link"
+											/>
+										),
+										supportLink: (
+											<ExternalLink
+												href={ getRedirectUrl( 'jetpack-support' ) }
+												className="jp-connection__disconnect-dialog__link"
+											/>
+										),
+									}
+								) }
+							</p>
+						</div>
+						<div className="jp-connection__disconnect-dialog__button-wrap lg-col-span-4 md-col-span-7 sm-col-span-4">
+							<Button
+								variant="primary"
+								onClick={ handleStayConnected }
+								className="jp-connection__disconnect-dialog__btn-dismiss"
+							>
+								{ __( 'Stay Connected', 'jetpack-connection-js' ) }
+							</Button>
+							<Button
+								variant="primary"
+								onClick={ handleDisconnectAnyway }
+								className="jp-connection__disconnect-dialog__btn-disconnect"
+								isDestructive
+								disabled={ isDisconnecting }
+							>
+								{ isDisconnecting ? disconnectingText : disconnectText }
+							</Button>
+						</div>
+					</div>
+					{ disconnectError && (
+						<p className="jp-connection__disconnect-dialog__error">{ disconnectError }</p>
+					) }
+				</div>
+			</Modal>
+		)
+	);
+};
+
+OwnerDisconnectDialog.propTypes = {
+	/** Whether the dialog is open */
+	isOpen: PropTypes.bool,
+	/** Callback for when the dialog is closed */
+	onClose: PropTypes.func,
+	/** API root URL */
+	apiRoot: PropTypes.string.isRequired,
+	/** API nonce */
+	apiNonce: PropTypes.string.isRequired,
+	/** Callback after successful disconnection */
+	onDisconnected: PropTypes.func,
+	/** Callback after user is unlinked */
+	onUnlinked: PropTypes.func,
+};
+
+const ManageConnectionActionCard = ( {
+	title,
+	onClick = () => null,
+	isExternal = false,
+	link = '#',
+	action,
+	disabled = false,
+} ) => {
+	const disabledCallback = useCallback( e => e.preventDefault(), [] );
+
+	return (
+		<div
+			className={
+				'jp-connection__manage-dialog__action-card card' + ( disabled ? ' disabled' : '' )
+			}
+		>
+			<div className="jp-connection__manage-dialog__action-card__card-content">
+				<a
+					href={ link }
+					className={ clsx( 'jp-connection__manage-dialog__action-card__card-headline', action ) }
+					onClick={ ! disabled ? onClick : disabledCallback }
+					target={ isExternal ? '_blank' : '_self' }
+					rel={ 'noopener noreferrer' }
+				>
+					{ title }
+					<Icon
+						icon={ isExternal ? external : chevronRight }
+						className="jp-connection__manage-dialog__action-card__icon"
+					/>
+				</a>
+			</div>
+		</div>
+	);
+};
+
+export default OwnerDisconnectDialog;

package/components/owner-disconnect-dialog/style.scss

@@ -0,0 +1,14 @@
+.jp-connection__disconnect-dialog {
+    // Add !important to override WordPress styles
+    .components-button.jp-connection__disconnect-dialog__btn-dismiss {
+        background: var( --jp-black ) !important;
+    }
+   .jp-connection__disconnect-dialog__content {
+        --spacing-base: 8px;
+    }
+    .jp-connection__disconnect-dialog .components-modal__content > div:not(.components-modal__header) {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.36.7",
+	"version": "0.37.0",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -14,11 +14,11 @@
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
 	"dependencies": {
-		"@automattic/jetpack-analytics": "^0.1.35",
-		"@automattic/jetpack-api": "^0.18.0",
-		"@automattic/jetpack-components": "^0.67.0",
-		"@automattic/jetpack-config": "^0.1.28",
-		"@automattic/jetpack-script-data": "^0.2.0",
+		"@automattic/jetpack-analytics": "^0.1.36",
+		"@automattic/jetpack-api": "^0.19.0",
+		"@automattic/jetpack-components": "^0.67.1",
+		"@automattic/jetpack-config": "^0.1.29",
+		"@automattic/jetpack-script-data": "^0.2.1",
 		"@wordpress/base-styles": "5.17.0",
 		"@wordpress/browserslist-config": "6.17.0",
 		"@wordpress/components": "29.3.0",
@@ -31,10 +31,10 @@
 		"prop-types": "^15.7.2"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.42",
+		"@automattic/jetpack-base-styles": "^0.6.43",
 		"@babel/core": "7.26.0",
 		"@babel/preset-react": "7.26.3",
-		"@storybook/addon-actions": "8.4.7",
+		"@storybook/addon-actions": "8.5.8",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/react": "16.2.0",
 		"@testing-library/user-event": "14.6.1",
@@ -43,7 +43,7 @@
 		"jest-environment-jsdom": "29.7.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"storybook": "8.4.7"
+		"storybook": "8.5.8"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",