Zendesk Status Colour Customiser latest version (currently v1.2.1)

← Back to User Scripts

Script Content

// ==UserScript==
// @name         Zendesk: Status Colour Customiser
// @namespace    https://www.timhilton.xyz/user-scripts
// @version      1.2.1
// @description  Applies custom colours to Zendesk ticket statuses.
// @author       Tim Hilton
// @match        https://audacia.zendesk.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const LOG_PREFIX = '[Zendesk: Status Colour Customiser]';
    
    console.debug(`${LOG_PREFIX} Script initialized`);

    const statusColors = {
        "In QA": "lightgreen",
        "In UAT": "lightgreen",
        "Waiting on Live Release": "green"
    };

    let mutationCount = 0;
    const observer = new MutationObserver(() => {
        mutationCount++;
        console.debug(`${LOG_PREFIX} Mutation #${mutationCount} detected`);
        applyCustomColors();
    });

    function applyCustomColors() {
        let colourCount = 0;
        const openBadges = document.querySelectorAll('[data-cy-test-id="status-badge-state"]');
        openBadges.forEach((badge) => {
            const statusText = badge.textContent.trim();
            if (statusColors[statusText]) {
                badge.style.backgroundColor = statusColors[statusText];
                colourCount++;
            }
        });

        const ticketStatusLabels = document.querySelectorAll('.ticket_status_label');
        ticketStatusLabels.forEach((label) => {
            const statusText = label.textContent.trim();
            if (statusColors[statusText]) {
                label.style.backgroundColor = statusColors[statusText];
                colourCount++;
            }
        });
        
        if (colourCount > 0) {
            console.debug(`${LOG_PREFIX} Applied custom colours to ${colourCount} status badges`);
        }
    }

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

    // Initial run
    applyCustomColors();
    console.log(`${LOG_PREFIX} ✅ Observer configured and initial colours applied`);
})();