Add latest changes from gitlab-org/gitlab@master

2 files changed, 62 insertions, 48 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
index fc5766a23ef..f74a03b56e0 100644
--- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
@@ -217,52 +217,50 @@ export default {
 </script>
 
 <template>
-  <div class="diff-grid-row diff-grid-row-full diff-tr line_holder match expansion">
-    <div :class="{ parallel: !inline }" class="diff-grid-left diff-grid-2-col left-side">
-      <div
-        class="diff-td diff-line-num gl-text-center! gl-p-0! gl-w-full! gl-display-flex gl-flex-direction-column"
+  <div>
+    <div
+      class="diff-td diff-line-num gl-text-center! gl-p-0! gl-w-full! gl-display-flex gl-flex-direction-column"
+    >
+      <button
+        v-if="showExpandDown"
+        v-gl-tooltip.left
+        :title="s__('Diffs|Next 20 lines')"
+        :disabled="loading.down"
+        type="button"
+        class="js-unfold-down gl-rounded-0 gl-border-0 diff-line-expand-button"
+        @click="handleExpandLines($options.EXPAND_DOWN)"
       >
-        <button
-          v-if="showExpandDown"
-          v-gl-tooltip.left
-          :title="s__('Diffs|Next 20 lines')"
-          :disabled="loading.down"
-          type="button"
-          class="js-unfold-down gl-rounded-0 gl-border-0 diff-line-expand-button"
-          @click="handleExpandLines($options.EXPAND_DOWN)"
-        >
-          <gl-loading-icon v-if="loading.down" size="sm" color="dark" inline />
-          <gl-icon v-else name="expand-down" />
-        </button>
-        <button
-          v-if="lineCountBetween !== -1 && lineCountBetween < 20"
-          v-gl-tooltip.left
-          :title="s__('Diffs|Expand all lines')"
-          :disabled="loading.all"
-          type="button"
-          class="js-unfold-all gl-rounded-0 gl-border-0 diff-line-expand-button"
-          @click="handleExpandLines()"
-        >
-          <gl-loading-icon v-if="loading.all" size="sm" color="dark" inline />
-          <gl-icon v-else name="expand" />
-        </button>
-        <button
-          v-if="showExpandUp"
-          v-gl-tooltip.left
-          :title="s__('Diffs|Previous 20 lines')"
-          :disabled="loading.up"
-          type="button"
-          class="js-unfold gl-rounded-0 gl-border-0 diff-line-expand-button"
-          @click="handleExpandLines($options.EXPAND_UP)"
-        >
-          <gl-loading-icon v-if="loading.up" size="sm" color="dark" inline />
-          <gl-icon v-else name="expand-up" />
-        </button>
-      </div>
-      <div
-        v-safe-html="line.rich_text"
-        class="gl-display-flex! gl-flex-direction-column gl-justify-content-center diff-td line_content left-side gl-white-space-normal!"
-      ></div>
+        <gl-loading-icon v-if="loading.down" size="sm" color="dark" inline />
+        <gl-icon v-else name="expand-down" />
+      </button>
+      <button
+        v-if="lineCountBetween !== -1 && lineCountBetween < 20"
+        v-gl-tooltip.left
+        :title="s__('Diffs|Expand all lines')"
+        :disabled="loading.all"
+        type="button"
+        class="js-unfold-all gl-rounded-0 gl-border-0 diff-line-expand-button"
+        @click="handleExpandLines()"
+      >
+        <gl-loading-icon v-if="loading.all" size="sm" color="dark" inline />
+        <gl-icon v-else name="expand" />
+      </button>
+      <button
+        v-if="showExpandUp"
+        v-gl-tooltip.left
+        :title="s__('Diffs|Previous 20 lines')"
+        :disabled="loading.up"
+        type="button"
+        class="js-unfold gl-rounded-0 gl-border-0 diff-line-expand-button"
+        @click="handleExpandLines($options.EXPAND_UP)"
+      >
+        <gl-loading-icon v-if="loading.up" size="sm" color="dark" inline />
+        <gl-icon v-else name="expand-up" />
+      </button>
     </div>
+    <div
+      v-safe-html="line.rich_text"
+      class="gl-display-flex! gl-flex-direction-column gl-justify-content-center diff-td line_content left-side gl-white-space-normal!"
+    ></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index ad406947561..ea94df1ad5b 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -197,17 +197,33 @@ export default {
     @mousedown="handleParallelLineMouseDown"
   >
     <template v-for="(line, index) in diffLines">
-      <template v-if="line.isMatchLineLeft || line.isMatchLineRight">
+      <div
+        v-if="line.isMatchLineLeft || line.isMatchLineRight"
+        :key="`expand-${index}`"
+        class="diff-grid-row diff-tr line_holder match expansion"
+      >
         <diff-expansion-cell
-          :key="`expand-${index}`"
           :file="diffFile"
           :line="line.left"
           :is-top="index === 0"
           :is-bottom="index + 1 === diffLinesLength"
           :inline="inline"
           :line-count-between="getCountBetweenIndex(index)"
+          :class="{ parallel: !inline }"
+          class="diff-grid-left diff-grid-2-col left-side"
         />
-      </template>
+        <diff-expansion-cell
+          v-if="!inline"
+          :file="diffFile"
+          :line="line.left"
+          :is-top="index === 0"
+          :is-bottom="index + 1 === diffLinesLength"
+          :inline="inline"
+          :line-count-between="getCountBetweenIndex(index)"
+          :class="{ parallel: !inline }"
+          class="diff-grid-right diff-grid-2-col right-side"
+        />
+      </div>
       <diff-row
         v-if="!line.isMatchLineLeft && !line.isMatchLineRight"
         :key="line.line_code"