Revert "Change/at a glance unify connection ctas"

projects/plugins/jetpack/_inc/client/at-a-glance/connections.jsx

@@ -71,6 +71,7 @@ export class DashConnections extends Component {
  <Gridicon icon="globe" size={ 64 } />
  ) }
  <div className="jp-connection-settings__text">
+ { __( 'Your site is connected to WordPress.com.', 'jetpack' ) }
  { this.props.isConnectionOwner && (
  <span className="jp-connection-settings__is-owner">
  { __( 'You are the Jetpack owner.', 'jetpack' ) }
@@ -101,6 +102,7 @@ export class DashConnections extends Component {
  const maybeShowLinkUnlinkBtn = this.props.isConnectionOwner ? null : (
  <ConnectButton asLink connectUser={ true } from="connection-settings" />
  );
+
  let cardContent = '';
 
  if ( this.props.isOfflineMode ) {
@@ -129,7 +131,14 @@ export class DashConnections extends Component {
  }
 
  if ( ! this.props.isLinked ) {
- cardContent = <div className="jp-connection-settings__info">{ maybeShowLinkUnlinkBtn }</div>;
+ cardContent = (
+ <div>
+ <div className="jp-connection-settings__info">
+ { __( 'Get the most out of Jetpack.', 'jetpack' ) }
+ </div>
+ <div className="jp-connection-settings__actions">{ maybeShowLinkUnlinkBtn }</div>
+ </div>
+ );
  } else if ( this.props.isFetchingUserData ) {
  cardContent = __( 'Loading…', 'jetpack' );
  } else if ( ! this.props.wpComConnectedUser?.email ) {

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 && (
- <JetpackBanner
- title={ __(
- 'Connect your WordPress.com account to enable alerts if your site goes down.',
- 'jetpack'
- ) }
- noIcon
- callToAction={ __( 'Connect', 'jetpack' ) }
- onClick={ this.props.connectUser }
- eventFeature="monitor"
- path="dashboard"
- eventProps={ { type: 'connect' } }
- />
- ) ) ||
- null
- }
  >
  <p className="jp-dash-item__description">
  { this.props.isOfflineMode
  ? __( 'Unavailable in Offline Mode.', 'jetpack' )
  : activateMessage }
  </p>
+
+ { ! this.props.isOfflineMode && ! this.props.hasConnectedOwner && (
+ <p className="jp-dash-item__description jp-dash-item__connect">
+ { createInterpolateElement(
+ __(
+ '<Button>Connect your WordPress.com</Button> account to use this feature.',
+ 'jetpack'
+ ),
+ {
+ Button: <Button className="jp-link-button" onClick={ this.connect } />,
+ }
+ ) }
+ </p>
+ ) }
  </DashItem>
  );
  }

projects/plugins/jetpack/_inc/client/at-a-glance/style.scss

@@ -717,37 +717,3 @@ a.jp-dash-item__manage-in-wpcom,
  border-top: 1px solid $gray-5;
  }
 }
-
-.jp-dash-item.jp-connection-type {
- border: 1px solid transparent;
- border-radius: 4px;
-
- .jp-dash-item__card {
- padding: 16px 16px 16px 24px;
- }
-
- .jp-dash-item__content {
- display: block;
- }
-
- .jp-connection-settings__text {
- flex-grow: 1;
- }
-
- .jp-dash-item__content,
- .jp-connection-settings__text {
- align-self: center;
- }
-
- .dops-banner {
- padding: 0;
-
- &__title {
- padding: 0 0.5rem 0 0;
- }
- }
-
- .dops-banner.dops-card {
- display: block;
- }
-}

projects/plugins/jetpack/_inc/client/at-a-glance/test/component.js

@@ -84,7 +84,7 @@ describe( 'Connections', () => {
  it( 'shows a disconnection link', () => {
  render( <DashConnections { ...testProps } />, { initialState: buildInitialState() } );
  expect(
- withinCard( 'Site connection' ).getByRole( 'button', { name: 'Manage' } )
+ withinCard( 'Site connection' ).getByRole( 'button', { name: 'Manage site connection' } )
  ).toBeInTheDocument();
  } );
 
@@ -128,8 +128,8 @@ describe( 'Connections', () => {
  initialState: buildInitialState( { userIsLinked: false } ),
  } );
  expect(
- withinCard( 'Account connection' ).getByRole( 'button', {
- name: 'Connect',
+ withinCard( 'Account connection' ).getByRole( 'link', {
+ name: 'Connect your WordPress.com account',
  } )
  ).toBeInTheDocument();
  } );

projects/plugins/jetpack/_inc/client/components/banner/index.jsx

@@ -62,7 +62,6 @@ export class Banner extends Component {
  }
  return `/plans/${ siteSlug }`;
  }
-
  return href;
  }
 

projects/plugins/jetpack/_inc/client/components/connect-button/index.jsx

@@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n';
 import { getFragment } from '@wordpress/url';
 import Button from 'components/button';
 import QuerySiteBenefits from 'components/data/query-site-benefits';
