visit-tag - New feature (#7090)

readme.md

@@ -160,6 +160,7 @@ Thanks for contributing! 🦋🙌
 - [](# "action-pr-link") 🔥 [Adds a link back to the PR that ran the workflow.](https://github-production-user-asset-6210df.s3.amazonaws.com/50487467/241645264-076a0137-36a2-4fd0-a66e-735ef3b3a563.png)
 - [](# "mobile-tabs") [Makes the tabs more compact on mobile so more of them can be seen.](https://user-images.githubusercontent.com/1402241/245446231-28f44b59-0151-4986-8cb9-05b5645592d8.png)
 - [](# "repo-header-info") [Shows whether a repo is a fork and adds the number of stars to its header.](https://github-production-user-asset-6210df.s3.amazonaws.com/1402241/267216946-404d79ab-46d7-4bc8-ba88-ae8f8029150d.png)
+- [](# "visit-tag") [When navigating a repo's file on a specific tag, it adds a link to see the release/tag itself.](https://github-production-user-asset-6210df.s3.amazonaws.com/1402241/285123739-e5f4fa0a-3f48-49ef-9b87-2fd6f183c923.png)
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 

source/features/visit-tag.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {ArrowUpRightIcon, CodeIcon} from '@primer/octicons-react';
+import * as pageDetect from 'github-url-detection';
+
+import {branchSelector} from '../github-helpers/selectors.js';
+import features from '../feature-manager.js';
+import observe from '../helpers/selector-observer.js';
+import {wrapAll} from '../helpers/dom-utils.js';
+import {buildRepoURL} from '../github-helpers/index.js';
+import {isHasSelectorSupported} from '../helpers/select-has.js';
+
+async function addLink(branchSelector: HTMLButtonElement): Promise<void> {
+ const tag = branchSelector.getAttribute('aria-label')?.replace(/ tag$/, '');
+ if (!tag) {
+ features.log.error(import.meta.url, 'Tag not found in DOM. The feature needs to be updated');
+ return;
+ }
+
+ wrapAll(
+ [
+ branchSelector,
+ <a
+ className="btn px-2 tooltipped tooltipped-se"
+ href={buildRepoURL('releases/tag', tag)}
+ aria-label="Visit tag"
+ >
+ <ArrowUpRightIcon className="v-align-middle"/>
+ </a>,
+ ],
+ <div className="d-flex gap-2"/>,
+ );
+}
+
+function replaceIcon(tagIcon: SVGElement): void {
+ // https://github.com/refined-github/refined-github/issues/6499#issuecomment-1505256426
+ tagIcon.replaceWith(<CodeIcon/>);
+}
+
+function clarifyIcon(signal: AbortSignal): void {
+ observe('.Link[href*="/tree/"] svg.octicon-tag', replaceIcon, {signal});
+}
+
+function init(signal: AbortSignal): void {
+ observe(`:is(${branchSelector}):has(.octicon-tag)`, addLink, {signal});
+}
+
+void features.add(import.meta.url, {
+ asLongAs: [
+ isHasSelectorSupported,
+ ],
+ include: [
+ pageDetect.isRepoTree,
+ pageDetect.isSingleFile,
+ ],
+ init,
+}, {
+ include: [
+ pageDetect.isReleasesOrTags,
+ ],
+ init: clarifyIcon,
+});
+
+/*
+
+Test URLs:
+
+- https://github.com/refined-github/refined-github/tree/23.11.15
+- https://github.com/refined-github/refined-github/blob/23.4.10/.editorconfig
+
+Second part:
+
+- https://github.com/refined-github/refined-github/releases
+- https://github.com/refined-github/refined-github/releases/tag/23.11.15
+
+*/

source/refined-github.ts

@@ -216,4 +216,5 @@ import './features/repo-header-info.js';
 import './features/rgh-pr-template.js';
 import './features/close-as-unplanned.js';
 import './features/locked-issue.js';
+import './features/visit-tag.js';
 import './features/prevent-comment-loss.js';