Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

6 files changed, 29 insertions, 4 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index a2ea42e963c..465f9836140 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/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));
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index f098d20afd1..da918947cc5 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -100,6 +100,7 @@ export default {
         variant="default"
         icon="file-tree"
         class="gl-mr-3 js-toggle-tree-list btn-icon"
+        data-qa-selector="file_tree_button"
         :title="toggleFileBrowserTitle"
         :aria-label="toggleFileBrowserTitle"
         :selected="showTreeList"
diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index 737c4d8f33c..4e33a02ca0e 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -1,4 +1,9 @@
 <script>
+/* eslint-disable vue/no-v-html */
+/**
+NOTE: This file uses v-html over v-safe-html for performance reasons, see:
+https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57842
+* */
 import { memoize } from 'lodash';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import {
@@ -267,7 +272,9 @@ export default {
           ]"
           class="diff-td line_content with-coverage left-side"
           data-testid="left-content"
-          v-html="$options.lineContent(props.line.left) /* eslint-disable-line vue/no-v-html */"
+          v-html="
+            $options.lineContent(props.line.left) /* v-html for performance, see top of file */
+          "
         ></div>
       </template>
       <template
@@ -389,7 +396,9 @@ export default {
             },
           ]"
           class="diff-td line_content with-coverage right-side parallel"
-          v-html="$options.lineContent(props.line.right) /* eslint-disable-line vue/no-v-html */"
+          v-html="
+            $options.lineContent(props.line.right) /* v-html for performance, see top of file */
+          "
         ></div>
       </template>
       <template v-else>
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 39ce849fc03..41d885d3dc1 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -62,7 +62,7 @@ export default {
 </script>
 
 <template>
-  <div class="tree-list-holder d-flex flex-column">
+  <div class="tree-list-holder d-flex flex-column" data-qa-selector="file_tree_container">
     <div class="gl-mb-3 position-relative tree-list-search d-flex">
       <div class="flex-fill d-flex">
         <gl-icon name="search" class="position-absolute tree-list-icon" />
diff --git a/app/assets/javascripts/diffs/utils/workers.js b/app/assets/javascripts/diffs/utils/tree_worker_utils.js
index 985e75d1a17..985e75d1a17 100644
--- a/app/assets/javascripts/diffs/utils/workers.js
+++ b/app/assets/javascripts/diffs/utils/tree_worker_utils.js
diff --git a/app/assets/javascripts/diffs/workers/tree_worker.js b/app/assets/javascripts/diffs/workers/tree_worker.js
index 6d1bc78ba1c..04010a99b52 100644
--- a/app/assets/javascripts/diffs/workers/tree_worker.js
+++ b/app/assets/javascripts/diffs/workers/tree_worker.js
@@ -1,5 +1,5 @@
 import { sortTree } from '~/ide/stores/utils';
-import { generateTreeList } from '../utils/workers';
+import { generateTreeList } from '../utils/tree_worker_utils';
 
 // eslint-disable-next-line no-restricted-globals
 self.addEventListener('message', (e) => {