Consider refactoring to separate "Approvers" and "Codeowners" in different components

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Description

Refactor approvals_list.vue so two layouts can be handled separately.

• ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue

Original Discussion

The following discussion from !39753 (merged) should be addressed:

• @mrincon started a discussion: (+1 comment)

  Comment (non-blocking): I'll confess I found this component hard to read. It contains 2 sections (Approvers and Codeowners) which require slightly different layouts (one has files patterns, others not) and yet the data and layout is mixed in the same place.

  I would hope for them to eventually to be refactored to 2 separate components, for the rule's description:

  approvers rule description	codeowners rule description

  Or maybe even the entire row, if that makes sense.