Merge branch 'update/extend-disconnect-dialog-component' into update/…

…provide-additional-disconnect-info-in-backup-plugin
Automattic · Oct 20, 2021 · ea4ac4e · ea4ac4e
2 parents d77aa27 + dec8af5
commit ea4ac4e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/projects/js-packages/connection/components/connected-plugins/index.jsx b/projects/js-packages/connection/components/connected-plugins/index.jsx
@@ -1,7 +1,7 @@
 /**
  * External Dependencies
  */
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -13,6 +13,8 @@ import DisconnectCard from '../disconnect-card';
  * Render a list of connected plugins.
  *
  * @param props
+ * @param {object} props.connectedPlugins - Plugins that are using the Jetpack connection.
+ * @param {string} props.disconnectingPlugin - Slug of the plugin that has initiated the disconnect.
  * @returns {React.Component} - The ConnectedPlugins React component
  */
 
@@ -23,17 +25,15 @@ const ConnectedPlugins = props => {
 	 * Add a slug property to each ConnectedPlugins object so they can be converted to an array.
 	 * This allows the connected plugins to be iterated over more easily for display.
 	 */
-	useEffect( () => {
+	const connectedPluginsArray = useMemo( () => {
 		if ( connectedPlugins ) {
 			const keys = Object.keys( connectedPlugins );
 			keys.forEach( key => ( connectedPlugins[ key ].slug = key ) );
 		}
-	}, [ connectedPlugins ] );
 
-	const connectedPluginsArray = useMemo( () => {
 		return connectedPlugins
 			? Object.values( connectedPlugins ).filter( plugin => {
-					return disconnectingPlugin ? plugin.slug !== disconnectingPlugin : true;
+					return disconnectingPlugin ? disconnectingPlugin !== plugin.slug : true;
 			  } )
 			: [];
 	}, [ connectedPlugins, disconnectingPlugin ] );

diff --git a/projects/js-packages/connection/components/disconnect-dialog/index.jsx b/projects/js-packages/connection/components/disconnect-dialog/index.jsx
@@ -219,7 +219,6 @@ const DisconnectDialog = props => {
 			return (
 				<StepDisconnect
 					title={ title }
-					// Filter out the current plugin ( if provided ) from the connected plugins.
 					connectedPlugins={ connectedPlugins }
 					// Component that renders as part of the disconnect step, if passed.
 					disconnectStepComponent={ disconnectStepComponent }

diff --git a/projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx b/projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx
@@ -21,6 +21,8 @@ import ConnectedPlugins from '../../connected-plugins';
  * @param {Function} props.onDisconnect - Callback function that is triggered by clicking the "Disconnect" button.
  * @param {object} props.disconnectError - An error that occurred during a request to disconnect.
  * @param {React.Component} props.disconnectStepComponent - a component to be rendered as part of this step
+ * @param {object} props.connectedPlugins - Plugins that are using the Jetpack connection.
+ * @param {string} props.disconnectingPlugin - The slug of the plugin that is initiating the disconnection.
  * @param {Function} props.closeModal - Callback function that closes the modal.
  * @param {string} props.context - Where this modal is being rendered.
  * @returns {React.Component} - The StepDisconnect component
@@ -34,6 +36,7 @@ const StepDisconnect = props => {
 		disconnectError,
 		disconnectStepComponent,
 		connectedPlugins,
+		disconnectingPlugin,
 		closeModal,
 		context,
 	} = props;
@@ -88,7 +91,10 @@ const StepDisconnect = props => {
 		<React.Fragment>
 			<div className="jp-disconnect-dialog__content">
 				<h1 id="jp-disconnect-dialog__heading">{ title }</h1>
-				<ConnectedPlugins connectedPlugins={ connectedPlugins } />
+				<ConnectedPlugins
+					connectedPlugins={ connectedPlugins }
+					disconnectingPlugin={ disconnectingPlugin }
+				/>
 				{ disconnectStepComponent }
 				{ renderFallbackOutput() }
 			</div>