Cosmetic changes for Epic Health Status

UX fixes for health labels, fix sizing and overflow issue, and add
tooltip on title

app/assets/javascripts/main.js

@@ -298,6 +298,18 @@ document.addEventListener('DOMContentLoaded', () => {
       if ($gutterIcon.hasClass('fa-angle-double-right')) {
         $sidebarGutterToggle.trigger('click');
       }
+
+      const sidebarGutterVueToggleEl = document.querySelector('.js-sidebar-vue-toggle');
+
+      // Sidebar has an icon which corresponds to collapsing the sidebar
+      // only then trigger the click.
+      if (sidebarGutterVueToggleEl) {
+        const collapseIcon = sidebarGutterVueToggleEl.querySelector('i.fa-angle-double-right');
+
+        if (collapseIcon) {
+          collapseIcon.click();
+        }
+      }
     }
   });
 

app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue

@@ -37,7 +37,7 @@ export default {
     :title="tooltipLabel"
     :class="cssClasses"
     type="button"
-    class="btn btn-blank gutter-toggle btn-sidebar-action"
+    class="btn btn-blank gutter-toggle btn-sidebar-action js-sidebar-vue-toggle"
     data-container="body"
     data-placement="left"
     data-boundary="viewport"

app/assets/stylesheets/components/related_items_list.scss

@@ -73,6 +73,11 @@ $item-weight-max-width: 48px;
     .issue-token-state-icon-closed {
       display: none;
     }
+
+    .sortable-link {
+      color: $gray-900;
+      font-weight: normal;
+    }
   }
 
   .item-path-id .path-id-text,
@@ -249,6 +254,12 @@ $item-weight-max-width: 48px;
   line-height: 0;
 }
 
+@include media-breakpoint-down(xs) {
+  .btn-sm.dropdown-toggle-split {
+    max-width: 40px;
+  }
+}
+
 @include media-breakpoint-up(sm) {
   .item-info-area {
     flex-basis: 100%;
@@ -296,10 +307,6 @@ $item-weight-max-width: 48px;
   .item-meta {
     .item-meta-child {
       flex-basis: unset;
-
-      ~ .item-assignees {
-        margin-left: $gl-padding-4;
-      }
     }
   }
 
@@ -353,7 +360,7 @@ $item-weight-max-width: 48px;
     }
 
     .item-title-wrapper {
-      max-width: calc(100% - 440px);
+      max-width: calc(100% - 500px);
     }
 
     .item-info-area {
@@ -407,7 +414,7 @@ $item-weight-max-width: 48px;
   }
 }
 
