Add pr-base-commit feature

readme.md

@@ -95,8 +95,8 @@ GitHub Enterprise is also supported: [How to enable it](https://fregante.github.
  <p><img src="https://user-images.githubusercontent.com/1402241/54978791-45906080-4fdc-11e9-8fe1-45374f8ff636.png">
  <tr>
  <th width="50%">
- <p><a title="reactions-avatars"></a> Adds reaction avatars showing <i>who</i> reacted to a comment
- <p><img src="https://user-images.githubusercontent.com/1402241/130341871-6a0d69f4-8d0c-4882-a5ed-aac9b7613b0a.png">
+ <p><a title="pr-base-commit"></a> Shows how far behind a PR head branch is + tells you its base commit
+ <p><img src="https://user-images.githubusercontent.com/1402241/234492651-b54bf9ba-c218-4a30-bed4-f85a7f037297.png">
  <th width="50%">
  <p><a title="conversation-activity-filter"></a> Lets you hide every event except comments or unresolved comments in issues and PRs
  <p><img src="https://user-images.githubusercontent.com/1402241/109592127-5f922200-7ad4-11eb-8dfa-1d80fb28e70e.png">
@@ -212,6 +212,7 @@ Thanks for contributing! 🦋🙌
 
 ### Reading comments
 
+- [](# "reactions-avatars") 🔥 [Adds reaction avatars showing _who_ reacted to a comment](https://user-images.githubusercontent.com/1402241/234492651-b54bf9ba-c218-4a30-bed4-f85a7f037297.png)
 - [](# "embed-gist-inline") [Embeds short gists when linked in comments on their own lines.](https://user-images.githubusercontent.com/1402241/152117903-80d784d5-4f43-4786-bc4c-d4993aec5c79.png)
 - [](# "comments-time-machine-links") Adds links to [browse the repository](https://user-images.githubusercontent.com/1402241/56450896-68076680-635b-11e9-8b24-ebd11cc4e655.png) and [linked files](https://user-images.githubusercontent.com/1402241/56450895-68076680-635b-11e9-86b4-b6c2f3745d51.png) at the time of each comment.
 - [](# "show-names") [Adds the real name of users by their usernames.](https://user-images.githubusercontent.com/1402241/62075835-5f82ce00-b270-11e9-91eb-4680b70cb3cb.png)

source/features/pr-base-commit.tsx

@@ -0,0 +1,85 @@
+import React from 'dom-chef';
+import select from 'select-dom';
+
+import * as pageDetect from 'github-url-detection';
+
+import features from '../feature-manager';
+import observe from '../helpers/selector-observer';
+import * as api from '../github-helpers/api';
+import {getBranches} from '../github-helpers/pr-branches';
+import getPrInfo, {PullRequestInfo} from '../github-helpers/get-pr-info';
+import pluralize from '../helpers/pluralize';
+import {buildRepoURL} from '../github-helpers';
+import {linkifyCommit} from '../github-helpers/dom-formatters';
+import {removeTextNodeContaining} from '../helpers/dom-utils';
+
+function getBaseCommitNotice(prInfo: PullRequestInfo): JSX.Element {
+ const {base} = getBranches();
+ const commit = linkifyCommit(prInfo.baseRefOid);
+ const count = pluralize(prInfo.behindBy, '$$ commit');
+ const countLink = (
+ <a href={buildRepoURL('compare', `${prInfo.baseRefOid.slice(0, 8)}...${base.branch}`)}>
+ {count}
+ </a>
+ );
+ return (
+ <>It’s {countLink} behind (base commit: {commit})</>
+ );
+}
+
+async function addInfo(statusMeta: Element): Promise<void> {
+ // Selector copied from GitHub. Don't @ me
+ // This excludes hidden ".status-meta" items without adding this longass selector to the observer
+ // Added: .rgh-update-pr-from-base-branch-row
+ if (!statusMeta.closest('.merge-pr.is-merging .merging-body, .merge-pr.is-merging .merge-commit-author-email-info, .merge-pr.is-merging-solo .merging-body, .merge-pr.is-merging-jump .merging-body, .merge-pr.is-merging-group .merging-body, .merge-pr.is-rebasing .rebasing-body, .merge-pr.is-squashing .squashing-body, .merge-pr.is-squashing .squash-commit-author-email-info, .merge-pr.is-merging .branch-action-state-error-if-merging .merging-body-merge-warning, .rgh-update-pr-from-base-branch-row')) {
+ return;
+ }
+
+ const {base} = getBranches();
+ const prInfo = await getPrInfo(base.relative);
+ if (!prInfo.needsUpdate) {
+ return;
+ }
+
+ const previousMessage = statusMeta.firstChild!; // Extract now because it won't be the first child anymore
+ statusMeta.prepend(getBaseCommitNotice(prInfo));
+ removeTextNodeContaining(previousMessage, 'Merging can be performed automatically.');
+}
+
+async function init(signal: AbortSignal): Promise<false | void> {
+ await api.expectToken();
+
+ observe('.branch-action-item .status-meta', addInfo, {signal});
+}
+
+void features.add(import.meta.url, {
+ include: [
+ pageDetect.isPRConversation,
+ ],
+ exclude: [
+ pageDetect.isClosedPR,
+ () => select('.head-ref')!.title === 'This repository has been deleted',
+ ],
+ awaitDomReady: true, // DOM-based exclusions
+ init,
+});
+
+/*
+Test URLs
+
+PR without conflicts
+https://github.com/refined-github/sandbox/pull/60
+
+Draft PR without conflicts
+https://github.com/refined-github/sandbox/pull/61
+
+Native "Update branch" button
+(pick a conflict-free PR from https://github.com/refined-github/refined-github/pulls?q=is%3Apr+is%3Aopen+sort%3Acreated-asc)
+
+Native "Resolve conflicts" button
+https://github.com/refined-github/sandbox/pull/9
+
+Cross-repo PR with long branch names
+https://github.com/refined-github/sandbox/pull/13
+
+*/

source/features/update-pr-from-base-branch.tsx

@@ -11,8 +11,8 @@ import observe from '../helpers/selector-observer';
 import * as api from '../github-helpers/api';
 import {getBranches} from '../github-helpers/pr-branches';
 import getPrInfo from '../github-helpers/get-pr-info';
-import {getConversationNumber} from '../github-helpers';
 import showToast from '../github-helpers/toast';
+import {getConversationNumber} from '../github-helpers';
 import createMergeabilityRow from '../github-widgets/mergeability-row';
 import selectHas from '../helpers/select-has';
 
@@ -60,9 +60,9 @@ async function addButton(mergeBar: Element): Promise<void> {
  return;
  }
 
- const {base, head} = getBranches();
- const prInfo = await getPrInfo(base.relative, head.relative);
- if (!prInfo?.viewerCanEditFiles || prInfo.mergeable === 'CONFLICTING') {
+ const {base} = getBranches();
+ const prInfo = await getPrInfo(base.relative);
+ if (!prInfo.needsUpdate || !prInfo.viewerCanEditFiles || prInfo.mergeable === 'CONFLICTING') {
  return;
  }
 
@@ -82,6 +82,7 @@ async function addButton(mergeBar: Element): Promise<void> {
 
  // The PR is still a draft
  mergeBar.before(createMergeabilityRow({
+ className: 'rgh-update-pr-from-base-branch-row',
  action: createButton(),
  icon: <CheckIcon/>,
  iconClass: 'completeness-indicator-success',

source/github-helpers/dom-formatters.ts → source/github-helpers/dom-formatters.tsx

@@ -1,3 +1,4 @@
+import React from 'dom-chef';
 import select from 'select-dom';
 import zipTextNodes from 'zip-text-nodes';
 import {applyToLink} from 'shorten-repo-url';
@@ -6,6 +7,7 @@ import linkifyIssuesCore from 'linkify-issues';
 
 import getTextNodes from '../helpers/get-text-nodes';
 import parseBackticksCore from './parse-backticks';
+import {buildRepoURL} from '.';
 
 // Shared class necessary to avoid also shortening the links
 export const linkifiedURLClass = 'rgh-linkified-code';
@@ -93,3 +95,19 @@ export function parseBackticks(element: Element): void {
  }
  }
 }
+
+export function linkifyCommit(sha: string): JSX.Element {
+ // Data attributes copied from the commit in https://github.com/refined-github/github-url-detection/releases/tag/v7.1.2
+ return (
+ <code>
+ <a
+ className="Link--secondary"
+ href={buildRepoURL('commit', sha)}
+ data-hovercard-type="commit"
+ data-hovercard-url={buildRepoURL('commit', sha, 'hovercard')}
+ >
+ {sha.slice(0, 7)}
+ </a>
+ </code>
+ );
+}

source/github-helpers/get-pr-info.ts

@@ -1,35 +1,17 @@
-import * as pageDetect from 'github-url-detection';
-
 import * as api from './api';
 import {getConversationNumber} from '.';
 
-type PullRequestInfo = {
- // TODO: Use this for `restore-file` when GHE supports `compare`
+export type PullRequestInfo = {
+ // TODO: Use this for `restore-file`
  baseRefOid: string;
  // https://docs.github.com/en/graphql/reference/enums#mergeablestate
  mergeable: 'CONFLICTING' | 'MERGEABLE' | 'UNKNOWN';
  viewerCanEditFiles: boolean;
+ needsUpdate: boolean;
+ behindBy: number;
 };
 
-export default async function getPrInfo(base: string, head: string, number = getConversationNumber()!): Promise<PullRequestInfo | undefined> {
- if (pageDetect.isEnterprise()) {
- const {repository} = await api.v4(`
- repository() {
- pullRequest(number: ${number}) {
- mergeable
- viewerCanEditFiles
- }
- }
- `);
-
- const compare = await api.v3(`compare/${base}...${head}?page=10000`); // `page=10000` avoids fetching any commit information, which is heavy
- if (compare.status !== 'diverged') {
- return;
- }
-
- return repository.pullRequest;
- }
-
+export default async function getPrInfo(base: string, number = getConversationNumber()!): Promise<PullRequestInfo> {
  const {repository} = await api.v4(`
  repository() {
  pullRequest(number: ${number}) {
@@ -39,17 +21,25 @@ export default async function getPrInfo(base: string, head: string, number = get
  headRef {
  compare(headRef: "${base}") {
  status
- behindBy
  aheadBy
  }
  }
  }
  }
  `);
 
- if (repository.pullRequest.headRef.compare.status !== 'DIVERGED') {
- return;
- }
-
- return repository.pullRequest;
+ const {
+ baseRefOid,
+ mergeable,
+ viewerCanEditFiles,
+ headRef,
+ } = repository.pullRequest;
+ return {
+ baseRefOid,
+ mergeable,
+ viewerCanEditFiles,
+ // The comparison in the API is base -> head, so it must be flipped
+ behindBy: headRef.compare.aheadBy,
+ needsUpdate: headRef.compare.status === 'DIVERGED',
+ };
 }

source/github-widgets/mergeability-row.tsx

@@ -4,19 +4,21 @@ type MergeabilityRowProps = {
  action?: JSX.Element;
  icon: JSX.Element;
  iconClass?: string;
- heading: string;
- meta?: string;
+ heading: JSX.Element | string;
+ meta?: JSX.Element | string;
+ className?: string;
 };
 
 export default function createMergeabilityRow({
+ className = '',
  action,
  icon,
  iconClass = '',
  heading,
  meta,
 }: MergeabilityRowProps): JSX.Element {
  return (
- <div className="branch-action-item">
+ <div className={`branch-action-item ${className}`}>
  <div
  className="branch-action-btn float-right js-immediate-updates js-needs-timeline-marker-header"
  >

source/refined-github.ts

@@ -214,3 +214,4 @@ import './features/netiquette';
 import './features/rgh-netiquette';
 import './features/small-user-avatars';
 import './features/releases-dropdown';
+import './features/pr-base-commit';