Render comments on Jira issues within Gitlab

- updates shape of IssueDetailEntity comments
- extends issuable_show to support a description slot
- renders Jira comments

app/assets/javascripts/issuable_show/components/issuable_discussion.vue

+<script>
+export default {
+  name: 'IssuableDiscussion',
+};
+</script>
+
+<template>
+  <section class="issuable-discussion">
+    <div>
+      <ul class="notes main-notes-list timeline">
+        <slot name="discussion"></slot>
+      </ul>
+    </div>
+  </section>
+</template>

app/assets/javascripts/issuable_show/components/issuable_show_root.vue

@@ -2,6 +2,7 @@
 import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
 
 import IssuableBody from './issuable_body.vue';
+import IssuableDiscussion from './issuable_discussion.vue';
 import IssuableHeader from './issuable_header.vue';
 
 export default {
@@ -9,6 +10,7 @@ export default {
     IssuableSidebar,
     IssuableHeader,
     IssuableBody,
+    IssuableDiscussion,
   },
   props: {
     issuable: {
@@ -89,6 +91,7 @@ export default {
         <slot name="header-actions"></slot>
       </template>
     </issuable-header>
+
     <issuable-body
       :issuable="issuable"
       :status-badge-class="statusBadgeClass"
@@ -111,6 +114,13 @@ export default {
         <slot name="edit-form-actions" v-bind="actionsProps"></slot>
       </template>
     </issuable-body>
+
+    <issuable-discussion>
+      <template #discussion>
+        <slot name="discussion"></slot>
+      </template>
+    </issuable-discussion>
+
     <issuable-sidebar @sidebar-toggle="$emit('sidebar-toggle', $event)">
       <template #right-sidebar-items="sidebarProps">
         <slot name="right-sidebar-items" v-bind="sidebarProps"></slot>

ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue

 <script>
-import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAlert, GlSprintf, GlLink, GlBadge, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { fetchIssue } from 'ee/integrations/jira/issues_show/api';
 import JiraIssueSidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
 import { issueStates, issueStateLabels } from 'ee/integrations/jira/issues_show/constants';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import Note from './note.vue';
 
 export default {
   name: 'JiraIssuesShow',
@@ -12,8 +13,13 @@ export default {
     GlAlert,
     GlSprintf,
     GlLink,
+    GlBadge,
     IssuableShow,
     JiraIssueSidebar,
+    Note,
+  },
+  directives: {
+    GlTooltip,
   },
   inject: {
     issuesShowPath: {
@@ -46,6 +52,11 @@ export default {
     });
     this.isLoading = false;
   },
+  methods: {
+    jiraIssueCommentId(id) {
+      return `jira_note_${id}`;
+    },
+  },
 };
 </script>
 
@@ -82,6 +93,26 @@ export default {
       <template #right-sidebar-items="{ sidebarExpanded }">
         <jira-issue-sidebar :sidebar-expanded="sidebarExpanded" :issue="issue" />
       </template>
+
+      <template #discussion>
+        <note
+          v-for="comment in issue.comments"
+          :id="jiraIssueCommentId(comment.id)"
+          :key="comment.id"
+          :author-avatar-url="comment.author.avatarUrl"
+          :author-web-url="comment.author.webUrl"
+          :author-name="comment.author.name"
+          :author-username="comment.author.username"
+          :note-body-html="comment.bodyHtml"
+          :note-created-at="comment.createdAt"
+        >
+          <template #badges>
+            <gl-badge v-gl-tooltip="{ title: __('This is a Jira user.') }">
+              {{ __('Jira user') }}
+            </gl-badge>
+          </template>
+        </note>
+      </template>
     </issuable-show>
   </div>
 </template>

ee/app/serializers/integrations/jira/issue_detail_entity.rb

@@ -18,11 +18,13 @@ module Integrations
 
       expose :comments do |jira_issue|
         jira_issue.renderedFields['comment']['comments'].map do |comment|
-          jira_user(comment['author']).merge(
-            note: Banzai::Pipeline::JiraGfmPipeline.call(comment['body'], project: project)[:output].to_html,
+          {
+            id: comment['id'],
+            body_html: Banzai::Pipeline::JiraGfmPipeline.call(comment['body'], project: project)[:output].to_html,
             created_at: comment['created'].to_datetime.utc,
-            updated_at: comment['updated'].to_datetime.utc
-          )
+            updated_at: comment['updated'].to_datetime.utc,
+            author: jira_user(comment['author'])
+          }
         end
       end
     end

ee/spec/serializers/integrations/jira/issue_detail_entity_spec.rb

@@ -101,10 +101,12 @@ RSpec.describe Integrations::Jira::IssueDetailEntity do
       external_tracker: 'jira',
       comments: [
         hash_including(
-          name: 'comment_author',
-          username: 'comment@author.com',
-          avatar_url: 'http://comment_author.avatar',
-          note: "<p dir=\"auto\">Comment</p>",
+          author: hash_including({
+            name: 'comment_author',
+            username: 'comment@author.com',
+            avatar_url: 'http://comment_author.avatar'
+          }),
+          body_html: "<p dir=\"auto\">Comment</p>",
           created_at: '2020-06-25T15:50:00.000+0000'.to_datetime.utc,
           updated_at: '2020-06-25T15:51:00.000+0000'.to_datetime.utc
         )
@@ -116,7 +118,7 @@ RSpec.describe Integrations::Jira::IssueDetailEntity do
     it 'returns the Jira Server profile URL' do
       expect(subject[:author]).to include(web_url: 'http://jira.com/secure/ViewProfile.jspa?name=reporter@reporter.com')
       expect(subject[:assignees].first).to include(web_url: 'http://jira.com/secure/ViewProfile.jspa?name=assignee@assignee.com')
-      expect(subject[:comments].first).to include(web_url: 'http://jira.com/secure/ViewProfile.jspa?name=comment@author.com')
+      expect(subject[:comments].first[:author]).to include(web_url: 'http://jira.com/secure/ViewProfile.jspa?name=comment@author.com')
     end
 
     context 'with only url' do
@@ -142,7 +144,7 @@ RSpec.describe Integrations::Jira::IssueDetailEntity do
     it 'returns the Jira Cloud profile URL' do
       expect(subject[:author]).to include(web_url: 'http://jira.com/people/12345')
       expect(subject[:assignees].first).to include(web_url: 'http://jira.com/people/67890')
-      expect(subject[:comments].first).to include(web_url: 'http://jira.com/people/54321')
+      expect(subject[:comments].first[:author]).to include(web_url: 'http://jira.com/people/54321')
     end
   end
 

locale/gitlab.pot

@@ -30565,6 +30565,9 @@ msgstr ""
 msgid "This is a \"Ghost User\", created to hold all issues authored by users that have since been deleted. This user cannot be removed."
 msgstr ""
 
+msgid "This is a Jira user."
+msgstr ""
+
 msgid "This is a Premium feature"
 msgstr ""