Expose health_status in the Issue API

Following changes were made
- Exposing the health_status attribute in the v4 issues api.
- Add docs changes to reflect the new attribute we're sending
in the API.

doc/api/issues.md

@@ -178,6 +178,20 @@ the `weight` parameter:
 ]
 ```
 
+Users on GitLab [Ultimate](https://about.gitlab.com/pricing/) will also see
+the `health_status` parameter:
+
+```json
+[
+   {
+      "state" : "opened",
+      "description" : "Ratione dolores corrupti mollitia soluta quia.",
+      "health_status": "on_track",
+      ...
+   }
+]
+```
+
 **Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 **Note**: The `closed_by` attribute was [introduced in GitLab 10.6](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/17042). This value will only be present for issues which were closed after GitLab 10.6 and when the user account that closed the issue still exists.
@@ -336,6 +350,20 @@ the `weight` parameter:
 ]
 ```
 
+Users on GitLab [Ultimate](https://about.gitlab.com/pricing/) will also see
+the `health_status` parameter:
+
+```json
+[
+   {
+      "project_id" : 4,
+      "description" : "Omnis vero earum sunt corporis dolor et placeat.",
+      "health_status": "at_risk",
+      ...
+   }
+]
+```
+
 **Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 **Note**: The `closed_by` attribute was [introduced in GitLab 10.6](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/17042). This value will only be present for issues which were closed after GitLab 10.6 and when the user account that closed the issue still exists.
@@ -500,6 +528,20 @@ the `weight` parameter:
 ]
 ```
 
+Users on GitLab [Ultimate](https://about.gitlab.com/pricing/) will also see
+the `health_status` parameter:
+
+```json
+[
+   {
+      "project_id" : 4,
+      "description" : "Omnis vero earum sunt corporis dolor et placeat.",
+      "health_status": "at_risk",
+      ...
+   }
+]
+```
+
 **Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 **Note**: The `closed_by` attribute was [introduced in GitLab 10.6](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/17042). This value will only be present for issues which were closed after GitLab 10.6 and when the user account that closed the issue still exists.
@@ -639,6 +681,20 @@ the `epic` property:
 }
 ```
 
+Users on GitLab [Ultimate](https://about.gitlab.com/pricing/) will also additionally see
+the `health_status` property:
+
+```json
+[
+   {
+      "project_id" : 4,
+      "description" : "Omnis vero earum sunt corporis dolor et placeat.",
+      "health_status": "on_track",
+      ...
+   }
+]
+```
+
 **Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 **Note**: The `closed_by` attribute was [introduced in GitLab 10.6](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/17042). This value will only be present for issues which were closed after GitLab 10.6 and when the user account that closed the issue still exists.
@@ -749,6 +805,20 @@ the `weight` parameter:
 }
 ```
 
+Users on GitLab [Ultimate](https://about.gitlab.com/pricing/) will also see
+the `health_status` parameter:
+
+```json
+[
+   {
+      "project_id" : 4,
+      "description" : "Omnis vero earum sunt corporis dolor et placeat.",
+      "health_status": "on_track",
+      ...
+   }
+]
+```
+
 **Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 **Note**: The `closed_by` attribute was [introduced in GitLab 10.6](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/17042). This value will only be present for issues which were closed after GitLab 10.6 and when the user account that closed the issue still exists.
@@ -871,6 +941,20 @@ the `weight` parameter:
 }
 ```
 
