Redesigned related merge requests in issue page

Updated the markup and styles for related merge requests in
issues page

5 files changed, 417 insertions, 46 deletions

diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
new file mode 100644
index 00000000000..aaa12716663
--- /dev/null
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -0,0 +1,370 @@
+$item-path-max-width: 160px;
+$item-milestone-max-width: 120px;
+$item-weight-max-width: 48px;
+
+.related-items-list {
+  padding: $gl-padding-4;
+
+  &,
+  .list-item:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.item-body {
+  display: flex;
+  position: relative;
+  align-items: center;
+  padding: $gl-padding-8;
+  line-height: $gl-line-height;
+
+  .item-contents {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-grow: 1;
+  }
+
+  .issue-token-state-icon-open,
+  .issue-token-state-icon-closed,
+  .confidential-icon,
+  .item-milestone .icon,
+  .item-weight .board-card-info-icon {
+    min-width: $gl-padding;
+    cursor: help;
+  }
+
+  .issue-token-state-icon-open,
+  .issue-token-state-icon-closed {
+    margin-right: $gl-padding-4;
+  }
+
+  .confidential-icon {
+    align-self: baseline;
+    color: $orange-600;
+    margin-right: $gl-padding-4;
+  }
+
+  .item-title {
+    flex-basis: 100%;
+    margin-bottom: $gl-padding-8;
+    font-size: $gl-font-size-small;
+
+    &.mr-title {
+      font-weight: $gl-font-weight-bold;
+    }
+
+    .sortable-link {
+      max-width: 85%;
+    }
+
+    .issue-token-state-icon-open,
+    .issue-token-state-icon-closed {
+      display: none;
+    }
+  }
+
+  .item-meta {
+    display: flex;
+    flex-wrap: wrap;
+    flex-basis: 100%;
+    font-size: $gl-font-size-small;
+    color: $gl-text-color-secondary;
+
+    .item-meta-child {
+      order: 0;
+      display: flex;
+      flex-wrap: wrap;
+      flex-basis: 100%;
+
+      .item-due-date,
+      .item-weight {
+        margin-left: $gl-padding-8;
+      }
+
+      .item-milestone,
+      .item-weight {
+        cursor: help;
+      }
+
+      .item-milestone {
+        text-decoration: none;
+        max-width: $item-milestone-max-width;
+      }
+
+      .item-due-date {
+        margin-right: 0;
+      }
+
+      .item-weight {
+        margin-right: 0;
+        max-width: $item-weight-max-width;
+      }
+    }
+
+    .item-path-id .path-id-text,
+    .item-milestone .milestone-title,
+    .item-due-date,
+    .item-weight .board-card-info-text {
+      color: $gl-text-color-secondary;
+      display: inline-block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .item-path-id {
+      margin-top: $gl-padding-4;
+      font-size: $gl-font-size-xs;
+      white-space: nowrap;
+
+      .path-id-text {
+        font-weight: $gl-font-weight-bold;
+        max-width: $item-path-max-width;
+      }
+
+      .issue-token-state-icon-open,
+      .issue-token-state-icon-closed {
+        display: block;
+      }
+
+      &:not(.mr-item-path) {
+        order: 1;
+      }
+    }
+
+    .item-milestone .ic-clock {
+      color: $gl-text-color-tertiary;
+      margin-right: $gl-padding-4;
+    }
+
+    .item-assignees {
+      order: 2;
+      align-self: flex-end;
+      align-items: center;
+      margin-left: auto;
+
+      .user-avatar-link {
+        margin-right: -$gl-padding-4;
+
+        &:nth-of-type(1) {
+          z-index: 2;
+        }
+
+        &:nth-of-type(2) {
+          z-index: 1;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      .avatar {
+        height: $gl-padding;
+        width: $gl-padding;
+        margin-right: 0;
+        vertical-align: bottom;
+      }
+
+      .avatar-counter {
+        height: $gl-padding;
+        border: 1px solid transparent;
+        background-color: $gl-text-color-tertiary;
+        font-weight: $gl-font-weight-bold;
+        padding: 0 $gl-padding-4;
+        line-height: $gl-padding;
+      }
+    }
+  }
+
+  .btn-item-remove {
+    position: absolute;
+    right: 0;
+    top: $gl-padding-4 / 2;
+    padding: $gl-padding-4;
+    margin-right: $gl-padding-4 / 2;
+    line-height: 0;
+    border-color: transparent;
+    color: $gl-text-color-secondary;
+
+    &:hover {
+      color: $gl-text-color;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .item-body {
+    .item-contents .item-title .sortable-link {
+      max-width: 90%;
+    }
+  }
+}
+
+/* Small devices (landscape phones, 768px and up) */
+@include media-breakpoint-up(md) {
+  .item-body {
+    .item-contents {
+      min-width: 0;
+
+      .item-title {
+        flex-basis: unset;
+        // 98% because we compensate
+        // for remove button which is
+        // positioned absolutely
+        width: 95%;
+        margin-bottom: $gl-padding-4;
+
+        .sortable-link {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          max-width: 100%;
+        }
+      }
+
+      .item-meta {
+        .item-path-id {
+          order: 0;
+          margin-top: 0;
+        }
+
+        .item-meta-child {
+          flex-basis: unset;
+          margin-left: auto;
+          margin-right: $gl-padding-4;
+
+          ~ .item-assignees {
+            margin-left: $gl-padding-4;
+          }
+        }
+
+        .item-assignees {
+          margin-bottom: 0;
+          margin-left: 0;
+          order: 2;
+        }
+      }
+    }
+
+    .btn-item-remove {
+      order: 1;
+    }
+  }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@include media-breakpoint-up(lg) {
+  .item-body {
+    padding: $gl-padding;
+
+    .item-title {
+      font-size: $gl-font-size;
+    }
+
+    .item-meta .item-path-id {
+      font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
+    }
+
+    .issue-token-state-icon-open,
+    .issue-token-state-icon-closed {
+      margin-right: $gl-padding-4;
+    }
+  }
+}
+
+/* Large devices (large desktops, 1200px and up) */
+@include media-breakpoint-up(xl) {
+  .item-body {
+    padding: $gl-padding-8;
+    padding-left: $gl-padding;
+
+    .item-contents {
+      flex-wrap: nowrap;
+      overflow: hidden;
+
+      .item-title {
+        display: flex;
+        margin-bottom: 0;
+        min-width: 0;
+        width: auto;
+        flex-basis: unset;
+        font-weight: $gl-font-weight-normal;
+
+        .sortable-link {
+          display: block;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+
+        .issue-token-state-icon-open,
+        .issue-token-state-icon-closed {
+          display: block;
+          margin-right: $gl-padding-8;
+        }
+
+        .confidential-icon {
+          align-self: auto;
+          margin-top: 0;
+        }
+      }
+
+      .item-meta {
+        margin-top: 0;
+        justify-content: flex-end;
+        flex: 1;
+        flex-wrap: nowrap;
+
+        .item-path-id {
+          order: 0;
+          margin-top: 0;
+          margin-left: $gl-padding-8;
+          margin-right: auto;
+
+          .issue-token-state-icon-open,
+          .issue-token-state-icon-closed {
+            display: none;
+          }
+        }
+
+        .item-meta-child {
+          margin-left: $gl-padding-8;
+          flex-wrap: nowrap;
+        }
+
+        .item-assignees {
+          flex-grow: 0;
+          margin-top: 0;
+          margin-right: $gl-padding-4;
+
+          .avatar {
+            height: $gl-padding-24;
+            width: $gl-padding-24;
+          }
+
+          .avatar-counter {
+            height: $gl-padding-24;
+            min-width: $gl-padding-24;
+            line-height: $gl-padding-24;
+            border-radius: $gl-padding-24;
+          }
+        }
+      }
+    }
+
+    .btn-item-remove {
+      position: relative;
+      align-self: center;
+      top: initial;
+      right: 0;
+      margin-right: 0;
+      padding: $btn-sm-side-margin;
+
+      &:hover {
+        border-color: $border-color;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 6c847fc0d53..0037364978c 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -80,7 +80,6 @@ ul.related-merge-requests > li {
   }
 }
 
-.merge-requests-title,
 .related-branches-title {
   font-size: 16px;
   font-weight: $gl-font-weight-bold;
@@ -91,23 +90,16 @@ ul.related-merge-requests > li {
 }
 
 .merge-request-status {
-  font-size: 13px;
-  padding: 0 5px;
-  color: $white-light;
-  height: 20px;
-  border-radius: 3px;
-  line-height: 18px;
-
   &.merged {
-    background: $blue-500;
+    color: $blue-500;
   }
 
   &.closed {
-    background: $red-500;
+    color: $red-500;
   }
 
   &.open {
-    background: $green-500;
+    color: $green-500;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss
index 4fba89e956b..64ca61f7094 100644
--- a/app/assets/stylesheets/pages/issues/issue_count_badge.scss
+++ b/app/assets/stylesheets/pages/issues/issue_count_badge.scss
@@ -1,11 +1,13 @@
-.issue-count-badge {
+.issue-count-badge,
+.mr-count-badge {
   display: inline-flex;
   border-radius: $border-radius-base;
   border: 1px solid $border-color;
   padding: 5px $gl-padding-8;
 }
 
-.issue-count-badge-count {
+.issue-count-badge-count,
+.mr-count-badge-count {
   display: inline-flex;
   align-items: center;
 }
diff --git a/app/views/projects/issues/_merge_requests.html.haml b/app/views/projects/issues/_merge_requests.html.haml
index 5c36d2202a6..d8406a2744c 100644
--- a/app/views/projects/issues/_merge_requests.html.haml
+++ b/app/views/projects/issues/_merge_requests.html.haml
@@ -1,35 +1,35 @@
 - if @merge_requests.any?
-  %h2.merge-requests-title
-    = pluralize(@merge_requests.count, 'Related Merge Request')
-  %ul.unstyled-list.related-merge-requests
-    - has_any_head_pipeline = @merge_requests.any?(&:head_pipeline_id)
-    - @merge_requests.each do |merge_request|
-      %li
-        %span.merge-request-ci-status
-          - if merge_request.head_pipeline
-            = render_pipeline_status(merge_request.head_pipeline)
-          - elsif has_any_head_pipeline
-            = icon('blank fw')
-        %span.merge-request-id
-          = merge_request.to_reference
-        %span.merge-request-info
-          %strong
-            = link_to merge_request.title, merge_request_path(merge_request), class: "row_title"
-          - unless @issue.project.id == merge_request.target_project.id
-            in
-            - project = merge_request.target_project
-            = link_to project.full_name, project_path(project)
+  .card-slim.mt-3
+    .card-header
+      %h2.card-title.mt-0.mb-0.h5.merge-requests-title
+        %span.mr-1.bold
+          = pluralize(@merge_requests.count, 'Related Merge Request')
+        .d-inline-flex.lh-100.align-middle
+          .mr-count-badge
+            .mr-count-badge-count
+              = sprite_icon('merge-request', size: 16, css_class: 'mr-1 text-secondary')
+              = @merge_requests.count
+    %ul.content-list.related-items-list
+      - has_any_head_pipeline = @merge_requests.any?(&:head_pipeline_id)
+      - @merge_requests.each do |merge_request|
+        %li.list-item.py-0.px-0
+          .item-body.issuable-info-container.py-md-3.px-md-3
+            .item-contents
+              .item-title.d-flex.align-items-center.mr-title
+                = render partial: 'projects/issues/merge_requests_status', locals: { merge_request: merge_request, css_class: 'd-none d-lg-block append-right-8' }
+                = link_to merge_request.title, merge_request_path(merge_request)
+              .item-meta
+                = render partial: 'projects/issues/merge_requests_status', locals: { merge_request: merge_request,  css_class: 'd-lg-none d-md-block append-right-5' }
+                %span.d-flex.align-items-center.append-right-8.mr-item-path.item-path-id.mt-0
+                  %span.path-id-text.bold.text-truncate{ data: { toggle: 'tooltip'}, title: merge_request.target_project.full_name }
+                    = merge_request.target_project.full_name
+                  = merge_request.to_reference
+                %span.merge-request-ci-status.flex-md-grow-1.justify-content-end.d-flex
+                  - if merge_request.head_pipeline
+                    = render_pipeline_status(merge_request.head_pipeline, tooltip_placement: 'bottom')
+                  - elsif has_any_head_pipeline
+                    = icon('blank fw')
 
-        - if merge_request.merged?
-          %span.merge-request-status.prepend-left-10.merged
-            Merged
-        - elsif merge_request.closed?
-          %span.merge-request-status.prepend-left-10.closed
-            Closed
-        - else
-          %span.merge-request-status.prepend-left-10.open
-            Open
-
-    - if @closed_by_merge_requests.present?
-      %li
-        = render partial: 'projects/issues/closed_by_box', locals: {merge_request_count: @merge_requests.count}
+  - if @closed_by_merge_requests.present?
+    %p
+      = render partial: 'projects/issues/closed_by_box', locals: {merge_request_count: @merge_requests.count}
diff --git a/app/views/projects/issues/_merge_requests_status.html.haml b/app/views/projects/issues/_merge_requests_status.html.haml
new file mode 100644
index 00000000000..5c44f54643a
--- /dev/null
+++ b/app/views/projects/issues/_merge_requests_status.html.haml
@@ -0,0 +1,7 @@
+
+- if merge_request.merged?
+  = sprite_icon('merge', size: 16, css_class: "merge-request-status merged #{css_class}")
+- elsif merge_request.closed?
+  = sprite_icon('issue-close', size: 16, css_class: "merge-request-status closed #{css_class}")
+- else
+  = sprite_icon('issue-open-m', size: 16, css_class: "merge-request-status open #{css_class}")