Improve visibility of PR controls to take into account user write permission, fixes #1408, fixes #1065

Author: IllusionMH

preview-src/cache.ts

@@ -24,6 +24,9 @@ export interface PullRequest {
 	labels: ILabel[];
 	commitsCount: number;
 	repositoryDefaultBranch: any;
+	/**
+	 * User can edit PR title and description (author or user with push access)
+	 */
 	canEdit: boolean;
 	/**
 	 * Users with push access to repo have rights to merge/close PRs,

preview-src/merge.tsx

@@ -133,7 +133,7 @@ export const PrActions = (pr: PullRequest) => {
 
 	return isDraft
 		// Only PR author and users with push rights can mark draft as ready for review
-		? hasWritePermission || canEdit
+		? canEdit
 			? <ReadyForReview/>
 			: null
 		: mergeable === PullRequestMergeability.Mergeable && hasWritePermission

preview-src/sidebar.tsx

@@ -7,62 +7,66 @@ import PullRequestContext from './context';
 import { ReviewState, ILabel } from '../src/github/interface';
 import { nbsp } from './space';
 
-export default function Sidebar({ reviewers, labels }: PullRequest) {
+export default function Sidebar({ reviewers, labels, hasWritePermission }: PullRequest) {
 	const { addReviewers, addLabels, updatePR, pr } = useContext(PullRequestContext);
 
 	return <div id='sidebar'>
 		<div id='reviewers' className='section'>
 			<div className='section-header'>
 				<div>Reviewers</div>
-				<button title='Add Reviewers' onClick={async () => {
-					const newReviewers = await addReviewers();
-					updatePR({reviewers: pr.reviewers.concat(newReviewers.added)});
-				}}>{plusIcon}</button>
+				{ hasWritePermission ? (
+					<button title='Add Reviewers' onClick={async () => {
+						const newReviewers = await addReviewers();
+						updatePR({reviewers: pr.reviewers.concat(newReviewers.added)});
+					}}>{plusIcon}</button>
+				) : null }
 			</div>
 			{
 				reviewers.map(state =>
-					<Reviewer key={state.reviewer.login} {...state} />
+					<Reviewer key={state.reviewer.login} {...state} canDelete={hasWritePermission} />
 				)
 			}
 		</div>
 		<div id='labels' className='section'>
 			<div className='section-header'>
 				<div>Labels</div>
-				<button title='Add Labels' onClick={async () => {
-					const newLabels = await addLabels();
-					updatePR({ labels: pr.labels.concat(newLabels.added)});
-				}}>{plusIcon}</button>
+				{ hasWritePermission ? (
+					<button title='Add Labels' onClick={async () => {
+						const newLabels = await addLabels();
+						updatePR({ labels: pr.labels.concat(newLabels.added)});
+					}}>{plusIcon}</button>
+				) : null }
 			</div>
 			{
-				labels.map(label => <Label key={label.name} {...label} />)
+				labels.map(label => <Label key={label.name} {...label} canDelete={hasWritePermission} />)
 			}
 		</div>
 	</div>;
 }
 
-function Reviewer(reviewState: ReviewState) {
-	const	{ reviewer, state } = reviewState;
+function Reviewer(reviewState: ReviewState & { canDelete: boolean }) {
+	const	{ reviewer, state, canDelete } = reviewState;
 	const [ showDelete, setShowDelete ] = useState(false);
 	const { removeReviewer } = useContext(PullRequestContext);
 	return <div className='section-item reviewer'
 		onMouseEnter={state === 'REQUESTED' ? () => setShowDelete(true) : null}
 		onMouseLeave={state === 'REQUESTED' ? () => setShowDelete(false) : null}>
 		<Avatar for={reviewer} />
 		<AuthorLink for={reviewer} />
-		{ showDelete ? <>{nbsp}<a className='remove-item' onClick={() => removeReviewer(reviewState.reviewer.login)}>{deleteIcon}️</a></> : null}
+		{ canDelete && showDelete ? <>{nbsp}<a className='remove-item' onClick={() => removeReviewer(reviewState.reviewer.login)}>{deleteIcon}️</a></> : null}
 		{REVIEW_STATE[state]}
 	</div>;
 }
 
-function Label(label: ILabel) {
-	const { name } = label;
+function Label(label: ILabel & { canDelete: boolean }) {
+	const { name, canDelete } = label;
 	const [ showDelete, setShowDelete ] = useState(false);
 	const { removeLabel } = useContext(PullRequestContext);
 	return <div className='section-item label'
 		onMouseEnter={() => setShowDelete(true)}
 		onMouseLeave={() => setShowDelete(false)}>
 		{name}
-		{ showDelete ? <>{nbsp}<a className='push-right remove-item' onClick={() => removeLabel(name)}>{deleteIcon}️</a>{nbsp}</> : null}
+		{ canDelete && showDelete ? <>{nbsp}<a className='push-right remove-item' onClick={() => removeLabel(name)}>{deleteIcon}️</a>{nbsp}</> : null}
 	</div>;
 }
 
@@ -71,4 +75,4 @@ const REVIEW_STATE: { [state: string]: React.ReactElement } = {
 	COMMENTED: cloneElement(commentIcon, { className: 'push-right', Root: 'div', title: 'Left review comments' }),
 	APPROVED: cloneElement(checkIcon, { className: 'push-right', title: 'Approved these changes' }),
 	CHANGES_REQUESTED: cloneElement(diffIcon, { className: 'push-right', title: 'Requested changes' }),
-};
+};

src/github/pullRequestOverview.ts

@@ -226,7 +226,7 @@ export class PullRequestOverviewPanel {
 			this._panel.title = `Pull Request #${pullRequestModel.prNumber.toString()}`;
 
 			const isCurrentlyCheckedOut = pullRequestModel.equals(this._pullRequestManager.activePullRequest);
-			const canEdit = this._pullRequestManager.canEditPullRequest(this._pullRequest);
+			const canEdit = hasWritePermission || this._pullRequestManager.canEditPullRequest(this._pullRequest);
 			const preferredMergeMethod = vscode.workspace.getConfiguration('githubPullRequests').get<MergeMethod>('defaultMergeMethod');
 			const supportsGraphQl = pullRequestModel.githubRepository.supportsGraphQl;
 			const defaultMergeMethod = getDetaultMergeMethod(mergeMethodsAvailability, preferredMergeMethod);