Add status to Jira issues

- Expose Jira status from backend
- Show Jira status in place of GitLab's "closed" status

app/assets/javascripts/issuables_list/components/issuable.vue

@@ -97,6 +97,9 @@ export default {
     isJiraIssue() {
       return this.issuable.external_tracker === 'jira';
     },
+    linkTarget() {
+      return this.isJiraIssue ? '_blank' : null;
+    },
     issueCreatedToday() {
       return getDayDifference(new Date(this.issuable.created_at), new Date()) < 1;
     },
@@ -239,11 +242,7 @@ export default {
               :title="$options.confidentialTooltipText"
               :aria-label="$options.confidentialTooltipText"
             />
-            <gl-link
-              :href="issuable.web_url"
-              :target="isJiraIssue ? '_blank' : null"
-              data-testid="issuable-title"
-            >
+            <gl-link :href="issuable.web_url" :target="linkTarget" data-testid="issuable-title">
               {{ issuable.title }}
               <gl-icon
                 v-if="isJiraIssue"
@@ -281,6 +280,7 @@ export default {
                   ref="openedAgoByContainer"
                   v-bind="popoverDataAttrs"
                   :href="issuableAuthor.web_url"
+                  :target="linkTarget"
                 >
                   {{ issuableAuthor.name }}
                 </gl-link>
@@ -340,8 +340,8 @@ export default {
       <!-- Issuable meta -->
       <div class="flex-shrink-0 d-flex flex-column align-items-end justify-content-center">
         <div class="controls d-flex">
-          <span v-if="isJiraIssue">&nbsp;</span>
-          <span v-if="isClosed" class="issuable-status">{{ __('CLOSED') }}</span>
+          <span v-if="isJiraIssue" data-testid="issuable-status">{{ issuable.status }}</span>
+          <span v-else-if="isClosed" class="issuable-status">{{ __('CLOSED') }}</span>
 
           <issue-assignees
             :assignees="issuable.assignees"

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

@@ -23,6 +23,10 @@ module Integrations
         jira_issue.resolutiondate&.to_datetime&.utc
       end
 
+      expose :status do |jira_issue|
+        jira_issue.status.name
+      end
+
       expose :labels do |jira_issue|
         jira_issue.labels.map do |name|
           {

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

@@ -23,7 +23,8 @@ RSpec.describe Integrations::Jira::IssueEntity do
       assignee: double('displayName' => 'assignee'),
       project: double(key: 'GL'),
       key: 'GL-5',
-      client: double(options: { site: 'http://jira.com/' })
+      client: double(options: { site: 'http://jira.com/' }),
+      status: double(name: 'To Do')
     )
   end
 
@@ -36,6 +37,7 @@ RSpec.describe Integrations::Jira::IssueEntity do
       created_at: '2020-06-25T15:39:30.000+0000'.to_datetime.utc,
       updated_at: '2020-06-26T15:38:32.000+0000'.to_datetime.utc,
       closed_at: '2020-06-27T13:23:51.000+0000'.to_datetime.utc,
+      status: 'To Do',
       labels: [
         {
           name: 'backend',

spec/frontend/issuables_list/components/issuable_spec.js

@@ -80,6 +80,7 @@ describe('Issuable component', () => {
     wrapper.findAll(GlIcon).wrappers.some(iconWrapper => iconWrapper.props('name') === 'eye-slash');
   const findTaskStatus = () => wrapper.find('.task-status');
   const findOpenedAgoContainer = () => wrapper.find('[data-testid="openedByMessage"]');
+  const findAuthor = () => wrapper.find({ ref: 'openedAgoByContainer' });
   const findMilestone = () => wrapper.find('.js-milestone');
   const findMilestoneTooltip = () => findMilestone().attributes('title');
   const findDueDate = () => wrapper.find('.js-due-date');
@@ -94,6 +95,7 @@ describe('Issuable component', () => {
   const findScopedLabels = () => findLabels().filter(w => isScopedLabel({ title: w.text() }));
   const findUnscopedLabels = () => findLabels().filter(w => !isScopedLabel({ title: w.text() }));
   const findIssuableTitle = () => wrapper.find('[data-testid="issuable-title"]');
+  const findIssuableStatus = () => wrapper.find('[data-testid="issuable-status"]');
   const containsJiraLogo = () => wrapper.contains('[data-testid="jira-logo"]');
 
   describe('when mounted', () => {
@@ -235,6 +237,24 @@ describe('Issuable component', () => {
     it('opens issuable in a new tab', () => {
       expect(findIssuableTitle().props('target')).toBe('_blank');
     });
+
+    it('opens author in a new tab', () => {
+      expect(findAuthor().props('target')).toBe('_blank');
+    });
+
+    describe('with Jira status', () => {
+      const expectedStatus = 'In Progress';
+
+      beforeEach(() => {
+        issuable.status = expectedStatus;
+
+        factory({ issuable });
+      });
+
+      it('renders the Jira status', () => {
+        expect(findIssuableStatus().text()).toBe(expectedStatus);
+      });
+    });
   });
 
   describe('with task status', () => {