토픽 버튼에 Jira 이슈 수집기 통합

[JustinBack (Justin René Back)]

안녕하세요

오늘 포럼에 이슈 수집기(Issue Collector) 구현을 시작했고, 제가 만든 아주 간단한 테마 컴포넌트를 공유하고 싶었습니다.

최종적으로 이렇게 보일 예정입니다.

필요한 것

• Jira 이슈 수집기
• 일부 JS 지식

이슈 수집기 ID 가져오기

수집기가 작동하려면 그 ID가 필요합니다.

원하는 이슈 수집기로 가서 URL에서 collectorId 파라미터를 가져오세요.

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

제 경우에는 176cb88e입니다.

새로운 테마 컴포넌트를 생성하고

</head> 섹션에 다음 코드를 사용하세요.

다음 키를 해당 값으로 교체하세요.

• MY_COLLECTOR_ID → 176cb88e
• REPLACE_ME_AJAX → Jira 이슈 수집기의 “이 이슈 수집기 임베딩” → “JavaScript에 임베드” 섹션의 스크립트 소스
  
  
• 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>

제 필요에 맞게 CSS 버튼을 2개만 만들었습니다. 더 추가해도 무방합니다.

[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]

이것으로 끝입니다! 이제 게시글에 작동하는 이슈 수집기 버튼을 가졌습니다!