diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 5e74998579b23b1418910ca0672c4a673b841c5c..0ed4dcdcd8159ec5998c52af18a839792bd71cd3 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 63954d9d412dddd17e6d23c1412f0e65adc37e97..1d897bca1dda7cfbf200cc1f8a19d3e6b2e84e51 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 5111c9fab8d9a58897ef893830057d04f49685b1..79c586eef735f98333c8a5ca40011008cd6bb81d 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 3ce69bc3c20fcd12d75f26fb5f4c00b23c9dfb7c..1aabf3c2132f2d2445c331c1e246584475da1db1 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;