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.