Zendesk — copy title of ticket v1.0.0

← Back to User Scripts

Script Content

// ==UserScript==
// @name         Zendesk — copy title of ticket
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  Displays a copy link in the ticket title.
// @author       tjhleeds using Jules
// @match        https://*.zendesk.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const injectStyles = () => {
        const style = document.createElement('style');
        style.textContent = `
            section[data-theme='light'] .copy-title-icon svg path {
                fill: rgb(92, 105, 112);
            }
            section[data-theme='dark'] .copy-title-icon svg path {
                fill: rgb(145, 156, 165);
            }
            .copy-title-icon {
                border-radius: 4px;
                transition: border-color 0.25s ease-in-out, box-shadow 0.1s ease-in-out, background-color 0.25s ease-in-out, color 0.25s ease-in-out, outline-color 0.1s ease-in-out, z-index 0.25s ease-in-out;
            }
            .copy-title-icon:hover {
                background-color: rgba(38, 148, 214, 0.08);
                color: rgb(176, 184, 190);
            }
        `;
        document.head.appendChild(style);
    };

    const COPY_ICON_SVG = `

`;

    const TICK_ICON_SVG = `

`;

    const handleCopyClick = (icon, titleInput) => {
        const title = titleInput.value;
        const organisationElement = document.querySelector('[data-tracking-id="tabs-nav-item-organizations"]');
        const organisation = organisationElement ? organisationElement.textContent.trim() : 'Unknown Organisation';
        const ticketIdMatch = window.location.href.match(/tickets\/(\d+)/);
        const ticketId = ticketIdMatch ? ticketIdMatch[1] : 'Unknown Ticket ID';

        const formattedString = `${organisation} — ${title} (Zendesk ${ticketId})`;
        const url = window.location.href;

        navigator.clipboard.writeText(url).then(() => {
            navigator.clipboard.writeText(formattedString).then(() => {
                icon.innerHTML = TICK_ICON_SVG;
                setTimeout(() => {
                    if (document.body.contains(icon)) {
                        icon.innerHTML = COPY_ICON_SVG;
                    }
                }, 1000);
            });
        });
    };

    const setupCopyIcon = () => {
        if (document.querySelector('.copy-title-icon')) {
            return;
        }

        const titleInput = document.querySelector('input[data-test-id="omni-header-subject"]');
        if (!titleInput) {
            return;
        }

        const thirdAncestor = titleInput.parentElement?.parentElement?.parentElement;
        if (!thirdAncestor) {
            return;
        }

        const icon = document.createElement('div');
        icon.innerHTML = COPY_ICON_SVG;
        icon.classList.add('copy-title-icon');
        icon.style.width = '32px';
        icon.style.height = '32px';
        icon.style.display = 'flex';
        icon.style.alignItems = 'center';
        icon.style.justifyContent = 'center';
        icon.style.cursor = 'pointer';
        icon.style.paddingLeft = '10px';
        icon.style.paddingRight = '10px';

        icon.addEventListener('click', () => handleCopyClick(icon, titleInput));

        thirdAncestor.after(icon);

        console.log('Zendesk Copy Title: Icon added.');
    };

    injectStyles();

    const observer = new MutationObserver(() => {
        console.log('Zendesk Copy Title: MutationObserver fired.');
        setupCopyIcon();
    });

    console.log('Zendesk Copy Title: Initializing observer.');
    observer.observe(document.body, {
        childList: true,
        subtree: true,
    });
})();