From 2b91f96ae56cb5ac8e22b6c4311df604922fd2b2 Mon Sep 17 00:00:00 2001 From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com> Date: Mon, 30 Sep 2024 10:38:45 -0600 Subject: [PATCH] Revert "Change/at a glance unify connection ctas (#39535)" (#39584) This reverts commit 4f47d298ffd8726cc5168a27d5540e0242388755. --- .../_inc/client/at-a-glance/connections.jsx | 11 +++- .../_inc/client/at-a-glance/monitor.jsx | 34 +++++------ .../_inc/client/at-a-glance/style.scss | 34 ----------- .../_inc/client/at-a-glance/test/component.js | 6 +- .../_inc/client/components/banner/index.jsx | 1 - .../components/connect-button/index.jsx | 59 ++++++++++--------- .../connect-button/test/component.js | 58 ++++++++++-------- .../connect-button/test/fixtures.js | 27 --------- .../change-at-a-glance-unify-connection-ctas | 4 -- .../pages/wp-admin/jetpack-dashboard.js | 2 +- 10 files changed, 94 insertions(+), 142 deletions(-) delete mode 100644 projects/plugins/jetpack/_inc/client/components/connect-button/test/fixtures.js delete mode 100644 projects/plugins/jetpack/changelog/change-at-a-glance-unify-connection-ctas diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/connections.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/connections.jsx index 273305b7a77d7..812d536a8e5d1 100644 --- a/projects/plugins/jetpack/_inc/client/at-a-glance/connections.jsx +++ b/projects/plugins/jetpack/_inc/client/at-a-glance/connections.jsx @@ -71,6 +71,7 @@ export class DashConnections extends Component { ) }
+ { __( 'Your site is connected to WordPress.com.', 'jetpack' ) } { this.props.isConnectionOwner && ( { __( 'You are the Jetpack owner.', 'jetpack' ) } @@ -101,6 +102,7 @@ export class DashConnections extends Component { const maybeShowLinkUnlinkBtn = this.props.isConnectionOwner ? null : ( ); + let cardContent = ''; if ( this.props.isOfflineMode ) { @@ -129,7 +131,14 @@ export class DashConnections extends Component { } if ( ! this.props.isLinked ) { - cardContent =
{ maybeShowLinkUnlinkBtn }
; + cardContent = ( +
+
+ { __( 'Get the most out of Jetpack.', 'jetpack' ) } +
+
{ maybeShowLinkUnlinkBtn }
+
+ ); } else if ( this.props.isFetchingUserData ) { cardContent = __( 'Loading…', 'jetpack' ); } else if ( ! this.props.wpComConnectedUser?.email ) { diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/monitor.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/monitor.jsx index fbb2b5a1e08fd..077da4c240e10 100644 --- a/projects/plugins/jetpack/_inc/client/at-a-glance/monitor.jsx +++ b/projects/plugins/jetpack/_inc/client/at-a-glance/monitor.jsx @@ -3,10 +3,9 @@ import { createInterpolateElement } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import Button from 'components/button'; import DashItem from 'components/dash-item'; -import JetpackBanner from 'components/jetpack-banner'; import analytics from 'lib/analytics'; import PropTypes from 'prop-types'; -import { Component } from 'react'; +import React, { Component } from 'react'; import { connect } from 'react-redux'; import { isOfflineMode, hasConnectedOwner, connectUser } from 'state/connection'; import { isModuleAvailable } from 'state/modules'; @@ -79,29 +78,26 @@ class DashMonitor extends Component { support={ support } className="jp-dash-item__is-inactive" noToggle={ ! this.props.hasConnectedOwner } - overrideContent={ - ( ! this.props.hasConnectedOwner && ! this.props.isOfflineMode && ( - - ) ) || - null - } >

{ this.props.isOfflineMode ? __( 'Unavailable in Offline Mode.', 'jetpack' ) : activateMessage }

+ + { ! this.props.isOfflineMode && ! this.props.hasConnectedOwner && ( +

+ { createInterpolateElement( + __( + ' account to use this feature.', + 'jetpack' + ), + { + Button: ); }; @@ -159,15 +162,15 @@ export class ConnectButton extends React.Component { if ( this.props.isSiteConnected ) { return ( - + disabled={ this.props.isDisconnecting } + > + { this.props.connectLegend || __( 'Manage site connection', 'jetpack' ) } + ); } diff --git a/projects/plugins/jetpack/_inc/client/components/connect-button/test/component.js b/projects/plugins/jetpack/_inc/client/components/connect-button/test/component.js index 04f6eb067d0cd..63fa59414fbce 100644 --- a/projects/plugins/jetpack/_inc/client/components/connect-button/test/component.js +++ b/projects/plugins/jetpack/_inc/client/components/connect-button/test/component.js @@ -1,8 +1,8 @@ import { jest } from '@jest/globals'; import userEvent from '@testing-library/user-event'; +import React from 'react'; import { render, screen } from 'test/test-utils'; import { ConnectButton } from '../index'; -import { buildInitialState } from './fixtures'; // Mock components that do fetches in the background. We supply needed state directly. jest.mock( 'components/data/query-site-benefits', () => ( { @@ -29,10 +29,26 @@ describe( 'ConnectButton', () => { describe( 'Initially', () => { it( 'renders a button to connect or link', () => { - render( , { - initialState: buildInitialState(), - } ); - expect( screen.getByRole( 'button', { name: 'Connect' } ) ).toBeInTheDocument(); + render( ); + expect( + screen.getByRole( 'link', { name: 'Connect your WordPress.com account' } ) + ).toBeInTheDocument(); + } ); + + it( 'disables the button while fetching the connect URL', () => { + render( ); + expect( screen.getByRole( 'link', { name: 'Connect your WordPress.com account' } ) ) + // eslint-disable-next-line jest-dom/prefer-enabled-disabled -- `.toBeDisabled()` doesn't work on links. + .toHaveAttribute( 'disabled' ); + } ); + } ); + + describe( 'When it is used to link a user', () => { + it( 'has a link to jetpack.wordpress.com', () => { + render( ); + expect( + screen.getByRole( 'link', { name: 'Connect your WordPress.com account' } ) + ).toHaveAttribute( 'href', 'https://jetpack.wordpress.com/jetpack.authorize/1/' ); } ); } ); @@ -46,15 +62,15 @@ describe( 'ConnectButton', () => { }; it( 'has a link to jetpack.wordpress.com', () => { - render( , { - initialState: buildInitialState(), - } ); - expect( screen.getByRole( 'button', { name: 'Connect' } ) ).toBeInTheDocument(); + render( ); + expect( + screen.getByRole( 'link', { name: 'Link your account to WordPress.com' } ) + ).toHaveAttribute( 'href', 'https://jetpack.wordpress.com/jetpack.authorize/1/' ); } ); it( 'when clicked, loadConnectionScreen() is called once', async () => { const user = userEvent.setup(); - const loadConnectionScreen = jest.fn(); + const loadConnectionScreen = jest.fn( e => e.preventDefault() ); class ConnectButtonMock extends ConnectButton { constructor( props ) { @@ -63,10 +79,10 @@ describe( 'ConnectButton', () => { } } - render( , { - initialState: buildInitialState(), - } ); - await user.click( screen.getByRole( 'button', { name: 'Connect' } ) ); + render( ); + await user.click( + screen.getByRole( 'link', { name: 'Link your account to WordPress.com' } ) + ); expect( loadConnectionScreen ).toHaveBeenCalledTimes( 1 ); } ); } ); @@ -80,9 +96,7 @@ describe( 'ConnectButton', () => { }; it( 'does not link to a URL', () => { - render( , { - initialState: buildInitialState(), - } ); + render( ); expect( screen.getByRole( 'button', { name: 'Unlink your account from WordPress.com' } ) ).not.toHaveAttribute( 'href' ); @@ -138,9 +152,7 @@ describe( 'ConnectButton', () => { }; it( 'does not link to a URL', () => { - render( , { - initialState: buildInitialState(), - } ); + render( ); expect( screen.getByRole( 'button', { name: 'Disconnect your site from WordPress.com' } ) ).not.toHaveAttribute( 'href' ); @@ -148,7 +160,7 @@ describe( 'ConnectButton', () => { it( 'when clicked, handleOpenModal() is called once', async () => { const user = userEvent.setup(); - const handleOpenModal = jest.fn(); + const handleOpenModal = jest.fn( e => e.preventDefault() ); class ConnectButtonMock extends ConnectButton { constructor( props ) { @@ -157,9 +169,7 @@ describe( 'ConnectButton', () => { } } - render( , { - initialState: buildInitialState(), - } ); + render( ); await user.click( screen.getByRole( 'button', { name: 'Disconnect your site from WordPress.com' } ) ); diff --git a/projects/plugins/jetpack/_inc/client/components/connect-button/test/fixtures.js b/projects/plugins/jetpack/_inc/client/components/connect-button/test/fixtures.js deleted file mode 100644 index 2ffddcfba3695..0000000000000 --- a/projects/plugins/jetpack/_inc/client/components/connect-button/test/fixtures.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Build an object that can be used as a Redux store initial state. - * - * @return {object} – initial Redux state - */ -export function buildInitialState() { - return { - jetpack: { - initialState: { - userData: { - currentUser: { - permissions: { - manage_modules: true, - }, - }, - }, - }, - connection: { - user: { - currentUser: { - isConnected: true, - }, - }, - }, - }, - }; -} diff --git a/projects/plugins/jetpack/changelog/change-at-a-glance-unify-connection-ctas b/projects/plugins/jetpack/changelog/change-at-a-glance-unify-connection-ctas deleted file mode 100644 index af2f73b816a2b..0000000000000 --- a/projects/plugins/jetpack/changelog/change-at-a-glance-unify-connection-ctas +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: other - -Unify connection related CTAs on At A Glance diff --git a/tools/e2e-commons/pages/wp-admin/jetpack-dashboard.js b/tools/e2e-commons/pages/wp-admin/jetpack-dashboard.js index 41df6fe5c5dbe..e5be2e4f82e6e 100644 --- a/tools/e2e-commons/pages/wp-admin/jetpack-dashboard.js +++ b/tools/e2e-commons/pages/wp-admin/jetpack-dashboard.js @@ -49,7 +49,7 @@ export default class JetpackDashboardPage extends WpPage { logger.step( 'Checking that WordPress.com user is not connected' ); const selector = `${ this.#connectionInfoContainerSel } >> nth=1`; return ( await this.page.locator( selector ).innerText() ).includes( - 'Get the most out of Jetpack by connecting your WordPress.com account' + 'Get the most out of Jetpack' ); } }