Merge branch 'diff-fluid-layout-fix' into 'master'

Fixed fluid layout preference not being respected in diffs

Closes #52916

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

4 files changed, 18 insertions, 2 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 5e74998579b..0ed4dcdcd81 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -64,6 +64,11 @@ export default {
       required: false,
       default: '',
     },
+    isFluidLayout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     const treeWidth =
@@ -116,7 +121,7 @@ export default {
       return this.treeWidth <= TREE_HIDE_STATS_WIDTH;
     },
     isLimitedContainer() {
-      return !this.showTreeList && !this.isParallelView;
+      return !this.showTreeList && !this.isParallelView && !this.isFluidLayout;
     },
   },
   watch: {
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 63954d9d412..1d897bca1dd 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -71,6 +71,7 @@ export default function initDiffsApp(store) {
         helpPagePath: dataset.helpPagePath,
         currentUser: JSON.parse(dataset.currentUserData) || {},
         changesEmptyStateIllustration: dataset.changesEmptyStateIllustration,
+        isFluidLayout: parseBoolean(dataset.isFluidLayout),
       };
     },
     computed: {
@@ -97,6 +98,7 @@ export default function initDiffsApp(store) {
           helpPagePath: this.helpPagePath,
           shouldShow: this.activeTab === 'diffs',
           changesEmptyStateIllustration: this.changesEmptyStateIllustration,
+          isFluidLayout: this.isFluidLayout,
         },
       });
     },
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 5111c9fab8d..79c586eef73 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -82,7 +82,8 @@
         help_page_path: suggest_changes_help_path,
         current_user_data: UserSerializer.new(project: @project).represent(current_user, {}, MergeRequestUserEntity).to_json,
         project_path: project_path(@merge_request.project),
-        changes_empty_state_illustration: image_path('illustrations/merge_request_changes_empty.svg') } }
+        changes_empty_state_illustration: image_path('illustrations/merge_request_changes_empty.svg'),
+        is_fluid_layout: fluid_layout.to_s } }
 
     .mr-loading-status
       = spinner
diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index 3ce69bc3c20..1aabf3c2132 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -75,6 +75,14 @@ describe('diffs/components/app', () => {
     expect(wrapper.contains('.container-limited.limit-container-width')).toBe(false);
   });
 
+  it('does not add container-limiting classes when isFluidLayout', () => {
+    createComponent({ isFluidLayout: true }, ({ state }) => {
+      state.diffs.isParallelView = false;
+    });
+
+    expect(wrapper.contains('.container-limited.limit-container-width')).toBe(false);
+  });
+
   it('displays loading icon on loading', () => {
     createComponent({}, ({ state }) => {
       state.diffs.isLoading = true;