Интеграция сборщиков задач Jira в кнопки тем

Вики Администраторы
1

Привет :wave:

Сегодня я начал внедрять сборщики проблем (Issue Collectors) на нашем форуме и хотел поделиться очень простым компонентом темы, который создал.

В итоге это будет выглядеть так.


Что вам понадобится

  • Сборщик проблем Jira
  • Базовые знания JavaScript

Получение ID сборщика проблем

Для работы сборщика нам нужен его ID.

1465×318 23.3 KB

Перейдите к нужному сборщику проблем и скопируйте параметр collectorId из URL-адреса

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

В моём случае это 176cb88e

Создайте новый компонент темы

и используйте следующий код в секции </head>

Замените указанные ниже ключи на соответствующие значения:

  • MY_COLLECTOR_ID → 176cb88e
  • REPLACE_ME_AJAX → Источник скрипта из раздела “Встраивание этого сборщика проблем” → “Встраивание в JavaScript” вашего сборщика проблем Jira
    639×443 16.3 KB
  • MY_PROJECT_KEY → Ключ проекта вашего сборщика проблем (если вы планируете использовать несколько сборщиков).
<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>

Я создал только 2 CSS-кнопки для своих нужд, но вы можете добавить больше по желанию

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

Теперь о встраивании сборщика проблем в сообщения:

[wrap=jira-bug-MY_PROJECT_KEY]
:bug: Сообщить об ошибке
[/wrap]


[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: Предложить функцию
[/wrap]

Всё! Теперь у вас есть работающий сборщик проблем в виде кнопки внутри вашего сообщения!

3 лайка
Administrators Index