머지 리퀘스트 위젯

프론트엔드 개발자를 위한 머지 리퀘스트 위젯의 구조, 사용법, 데이터 페칭, 텔레메트리, 아이콘, 액션 버튼 등을 설명합니다.

머지 리퀘스트 위젯을 사용하면 디자인 프레임워크에 맞는 새로운 기능을 추가할 수 있습니다. 이 위젯을 통해 큰 노력 없이도 다음과 같은 많은 이점을 기본으로 누릴 수 있습니다: 일관된 룩앤필(look and feel). 위젯이 열릴 때 추적 기능. 성능을 위한 가상 스크롤링. 사용법 # 위젯은 ~/vue_merge_request_widget/components/widget/widget.vue 컴포넌트를 사용하는 일반적인 Vue 컴포넌트입니다. 사용 사례의 복잡성에 따라 구성 객체를 전달하거나, slot 을 통해 컴포넌트를 확장할 수 있습니다. 슬롯을 사용하는 예시는 다음 파일을 참고하세요: ee/app/assets/javascripts/vue_merge_request_widget/widgets/security_reports/mr_widget_security_reports.vue 데이터 객체를 사용하는 예시는 다음 파일을 참고하세요: ee/app/assets/javascripts/vue_merge_request_widget/widgets/metrics/index.vue 다음은 Hello World 위젯을 렌더링하는 최소한의 예시입니다: <script> import MrWidget from '~/vue_merge_request_widget/components/widget/widget.vue'; import { __ } from '~/locale'; export default { name: 'WidgetHelloWorld', components: { MrWidget, }, computed: { summary() { return { title: __('Hello World') }; }, }, }; </script> <template> <mr-widget :summary="summary" :is-collapsible="false" :widget-name="$options.name" /> </template> 위젯 등록 # 위의 예시는 페이지 어디에도 렌더링되지 않습니다. 머지 리퀘스트 위젯 섹션에 마운트하려면 다음 두 위치 중 하나 또는 둘 모두에 위젯을 등록해야 합니다: app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue (CE 위젯용) ee/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue (CE 및 EE 위젯용) 컴포넌트 목록에 컴포넌트를 정의하고 widgets computed 속성에 이름을 추가하면 위젯이 마운트됩니다: <script> export default { components: { MrHelloWorldWidget: () => import('ee/vue_merge_request_widget/widgets/hello_world/index.vue'), }, computed: { mrHelloWorldWidget() { r