Integrar coletores de problemas do Jira dentro dos botões de tópico

Wiki da comunidade Administradores
1

Olá :wave:

Hoje comecei a implementar coletores de problemas em nosso fórum e gostaria de compartilhar o componente de tema super simples que criei.

No final, ficará assim.


O que você precisa

  • Um coletor de problemas do Jira
  • Alguns conhecimentos de JS

Obtendo o ID do coletor de problemas

Para que o coletor funcione, precisamos do seu ID.

1465×318 23.3 KB

Vá até o coletor de problemas de sua escolha e pegue o parâmetro collectorId da URL

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

No meu caso, é 176cb88e

Crie um novo componente de tema

e use o seguinte código na seção <head>

Substitua as seguintes chaves pelos seus valores

  • MY_COLLECTOR_ID → 176cb88e
  • REPLACE_ME_AJAX → A fonte do script da seção “Incorporando este coletor de problemas” → “Incorporar em JavaScript” do seu coletor de problemas do Jira
    639×443 16.3 KB
  • MY_PROJECT_KEY → Com a chave do projeto do seu coletor de problemas, se você pretende inserir vários coletores de problemas.
<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>

Criei apenas 2 botões CSS para minhas necessidades, sinta-se à vontade para adicionar mais

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

Agora, para incorporar o coletor de problemas nas postagens:

[wrap=jira-bug-MY_PROJECT_KEY]
:bug: Reportar um bug
[/wrap]


[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: Sugerir uma funcionalidade
[/wrap]

É isso! Agora você tem um coletor de problemas funcionando como um botão em sua postagem!

3 curtidas
Administrators Index