Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/right_sidebar.js

@@ -8,7 +8,7 @@ import axios from './lib/utils/axios_utils';
 import { sprintf, s__, __ } from './locale';
 
 const updateSidebarClasses = (layoutPage, rightSidebar) => {
-  if (window.innerWidth >= 768) {
+  if (window.innerWidth >= 992) {
     layoutPage.classList.remove('right-sidebar-expanded', 'right-sidebar-collapsed');
     rightSidebar.classList.remove('right-sidebar-collapsed');
     rightSidebar.classList.add('right-sidebar-expanded');

app/assets/stylesheets/framework/sidebar.scss

@@ -28,7 +28,7 @@
   }
 
   &.is-merge-request {
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(lg) {
       .content-wrapper {
         padding-right: $gutter-collapsed-width;
       }
@@ -73,18 +73,20 @@
     }
   }
 
+  &:not(.is-merge-request) {
     @include media-breakpoint-up(md) {
       .content-wrapper {
         padding-right: $gutter-width;
       }
     }
   }
+}
 
 .right-sidebar {
   border-left: 1px solid $gray-100;
 
   &.right-sidebar-merge-requests {
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(lg) {
       border-left: 0;
     }
   }

app/assets/stylesheets/page_bundles/merge_requests.scss

@@ -737,7 +737,7 @@ $tabs-holder-z-index: 250;
 }
 
 .merge-request-overview {
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     display: grid;
     grid-template-columns: calc(95% - 270px) auto;
     grid-gap: 5%;

app/assets/stylesheets/pages/issuable.scss

@@ -145,8 +145,9 @@
   }
 
   &.right-sidebar-merge-requests {
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       @include right-sidebar;
+      z-index: 251;
     }
   }
 
@@ -197,7 +198,7 @@
     }
 
     .block {
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up(lg) {
         padding: $gl-spacing-scale-5 0;
       }
     }
@@ -287,7 +288,7 @@
       padding: 0 20px;
 
       &.is-merge-request {
-        @include media-breakpoint-up(md) {
+        @include media-breakpoint-up(lg) {
           padding: 0;
         }
       }
@@ -341,7 +342,7 @@
     }
 
     &.right-sidebar-merge-requests {
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up(lg) {
         display: block;
       }
     }

app/views/projects/merge_requests/show.html.haml

@@ -22,7 +22,7 @@
     = render "projects/merge_requests/mr_box"
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
       .merge-request-tabs-container{ class: "#{'is-merge-request' if !fluid_layout}" }
-        %ul.merge-request-tabs.nav-tabs.nav.nav-links
+        %ul.merge-request-tabs.nav-tabs.nav.nav-links{ class: "#{'gl-w-full gl-lg-w-auto!' if Feature.enabled?(:moved_mr_sidebar, @project)}" }
           = render "projects/merge_requests/tabs/tab", class: "notes-tab", qa_selector: "notes_tab" do
             = tab_link_for @merge_request, :show, force_link: @commit.present? do
               = _("Overview")
@@ -41,6 +41,11 @@
             = tab_link_for @merge_request, :diffs do
               = _("Changes")
               = gl_badge_tag @diffs_count, { size: :sm }
+          - if Feature.enabled?(:moved_mr_sidebar, @project)
+            .gl-ml-auto.gl-align-items-center.gl-display-none.gl-md-display-flex{ class: "gl-lg-display-none!" }
+              %button.btn.btn-default.gl-button.btn-sm.js-sidebar-toggle{ type: 'button' }
+                = sprite_icon('angle-double-left', size: 12, css_class: 'gl-mr-2')
+                = _('Expand')
         .d-flex.flex-wrap.align-items-center.justify-content-lg-end
           #js-vue-discussion-counter{ data: { blocks_merge: @project.only_allow_merge_if_all_discussions_are_resolved?.to_s } }
 

app/views/shared/issuable/_sidebar.html.haml

@@ -13,7 +13,7 @@
 
 %aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class} #{'right-sidebar-merge-requests' if moved_sidebar_enabled}", 'aria-live' => 'polite', 'aria-label': issuable_type }
   .issuable-sidebar{ class: "#{'is-merge-request' if moved_sidebar_enabled}" }
-    .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-md-display-none!' if moved_sidebar_enabled}" }
+    .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if moved_sidebar_enabled}" }
       %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", class: "#{'gl-display-block' if moved_sidebar_enabled}", href: "#", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
       - if signed_in && !moved_sidebar_enabled