Tampermonkey script that converts references to JIRA on GitHub PR title

github-link-lasso-jira.user.js

// ==UserScript==
// @name         Add link to IQVIA Digital Jira on GitHub
// @namespace    io.lassomarketing.js
// @version      1.0.1.0
// @description  Converts references to IQVIA Digital JIRA issues on GitHub into clickable links
// @author       Alexey Nikitin
// @homepage     https://github.com/M-r-A
// @updateURL    https://gist.githubusercontent.com/M-r-A/8bfa49a76b31a3d6099ef5066f21ea81/raw/github-link-lasso-jira.user.js
// @downloadURL  https://gist.githubusercontent.com/M-r-A/8bfa49a76b31a3d6099ef5066f21ea81/raw/github-link-lasso-jira.user.js
// @match        https://github.com/Lasso-Marketing/*
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    // ---------------------------------------------------------------------------
    // Config
    // ---------------------------------------------------------------------------

    const CONFIG = {
        jiraUrl: "https://iqviadigital.atlassian.net/browse/",
        // Non-global source pattern; a fresh global copy is derived where needed.
        // Note: the {1,9} cap matches project keys up to 10 chars before the dash.
        jiraKeyRegex: /\b[A-Z][A-Z0-9]{1,9}-[0-9]+\b/,
        markerAttr: "data-jira-link",
        // Tried in order; first match wins. GitHub markup changes only require edits here.
        titleSelectors: [
            'h1[data-component="PH_Title"] .markdown-title',
            '.js-issue-title',
            'bdi.js-issue-title',
        ],
    };

    // ---------------------------------------------------------------------------
    // DOM helpers
    // ---------------------------------------------------------------------------

    const isInsideProcessedNode = node =>
        node.parentElement?.closest(`a, [${CONFIG.markerAttr}]`) != null;

    const createJiraLink = key => {
        const anchor = document.createElement('a');
        anchor.href = `${CONFIG.jiraUrl}${key}`;
        anchor.target = '_blank';
        anchor.rel = 'noopener noreferrer';
        anchor.setAttribute(CONFIG.markerAttr, '');
        anchor.textContent = key;
        return anchor;
    };

    const resolveTitle = () => {
        for (const selector of CONFIG.titleSelectors) {
            const element = document.querySelector(selector);
            if (element) {
                return element;
            }
        }
        return null;
    };

    // ---------------------------------------------------------------------------
    // Linkification
    // ---------------------------------------------------------------------------

    const linkifyTextNode = (textNode, regex) => {
        const text = textNode.nodeValue;
        const matches = [...text.matchAll(regex)];
        if (matches.length === 0) {
            return;
        }

        const fragment = document.createDocumentFragment();
        let lastIndex = 0;
        for (const match of matches) {
            if (match.index > lastIndex) {
                fragment.append(text.slice(lastIndex, match.index));
            }
            fragment.append(createJiraLink(match[0]));
            lastIndex = match.index + match[0].length;
        }
        if (lastIndex < text.length) {
            fragment.append(text.slice(lastIndex));
        }

        textNode.replaceWith(fragment);
    };

    const linkifyRoot = root => {
        if (!root) {
            return;
        }

        // matchAll clones the regex internally, so one instance is safe to reuse across nodes.
        const regex = new RegExp(CONFIG.jiraKeyRegex, 'g');

        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
            acceptNode: node =>
                isInsideProcessedNode(node) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT,
        });

        const targets = [];
        while (walker.nextNode()) {
            targets.push(walker.currentNode);
        }
        targets.forEach(node => linkifyTextNode(node, regex));
    };

    // ---------------------------------------------------------------------------
    // Lifecycle
    // ---------------------------------------------------------------------------

    // Forward-declared so runLinkify/startObserving can close over it while the
    // observer itself is constructed from scheduleLinkify further down.
    let observer;

    const startObserving = () => {
        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });
    };

    const runLinkify = () => {
        // Ignore the mutations our own inserts generate to avoid a self-triggered pass.
        observer.disconnect();
        linkifyRoot(resolveTitle());
        startObserving();
    };

    let scheduled = false;
    const scheduleLinkify = () => {
        if (scheduled) {
            return;
        }
        scheduled = true;
        requestAnimationFrame(() => {
            scheduled = false;
            runLinkify();
        });
    };

    observer = new MutationObserver(scheduleLinkify);

    // ---------------------------------------------------------------------------
    // Bootstrap
    // ---------------------------------------------------------------------------

    runLinkify();

    ['turbo:load', 'turbo:render', 'pjax:end', 'popstate'].forEach(eventName => {
        document.addEventListener(eventName, scheduleLinkify);
    });
})();