Add health status to haml issue list

Add _health_status.html.haml partial
Add rspec for testing health status labels
Reorders issue weight, status, labels.
(should display weight first, then status followed by labels)

app/views/projects/issues/_issue.html.haml

@@ -37,12 +37,15 @@
                
               = sprite_icon('calendar')
               = issue.due_date.to_s(:medium)
+
+          = render_if_exists "projects/issues/issue_weight", issue: issue
+          = render_if_exists "projects/issues/health_status", issue: issue
+
           - if issue.labels.any?
              
             - presented_labels_sorted_by_title(issue.labels, issue.project).each do |label|
               = link_to_label(label, small: true)
 
-          = render_if_exists "projects/issues/issue_weight", issue: issue
           = render "projects/issues/issue_estimate", issue: issue
 
       .issuable-meta

doc/user/project/issues/index.md

@@ -189,6 +189,8 @@ requires [GraphQL](../../../api/graphql/index.md) to be enabled.
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/36427) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 12.10.
 > - Health status of closed issues [can't be edited](https://gitlab.com/gitlab-org/gitlab/-/issues/220867) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 13.4 and later.
+> - Issue health status visible in issue lists [introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/45141) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 13.5.
+
 To help you track the status of your issues, you can assign a status to each issue to flag work
 that's progressing as planned or needs attention to keep on schedule:
 
@@ -201,7 +203,7 @@ that's progressing as planned or needs attention to keep on schedule:
 After an issue is closed, its health status can't be edited and the "Edit" button becomes disabled
 until the issue is reopened.
 
-You can then see issue statuses on the
+You can then see issue statuses in the [issue list](#issues-list) and the
 [Epic tree](../../group/epics/index.md#issue-health-status-in-epic-tree).
 
 #### Disable issue health status

ee/app/assets/stylesheets/pages/issuable.scss

@@ -106,7 +106,7 @@
     }
 
     &-needs-attention {
-      color: $gray-900;
+      color: $orange-700;
       background-color: $orange-50;
     }
 
@@ -118,6 +118,7 @@
 
   .gl-label-text {
     font-weight: $gl-font-weight-bold;
+    font-size: 0.75rem;
   }
 }
 

ee/app/views/projects/issues/_health_status.html.haml

+- issue = local_assigns.fetch(:issue)
+
+- status_text = { 'at_risk' => _('At risk'), 'on_track' => _('On track'), 'needs_attention' => _('Needs attention') }
+- status_classes = { 'at_risk' => 'status-at-risk', 'on_track' => 'status-on-track', 'needs_attention' => 'status-needs-attention' }
+
+- if issue.health_status
+  .gl-ml-2.health-status.gl-display-inline-flex.gl-align-items-center
+     
+    %span.gl-label.gl-label-text-dark.gl-label-sm{ data: { testid: "health-status" }, class: status_classes[issue.health_status] }
+      %span.gl-label-text
+        = status_text[issue.health_status]

ee/app/views/projects/issues/_issue_weight.html.haml

 - issue = local_assigns.fetch(:issue)
 
 - if issue.weight
-  %span.issuable-weight.d-none.d-sm-inline-block.has-tooltip{ data: { container: 'body', qa_selector: 'issuable_weight_content' }, title: _('Weight') }
+  %span.issuable-weight.gl-display-none.d-sm-inline-block.gl-mr-2.has-tooltip{ data: { container: 'body', qa_selector: 'issuable_weight_content' }, title: _('Weight') }
      
     = sprite_icon('weight', css_class: 'issue-weight-icon')
     = issue.weight

ee/spec/features/issues/health_status_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Health status' do
+  let(:project) { build(:project, :public) }
+
+  before do
+    stub_feature_flags(vue_issuables_list: false)
+  end
+
+  health_statuses = [
+    { name: 'on_track', style: '.status-on-track', text: "On track" },
+    { name: 'needs_attention', style: '.status-needs-attention', text: "Needs attention" },
+    { name: 'at_risk', style: '.status-at-risk', text: "At risk" }
+  ]
+
+  describe 'health status on issue list row' do
+    health_statuses.each do |status|
+      it "renders health status label for #{status[:name]}" do
+        create(:issue, project: project, health_status: status[:name])
+
+        visit project_issues_path(project)
+
+        page.within(first('.issuable-info')) do
+          expect(page).to have_selector('[data-testid="health-status"]')
+          expect(page).to have_css(status[:style])
+          expect(page).to have_content(status[:text])
+        end
+      end
+    end
+  end
+end