Merge branch '29193-fix-switching-mr-changes-tab-before-loading' into 'master'

Fix container going full-width when switching from "Side-by-side" "Changes" MR tab before done loading

Closes #29193

See merge request !10172

2 files changed, 29 insertions, 5 deletions

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 88180149715..5aa3eb46a69 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -13,10 +13,6 @@ class Diff {
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 
-    if (this.diffViewType() === 'parallel') {
-      $('.content-wrapper .container-fluid').removeClass('container-limited');
-    }
-
     if (!isBound) {
       $(document)
         .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 7b9632be84e..65b2fd53397 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -3,6 +3,9 @@
 require('~/merge_request_tabs');
 require('~/breakpoints');
 require('~/lib/utils/common_utils');
+require('~/diff');
+require('~/single_file_diff');
+require('~/files_comment_button');
 require('vendor/jquery.scrollTo');
 
 (function () {
@@ -213,6 +216,10 @@ require('vendor/jquery.scrollTo');
       describe('with "Side-by-side"/parallel diff view', () => {
         beforeEach(function () {
           this.class.diffViewType = () => 'parallel';
+          gl.Diff.prototype.diffViewType = () => 'parallel';
+          spyOn($, 'ajax').and.callFake(function (options) {
+            options.success({ html: '' });
+          });
         });
 
         it('maintains `container-limited` for pipelines tab', function (done) {
@@ -224,7 +231,6 @@ require('vendor/jquery.scrollTo');
               });
             });
           };
-
           asyncClick('.merge-request-tabs .pipelines-tab a')
             .then(() => asyncClick('.merge-request-tabs .diffs-tab a'))
             .then(() => asyncClick('.merge-request-tabs .pipelines-tab a'))
@@ -237,6 +243,28 @@ require('vendor/jquery.scrollTo');
               done.fail(`Something went wrong clicking MR tabs: ${err.message}\n${err.stack}`);
             });
         });
+
+        it('maintains `container-limited` when switching from "Changes" tab before it loads', function (done) {
+          const asyncClick = function (selector) {
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                document.querySelector(selector).click();
+                resolve();
+              });
+            });
+          };
+
+          asyncClick('.merge-request-tabs .diffs-tab a')
+            .then(() => asyncClick('.merge-request-tabs .notes-tab a'))
+            .then(() => {
+              const hasContainerLimitedClass = document.querySelector('.content-wrapper .container-fluid').classList.contains('container-limited');
+              expect(hasContainerLimitedClass).toBe(true);
+            })
+            .then(done)
+            .catch((err) => {
+              done.fail(`Something went wrong clicking MR tabs: ${err.message}\n${err.stack}`);
+            });
+        });
       });
     });