Work items 위젯

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

프론트엔드 아키텍처 # Work items 위젯은 프론트엔드 위젯 에서 많은 영감을 받았습니다. Work items는 issuable과 아키텍처적으로 다르기 때문에 일부 차이점이 있을 수 있습니다. GraphQL(Vue Apollo)은 work items 위젯 스택의 핵심을 구성합니다. work items의 위젯 정보 조회 # work item 페이지를 표시하려면 프론트엔드가 표시하려는 work item에서 어떤 위젯을 사용할 수 있는지 알아야 합니다. 이를 위해 다음과 같은 쿼리를 사용하여 위젯 목록을 가져와야 합니다: query workItem($workItemId: WorkItemID!) { workItem(id: $workItemId) { id widgets { ... on WorkItemWidgetAssignees { type assignees { nodes { name } } } } } } GraphQL 쿼리 및 뮤테이션 # GraphQL 쿼리와 뮤테이션은 work item에 독립적입니다. Work item 쿼리와 뮤테이션은 위젯 수준에서 수행되어야 하며, 위젯이 독립적으로 재사용 가능한 컴포넌트가 되도록 합니다. Work item 쿼리와 뮤테이션은 모든 work item 타입을 지원하고 동적이어야 합니다. 위젯 식별자를 지정하여 모든 work item 속성을 쿼리하고 수정할 수 있어야 합니다. 이 쿼리 예시에서 description 위젯은 쿼리와 뮤테이션을 사용하여 모든 work item의 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 } } } 위젯의 책임과 구조 # 위젯은 제목, description, 라벨 등 단일 속성을 표시하고 업데이트하는 역할을 담당합니다. 위젯은 모든 타입의 work item을 지원해야 합니다. 컴포넌트 재사용성을 극대화하기 위해 위젯은 담당하는 속성의 work item 쿼리와 뮤테이션을 소유하는 필드 래퍼여야 합니다. 필드 컴포넌트는 범용적이고 단순한 컴포넌트입니다. 입력 필드, 날짜 선택기, 드롭다운 목록 등과 같이 속성이나 work item 세부 사항에 대한 지식이 없습니다. 위젯은 work items에 따라 다양한 사용 사례를 지원하도록 구성 가능해야 합니다. 위젯을 구축할 때는 props와 주입된 속성의 사용을 최소화하면서 추가 컨텍스트를 제공하기