Backup: provide additional disconnect info in backup plugin (#21421)

* Add initial structure to the disconnection dialog component to handle multiple steps and accept more props * Update disconnect step with output for connected plugins, add component to show connected plugins and Jetpack benefit information * Add content and styling to disconnect flow, intial handling for survey * Updated condition for when no connectedPlugins are provided, small style fix * Break out smaller components, add initialization for tracks * Update lock file after merging master * Fix filtering for connected plugins output, update comments * Design improvements, move control for opening DisconnectDialog outside the component * Update styles to use color variables, update JS unit tests * Update projects/js-packages/connection/components/disconnect-dialog/index.jsx Remove translation on default context prop in DisconnectDialog Co-authored-by: Jeremy Herve <[email protected]> * Update projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx Fix punctuation in support link Co-authored-by: Jeremy Herve <[email protected]> * Refactor CSS and documentation, small updates and fixes * Add changelog file for decorative card in components package * Update JS props docs for ConnectionStatusCard * Bump versions of connection and components packages * Cascading version bump * Small style fix for buttons in disconnectdialog component * Improve mobile styling for disconnect modal * Package version bump * Remove the assetBaseUrl prop for images, this is handled via the webpack config now * Update to use jetpack-config package to get the current plugin slug * Remove currentPlugin from propTypes of ConnectionStatusCard * Move logic to load the consumer_slug from the jetpackConfig to the DisconnectDialog component instead of passing through ConnectionStatusCard * Update projects/js-packages/connection/components/disconnect-card/index.jsx Co-authored-by: leogermani <[email protected]> * Fix propTypes and add story (#21680) * fix propTypes and add story * add the unlink story * use oneOf as proptype of icon * Update survey submission method * Disable the submit button when waiting on response from survey submission * Add context prop to ConnectCard component and improve analytics events * Package version bump * Version bump for components in licensing package * [not verified] Un-prettify JS file that does not need to be a part of this feature * Small adjustment in pnpm-lock file after pnpm-install * Update promise handling for survey submission and other feedback points * Upodate references to rna styles in scss to use base styles package * Use maxlength instead of max on custom survey response input * Remove unused assetBase prop from ConnectionStatusCard component * Pass connectedSiteId as a prop to the ConnectionStatusCard component * [not verified] Add connected plugins to initial JSX state, include analytics scripts, reconfigure inclusion of connected plugins in initial state * [not verified] Pass assetBaseUrl to the ConnectionStatusCard to be used for images in disconnect flow * [not verified] Remove the assetBaseUrl prop passed to the ConnectionCard component * [not verified] Added jetpackConfig to webpack file for the backups plugin, remove passed prop for currentPlugin * [not verified] Add context prop to the useConnection component for ConnectionCard * [not verified] Fix phpcs errors not caught in rebase conflicts * Load site ID in initial react state for the ConnectionStatusCard * [not verified] Add initial structure to the disconnection dialog component to handle multiple steps and accept more props * [not verified] Update disconnect step with output for connected plugins, add component to show connected plugins and Jetpack benefit information * Add content and styling to disconnect flow, intial handling for survey * [not verified] Updated condition for when no connectedPlugins are provided, small style fix * [not verified] Break out smaller components, add initialization for tracks * Update lock file after merging master * [not verified] Fix filtering for connected plugins output, update comments * Design improvements, move control for opening DisconnectDialog outside the component * Update styles to use color variables, update JS unit tests * [not verified] Update projects/js-packages/connection/components/disconnect-dialog/index.jsx Remove translation on default context prop in DisconnectDialog Co-authored-by: Jeremy Herve <[email protected]> * [not verified] Update projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx Fix punctuation in support link Co-authored-by: Jeremy Herve <[email protected]> * [not verified] Refactor CSS and documentation, small updates and fixes * [not verified] Add changelog file for decorative card in components package * [not verified] Update JS props docs for ConnectionStatusCard * Cascading version bump * [not verified] Small style fix for buttons in disconnectdialog component * [not verified] Improve mobile styling for disconnect modal * Package version bump * [not verified] Remove the assetBaseUrl prop for images, this is handled via the webpack config now * Update to use jetpack-config package to get the current plugin slug * [not verified] Remove currentPlugin from propTypes of ConnectionStatusCard * Move logic to load the consumer_slug from the jetpackConfig to the DisconnectDialog component instead of passing through ConnectionStatusCard * [not verified] Update projects/js-packages/connection/components/disconnect-card/index.jsx Co-authored-by: leogermani <[email protected]> * [not verified] Fix propTypes and add story (#21680) * fix propTypes and add story * add the unlink story * use oneOf as proptype of icon * [not verified] Update survey submission method * [not verified] Disable the submit button when waiting on response from survey submission * [not verified] Add context prop to ConnectCard component and improve analytics events * Package version bump * Version bump for components in licensing package * [not verified] Un-prettify JS file that does not need to be a part of this feature * [not verified] Update promise handling for survey submission and other feedback points * [not verified] Upodate references to rna styles in scss to use base styles package * [not verified] Use maxlength instead of max on custom survey response input * [not verified] Remove unused assetBase prop from ConnectionStatusCard component * [not verified] Pass connectedSiteId as a prop to the ConnectionStatusCard component * Fix package versions * [not verified] Jetpack: improve plugin disconnection flow (#20914) Co-authored-by: Ian Ramos <[email protected]> * Fix package versions * Add changelog entry * Undo some prettier changes to files that do not need to be a part of this PR * [not verified] Second attempt to undo some prettier changes for jetpack files that do not need to be part of this PR * Remove call to wp_set_script_translations that is handled by the assets utility * Remove duplicate webpack config key Co-authored-by: Jeremy Herve <[email protected]> Co-authored-by: leogermani <[email protected]> Co-authored-by: Ian Ramos <[email protected]> Co-authored-by: Samiff <[email protected]>
Automattic · Nov 30, 2021 · fe13f8e · fe13f8e
1 parent 09b753b
commit fe13f8e
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 3 deletions.
diff --git a/projects/plugins/backup/changelog/update-provide-additional-disconnect-info-in-backup-plugin b/projects/plugins/backup/changelog/update-provide-additional-disconnect-info-in-backup-plugin
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Pass connected plugin information to disconnect dialog flow, include analytics scripts
diff --git a/projects/plugins/backup/src/js/hooks/useConnection.js b/projects/plugins/backup/src/js/hooks/useConnection.js
@@ -24,6 +24,8 @@ import ConnectRight from './assets/connect-right.png';
 export default function useConnection() {
 	const APINonce = useSelect( select => select( STORE_ID ).getAPINonce(), [] );
 	const APIRoot = useSelect( select => select( STORE_ID ).getAPIRoot(), [] );
+	const connectedPlugins = useSelect( select => select( STORE_ID ).getConnectedPlugins(), [] );
+	const connectedSiteData = useSelect( select => select( STORE_ID ).getSiteData(), [] );
 	const registrationNonce = useSelect( select => select( STORE_ID ).getRegistrationNonce(), [] );
 	const connectionStatus = useSelect(
 		select => select( CONNECTION_STORE_ID ).getConnectionStatus(),
@@ -57,7 +59,10 @@ export default function useConnection() {
 				isUserConnected={ connectionStatus.isUserConnected }
 				apiRoot={ APIRoot }
 				apiNonce={ APINonce }
+				connectedPlugins={ connectedPlugins }
+				connectedSiteId={ connectedSiteData ? connectedSiteData.id : null }
 				redirectUri="admin.php?page=jetpack-backup"
+				context="jetpack-backup-page"
 			/>
 		);
 	};

diff --git a/projects/plugins/backup/src/js/reducers/connected-plugins.js b/projects/plugins/backup/src/js/reducers/connected-plugins.js
@@ -0,0 +1,5 @@
+const connectedPlugins = ( state = {} ) => {
+	return state;
+};
+
+export default connectedPlugins;
diff --git a/projects/plugins/backup/src/js/reducers/index.js b/projects/plugins/backup/src/js/reducers/index.js
@@ -9,11 +9,15 @@ import { combineReducers } from '@wordpress/data';
 import API from './api';
 import jetpackStatus from './jetpack-status';
 import assets from './assets';
+import connectedPlugins from './connected-plugins';
+import siteData from './site-data';
 
 const reducer = combineReducers( {
+	connectedPlugins,
 	API,
 	jetpackStatus,
 	assets,
+	siteData,
 } );
 
 export default reducer;
diff --git a/projects/plugins/backup/src/js/reducers/site-data.js b/projects/plugins/backup/src/js/reducers/site-data.js
@@ -0,0 +1,5 @@
+const siteData = ( state = {} ) => {
+	return state;
+};
+
+export default siteData;
diff --git a/projects/plugins/backup/src/js/selectors/connected-plugins.js b/projects/plugins/backup/src/js/selectors/connected-plugins.js
@@ -0,0 +1,5 @@
+const connectedPluginsSelectors = {
+	getConnectedPlugins: state => state.connectedPlugins || [],
+};
+
+export default connectedPluginsSelectors;
diff --git a/projects/plugins/backup/src/js/selectors/index.js b/projects/plugins/backup/src/js/selectors/index.js
@@ -3,10 +3,14 @@
  */
 import APISelectors from './api';
 import jetpackStatusSelectors from './jetpack-status';
+import connectedPluginsSelectors from './connected-plugins';
+import siteDataSelectors from './site-data';
 
 const selectors = {
 	...APISelectors,
 	...jetpackStatusSelectors,
+	...connectedPluginsSelectors,
+	...siteDataSelectors,
 };
 
 export default selectors;
diff --git a/projects/plugins/backup/src/js/selectors/site-data.js b/projects/plugins/backup/src/js/selectors/site-data.js
@@ -0,0 +1,5 @@
+const siteDataSelectors = {
+	getSiteData: state => state.siteData || [],
+};
+
+export default siteDataSelectors;
diff --git a/projects/plugins/backup/src/php/class-initial-state.php b/projects/plugins/backup/src/php/class-initial-state.php
@@ -5,6 +5,7 @@
  * @package automattic/jetpack-backup-plugin
  */
 
+use Automattic\Jetpack\Connection\Plugin_Storage as Connection_Plugin_Storage;
 use Automattic\Jetpack\Status;
 
 /**
@@ -18,15 +19,19 @@ class Initial_State {
 	 */
 	private function get_data() {
 		return array(
-			'API'           => array(
+			'API'              => array(
 				'WP_API_root'       => esc_url_raw( rest_url() ),
 				'WP_API_nonce'      => wp_create_nonce( 'wp_rest' ),
 				'registrationNonce' => wp_create_nonce( 'jetpack-registration-nonce' ),
 			),
-			'jetpackStatus' => array(
+			'jetpackStatus'    => array(
 				'calypsoSlug' => ( new Status() )->get_site_suffix(),
 			),
-			'assets'        => array(
+			'connectedPlugins' => Connection_Plugin_Storage::get_all(),
+			'siteData'         => array(
+				'id' => \Jetpack_Options::get_option( 'id' ),
+			),
+			'assets'           => array(
 				'buildUrl' => plugins_url( 'build/', JETPACK_BACKUP_PLUGIN_ROOT_FILE ),
 			),
 		);

diff --git a/projects/plugins/backup/src/php/class-jetpack-backup.php b/projects/plugins/backup/src/php/class-jetpack-backup.php
@@ -14,11 +14,13 @@
 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;
+use Automattic\Jetpack\Status;
 
 /**
  * Class Jetpack_Backup
  */
 class Jetpack_Backup {
+
 	/**
 	 * Constructor.
 	 */
@@ -84,6 +86,9 @@ public function admin_init() {
 	 * Enqueue plugin admin scripts and styles.
 	 */
 	public function enqueue_admin_scripts() {
+		$status  = new Status();
+		$manager = new Connection_Manager( 'jetpack-backup' );
+
 		Assets::register_script(
 			'jetpack-backup',
 			'build/index.js',
@@ -97,6 +102,11 @@ public function enqueue_admin_scripts() {
 		// Initial JS state including JP Connection data.
 		wp_add_inline_script( 'jetpack-backup', $this->get_initial_state(), 'before' );
 		wp_add_inline_script( 'jetpack-backup', Connection_Initial_State::render(), 'before' );
+
+		// Load script for analytics.
+		if ( ! $status->is_offline_mode() && $manager->is_connected() ) {
+			wp_enqueue_script( 'jp-tracks', '//stats.wp.com/w.js', array(), gmdate( 'YW' ), true );
+		}
 	}
 
 	/**