Work items 위젯

GitLab Work items 위젯의 프론트엔드 및 백엔드 아키텍처와 새 위젯 구현 절차를 설명합니다.

프론트엔드 아키텍처 # 작업 항목 위젯은 프론트엔드 위젯 에서 많은 영향을 받았습니다. 작업 항목은 이슈어블과 아키텍처가 다르므로 일부 차이가 있습니다. GraphQL(Vue Apollo)이 작업 항목 위젯 스택의 핵심을 이룹니다. 작업 항목의 위젯 정보 조회 # 작업 항목 페이지를 표시하려면 프론트엔드가 표시하려는 작업 항목에서 어떤 위젯을 사용할 수 있는지 알아야 합니다. 이를 위해 다음과 같은 쿼리로 위젯 목록을 가져와야 합니다. query workItem($workItemId: WorkItemID!) { workItem(id: $workItemId) { id widgets { ... on WorkItemWidgetAssignees { type assignees { nodes { name } } } } } } GraphQL 쿼리 및 뮤테이션 # GraphQL 쿼리와 뮤테이션은 작업 항목과 무관합니다. 작업 항목 쿼리와 뮤테이션은 위젯 수준에서 이루어져야 하며, 그래야 위젯이 독립적으로 재사용 가능한 컴포넌트가 됩니다. 작업 항목 쿼리와 뮤테이션은 모든 작업 항목 유형을 지원하고 동적이어야 합니다. 또한 위젯 식별자를 지정해 어떤 작업 항목 속성이든 쿼리하고 변경할 수 있어야 합니다. 다음 쿼리 예시에서 description 위젯은 이 쿼리와 뮤테이션을 사용해 모든 작업 항목의 설명을 표시하고 업데이트합니다. query workItem($fullPath: ID!, $iid: String!) { namespace(fullPath: $fullPath) { id workItem(iid: $iid) { id iid widgets { ... on WorkItemWidgetDescription { description descriptionHtml } } } } } 뮤테이션 예시. mutation { workItemUpdate(input: { id: "gid://gitlab/AnyWorkItem/499" descriptionWidget: { description: "New description" } }) { errors workItem { description } } } 위젯의 책임과 구조 # 위젯은 제목, 설명, 레이블처럼 단일 속성 하나를 표시하고 업데이트하는 역할을 합니다. 위젯은 모든 유형의 작업 항목을 지원해야 합니다. 컴포넌트 재사용성을 최대화하기 위해 위젯은 자신이 담당하는 속성의 작업 항목 쿼리와 뮤테이션을 소유하는 필드 래퍼여야 합니다. 필드 컴포넌트는 범용적이고 단순한 컴포넌트입니다. 입력 필드, 날짜 선택기, 드롭다운 목록처럼 속성이나 작업 항목의 세부 사항은 알지 못합니다. 위젯은 작업 항목에 따라 다양한 사용 사례를 지원하도록 구성할 수 있어야 합니다. 위젯을 만들 때는 props와 주입 속성 사용을 최소화하면서 슬롯으로 추가 컨텍스트를 제공합니다. 예시 # 현재 해당 폴더 에는 편집 가능한 위젯이 많이 있으며, 구체적으로 다음과 같습니다 작업 항목 assignees 위젯 작업 항목 labels 위젯 작업 항목 descri