-import JetpackBanner from 'components/jetpack-banner';
 import analytics from 'lib/analytics';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -75,10 +74,8 @@ export class ConnectButton extends React.Component {
  }
 
  handleOpenModal = e => {
- if ( e ) {
- e.preventDefault();
- }
  analytics.tracks.recordJetpackClick( 'manage_site_connection' );
+ e.preventDefault();
  this.toggleVisibility();
  };
 
@@ -92,9 +89,7 @@ export class ConnectButton extends React.Component {
  };
 
  loadConnectionScreen = e => {
- if ( e ) {
- e.preventDefault();
- }
+ e.preventDefault();
  // If the iframe is already loaded or we don't have a connectUrl yet, return.
  if ( this.props.isAuthorizing || this.props.fetchingConnectUrl ) {
  return;
@@ -136,19 +131,27 @@ export class ConnectButton extends React.Component {
  );
  }
 
- return (
- <JetpackBanner
- title={ __(
- 'Get the most out of Jetpack by connecting your WordPress.com account',
- 'jetpack'
- ) }
- noIcon
- callToAction={ __( 'Connect', 'jetpack' ) }
- onClick={ this.loadConnectionScreen }
- eventFeature="connect-account"
- path="dashboard"
- eventProps={ { type: 'connect' } }
- />
+ let connectUrl = this.props.connectUrl;
+ if ( this.props.from ) {
+ connectUrl += `&from=${ this.props.from }`;
+ connectUrl += '&additional-user';
+ }
+
+ const buttonProps = {
+ className: 'is-primary jp-jetpack-connect__button',
+ href: connectUrl,
+ disabled: this.props.fetchingConnectUrl || this.props.isAuthorizing,
+ onClick: this.loadConnectionScreen,
+ },
+ connectLegend =
+ this.props.connectLegend || __( 'Connect your WordPress.com account', 'jetpack' );
+
+ return this.props.asLink ? (
+ <a { ...buttonProps }>{ connectLegend }</a>
+ ) : (
+ <Button rna={ this.props.rna } compact={ this.props.compact } { ...buttonProps }>
+ { connectLegend }
+ </Button>
  );
  };
 
@@ -159,15 +162,15 @@ export class ConnectButton extends React.Component {
 
  if ( this.props.isSiteConnected ) {
  return (
- <JetpackBanner
- title={ __( 'Your site is connected to WordPress.com.', 'jetpack' ) }
- noIcon
- callToAction={ this.props.connectLegend || __( 'Manage', 'jetpack' ) }
+ <a
+ role="button"
+ tabIndex="0"
+ onKeyDown={ onKeyDownCallback( this.handleOpenModal ) }
  onClick={ this.handleOpenModal }
- eventFeature="manage-site-connection"
-  path="dashboard"
- eventProps={ { type: 'manage' } }
- />
+ disabled={ this.props.isDisconnecting }
+ >
+ { this.props.connectLegend || __( 'Manage site connection', 'jetpack' ) }
+ </a>
  );
  }
 

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( <ConnectButton { ...testProps } fetchingConnectUrl={ true } />, {
- initialState: buildInitialState(),
- } );
- expect( screen.getByRole( 'button', { name: 'Connect' } ) ).toBeInTheDocument();
+ render( <ConnectButton { ...testProps } fetchingConnectUrl={ true } /> );
+ expect(
+ screen.getByRole( 'link', { name: 'Connect your WordPress.com account' } )
+ ).toBeInTheDocument();
+ } );
+
+ it( 'disables the button while fetching the connect URL', () => {
+ render( <ConnectButton { ...testProps } fetchingConnectUrl={ true } /> );
+ 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( <ConnectButton { ...testProps } /> );
+ 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( <ConnectButton { ...currentTestProps } />, {
-  initialState: buildInitialState(),
- } );
- expect( screen.getByRole( 'button', { name: 'Connect' } ) ).toBeInTheDocument();
+ render( <ConnectButton { ...currentTestProps } /> );
+ 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( <ConnectButtonMock { ...currentTestProps } />, {
-  initialState: buildInitialState(),
- } );
- await user.click( screen.getByRole( 'button', { name: 'Connect' } ) );
+ render( <ConnectButtonMock { ...currentTestProps } /> );
+ 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( <ConnectButton { ...currentTestProps } />, {
- initialState: buildInitialState(),
- } );
+ render( <ConnectButton { ...currentTestProps } /> );
  expect(
  screen.getByRole( 'button', { name: 'Unlink your account from WordPress.com' } )
  ).not.toHaveAttribute( 'href' );
@@ -138,17 +152,15 @@ describe( 'ConnectButton', () => {
  };
 
  it( 'does not link to a URL', () => {
- render( <ConnectButton { ...currentTestProps } />, {
- initialState: buildInitialState(),
- } );
+ render( <ConnectButton { ...currentTestProps } /> );
  expect(
  screen.getByRole( 'button', { name: 'Disconnect your site from WordPress.com' } )
  ).not.toHaveAttribute( 'href' );
  } );
 
  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( <ConnectButtonMock { ...currentTestProps } />, {
- initialState: buildInitialState(),
- } );
+ render( <ConnectButtonMock { ...currentTestProps } /> );
  await user.click(
  screen.getByRole( 'button', { name: 'Disconnect your site from WordPress.com' } )
  );