+Users on GitLab [Ultimate](https://about.gitlab.com/pricing/) will also see
+the `health_status` parameter:
+
+```json
+[
+   {
+      "project_id" : 4,
+      "description" : "Omnis vero earum sunt corporis dolor et placeat.",
+      "health_status": "on_track",
+      ...
+   }
+]
+```
+
 NOTE: **Note:**
 At least one of following parameters is required to be passed for the request to be successful: `:assignee_id`, `:assignee_ids`, `:confidential`, `:created_at`, `:description`, `:discussion_locked`, `:due_date`, `:labels`, `:milestone_id`, `:state_event`, or `:title`.
 
@@ -1024,6 +1108,20 @@ the `weight` parameter:
 }
 ```
 
+Users on GitLab [Ultimate](https://about.gitlab.com/pricing/) will also see
+the `health_status` parameter:
+
+```json
+[
+   {
+      "project_id" : 4,
+      "description" : "Omnis vero earum sunt corporis dolor et placeat.",
+      "health_status": "on_track",
+      ...
+   }
+]
+```
+
 **Note**: `assignee` column is deprecated, now we show it as a single-sized array `assignees` to conform to the GitLab EE API.
 
 **Note**: The `closed_by` attribute was [introduced in GitLab 10.6](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/17042). This value will only be present for issues which were closed after GitLab 10.6 and when the user account that closed the issue still exists.

ee/app/assets/javascripts/related_items_tree/components/epic_health_status.vue

@@ -50,11 +50,11 @@ export default {
         {{ healthStatus.issuesOnTrack }}
       </span>
     </span>
-    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none">
+    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none!">
       {{ __('issues on track') }}
     </span>
     <span
-      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none"
+      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none!"
       >{{ __('on track') }}</span
     >
 
@@ -63,11 +63,11 @@ export default {
         {{ healthStatus.issuesNeedingAttention }}
       </span>
     </span>
-    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none">
+    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none!">
       {{ __('issues need attention') }}
     </span>
     <span
-      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none"
+      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none!"
       >{{ __('need attention') }}</span
     >
 
@@ -76,10 +76,10 @@ export default {
         {{ healthStatus.issuesAtRisk }}
       </span>
     </span>
-    <span class="gl-text-gray-700 health-label-long gl-display-none">
+    <span class="gl-text-gray-700 health-label-long gl-display-none!">
       {{ __('issues at risk') }}
     </span>
-    <span class="gl-text-gray-700 gl-str-truncated health-label-short gl-display-none">
+    <span class="gl-text-gray-700 gl-str-truncated health-label-short gl-display-none!">
       {{ __('at risk') }}
     </span>
   </div>

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -199,7 +199,7 @@ export default {
           <div
             class="item-meta gl-display-flex gl-flex-wrap mt-xl-0 flex-xl-nowrap gl-align-items-center gl-py-2 gl-ml-6"
           >
-            <span class="gl-mr-4">{{ itemHierarchy }}</span>
+            <span class="gl-mr-5">{{ itemHierarchy }}</span>
             <gl-tooltip v-if="isEpic" :target="() => $refs.countBadge">
               <p v-if="allowSubEpics" class="gl-font-weight-bold gl-m-0">
                 {{ __('Epics') }} &#8226;
@@ -232,15 +232,12 @@ export default {
             >
               <span
                 v-if="allowSubEpics"
-                class="gl-display-inline-flex gl-align-items-center gl-mr-3"
+                class="gl-display-inline-flex gl-align-items-center gl-mr-5"
               >
                 <gl-icon name="epic" class="gl-mr-2" />
                 {{ totalEpicsCount }}
               </span>
-              <span
-                class="gl-display-inline-flex gl-align-items-center gl-mr-3"
-                :class="{ 'ml-2': allowSubEpics }"
-              >
+              <span class="gl-display-inline-flex gl-align-items-center gl-mr-5">
                 <gl-icon name="issues" class="gl-mr-2" />
                 {{ totalIssuesCount }}
               </span>
@@ -249,38 +246,40 @@ export default {
             <item-milestone
               v-if="hasMilestone"
               :milestone="item.milestone"
-              class="item-milestone gl-display-flex gl-align-items-center gl-mr-4"
+              class="item-milestone gl-display-flex gl-align-items-center gl-mr-5"
             />
 
             <item-due-date
               v-if="item.dueDate"
               :date="item.dueDate"
               tooltip-placement="top"
-              css-class="item-due-date gl-display-flex gl-align-items-center gl-mr-4"
+              css-class="item-due-date gl-display-flex gl-align-items-center gl-mr-5!"
             />
 
             <item-weight
               v-if="item.weight"
               :weight="item.weight"
-              class="item-weight gl-display-flex gl-align-items-center gl-mr-4"
+              class="item-weight gl-display-flex gl-align-items-center gl-mr-5!"
               tag-name="span"
             />
 
             <item-assignees
               v-if="hasAssignees"
               :assignees="item.assignees"
-              class="item-assignees gl-display-inline-flex gl-align-items-center gl-mr-4 mb-md-0 flex-xl-grow-0"
+              class="item-assignees gl-display-inline-flex gl-align-items-center gl-mr-5 mb-md-0 flex-xl-grow-0"
             />
 
             <epic-health-status
               v-if="showEpicHealthStatus"
               :health-status="item.healthStatus"
               data-testid="epic-health-status"
+              class="issuable-tag-valign"
             />
             <issue-health-status
               v-if="showIssueHealthStatus"
               :health-status="item.healthStatus"
               data-testid="issue-health-status"
+              class="issuable-tag-valign"
             />
           </div>
         </div>

ee/lib/ee/api/entities/issue.rb

@@ -20,6 +20,10 @@ module EE
               issue.epic if ::Ability.allowed?(options[:current_user], :read_epic, issue.epic)
             end
           end
+
+          with_options if: -> (issue) { issue.project.feature_available?(:issuable_health_status) } do
+            expose :health_status
+          end
         end
       end
     end

ee/spec/fixtures/api/schemas/public_api/v4/issues.json

@@ -16,6 +16,9 @@
             "title": { "type": "string" },
             "url": { "type": "string" }
           }
+        },
+        "health_status": {
+          "type": ["string",  "null"]
         }
       }
     }

lib/api/entities/issue_basic.rb

@@ -21,7 +21,6 @@ module API
         issue.assignees.first
       end
 
-      expose(:health_status) { |issue, options| issue.health_status }
       expose(:user_notes_count)     { |issue, options| issuable_metadata.user_notes_count }
       expose(:merge_requests_count) { |issue, options| issuable_metadata.merge_requests_count }
       expose(:upvotes)              { |issue, options| issuable_metadata.upvotes }

spec/frontend/issuables_list/components/issuable_spec.js

@@ -476,8 +476,9 @@ describe('Issuable component', () => {
     });
   });
 
+  if (IS_EE) {
     describe('with health status', () => {
-    it('renders', () => {
+      it('renders health status tag', () => {
         factory({ issuable });
         expect(findHealthStatus().exists()).toBe(true);
       });
@@ -488,4 +489,5 @@ describe('Issuable component', () => {
         expect(findHealthStatus().exists()).toBe(false);
       });
     });
+  }
 });