-@media only screen and (min-width: 1400px) {
+@media only screen and (min-width: 1500px) {
   .card-header,
   .item-body {
     .health-label-short {
@@ -419,7 +426,9 @@ $item-weight-max-width: 48px;
     }
   }
 
-  .item-body .item-title-wrapper {
-    max-width: calc(100% - 570px);
+  .item-body {
+    .item-title-wrapper {
+      max-width: calc(100% - 640px);
+    }
   }
 }

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

@@ -39,8 +39,10 @@ export default {
         {{ healthStatus.issuesOnTrack }}
       </span></span
     >
-    <span class="ml-1 mr-2 text-secondary health-label-long">{{ __('issues on track') }}</span>
-    <span class="ml-1 mr-2 text-secondary text-truncate health-label-short">{{
+    <span class="ml-1 mr-1 mr-md-2 text-secondary health-label-long">{{
+      __('issues on track')
+    }}</span>
+    <span class="ml-1 mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
       __('on track')
     }}</span>
 
@@ -49,10 +51,10 @@ export default {
         {{ healthStatus.issuesNeedingAttention }}
       </span></span
     >
-    <span class="ml-1 mr-2 text-secondary health-label-long">{{
+    <span class="ml-1 mr-1 mr-md-2 text-secondary health-label-long">{{
       __('issues need attention')
     }}</span>
-    <span class="ml-1 mr-2 text-secondary text-truncate health-label-short">{{
+    <span class="ml-1 mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
       __('need attention')
     }}</span>
 

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

@@ -159,7 +159,7 @@ export default {
       <related-items-tree-header :class="{ 'border-bottom-0': itemsFetchResultEmpty }">
         <issue-actions-split-button
           slot="issueActions"
-          class="ml-1"
+          class="ml-0 ml-sm-1"
           @showAddIssueForm="handleShowAddIssueForm"
           @showCreateIssueForm="handleShowCreateIssueForm"
         />

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

@@ -48,8 +48,8 @@ export default {
 </script>
 
 <template>
-  <div class="card-header d-flex px-2">
-    <div class="d-inline-flex flex-grow-1 lh-100 align-middle">
+  <div class="card-header d-flex px-2 flex-column flex-sm-row">
+    <div class="d-inline-flex flex-grow-1 lh-100 align-middle mb-2 mb-sm-0">
       <gl-tooltip :target="() => $refs.countBadge">
         <p v-if="allowSubEpics" class="font-weight-bold m-0">
           {{ __('Epics') }} &#8226;
@@ -74,7 +74,7 @@ export default {
           </span>
         </p>
       </gl-tooltip>
-      <div ref="countBadge" class="issue-count-badge text-secondary">
+      <div ref="countBadge" class="issue-count-badge text-secondary p-0 pr-2">
         <span v-if="allowSubEpics" class="d-inline-flex align-items-center">
           <gl-icon name="epic" class="mr-1" />
           {{ totalEpicsCount }}
@@ -88,11 +88,11 @@ export default {
       </div>
       <epic-health-status v-if="healthStatus" :health-status="healthStatus" />
     </div>
-    <div class="d-inline-flex js-button-container">
+    <div class="d-inline-flex flex-column flex-sm-row js-button-container">
       <template v-if="parentItem.userPermissions.adminEpic">
         <epic-actions-split-button
           v-if="allowSubEpics"
-          class="qa-add-epics-button"
+          class="qa-add-epics-button mb-2 mb-sm-0"
           @showAddEpicForm="showAddEpicForm"
           @showCreateEpicForm="showCreateEpicForm"
         />

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

@@ -146,7 +146,7 @@ export default {
     >
       <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
         <div class="d-flex flex-column flex-grow-1 item-title-wrapper">
-          <div class="item-title d-flex align-items-center mb-1 mb-xl-0">
+          <div class="item-title d-flex align-items-center mb-2 mb-xl-0">
             <gl-icon
               ref="stateIconMd"
               :class="stateIconClass"
@@ -169,7 +169,14 @@ export default {
               name="eye-slash"
               class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
             />
-            <gl-link :href="computedPath" class="sortable-link">{{ item.title }}</gl-link>
+            <gl-link
+              v-gl-tooltip.hover
+              :aria-label="item.title"
+              :title="item.title"
+              :href="computedPath"
+              class="sortable-link"
+              >{{ item.title }}</gl-link
+            >
           </div>
         </div>
 
@@ -219,9 +226,7 @@ export default {
             <issue-health-status v-else-if="isIssue" :health-status="item.healthStatus" />
           </div>
 
-          <div
-            class="item-meta-child d-flex align-items-center order-0 flex-wrap mt-2 mt-md-0 flex-xl-nowrap"
-          >
+          <div class="item-meta-child d-flex align-items-center order-0 flex-wrap flex-xl-nowrap">
             <!-- This bullet is for Milestone -->
             <span v-if="item.healthStatus && hasMilestone" class="bullet-separator mr-2"
               >&bull;</span
@@ -273,7 +278,7 @@ export default {
           <item-assignees
             v-if="hasAssignees"
             :assignees="item.assignees"
-            class="item-assignees d-inline-flex align-items-center align-self-end mr-2 mt-2 mt-md-0 mt-xl-0 mr-xl-1 mb-md-0 order-2 flex-xl-grow-0"
+            class="item-assignees d-inline-flex align-items-center align-self-end mr-2 mr-xl-1 mb-md-0 order-2 flex-xl-grow-0"
           />
         </div>
         <gl-deprecated-button

ee/app/assets/stylesheets/components/related_items_tree.scss

@@ -49,7 +49,7 @@
     }
 
     .tree-item-noexpand {
-      margin-left: $gl-sidebar-padding;
+      margin-left: $gl-sidebar-padding - 2;
     }
 
     .loading-icon {

ee/changelogs/unreleased/epic-health-cosmetic-changes.yml

+---
+title: Cosmetic changes for Epic Health Status
+merge_request: 29234
+author:
+type: changed