Split NoteableDiscussion component
NoteableDiscussion
tries to do many different things at many different abstraction levels. For example it is responsible for distinction of rendering a diff discussion and a regular discussion (high abstraction level) but also for the loading icon of a resolve discussion button (low abstraction level). This leads to a high amount of properties, methods and much nesting in the template. As a consequence we had many regressions and merge conflicts caused by this component.
We should split the component into smaller subcomponents:
-
DiffDiscussion
(<div v-if="shouldRenderDiffs" class="discussion-header note-wrapper">
)-
DiffDiscussionHeader
-
-
DiscussionBody
(<div v-if="shouldShowDiscussions" class="discussion-body">
)-
DiscussionNotes
/DiscussionComments
(<div class="discussion-notes"><ul class="notes">
) -
ReplyPlaceholder
(<button>Reply...
) -
DiscussionActions
-
ResolveDiscussionButton
(<div v-if="discussion.resolvable"><button @click="resolveHandler();">
) -
ResolveWithIssueButton
(<div v-if="!discussionResolved"><a :href="discussion.resolve_with_issue_path">
) -
JumpToNextDiscussionButton
(<div v-if="shouldShowJumpToNextDiscussion"><button>
)
-
-
As a side effect, the corresponding tests get easier to write and better to maintain.
Edited by Inactive Account