Terraform plan GitLab highlight

_install.md

How to install?

1. install Tampermonkey
2. Click here

terraform-plan-gitlab-highlight.user.js

// ==UserScript==
// @name         Terraform plan GitLab highlight
// @version      0.3
// @namespace   https://gist.github.com/edgarsandi
// @description  Colorize the terraform stdout
// @author       Edgar R. Sandi
// @match        https://code.ifoodcorp.com.br/*
// @include      https://code.ifoodcorp.com.br/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var $ = window.jQuery;
    var toAddFontColor = "#AFF5B4"
    var toAddBackgroundColor = "#033A11"
    var toChangeFontColor = "#E6DB74"
    var toChangeBackgroundColor = "#342F00"
    var toDestroyFontColor = "#FFC3BA"
    var toDestroyBackgroundColor = "#4A0004"
    var unchangedFontColor = "#66D9EF"
    var unchangedBackgroundColor = "#023038"
    var arrowFontColor = "#AFF5B4"
    var arrowBackgroundColor = "#033A11"

    $(document).ready(function() {
        function waitForElm(selector) {
            return new Promise(resolve => {
                if (document.querySelector(selector)) {
                    return resolve(document.querySelector(selector));
                }
                const observer = new MutationObserver(mutations => {
                    if (document.querySelector(selector)) {
                        resolve(document.querySelector(selector));
                        observer.disconnect();
                    }
                });
                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            });
        }

        function openTerraformOutputBoxes() {
            console.log('Opening the terraform output');
            $("details > summary:first-of-type").click();
        }

        function colorizeTerraformOutputSummary(needle, fontColor, backgroundColor) {
            $("code").html(function(i, text) {
                return text.replace(new RegExp("(\\d+)? (\\b"+needle+"\\b)", "g"), "<span style=\"color: " + fontColor + "; background-color: " + backgroundColor + "; font-weight: bold\">$1 $2</span>");
            });
        }

        function colorizeTerraformOutput(needle, fontColor, backgroundColor) {
            $("code > span:contains( " + needle + " )").html(function() {
                $(this).css("color", fontColor).css("background-color", backgroundColor).css("font-weight", "bold").css("padding","2px");
            });
        }

        function colorizeTerraformOutputInlineChange(toAddFontColor, toAddBackgroundColor, toChangeFontColor, toChangeBackgroundColor, toDestroyFontColor, toDestroyBackgroundColor) {
            $("code").html(function(i, text) {
                // see https://regex101.com/r/0Bx3FO/2 to more details
                return text.replace(/(~)(\s+)(\"?)([:\w-]+)(\"?)(\s+)(\=)(\s+)(\"?)([:\w-]+)(\"?)(\s+)(\-\&gt;|->)(\s+)([(\"]?)([:\s\w-]+)([)\"]?)/g,
                                    "<span style=\"color: " + toChangeFontColor + "; background-color: " + toChangeBackgroundColor + "; font-weight: bold; padding: 2px\">$1$2$3$4$5$6</span>" +
                                    "$7$8" + // =
                                    "<span style=\"color: " + toDestroyFontColor + "; background-color: " + toDestroyBackgroundColor + "; font-weight: bold; padding: 2px\">$9$10$11</span>" +
                                    "$12$13$14" + // ->
                                    "<span style=\"color: " + toAddFontColor + "; background-color: " + toAddBackgroundColor + "; font-weight: bold; padding: 2px\">$15$16$17</span>"
                                   );
            });

        }

        function run() {
            openTerraformOutputBoxes()
            const terraformOutputColorMap = [
                {
                    summary: "to add",
                    needle: "+",
                    fontColor: toAddFontColor,
                    backgroundColor: toAddBackgroundColor,
                },
                {
                    summary: "to change",
                    needle: "~",
                    fontColor: toChangeFontColor,
                    backgroundColor: toChangeBackgroundColor,
                },
                {
                    summary: "to destroy",
                    needle: "-",
                    fontColor: toDestroyFontColor,
                    backgroundColor: toDestroyBackgroundColor,
                },
                {
                    summary: "unchanged",
                    needle: "#",
                    fontColor: unchangedFontColor,
                    backgroundColor: unchangedBackgroundColor,
                },
                {
                    summary: "__NONE__",
                    needle: "<=",
                    fontColor: unchangedFontColor,
                    backgroundColor: unchangedBackgroundColor,
                },
                {
                    summary: "___NONE___",
                    needle: "-&gt;",
                    fontColor: arrowFontColor,
                    backgroundColor: arrowBackgroundColor,
                },
            ];

            terraformOutputColorMap.forEach(function (i) {
                colorizeTerraformOutput(i.needle, i.fontColor, i.backgroundColor)
                colorizeTerraformOutputSummary(i.summary, i.fontColor, i.backgroundColor)
            });

            colorizeTerraformOutputInlineChange(toAddFontColor, toAddBackgroundColor, toChangeFontColor, toChangeBackgroundColor, toDestroyFontColor, toDestroyBackgroundColor)
        }

        waitForElm('details > summary:first-of-type').then((elm) => {
            console.log('Element is ready');
            run();
        });
    });
})();