Zendesk — Add link to Azure DevOps work item in header v1.0.0

← Back to User Scripts

Script Content

// ==UserScript==
// @name         Zendesk — Add link to Azure DevOps work item in header
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  Adds a button to the ticket header that links to the Azure DevOps work item.
// @author       tjhleeds using Jules
// @match        https://*.zendesk.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const AZURE_DEVOPS_SVG = `

    `;

    const addLink = () => {
        const devopsLinkField = Array.from(document.querySelectorAll('label')).find(label => label.textContent === 'DevOps Link');
        if (!devopsLinkField) {
            return;
        }

        const devopsLinkInput = devopsLinkField.nextElementSibling;
        if (!devopsLinkInput || !devopsLinkInput.value) {
            return;
        }

        const header = document.querySelector('div[data-ticket-id]');
        if (!header || document.querySelector('.azure-devops-link')) {
            return;
        }

        const firstChildOfHeader = header.firstChild;
        if (!firstChildOfHeader) {
            return;
        }

        const targetElement = firstChildOfHeader.firstChild;
        if (!targetElement) {
            return;
        }

        const link = document.createElement('a');
        link.href = devopsLinkInput.value;
        link.target = '_blank';
        link.classList.add('azure-devops-link');
        link.innerHTML = AZURE_DEVOPS_SVG;

        firstChildOfHeader.insertBefore(link, targetElement);
        firstChildOfHeader.style.display = 'flex';
        firstChildOfHeader.style.alignItems = 'center';
        targetElement.style.marginLeft = '10px';
    };

    const observer = new MutationObserver(() => {
        addLink();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();