Refactor `clean-conversation-headers` (#4152)

Co-authored-by: yakov116 <16872793+yakov116@users.noreply.github.com>
Co-authored-by: Federico Brigante <me@fregante.com>

2 files changed, 61 insertions, 43 deletions

diff --git a/readme.md b/readme.md
index 680c993a..b7617f12 100644
--- a/readme.md
+++ b/readme.md
@@ -214,7 +214,7 @@ Thanks for contributing! 🦋🙌
 - [](# "pinned-issues-update-time") [Adds the updated time to pinned issues.](https://user-images.githubusercontent.com/1402241/75525936-bb524700-5a4b-11ea-9225-466bda58b7de.png)
 - [](# "clean-pinned-issues") [Changes the layout of pinned issues from side-by-side to a standard list.](https://user-images.githubusercontent.com/1402241/84509958-c82a3c00-acc4-11ea-8399-eaf06a59e9e4.png)
 - [](# "remove-label-faster") [Adds one-click buttons to remove labels in conversations.](https://user-images.githubusercontent.com/36174850/89980178-0bc80480-dc7a-11ea-8ded-9e25f5f13d1a.gif)
-- [](# "clean-conversation-headers") [Removes duplicate information in the header of issues and PRs ("User wants to merge X commits from Y into Z")](https://user-images.githubusercontent.com/44045911/89736767-686ec800-da9e-11ea-81c3-252e9813140b.png)
+- [](# "clean-conversation-headers") [Removes duplicate information in the header of issues and PRs ("User wants to merge X commits from Y into Z")](https://user-images.githubusercontent.com/44045911/112314137-a34b0680-8ce3-11eb-9e0e-8afd6c8235c2.png)
 - [](# "dim-bots") [Dims commits and PRs by bots to reduce noise.](https://user-images.githubusercontent.com/1402241/65263190-44c52b00-db36-11e9-9b33-d275d3c8479d.gif)
 - [](# "esc-to-cancel") [Adds a shortcut to cancel editing a conversation title: <kbd>esc</kbd>.](https://user-images.githubusercontent.com/35100156/98303086-d81d2200-1fbd-11eb-8529-70d48d889bcf.gif)
 - [](# "no-duplicate-list-update-time") [Hides the update time of conversations in lists when it matches the open/closed/merged time.](https://user-images.githubusercontent.com/1402241/111357166-ac3a3900-864e-11eb-884a-d6d6da88f7e2.png)
diff --git a/source/features/clean-conversation-headers.tsx b/source/features/clean-conversation-headers.tsx
index 7a5f1b67..7c8a6413 100644
--- a/source/features/clean-conversation-headers.tsx
+++ b/source/features/clean-conversation-headers.tsx
@@ -1,68 +1,86 @@
 import './clean-conversation-headers.css';
+import React from 'dom-chef';
 import select from 'select-dom';
-import {observe} from 'selector-observer';
+import elementReady from 'element-ready';
+import {ArrowLeftIcon} from '@primer/octicons-react';
 import * as pageDetect from 'github-url-detection';
 
 import features from '.';
+import getDefaultBranch from '../github-helpers/get-default-branch';
+import onConversationHeaderUpdate from '../github-events/on-conversation-header-update';
 
-const deinit: VoidFunction[] = [];
+async function initIssue(): Promise<void> {
+	const byline = await elementReady('.gh-header-meta .flex-auto:not(.rgh-clean-conversation-header)');
+	if (!byline) {
+		return;
+	}
 
-function initIssue(): void {
-	const observer = observe('.gh-header-meta .flex-auto:not(.rgh-clean-conversation-header)', {
-		add(byline) {
-			byline.classList.add('rgh-clean-conversation-header');
-			const {childNodes: bylineNodes} = byline;
-			// Removes: octocat opened this issue on 1 Jan [·] 1 comments
-			bylineNodes[4].textContent = bylineNodes[4].textContent!.replace('·', '');
+	byline.classList.add('rgh-clean-conversation-header');
 
-			// Removes: [octocat opened this issue on 1 Jan] · 1 comments
-			for (const node of [...bylineNodes].slice(0, 4)) {
-				node.remove();
-			}
-		}
-	});
-	deinit.push(observer.abort);
+	// Removes: [octocat opened this issue on 1 Jan] · 1 comments
+	for (let i = 0; i < 4; i++) {
+		byline.firstChild!.remove();
+	}
+
+	// Removes: octocat opened this issue on 1 Jan [·] 1 comments
+	byline.firstChild!.textContent = byline.firstChild!.textContent!.replace('·', '');
 }
 
-function initPR(): void {
-	const observer = observe('.gh-header-meta .flex-auto:not(.rgh-clean-conversation-header)', {
-		add(byline) {
-			byline.classList.add('rgh-clean-conversation-header');
-			const isSameAuthor = select('.js-discussion > .TimelineItem:first-child .author')?.textContent === select('.author', byline)!.textContent;
-			const baseBranch = select('.commit-ref.base-ref', byline)!;
-			const isDefaultBranch = (baseBranch.firstElementChild as HTMLAnchorElement).pathname.split('/').length === 3;
+async function initPR(): Promise<void> {
+	const byline = await elementReady('.gh-header-meta .flex-auto:not(.rgh-clean-conversation-header)');
+	if (!byline) {
+		return;
+	}
+
+	byline.classList.add('rgh-clean-conversation-header');
+
+	const author = select('.author', byline)!;
+	const isSameAuthor = pageDetect.isPRConversation() && author.textContent === (await elementReady('.TimelineItem .author'))!.textContent;
+
+	const [base, headBranch] = select.all('.commit-ref', byline)!;
+	const baseBranch = base.title.split(':')[1];
 
-			// Removes: [octocat wants to merge 1] commit into github:master from octocat:feature
-			// Removes: [octocat] merged 1 commit into master from feature
-			for (const node of [...byline.childNodes].slice(isSameAuthor ? 0 : 2, pageDetect.isMergedPR() ? 2 : 4)) {
-				node.remove();
-			}
+	// Replace the word "from" with an arrow
+	headBranch.previousSibling!.replaceWith(' ', <ArrowLeftIcon className="v-align-middle"/>, ' ');
 
-			baseBranch.previousSibling!.textContent = ' into ';
-			if (!isSameAuthor) {
-				byline.prepend('by ');
-			}
+	// Removes: [octocat wants to merge 1 commit into] github:master from octocat:feature
+	// Removes: [octocat merged 1 commit into] master from feature
+	const duplicateNodes = [...byline.childNodes].slice(
+		isSameAuthor ? 0 : 2,
+		pageDetect.isMergedPR() ? 3 : 5
+	);
+	for (const node of duplicateNodes) {
+		node.remove();
+	}
 
-			if (!isDefaultBranch && !(pageDetect.isClosedPR() && baseBranch.title.endsWith(':master'))) {
-				baseBranch.classList.add('rgh-clean-conversation-headers-non-default-branch');
-			}
-		}
-	});
-	deinit.push(observer.abort);
+	if (!isSameAuthor) {
+		author.before('by ');
+		author.after(' • ');
+	}
+
+	const wasDefaultBranch = pageDetect.isClosedPR() && baseBranch === 'master';
+	const isDefaultBranch = baseBranch === await getDefaultBranch();
+	if (!isDefaultBranch && !wasDefaultBranch) {
+		base.classList.add('rgh-clean-conversation-headers-non-default-branch');
+	}
 }
 
 void features.add(__filebasename, {
 	include: [
 		pageDetect.isIssue
 	],
+	additionalListeners: [
+		onConversationHeaderUpdate
+	],
 	awaitDomReady: false,
-	init: initIssue,
-	deinit
+	init: initIssue
 }, {
 	include: [
 		pageDetect.isPR
 	],
+	additionalListeners: [
+		onConversationHeaderUpdate
+	],
 	awaitDomReady: false,
-	init: initPR,
-	deinit
+	init: initPR
 });