Add Jira status to sidebar

On Jira issue details page

ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue

 <script>
 import { labelsFilterParam } from 'ee/integrations/jira/issues_show/constants';
 
+import { __ } from '~/locale';
+
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
 import Assignee from './assignee.vue';
 import IssueDueDate from './issue_due_date.vue';
+import IssueField from './issue_field.vue';
 import IssueReference from './issue_reference.vue';
 
 export default {
@@ -11,6 +14,7 @@ export default {
   components: {
     Assignee,
     IssueDueDate,
+    IssueField,
     IssueReference,
     LabelsSelect,
   },
@@ -39,6 +43,9 @@ export default {
     },
   },
   labelsFilterParam,
+  i18n: {
+    statusTitle: __('Status'),
+  },
 };
 </script>
 
@@ -47,6 +54,7 @@ export default {
     <assignee class="block" :assignee="assignee" />
 
     <issue-due-date :due-date="issue.dueDate" />
+    <issue-field icon="progress" :title="$options.i18n.statusTitle" :value="issue.status" />
 
     <labels-select
       :selected-labels="issue.labels"

ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Assignee from 'ee/integrations/jira/issues_show/components/sidebar/assignee.vue';
 import IssueDueDate from 'ee/integrations/jira/issues_show/components/sidebar/issue_due_date.vue';
+import IssueField from 'ee/integrations/jira/issues_show/components/sidebar/issue_field.vue';
 import IssueReference from 'ee/integrations/jira/issues_show/components/sidebar/issue_reference.vue';
 import Sidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -33,6 +34,7 @@ describe('JiraIssuesSidebar', () => {
   const findLabelsSelect = () => wrapper.findComponent(LabelsSelect);
   const findAssignee = () => wrapper.findComponent(Assignee);
   const findIssueDueDate = () => wrapper.findComponent(IssueDueDate);
+  const findIssueField = () => wrapper.findComponent(IssueField);
   const findIssueReference = () => wrapper.findComponent(IssueReference);
 
   it('renders Labels block', () => {
@@ -55,6 +57,15 @@ describe('JiraIssuesSidebar', () => {
     expect(dueDate.props('dueDate')).toBe(mockJiraIssue.dueDate);
   });
 
+  it('renders IssueField', () => {
+    createComponent();
+    const field = findIssueField();
+
+    expect(field.props('icon')).toBe('progress');
+    expect(field.props('title')).toBe('Status');
+    expect(field.props('value')).toBe(mockJiraIssue.status);
+  });
+
   describe('when references.relative is null', () => {
     it('does not render IssueReference', () => {
       createComponent({

ee/spec/frontend/integrations/jira/issues_show/mock_data.js

@@ -28,4 +28,5 @@ export const mockJiraIssue = {
     relative: 'FE-2',
   },
   state: 'opened',
+  status: 'In Progress',
 };