From a6b9c43c3096d227831685323b49ca1cb65ecf13 Mon Sep 17 00:00:00 2001 From: Elio Rivero Date: Thu, 16 Feb 2017 19:49:33 -0300 Subject: [PATCH 1/2] Settings UI - At a Glance: add link to wpcom security settings in Monitor card --- _inc/client/at-a-glance/akismet.jsx | 1 - _inc/client/at-a-glance/plugins.jsx | 2 -- _inc/client/components/dash-item/index.jsx | 31 +++++++++++++++++-- _inc/client/components/dash-item/style.scss | 1 + .../components/dash-item/test/component.js | 21 ++++++++++++- 5 files changed, 50 insertions(+), 6 deletions(-) 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..4f93679a5fc22 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', @@ -101,6 +105,27 @@ export const DashItem = React.createClass( { ); } + + if ( 'monitor' === this.props.module && ! this.props.isDevMode ) { + toggle = ( +
+ { + this.props.isModuleActivated( this.props.module ) && ( + + ) + } + { + toggle + } +
+ ); + } } if ( this.props.pro && ! this.props.isDevMode ) { @@ -141,7 +166,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/style.scss b/_inc/client/components/dash-item/style.scss index d23c5b3b4510a..c392a6bbf6164 100644 --- a/_inc/client/components/dash-item/style.scss +++ b/_inc/client/components/dash-item/style.scss @@ -40,6 +40,7 @@ .dops-button { font-style: normal; + margin-right: rem( 8px ); } .dops-section-header__label { diff --git a/_inc/client/components/dash-item/test/component.js b/_inc/client/components/dash-item/test/component.js index b3ee65e26a519..bbffa8d8e9fa8 100644 --- a/_inc/client/components/dash-item/test/component.js +++ b/_inc/client/components/dash-item/test/component.js @@ -26,7 +26,7 @@ describe( 'DashItem', () => { isTogglingModule: () => true, toggleModule: () => false, siteAdminUrl: 'https://example.org/wp-admin/', - siteRawUrl: 'https://example.org/' + siteRawUrl: 'example.org' }; const wrapper = shallow( ); @@ -126,6 +126,25 @@ 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 ); + } ); + + it( 'and 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/' + testProps.siteRawUrl ); + } ); + + } ); + describe( 'when site is in Dev Mode, not a PRO module, user can not toggle', () => { testProps = Object.assign( testProps, { From 85fb8059f96e78a8fd8f97caa69e54c20ed2b47e Mon Sep 17 00:00:00 2001 From: Elio Rivero Date: Mon, 20 Feb 2017 17:45:39 -0300 Subject: [PATCH 2/2] Settings UI - At a Glance: remove toggle in Monitor card and only display the Settings button when it's active. Update GUI tests. --- _inc/client/components/dash-item/index.jsx | 27 +++----- _inc/client/components/dash-item/style.scss | 1 - .../components/dash-item/test/component.js | 69 ++++++++++++++----- 3 files changed, 59 insertions(+), 38 deletions(-) diff --git a/_inc/client/components/dash-item/index.jsx b/_inc/client/components/dash-item/index.jsx index 4f93679a5fc22..f08dcda91b93f 100644 --- a/_inc/client/components/dash-item/index.jsx +++ b/_inc/client/components/dash-item/index.jsx @@ -61,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' ) }; } } @@ -106,24 +106,15 @@ export const DashItem = React.createClass( { ); } - if ( 'monitor' === this.props.module && ! this.props.isDevMode ) { - toggle = ( -
- { - this.props.isModuleActivated( this.props.module ) && ( - - ) - } + if ( 'monitor' === this.props.module ) { + toggle = ! this.props.isDevMode && this.props.isModuleActivated( this.props.module ) && ( +
+ ); } } diff --git a/_inc/client/components/dash-item/style.scss b/_inc/client/components/dash-item/style.scss index c392a6bbf6164..d23c5b3b4510a 100644 --- a/_inc/client/components/dash-item/style.scss +++ b/_inc/client/components/dash-item/style.scss @@ -40,7 +40,6 @@ .dops-button { font-style: normal; - margin-right: rem( 8px ); } .dops-section-header__label { diff --git a/_inc/client/components/dash-item/test/component.js b/_inc/client/components/dash-item/test/component.js index bbffa8d8e9fa8..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, @@ -33,7 +33,7 @@ describe( 'DashItem', () => { 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' ); } ); } ); @@ -138,11 +138,6 @@ describe( 'DashItem', () => { expect( wrapper.find( 'ModuleToggle' ) ).to.have.length( 1 ); } ); - it( 'and 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/' + testProps.siteRawUrl ); - } ); - } ); describe( 'when site is in Dev Mode, not a PRO module, user can not toggle', () => { @@ -165,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 ); } ); } );