Chrome: Hide Sidebar Panels if the user don't have the right capabilities

editor/sidebar/post-author/index.js

@@ -44,12 +44,12 @@ export class PostAuthor extends Component {
 	}
 
 	render() {
+		const { postAuthor, instanceId, user } = this.props;
 		const authors = this.getAuthors();
-		if ( authors.length < 2 ) {
+		if ( ! user.data || ! user.data.capabilities.publish_posts || authors.length < 2 ) {
 			return null;
 		}
 
-		const { postAuthor, instanceId } = this.props;
 		const selectId = 'post-author-selector-' + instanceId;
 
 		// Disable reason: A select with an onchange throws a warning
@@ -90,6 +90,7 @@ const applyConnect = connect(
 const applyWithAPIData = withAPIData( () => {
 	return {
 		users: '/wp/v2/users?context=edit&per_page=100',
+		user: '/wp/v2/users/me?context=edit',
 	};
 } );
 

editor/sidebar/post-author/test/index.js

@@ -35,17 +35,25 @@ describe( 'PostAuthor', () => {
 		],
 	};
 
+	const user = {
+		data: {
+			capabilities: {
+				publish_posts: true,
+			},
+		},
+	};
+
 	describe( '#getAuthors()', () => {
 		it( 'returns empty array on unknown users', () => {
-			const wrapper = shallow( <PostAuthor users={ {} } /> );
+			const wrapper = shallow( <PostAuthor users={ {} } user={ user } /> );
 
 			const authors = wrapper.instance().getAuthors();
 
 			expect( authors ).toEqual( [] );
 		} );
 
 		it( 'filters users to authors', () => {
-			const wrapper = shallow( <PostAuthor users={ users } /> );
+			const wrapper = shallow( <PostAuthor users={ users } user={ user } /> );
 
 			const authors = wrapper.instance().getAuthors();
 
@@ -54,30 +62,39 @@ describe( 'PostAuthor', () => {
 	} );
 
 	describe( '#render()', () => {
+		it( 'should not render anything if the user doesn\'t have the right capabilities', () => {
+			let wrapper = shallow( <PostAuthor users={ users } user={ {} } /> );
+			expect( wrapper.type() ).toBe( null );
+			wrapper = shallow( <PostAuthor users={ users } user={
+				{ data: { capabilities: { publish_posts: false } } }
+			} /> );
+			expect( wrapper.type() ).toBe( null );
+		} );
+
 		it( 'should not render anything if users unknown', () => {
-			const wrapper = shallow( <PostAuthor users={ {} } /> );
+			const wrapper = shallow( <PostAuthor users={ {} } user={ user } /> );
 
 			expect( wrapper.type() ).toBe( null );
 		} );
 
 		it( 'should not render anything if single user', () => {
 			const wrapper = shallow(
-				<PostAuthor users={ { data: users.data.slice( 0, 1 ) } } />
+				<PostAuthor users={ { data: users.data.slice( 0, 1 ) } } user={ user } />
 			);
 
 			expect( wrapper.type() ).toBe( null );
 		} );
 
 		it( 'should not render anything if single filtered user', () => {
 			const wrapper = shallow(
-				<PostAuthor users={ { data: users.data.slice( 0, 2 ) } } />
+				<PostAuthor users={ { data: users.data.slice( 0, 2 ) } } user={ user } />
 			);
 
 			expect( wrapper.type() ).toBe( null );
 		} );
 
 		it( 'should render select control', () => {
-			const wrapper = shallow( <PostAuthor users={ users } /> );
+			const wrapper = shallow( <PostAuthor users={ users } user={ user } /> );
 
 			expect( wrapper.find( 'select' ).length ).not.toBe( 0 );
 		} );
@@ -87,6 +104,7 @@ describe( 'PostAuthor', () => {
 			const wrapper = shallow(
 				<PostAuthor
 					users={ users }
+					user={ user }
 					onUpdateAuthor={ onUpdateAuthor } />
 			);
 

editor/sidebar/post-pending-status/index.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { flowRight } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelRow, FormToggle, withInstanceId, withAPIData } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getEditedPostAttribute,
+	isCurrentPostPublished,
+} from '../../selectors';
+import { editPost } from '../../actions';
+
+export function PostPendingStatus( { isPublished, instanceId, status, onUpdateStatus, user } ) {
+	if ( isPublished || ! user.data || ! user.data.capabilities.publish_posts ) {
+		return null;
+	}
+	const pendingId = 'pending-toggle-' + instanceId;
+	const togglePendingStatus = () => {
+		const updatedStatus = status === 'pending' ? 'draft' : 'pending';
+		onUpdateStatus( updatedStatus );
+	};
+
+	return (
+		<PanelRow>
+			<label htmlFor={ pendingId }>{ __( 'Pending review' ) }</label>
+			<FormToggle
+				id={ pendingId }
+				checked={ status === 'pending' }
+				onChange={ togglePendingStatus }
+				showHint={ false }
+			/>
+		</PanelRow>
+	);
+}
+
+const applyConnect = connect(
+	( state ) => ( {
+		status: getEditedPostAttribute( state, 'status' ),
+		isPublished: isCurrentPostPublished( state ),
+	} ),
+	{
+		onUpdateStatus( status ) {
+			return editPost( { status } );
+		},
+	}
+);
+
+const applyWithAPIData = withAPIData( () => {
+	return {
+		user: '/wp/v2/users/me?context=edit',
+	};
+} );
+
+export default flowRight(
+	applyConnect,
+	applyWithAPIData,
+	withInstanceId
+)( PostPendingStatus );

editor/sidebar/post-pending-status/test/index.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { PostPendingStatus } from '../';
+
+describe( 'PostPendingStatus', () => {
+	const user = {
+		data: {
+			capabilities: {
+				publish_posts: true,
+			},
+		},
+	};
+
+	it( 'should not render anything if the user doesn\'t have the right capabilities', () => {
+		let wrapper = shallow( <PostPendingStatus user={ {} } /> );
+		expect( wrapper.type() ).toBe( null );
+		wrapper = shallow( <PostPendingStatus user={
+			{ data: { capabilities: { publish_posts: false } } }
+		} /> );
+		expect( wrapper.type() ).toBe( null );
+	} );
+
+	it( 'should render if the user has the correct capability', () => {
+		const wrapper = shallow( <PostPendingStatus user={ user } /> );
+		expect( wrapper.type() ).not.toBe( null );
+	} );
+} );

editor/sidebar/post-schedule/index.js

@@ -5,14 +5,15 @@ import { connect } from 'react-redux';
 import clickOutside from 'react-click-outside';
 import DatePicker from 'react-datepicker';
 import moment from 'moment';
+import { flowRight } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { dateI18n, settings } from '@wordpress/date';
-import { PanelRow } from '@wordpress/components';
+import { PanelRow, withAPIData } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -22,7 +23,7 @@ import PostScheduleClock from './clock';
 import { getEditedPostAttribute } from '../../selectors';
 import { editPost } from '../../actions';
 
-class PostSchedule extends Component {
+export class PostSchedule extends Component {
 	constructor() {
 		super( ...arguments );
 		this.state = {
@@ -40,7 +41,12 @@ class PostSchedule extends Component {
 	}
 
 	render() {
-		const { date, onUpdateDate } = this.props;
+		const { date, onUpdateDate, user } = this.props;
+
+		if ( ! user.data || ! user.data.capabilities.publish_posts ) {
+			return null;
+		}
+
 		const momentDate = date ? moment( date ) : moment();
 		const label = date
 			? dateI18n( settings.formats.datetime, date )
@@ -91,7 +97,7 @@ class PostSchedule extends Component {
 	}
 }
 
-export default connect(
+const applyConnect = connect(
 	( state ) => {
 		return {
 			date: getEditedPostAttribute( state, 'date' ),
@@ -104,4 +110,16 @@ export default connect(
 			},
 		};
 	}
-)( clickOutside( PostSchedule ) );
+);
+
+const applyWithAPIData = withAPIData( () => {
+	return {
+		user: '/wp/v2/users/me?context=edit',
+	};
+} );
+
+export default flowRight(
+	applyConnect,
+	applyWithAPIData,
+	clickOutside
+)( PostSchedule );

editor/sidebar/post-schedule/test/index.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { PostSchedule } from '../';
+
+describe( 'PostSchedule', () => {
+	const user = {
+		data: {
+			capabilities: {
+				publish_posts: true,
+			},
+		},
+	};
+
+	it( 'should not render anything if the user doesn\'t have the right capabilities', () => {
+		let wrapper = shallow( <PostSchedule user={ {} } /> );
+		expect( wrapper.type() ).toBe( null );
+		wrapper = shallow( <PostSchedule user={
+			{ data: { capabilities: { publish_posts: false } } }
+		} /> );
+		expect( wrapper.type() ).toBe( null );
+	} );
+
+	it( 'should render if the user has the correct capability', () => {
+		const wrapper = shallow( <PostSchedule user={ user } /> );
+		expect( wrapper.type() ).not.toBe( null );
+	} );
+} );