Merge branch 'ph/340761/mrContainerWidths' into 'master'

Defaults the diffs changes tab to fluid width

See merge request gitlab-org/gitlab!70815

app/assets/javascripts/diffs/components/app.vue

@@ -19,6 +19,7 @@ import { updateHistory } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import MrWidgetHowToMergeModal from '~/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import notesEventHub from '../../notes/event_hub';
 import {
@@ -79,6 +80,7 @@ export default {
     MrWidgetHowToMergeModal,
     GlAlert,
   },
+  mixins: [glFeatureFlagsMixin()],
   alerts: {
     ALERT_OVERFLOW_HIDDEN,
     ALERT_MERGE_CONFLICT,
@@ -252,6 +254,10 @@ export default {
       return this.treeWidth <= TREE_HIDE_STATS_WIDTH;
     },
     isLimitedContainer() {
+      if (this.glFeatures.mrChangesFluidLayout) {
+        return false;
+      }
+
       return !this.renderFileTree && !this.isParallelView && !this.isFluidLayout;
     },
     isFullChangeset() {
@@ -386,6 +392,8 @@ export default {
     diffsApp.instrument();
   },
   created() {
+    this.mergeRequestContainers = document.querySelectorAll('.merge-request-container');
+
     this.adjustView();
     this.subscribeToEvents();
 
@@ -513,6 +521,13 @@ export default {
       } else {
         this.removeEventListeners();
       }
+
+      if (!this.isFluidLayout && this.glFeatures.mrChangesFluidLayout) {
+        this.mergeRequestContainers.forEach((el) => {
+          el.classList.toggle('limit-container-width', !this.shouldShow);
+          el.classList.toggle('container-limited', !this.shouldShow);
+        });
+      }
     },
     setEventListeners() {
       Mousetrap.bind(keysFor(MR_PREVIOUS_FILE_IN_DIFF), () => this.jumpToFile(-1));

app/controllers/projects/merge_requests_controller.rb

@@ -41,6 +41,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:improved_emoji_picker, project, default_enabled: :yaml)
     push_frontend_feature_flag(:diffs_virtual_scrolling, project, default_enabled: :yaml)
     push_frontend_feature_flag(:restructured_mr_widget, project, default_enabled: :yaml)
+    push_frontend_feature_flag(:mr_changes_fluid_layout, project, default_enabled: :yaml)
 
     # Usage data feature flags
     push_frontend_feature_flag(:users_expanding_widgets_usage_data, @project, default_enabled: :yaml)

config/feature_flags/development/mr_changes_fluid_layout.yml

+---
+name: mr_changes_fluid_layout
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/70815
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/341809
+milestone: '14.4'
+type: development
+group: group::code review
+default_enabled: false

spec/frontend/diffs/components/app_spec.js

@@ -702,4 +702,23 @@ describe('diffs/components/app', () => {
       );
     });
   });
+
+  describe('fluid layout', () => {
+    beforeEach(() => {
+      setFixtures(
+        '<div><div class="merge-request-container limit-container-width container-limited"></div></div>',
+      );
+    });
+
+    it('removes limited container classes when on diffs tab', () => {
+      createComponent({ isFluidLayout: false, shouldShow: true }, () => {}, {
+        glFeatures: { mrChangesFluidLayout: true },
+      });
+
+      const containerClassList = document.querySelector('.merge-request-container').classList;
+
+      expect(containerClassList).not.toContain('container-limited');
+      expect(containerClassList).not.toContain('limit-container-width');
+    });
+  });
 });