From fe13f8e9a1e8a6c142adfc4cef4b187bb5acc187 Mon Sep 17 00:00:00 2001 From: jboland88 <18016357+jboland88@users.noreply.github.com> Date: Tue, 30 Nov 2021 18:23:00 -0500 Subject: [PATCH] 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 * Update projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx Fix punctuation in support link Co-authored-by: Jeremy Herve * 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 * 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 * [not verified] Update projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx Fix punctuation in support link Co-authored-by: Jeremy Herve * [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 * [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 <5714212+IanRamosC@users.noreply.github.com> * 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 Co-authored-by: leogermani Co-authored-by: Ian Ramos <5714212+IanRamosC@users.noreply.github.com> Co-authored-by: Samiff --- ...rovide-additional-disconnect-info-in-backup-plugin | 4 ++++ projects/plugins/backup/src/js/hooks/useConnection.js | 5 +++++ .../backup/src/js/reducers/connected-plugins.js | 5 +++++ projects/plugins/backup/src/js/reducers/index.js | 4 ++++ projects/plugins/backup/src/js/reducers/site-data.js | 5 +++++ .../backup/src/js/selectors/connected-plugins.js | 5 +++++ projects/plugins/backup/src/js/selectors/index.js | 4 ++++ projects/plugins/backup/src/js/selectors/site-data.js | 5 +++++ .../plugins/backup/src/php/class-initial-state.php | 11 ++++++++--- .../plugins/backup/src/php/class-jetpack-backup.php | 10 ++++++++++ 10 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 projects/plugins/backup/changelog/update-provide-additional-disconnect-info-in-backup-plugin create mode 100644 projects/plugins/backup/src/js/reducers/connected-plugins.js create mode 100644 projects/plugins/backup/src/js/reducers/site-data.js create mode 100644 projects/plugins/backup/src/js/selectors/connected-plugins.js create mode 100644 projects/plugins/backup/src/js/selectors/site-data.js 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 new file mode 100644 index 0000000000000..9fb2e90194220 --- /dev/null +++ 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 index c5ef7df2e3cae..11c1cf19fd99a 100644 --- 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 new file mode 100644 index 0000000000000..42689a3a97df5 --- /dev/null +++ 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 index 3a8bcff456a1e..61e2f2b2ca33d 100644 --- 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 new file mode 100644 index 0000000000000..8e1a578dc9566 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..9103e174a54d0 --- /dev/null +++ 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 index 08cdeeb93bc72..78d0074f7c87b 100644 --- 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 new file mode 100644 index 0000000000000..ad9d70ed52064 --- /dev/null +++ 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 index 599eae90eeffa..a09130b428a49 100644 --- 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 index b7926f8a6cc14..6c93ae297f2f8 100644 --- 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 ); + } } /**