Integra i raccoglitori di problemi Jira all'interno dei pulsanti dei topic

Ciao :wave:

Oggi ho iniziato a implementare i raccoglitori di problemi (issue collectors) nel nostro forum e volevo condividere il componente del tema super semplice che ho creato.

Alla fine, apparirà così.


Di cosa hai bisogno

  • Un raccoglitore di problemi Jira
  • Alcune conoscenze di JS

Ottenere l’ID del raccoglitore di problemi

Affinché il raccoglitore funzioni, abbiamo bisogno del suo ID.

Vai al raccoglitore di problemi che preferisci e copia il parametro collectorId dall’URL

https://tosdr.atlassian.net/secure/ViewCollector!default.jspa?projectKey=BE&collectorId=176cb88e

Nel mio caso è 176cb88e

Crea un nuovo componente del tema

e usa il seguente codice nella sezione \u003c/head\u003e

Sostituisci le seguenti chiavi con i rispettivi valori

  • MY_COLLECTOR_ID → 176cb88e
  • REPLACE_ME_AJAX → La sorgente dello script dalla sezione “Incorporare questo raccoglitore di problemi” → “Incorpora in JavaScript” del tuo raccoglitore di problemi Jira
  • MY_PROJECT_KEY → Con la chiave del progetto del tuo raccoglitore di problemi, se intendi inserire più raccoglitori di problemi.
<script type="text/discourse-plugin" version="0.8">
api.decorateCooked(() => {
    window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
        'MY_COLLECTOR_ID': {
            "triggerFunction": function(showCollectorDialog) {
                jQuery(document).on('click', "[data-wrap='jira-bug-MY_PROJECT_KEY'] > p", function(e) {
                    e.preventDefault();
                    showCollectorDialog();
                });
            }
        }
    });
});
</script>
<script>
$(document).ready(function() {
    jQuery.ajax({
        url: "REPLACE_ME_AJAX",
        type: "get",
        cache: true,
        dataType: "script"
    });
});
</script>

Ho creato solo 2 pulsanti CSS per le mie esigenze, sentiti libero di aggiungerne altri

[data-wrap*="jira-bug-"] {
    p {
        border-radius: 2em;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0.53em 0.8em;
        border: none;
        font-weight: normal;
        margin: 1px;
        font-size: var(--font-0);
        line-height: normal;
        color: var(--primary-low);
        background: var(--danger);
        cursor: pointer;
        transition: all 0.25s;
    }
    p:hover {
        color: #000;
        background: #fff;
        border-color: #0060df;
    }
}

[data-wrap*="jira-feature"] {
    p {
        border-radius: 2em;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0.53em 0.8em;
        border: none;
        margin: 1px;
        font-weight: normal;
        font-size: var(--font-0);
        line-height: normal;
        color: var(--secondary-low);
        background: var(--success-medium);
        cursor: pointer;
        transition: all 0.25s;
    }
    p:hover {
        color: #000;
        background: #fff;
        border-color: #0060df;
    }
}

Ora passiamo all’inserimento del raccoglitore di problemi nei post:

[wrap=jira-bug-MY_PROJECT_KEY]
:bug: Segnala un bug
[/wrap]


[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: Suggerisci una funzionalità
[/wrap]

È tutto! Ora hai un raccoglitore di problemi funzionante come pulsante nel tuo post!

3 Mi Piace