Integrar recolectores de issues de Jira dentro de botones de temas

Hola :wave:

Hoy comencé a implementar recolectores de incidencias en nuestro foro y quería compartir el componente de tema súper simple que creé.

Al final, se verá así.


Lo que necesitas

  • Un recolector de incidencias de Jira
  • Algunos conocimientos de JS

Obteniendo el ID del recolector de incidencias

Para que el recolector funcione, necesitamos su ID.

Ve al recolector de incidencias de tu elección y obtén el parámetro collectorId de la URL.

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

En mi caso es 176cb88e

Crea un nuevo componente de tema

y usa el siguiente código en la sección <head>

Reemplaza las siguientes claves con sus valores correspondientes

  • MY_COLLECTOR_ID → 176cb88e
  • REPLACE_ME_AJAX → El origen del script de la sección “Insertar este recolector de incidencias” → “Insertar en JavaScript” de tu recolector de incidencias de Jira
  • MY_PROJECT_KEY → Con la clave de proyecto de tu recolector de incidencias, si planeas insertar múltiples recolectores de incidencias.
<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>

Solo he creado 2 botones CSS para mis necesidades, siéntete libre de agregar más.

[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;
    }
}

Ahora, a insertar el recolector de incidencias en las publicaciones:

[wrap=jira-bug-MY_PROJECT_KEY]
:bug: Reportar un error
[/wrap]


[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: Sugerir una característica
[/wrap]

¡Eso es todo! Ahora tienes un recolector de incidencias funcional como un botón en tu publicación.

3 Me gusta