Merge branch '40543-generalize-detail-page-headers' into 'master'

Generalize detail page headers (Issues, Merge Requests, Snippets)

Closes #40543

See merge request gitlab-org/gitlab-ce!15639

(cherry picked from commit 5d9585d1bde360c9bba2dc960523cbe1e648994f)

6d61b404 Generalize detail page headers

9 files changed, 66 insertions, 79 deletions

diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index af0658eb668..1cc500db796 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -128,7 +128,7 @@ import IssuablesHelper from './helpers/issuables_helper';
     };
 
     MergeRequest.prototype.hideCloseButton = function() {
-      const el = document.querySelector('.merge-request .issuable-actions');
+      const el = document.querySelector('.merge-request .js-issuable-actions');
       const closeDropdownItem = el.querySelector('li.close-item');
       if (closeDropdownItem) {
         closeDropdownItem.classList.add('hidden');
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 538e50ee306..52e4d904b9b 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -13,6 +13,41 @@
   .author_link {
     white-space: nowrap;
   }
+
+  @media (max-width: $screen-xs-max) {
+    display: block;
+  }
+}
+
+.detail-page-header-body {
+  position: relative;
+  line-height: 35px;
+  display: flex;
+  flex-grow: 1;
+
+  @media (min-width: $screen-sm-min) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.detail-page-header-actions {
+  @include new-style-dropdown;
+
+  align-self: center;
+  flex-shrink: 0;
+  flex: 0 0 auto;
+
+  @media (max-width: $screen-xs-max) {
+    width: 100%;
+    margin-top: 10px;
+
+    > .issue-btn-group {
+      > .btn {
+        width: 100%;
+      }
+    }
+  }
 }
 
 .detail-page-description {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index d9d00197dc0..a8bb0c8cb87 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -622,50 +622,16 @@
   margin-top: 0;
   height: auto;
   align-self: center;
-
-  @media (max-width: $screen-xs-max) {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-
-.issuable-header {
-  position: relative;
-  padding-left: 45px;
-  padding-right: 45px;
-  line-height: 35px;
-  display: flex;
-  flex-grow: 1;
-
-  @media (min-width: $screen-sm-min) {
-    float: left;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.issuable-actions {
-  @include new-style-dropdown;
-
-  align-self: center;
-  flex-shrink: 0;
-  flex: 0 0 auto;
-
-  @media (min-width: $screen-sm-min) {
-    float: right;
-  }
 }
 
 .issuable-gutter-toggle {
   @media (max-width: $screen-sm-max) {
-    position: absolute;
-    top: 0;
-    right: 0;
+    margin-left: $btn-side-margin;
   }
 }
 
 .issuable-meta {
+  flex: 1;
   display: inline-block;
   font-size: 14px;
   line-height: 24px;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 8bb68ad2425..ae6881acab2 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -134,26 +134,11 @@ ul.related-merge-requests > li {
 }
 
 @media (max-width: $screen-xs-max) {
-  .detail-page-header,
-  .issuable-header {
-    display: block;
-
+  .detail-page-header {
     .issuable-meta {
       line-height: 18px;
     }
   }
-
-  .issuable-actions {
-    margin-top: 10px;
-
-    .issue-btn-group {
-      width: 100%;
-
-      .btn {
-        width: 100%;
-      }
-    }
-  }
 }
 
 .issue-form {
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index b9fec8af4d7..9978ac48dc3 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -12,8 +12,8 @@
 - can_update_issue = can?(current_user, :update_issue, @issue)
 - can_report_spam = @issue.submittable_as_spam_by?(current_user)
 
-.clearfix.detail-page-header
-  .issuable-header
+.detail-page-header
+  .detail-page-header-body
     .issuable-status-box.status-box.status-box-closed{ class: issue_button_visibility(@issue, false) }
       = icon('check', class: "hidden-sm hidden-md hidden-lg")
       %span.hidden-xs
@@ -22,9 +22,6 @@
       = icon('circle-o', class: "hidden-sm hidden-md hidden-lg")
       %span.hidden-xs Open
 
-    %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
-      = icon('angle-double-left')
-
     .issuable-meta
       - if @issue.confidential
         = icon('eye-slash', class: 'issuable-warning-icon')
@@ -32,7 +29,10 @@
         = icon('lock', class: 'issuable-warning-icon')
       = issuable_meta(@issue, @project, "Issue")
 
-  .issuable-actions.js-issuable-actions
+    %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+      = icon('angle-double-left')
+
+  .detail-page-header-actions.js-issuable-actions
     .clearfix.issue-btn-group.dropdown
       %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
         Options
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 72d5c4961ec..acda5b4ed8c 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -4,22 +4,22 @@
   .alert.alert-danger
     %p The source project of this merge request has been removed.
 
-.clearfix.detail-page-header
-  .issuable-header
+.detail-page-header
+  .detail-page-header-body
     .issuable-status-box.status-box{ class: status_box_class(@merge_request) }
       = icon(@merge_request.state_icon_name, class: "hidden-sm hidden-md hidden-lg")
       %span.hidden-xs
         = @merge_request.state_human_name
 
-    %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
-      = icon('angle-double-left')
-
     .issuable-meta
       - if @merge_request.discussion_locked?
         = icon('lock', class: 'issuable-warning-icon')
       = issuable_meta(@merge_request, @project, "Merge request")
 
-  .issuable-actions.js-issuable-actions
+    %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+      = icon('angle-double-left')
+
+  .detail-page-header-actions.js-issuable-actions
     .clearfix.issue-btn-group.dropdown
       %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
         Options
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index 119d189f21d..12df79a28c7 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -1,14 +1,15 @@
-.detail-page-header.clearfix
-  .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
-    %span.sr-only
-      = visibility_level_label(@snippet.visibility_level)
-    = visibility_level_icon(@snippet.visibility_level, fw: false)
-  %span.creator
-    Authored
-    = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
-    by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}
+.detail-page-header
+  .detail-page-header-body
+    .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
+      %span.sr-only
+        = visibility_level_label(@snippet.visibility_level)
+      = visibility_level_icon(@snippet.visibility_level, fw: false)
+    %span.creator
+      Authored
+      = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
+      by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}
 
-  .snippet-actions
+  .detail-page-header-actions
     - if @snippet.project_id?
       = render "projects/snippets/actions"
     - else
diff --git a/spec/features/projects/issuable_templates_spec.rb b/spec/features/projects/issuable_templates_spec.rb
index a012db8fd27..0257cd157c9 100644
--- a/spec/features/projects/issuable_templates_spec.rb
+++ b/spec/features/projects/issuable_templates_spec.rb
@@ -32,7 +32,7 @@ feature 'issuable templates', :js do
         message: 'added issue template',
         branch_name: 'master')
       visit project_issue_path project, issue
-      page.within('.content .issuable-actions') do
+      page.within('.js-issuable-actions') do
         click_on 'Edit'
       end
       fill_in :'issuable-title', with: 'test issue title'
@@ -77,7 +77,7 @@ feature 'issuable templates', :js do
         message: 'added issue template',
         branch_name: 'master')
       visit project_issue_path project, issue
-      page.within('.content .issuable-actions') do
+      page.within('.js-issuable-actions') do
         click_on 'Edit'
       end
       fill_in :'issuable-title', with: 'test issue title'
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index 3ab901da6b6..70ae63ba036 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -63,7 +63,7 @@ import IssuablesHelper from '~/helpers/issuables_helper';
       describe('merge request of another user', () => {
         beforeEach(() => {
           loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
-          this.el = document.querySelector('.merge-request .issuable-actions');
+          this.el = document.querySelector('.js-issuable-actions');
           const merge = new MergeRequest();
           merge.hideCloseButton();
         });
@@ -83,7 +83,7 @@ import IssuablesHelper from '~/helpers/issuables_helper';
       describe('merge request of current_user', () => {
         beforeEach(() => {
           loadFixtures('merge_requests/merge_request_of_current_user.html.raw');
-          this.el = document.querySelector('.merge-request .issuable-actions');
+          this.el = document.querySelector('.js-issuable-actions');
           const merge = new MergeRequest();
           merge.hideCloseButton();
         });