Add link-to-changelog-file feature (#3958)

Co-authored-by: Federico <me@fregante.com>

readme.md

@@ -263,6 +263,7 @@ Thanks for contributing! 🦋🙌
 - [](# "tag-changelog-link") 🔥 [Adds a link to an automatic changelog for each tag/release.](https://user-images.githubusercontent.com/1402241/57081611-ad4a7180-6d27-11e9-9cb6-c54ec1ac18bb.png)
 - [](# "latest-tag-button") [Adds a link to the latest version tag on directory listings and files.](https://user-images.githubusercontent.com/1402241/74594998-71df2080-5077-11ea-927c-b484ca656e88.png)
 - [](# "convert-release-to-draft") [Adds a button to convert a release to draft.](https://user-images.githubusercontent.com/16872793/90017455-8e03f900-dc79-11ea-95c5-377e0a82d4ea.png)
+- [](# "link-to-changelog-file") [Adds a button to view the changelog file from the releases page.](https://user-images.githubusercontent.com/16872793/107520428-684fa200-6b7f-11eb-8f7c-59172db71160.png)
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 

source/features/link-to-changelog-file.tsx

@@ -0,0 +1,77 @@
+import React from 'dom-chef';
+import cache from 'webext-storage-cache';
+import select from 'select-dom';
+import {BookIcon} from '@primer/octicons-react';
+import elementReady from 'element-ready';
+import * as pageDetect from 'github-url-detection';
+
+import features from '.';
+import * as api from '../github-helpers/api';
+import {buildRepoURL, getRepo} from '../github-helpers';
+
+const getCacheKey = (): string => `changelog:${getRepo()!.nameWithOwner}`;
+
+function parseFromDom(): false {
+	void cache.set(getCacheKey(), select('.js-navigation-item [title^="changelog" i]')?.textContent ?? false);
+	return false;
+}
+
+const getChangelogName = cache.function(async (): Promise<string | false> => {
+	const {repository} = await api.v4(`
+		repository() {
+			object(expression: "HEAD:") {
+				...on Tree {
+					entries {
+						name
+					}
+				}
+			}
+		}
+	`);
+
+	for (const file of repository.object.entries) {
+		if (file.name.toLowerCase().startsWith('changelog')) {
+			return file.name;
+		}
+	}
+
+	return false;
+}, {
+	cacheKey: getCacheKey
+});
+
+async function init(): Promise<void | false> {
+	const changelog = await getChangelogName();
+	if (!changelog) {
+		return false;
+	}
+
+	(await elementReady('.subnav div', {waitForChildren: false}))!.after(
+		<a
+			className="btn ml-3 tooltipped tooltipped-n"
+			aria-label={`View the ${changelog} file`}
+			href={buildRepoURL('blob', 'HEAD', changelog)}
+			style={{padding: '6px 16px'}}
+			role="button"
+		>
+			<BookIcon className="text-blue mr-2"/>
+			<span>Changelog</span>
+		</a>
+	);
+}
+
+void features.add(__filebasename, {
+	include: [
+		pageDetect.isReleasesOrTags
+	],
+	awaitDomReady: false,
+	init
+}, {
+	include: [
+		pageDetect.isRepoHome
+	],
+	exclude: [
+		pageDetect.isEmptyRepoRoot
+	],
+	init: parseFromDom
+});

source/refined-github.ts

@@ -208,6 +208,7 @@ import './features/quick-repo-deletion';
 import './features/clean-repo-sidebar';
 import './features/rgh-feature-descriptions';
 import './features/useful-forks';
+import './features/link-to-changelog-file';
 
 // Add global for easier debugging
 (window as any).select = select;