Skip to content

Settings UI - At a Glance: add link to wpcom in Monitor card #6433

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 21, 2017
Merged

Settings UI - At a Glance: add link to wpcom in Monitor card #6433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6b9c43
Settings UI - At a Glance: add link to wpcom security settings in Mon…
eliorivero Feb 16, 2017
85fb805
Settings UI - At a Glance: remove toggle in Monitor card and only dis…
eliorivero Feb 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion _inc/client/at-a-glance/akismet.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ const DashAkismet = React.createClass( {
status="is-warning"
statusText={ __( 'Invalid key' ) }
pro={ true }
siteAdminUrl={ this.props.siteAdminUrl }
>
<p className="jp-dash-item__description">
{
Expand Down
2 changes: 0 additions & 2 deletions _inc/client/at-a-glance/plugins.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,6 @@ const DashPluginUpdates = React.createClass( {
label={ labelName }
module="manage"
status="is-warning"
siteRawUrl={ this.props.siteRawUrl }
siteAdminUrl={ this.props.siteAdminUrl }
>
<h2 className="jp-dash-item__count">
{
Expand Down
26 changes: 22 additions & 4 deletions _inc/client/components/dash-item/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 ) ? '' : (
<ModuleToggle
slug={ this.props.module }
activated={ this.props.isModuleActivated( this.props.module ) }
Expand All @@ -84,7 +88,7 @@ export const DashItem = React.createClass( {
);
}
if ( 'is-working' === this.props.status ) {
toggle = <span className="jp-dash-item__active-label">{ __( 'Active' ) }</span>
toggle = <span className="jp-dash-item__active-label">{ __( 'Active' ) }</span>;
}
}

Expand All @@ -101,6 +105,18 @@ export const DashItem = React.createClass( {
</a>
);
}

if ( 'monitor' === this.props.module ) {
toggle = ! this.props.isDevMode && this.props.isModuleActivated( this.props.module ) && (
<Button
href={ 'https://wordpress.com/settings/security/' + this.props.siteRawUrl }
compact>
{
__( 'Settings' )
}
</Button>
);
}
}

if ( this.props.pro && ! this.props.isDevMode ) {
Expand Down Expand Up @@ -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 ) => {
Expand Down
80 changes: 65 additions & 15 deletions _inc/client/components/dash-item/test/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import { DashItem } from '../index';
describe( 'DashItem', () => {

let testProps = {
label: 'Monitor',
module: 'monitor',
label: 'Protect',
module: 'protect',
status: '',
statusText: '',
disabled: true,
Expand All @@ -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( <DashItem { ...testProps } /> );

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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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' );
} );

} );
Expand All @@ -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( <DashItem { ...testProps } /> );

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, {
Expand All @@ -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( <DashItem { ...testProps } /> );
const wrapper = shallow( <DashItem { ...manageProps } /> );

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( <DashItem { ...testProps } isModuleActivated={ () => false } /> ).find( 'SectionHeader' ).find( 'a' ).props().href ).to.be.equal( testProps.siteAdminUrl + 'plugins.php' );
expect( shallow( <DashItem { ...manageProps } isModuleActivated={ () => 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( <DashItem { ...testProps } status="is-working" /> ).find( 'SectionHeader' ).find( '.jp-dash-item__active-label' ) ).to.have.length( 1 );
expect( shallow( <DashItem { ...manageProps } status="is-working" /> ).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( <DashItem { ...monitorProps } /> );

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 );
} );

} );
Expand Down