diff --git a/_inc/client/at-a-glance/akismet.jsx b/_inc/client/at-a-glance/akismet.jsx index 35bc22d3d2c55..a4d44fd79993c 100644 --- a/_inc/client/at-a-glance/akismet.jsx +++ b/_inc/client/at-a-glance/akismet.jsx @@ -100,7 +100,6 @@ const DashAkismet = React.createClass( { status="is-warning" statusText={ __( 'Invalid key' ) } pro={ true } - siteAdminUrl={ this.props.siteAdminUrl } >

{ diff --git a/_inc/client/at-a-glance/plugins.jsx b/_inc/client/at-a-glance/plugins.jsx index 8824a85b8a19a..95ac2b62f19a4 100644 --- a/_inc/client/at-a-glance/plugins.jsx +++ b/_inc/client/at-a-glance/plugins.jsx @@ -57,8 +57,6 @@ const DashPluginUpdates = React.createClass( { label={ labelName } module="manage" status="is-warning" - siteRawUrl={ this.props.siteRawUrl } - siteAdminUrl={ this.props.siteAdminUrl } >

{ diff --git a/_inc/client/components/dash-item/index.jsx b/_inc/client/components/dash-item/index.jsx index 18ee971cfab53..f08dcda91b93f 100644 --- a/_inc/client/components/dash-item/index.jsx +++ b/_inc/client/components/dash-item/index.jsx @@ -25,7 +25,11 @@ import { getModule as _getModule } from 'state/modules'; import ProStatus from 'pro-status'; -import { userCanManageModules } from 'state/initial-state'; +import { + getSiteRawUrl, + getSiteAdminUrl, + userCanManageModules +} from 'state/initial-state'; export const DashItem = React.createClass( { displayName: 'DashItem', @@ -57,7 +61,7 @@ export const DashItem = React.createClass( { ); if ( '' !== this.props.module ) { - toggle = ( includes( [ 'protect', 'monitor', 'photon', 'vaultpress', 'scan', 'backups', 'akismet' ], this.props.module ) && this.props.isDevMode ) ? '' : ( + toggle = ( includes( [ 'protect', 'photon', 'vaultpress', 'scan', 'backups', 'akismet' ], this.props.module ) && this.props.isDevMode ) ? '' : ( { __( 'Active' ) } + toggle = { __( 'Active' ) }; } } @@ -101,6 +105,18 @@ export const DashItem = React.createClass( { ); } + + if ( 'monitor' === this.props.module ) { + toggle = ! this.props.isDevMode && this.props.isModuleActivated( this.props.module ) && ( + + ); + } } if ( this.props.pro && ! this.props.isDevMode ) { @@ -141,7 +157,9 @@ export default connect( isTogglingModule: ( module_name ) => isActivatingModule( state, module_name ) || isDeactivatingModule( state, module_name ), getModule: ( module_name ) => _getModule( state, module_name ), isDevMode: isDevMode( state ), - userCanToggle: userCanManageModules( state ) + userCanToggle: userCanManageModules( state ), + siteRawUrl: getSiteRawUrl( state ), + siteAdminUrl: getSiteAdminUrl( state ) }; }, ( dispatch ) => { diff --git a/_inc/client/components/dash-item/test/component.js b/_inc/client/components/dash-item/test/component.js index b3ee65e26a519..8de8b50337d6e 100644 --- a/_inc/client/components/dash-item/test/component.js +++ b/_inc/client/components/dash-item/test/component.js @@ -13,8 +13,8 @@ import { DashItem } from '../index'; describe( 'DashItem', () => { let testProps = { - label: 'Monitor', - module: 'monitor', + label: 'Protect', + module: 'protect', status: '', statusText: '', disabled: true, @@ -26,14 +26,14 @@ describe( 'DashItem', () => { isTogglingModule: () => true, toggleModule: () => false, siteAdminUrl: 'https://example.org/wp-admin/', - siteRawUrl: 'https://example.org/' + siteRawUrl: 'example.org' }; const wrapper = shallow( ); it( 'has the right label for header', () => { expect( wrapper.find( 'SectionHeader' ) ).to.have.length( 1 ); - expect( wrapper.find( 'SectionHeader' ).props().label ).to.be.equal( 'Monitor' ); + expect( wrapper.find( 'SectionHeader' ).props().label ).to.be.equal( 'Protect' ); } ); it( 'the card body is built and has its href property correctly set', () => { @@ -70,7 +70,7 @@ describe( 'DashItem', () => { } ); it( 'the badge references the module', () => { - expect( proStatus.props().proFeature ).to.be.equal( 'monitor' ); + expect( proStatus.props().proFeature ).to.be.equal( 'protect' ); } ); it( 'the admin URL is correct', () => { @@ -107,7 +107,7 @@ describe( 'DashItem', () => { } ); it( 'the toggle references the module this card belongs to', () => { - expect( wrapper.find( 'ModuleToggle' ).props().slug ).to.be.equal( 'monitor' ); + expect( wrapper.find( 'ModuleToggle' ).props().slug ).to.be.equal( 'protect' ); } ); } ); @@ -126,6 +126,20 @@ describe( 'DashItem', () => { } ); + describe( 'when site is connected and user can toggle, the Monitor dash item', () => { + + testProps = Object.assign( testProps, { + userCanToggle: true + } ); + + const wrapper = shallow( ); + + it( 'has a toggle', () => { + expect( wrapper.find( 'ModuleToggle' ) ).to.have.length( 1 ); + } ); + + } ); + describe( 'when site is in Dev Mode, not a PRO module, user can not toggle', () => { testProps = Object.assign( testProps, { @@ -146,29 +160,65 @@ describe( 'DashItem', () => { describe( 'if this is the DashItem for Manage module', () => { - testProps = Object.assign( testProps, { - module: 'manage', + let manageProps = { label: 'Manage', + module: 'manage', status: 'is-warning', - userCanToggle: true - } ); + pro: false, + isDevMode: false, + userCanToggle: true, + isModuleActivated: () => true, + isTogglingModule: () => true, + toggleModule: () => false, + siteAdminUrl: 'https://example.org/wp-admin/', + siteRawUrl: 'example.org' + }; - const wrapper = shallow( ); + const wrapper = shallow( ); it( "shows a warning badge when status is 'is-warning'", () => { expect( wrapper.find( 'SimpleNotice' ) ).to.have.length( 1 ); } ); - it( 'when Manage is deactivated, the warning badge is linked to Plugins screen in WordPress.com', () => { - expect( wrapper.find( 'SectionHeader' ).find( 'a' ).props().href ).to.be.equal( 'https://wordpress.com/plugins/' + testProps.siteRawUrl ); + it( 'when it is activated, the warning badge is linked to Plugins screen in WordPress.com', () => { + expect( wrapper.find( 'SectionHeader' ).find( 'a' ).props().href ).to.be.equal( 'https://wordpress.com/plugins/' + manageProps.siteRawUrl ); } ); it( 'when Manage is deactivated, the warning badge is linked to Plugins screen in WP Admin', () => { - expect( shallow( false } /> ).find( 'SectionHeader' ).find( 'a' ).props().href ).to.be.equal( testProps.siteAdminUrl + 'plugins.php' ); + expect( shallow( false } /> ).find( 'SectionHeader' ).find( 'a' ).props().href ).to.be.equal( manageProps.siteAdminUrl + 'plugins.php' ); } ); it( "when status is 'is-working', the warning badge has an 'active' label", () => { - expect( shallow( ).find( 'SectionHeader' ).find( '.jp-dash-item__active-label' ) ).to.have.length( 1 ); + expect( shallow( ).find( 'SectionHeader' ).find( '.jp-dash-item__active-label' ) ).to.have.length( 1 ); + } ); + + } ); + + describe( 'if this is the DashItem for Monitor module', () => { + + const monitorProps = { + module: 'monitor', + label: 'Monitor', + status: '', + pro: false, + isDevMode: false, + userCanToggle: true, + isModuleActivated: () => true, + isTogglingModule: () => true, + toggleModule: () => false, + siteAdminUrl: 'https://example.org/wp-admin/', + siteRawUrl: 'example.org' + }; + + const wrapper = shallow( ); + + it( 'shows a button to configure settings in wpcom', () => { + expect( wrapper.find( 'Button' ) ).to.have.length( 1 ); + } ); + + it( 'has a link to Calypso settings', () => { + expect( wrapper.find( 'Button' ) ).to.have.length( 1 ); + expect( wrapper.find( 'Button' ).props().href ).to.contain( 'https://wordpress.com/settings/security/' + monitorProps.siteRawUrl ); } ); } );