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;