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

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

1 files changed, 60 insertions, 42 deletions

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