Add latest changes from gitlab-org/gitlab@master

7 files changed, 180 insertions, 87 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
index 4c7b8e8f667..cd726818031 100644
--- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
@@ -1,42 +1,33 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
-import { mapState, mapActions } from 'vuex';
+import { GlTooltipDirective, GlSafeHtmlDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, INLINE_DIFF_LINES_KEY } from '../constants';
+import { UNFOLD_COUNT, INLINE_DIFF_LINES_KEY } from '../constants';
 import * as utils from '../store/utils';
 
 const EXPAND_ALL = 0;
 const EXPAND_UP = 1;
 const EXPAND_DOWN = 2;
 
-const lineNumberByViewType = (viewType, diffLine) => {
-  const numberGetters = {
-    [INLINE_DIFF_VIEW_TYPE]: (line) => line?.new_line,
-  };
-  const numberGetter = numberGetters[viewType];
-  return numberGetter && numberGetter(diffLine);
-};
-
-const i18n = {
-  showMore: sprintf(s__('Diffs|Show %{unfoldCount} lines'), { unfoldCount: UNFOLD_COUNT }),
-  showAll: s__('Diffs|Show all unchanged lines'),
-};
-
 export default {
-  i18n,
+  i18n: {
+    showMore: sprintf(s__('Diffs|Show %{unfoldCount} lines'), { unfoldCount: UNFOLD_COUNT }),
+    showAll: s__('Diffs|Show all unchanged lines'),
+  },
   components: {
     GlIcon,
+    GlLoadingIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
-    fileHash: {
-      type: String,
-      required: true,
-    },
-    contextLinesPath: {
-      type: String,
+    file: {
+      type: Object,
       required: true,
     },
     line: {
@@ -53,34 +44,45 @@ export default {
       required: false,
       default: false,
     },
+    inline: {
+      type: Boolean,
+      required: true,
+    },
+    lineCountBetween: {
+      type: Number,
+      required: false,
+      default: -1,
+    },
+  },
+  data() {
+    return { loading: { up: false, down: false, all: false } };
   },
   computed: {
-    ...mapState({
-      diffFiles: (state) => state.diffs.diffFiles,
-    }),
     canExpandUp() {
       return !this.isBottom;
     },
     canExpandDown() {
       return this.isBottom || !this.isTop;
     },
-  },
-  created() {
-    this.EXPAND_DOWN = EXPAND_DOWN;
-    this.EXPAND_UP = EXPAND_UP;
+    isLineCountSmall() {
+      return this.lineCountBetween >= 20 || this.lineCountBetween === -1;
+    },
+    showExpandDown() {
+      return this.canExpandDown && this.isLineCountSmall;
+    },
+    showExpandUp() {
+      return this.canExpandUp && this.isLineCountSmall;
+    },
   },
   methods: {
     ...mapActions('diffs', ['loadMoreLines']),
     getPrevLineNumber(oldLineNumber, newLineNumber) {
-      const diffFile = utils.findDiffFile(this.diffFiles, this.fileHash);
-      const index = utils.getPreviousLineIndex(INLINE_DIFF_VIEW_TYPE, diffFile, {
+      const index = utils.getPreviousLineIndex(this.file, {
         oldLineNumber,
         newLineNumber,
       });
 
-      return (
-        lineNumberByViewType(INLINE_DIFF_VIEW_TYPE, diffFile[INLINE_DIFF_LINES_KEY][index - 2]) || 0
-      );
+      return this.file[INLINE_DIFF_LINES_KEY][index - 2]?.new_line || 0;
     },
     callLoadMoreLines(
       endpoint,
@@ -99,6 +101,9 @@ export default {
             message: s__('Diffs|Something went wrong while fetching diff lines.'),
           });
           this.isRequesting = false;
+        })
+        .finally(() => {
+          this.loading = { up: false, down: false, all: false };
         });
     },
     handleExpandLines(type = EXPAND_ALL) {
@@ -107,25 +112,26 @@ export default {
       }
 
       this.isRequesting = true;
-      const endpoint = this.contextLinesPath;
-      const { fileHash } = this;
-      const view = INLINE_DIFF_VIEW_TYPE;
+      const endpoint = this.file.context_lines_path;
       const oldLineNumber = this.line.meta_data.old_pos || 0;
       const newLineNumber = this.line.meta_data.new_pos || 0;
       const offset = newLineNumber - oldLineNumber;
 
-      const expandOptions = { endpoint, fileHash, view, oldLineNumber, newLineNumber, offset };
+      const expandOptions = { endpoint, oldLineNumber, newLineNumber, offset };
 
       if (type === EXPAND_UP) {
+        this.loading.up = true;
         this.handleExpandUpLines(expandOptions);
       } else if (type === EXPAND_DOWN) {
+        this.loading.down = true;
         this.handleExpandDownLines(expandOptions);
       } else {
+        this.loading.all = true;
         this.handleExpandAllLines(expandOptions);
       }
     },
     handleExpandUpLines(expandOptions) {
-      const { endpoint, fileHash, view, oldLineNumber, newLineNumber, offset } = expandOptions;
+      const { endpoint, oldLineNumber, newLineNumber, offset } = expandOptions;
 
       const bottom = this.isBottom;
       const lineNumber = newLineNumber - 1;
@@ -139,15 +145,13 @@ export default {
         unfold = false;
       }
 
-      const params = { since, to, bottom, offset, unfold, view };
+      const params = { since, to, bottom, offset, unfold };
       const lineNumbers = { oldLineNumber, newLineNumber };
-      this.callLoadMoreLines(endpoint, params, lineNumbers, fileHash);
+      this.callLoadMoreLines(endpoint, params, lineNumbers, this.file.file_hash);
     },
     handleExpandDownLines(expandOptions) {
       const {
         endpoint,
-        fileHash,
-        view,
         oldLineNumber: metaOldPos,
         newLineNumber: metaNewPos,
         offset,
@@ -183,19 +187,19 @@ export default {
         }
       }
 
-      const params = { since, to, bottom, offset, unfold, view };
+      const params = { since, to, bottom, offset, unfold };
       const lineNumbers = { oldLineNumber, newLineNumber };
       this.callLoadMoreLines(
         endpoint,
         params,
         lineNumbers,
-        fileHash,
+        this.file.file_hash,
         isExpandDown,
         nextLineNumbers,
       );
     },
     handleExpandAllLines(expandOptions) {
-      const { endpoint, fileHash, view, oldLineNumber, newLineNumber, offset } = expandOptions;
+      const { endpoint, oldLineNumber, newLineNumber, offset } = expandOptions;
       const bottom = this.isBottom;
       const unfold = false;
       let since;
@@ -213,21 +217,71 @@ export default {
         to = newLineNumber - 1;
       }
 
-      const params = { since, to, bottom, offset, unfold, view };
+      const params = { since, to, bottom, offset, unfold };
       const lineNumbers = { oldLineNumber, newLineNumber };
-      this.callLoadMoreLines(endpoint, params, lineNumbers, fileHash);
+      this.callLoadMoreLines(endpoint, params, lineNumbers, this.file.file_hash);
     },
   },
+  EXPAND_DOWN,
+  EXPAND_UP,
 };
 </script>
 
 <template>
-  <div class="content js-line-expansion-content">
+  <div
+    v-if="glFeatures.updatedDiffExpansionButtons"
+    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"
+      >
+        <button
+          v-if="showExpandDown"
+          v-gl-tooltip
+          :title="s__('Diffs|Next 20 lines')"
+          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
+          :title="s__('Diffs|Expand all lines')"
+          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
+          :title="s__('Diffs|Previous 20 lines')"
+          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>
+  </div>
+  <div v-else class="content js-line-expansion-content">
     <button
       type="button"
       :disabled="!canExpandDown"
       class="js-unfold-down gl-mx-2 gl-py-4 gl-cursor-pointer"
-      @click="handleExpandLines(EXPAND_DOWN)"
+      @click="handleExpandLines($options.EXPAND_DOWN)"
     >
       <gl-icon :size="12" name="expand-down" />
       <span>{{ $options.i18n.showMore }}</span>
@@ -244,7 +298,7 @@ export default {
       type="button"
       :disabled="!canExpandUp"
       class="js-unfold gl-mx-2 gl-py-4 gl-cursor-pointer"
-      @click="handleExpandLines(EXPAND_UP)"
+      @click="handleExpandLines($options.EXPAND_UP)"
     >
       <gl-icon :size="12" name="expand-up" />
       <span>{{ $options.i18n.showMore }}</span>
diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index 4893803a3b6..1b07b00d725 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -160,7 +160,13 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
 <template functional>
-  <div :class="$options.classNameMap(props)" class="diff-grid-row diff-tr line_holder">
+  <div
+    :class="[
+      $options.classNameMap(props),
+      { expansion: props.line.left && props.line.left.type === 'expanded' },
+    ]"
+    class="diff-grid-row diff-tr line_holder"
+  >
     <div
       :id="props.line.left && props.line.left.line_code"
       data-testid="left-side"
diff --git a/app/assets/javascripts/diffs/components/diff_row_utils.js b/app/assets/javascripts/diffs/components/diff_row_utils.js
index 99999445c43..f610ac979ca 100644
--- a/app/assets/javascripts/diffs/components/diff_row_utils.js
+++ b/app/assets/javascripts/diffs/components/diff_row_utils.js
@@ -10,6 +10,7 @@ import {
   CONFLICT_MARKER_THEIR,
   CONFLICT_THEIR,
   CONFLICT_OUR,
+  EXPANDED_LINE_TYPE,
 } from '../constants';
 
 export const isHighlighted = (highlightedRow, line, isCommented) => {
@@ -118,10 +119,12 @@ export const mapParallel = (content) => (line) => {
   if (right) {
     right = {
       ...right,
-      renderDiscussion: Boolean(hasExpandedDiscussionOnRight && right.type),
+      renderDiscussion: Boolean(
+        hasExpandedDiscussionOnRight && right.type && right.type !== EXPANDED_LINE_TYPE,
+      ),
       hasDraft: content.hasParallelDraftRight(content.diffFile.file_hash, line),
       lineDraft: content.draftForLine(content.diffFile.file_hash, line, 'right'),
-      hasCommentForm: Boolean(right.hasForm && right.type),
+      hasCommentForm: Boolean(right.hasForm && right.type && right.type !== EXPANDED_LINE_TYPE),
       emptyCellClassMap: { conflict_their: line.left?.type === CONFLICT_OUR },
       addCommentTooltip: addCommentTooltip(line.right),
     };
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index f46b0a538f1..529f8e0a2f9 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -141,6 +141,18 @@ export default {
         table.classList.add(`${lineClass}-selected`);
       }
     },
+    getCountBetweenIndex(index) {
+      if (index === 0) {
+        return -1;
+      } else if (!this.diffLines[index + 1]) {
+        return -1;
+      }
+
+      return (
+        Number(this.diffLines[index + 1].left.new_line) -
+        Number(this.diffLines[index - 1].left.new_line)
+      );
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
@@ -158,38 +170,51 @@ export default {
   >
     <template v-for="(line, index) in diffLines">
       <template v-if="line.isMatchLineLeft || line.isMatchLineRight">
-        <div :key="`expand-${index}`" class="diff-tr line_expansion match">
-          <div class="diff-td text-center gl-font-regular">
-            <diff-expansion-cell
-              :file-hash="diffFile.file_hash"
-              :context-lines-path="diffFile.context_lines_path"
-              :line="line.left"
-              :is-top="index === 0"
-              :is-bottom="index + 1 === diffLinesLength"
-            />
+        <diff-expansion-cell
+          v-if="glFeatures.updatedDiffExpansionButtons"
+          :key="`expand-${index}`"
+          :file="diffFile"
+          :line="line.left"
+          :is-top="index === 0"
+          :is-bottom="index + 1 === diffLinesLength"
+          :inline="inline"
+          :line-count-between="getCountBetweenIndex(index)"
+        />
+        <template v-else>
+          <div :key="`expand-${index}`" class="diff-tr line_expansion old-line_expansion match">
+            <div class="diff-td text-center gl-font-regular">
+              <diff-expansion-cell
+                :file="diffFile"
+                :context-lines-path="diffFile.context_lines_path"
+                :line="line.left"
+                :is-top="index === 0"
+                :is-bottom="index + 1 === diffLinesLength"
+                :inline="inline"
+              />
+            </div>
           </div>
-        </div>
-        <div
-          v-if="line.left.rich_text"
-          :key="`expand-definition-${index}`"
-          class="diff-grid-row diff-tr line_holder match"
-        >
-          <div class="diff-grid-left diff-grid-3-col left-side">
-            <div class="diff-td diff-line-num"></div>
-            <div v-if="inline" class="diff-td diff-line-num"></div>
-            <div
-              v-safe-html="line.left.rich_text"
-              class="diff-td line_content left-side gl-white-space-normal!"
-            ></div>
+          <div
+            v-if="line.left.rich_text"
+            :key="`expand-definition-${index}`"
+            class="diff-grid-row diff-tr line_holder match"
+          >
+            <div class="diff-grid-left diff-grid-3-col left-side">
+              <div class="diff-td diff-line-num"></div>
+              <div v-if="inline" class="diff-td diff-line-num"></div>
+              <div
+                v-safe-html="line.left.rich_text"
+                class="diff-td line_content left-side gl-white-space-normal!"
+              ></div>
+            </div>
+            <div v-if="!inline" class="diff-grid-right diff-grid-3-col right-side">
+              <div class="diff-td diff-line-num"></div>
+              <div
+                v-safe-html="line.left.rich_text"
+                class="diff-td line_content right-side gl-white-space-normal!"
+              ></div>
+            </div>
           </div>
-          <div v-if="!inline" class="diff-grid-right diff-grid-3-col right-side">
-            <div class="diff-td diff-line-num"></div>
-            <div
-              v-safe-html="line.left.rich_text"
-              class="diff-td line_content right-side gl-white-space-normal!"
-            ></div>
-          </div>
-        </div>
+        </template>
       </template>
       <diff-row
         v-if="!line.isMatchLineLeft && !line.isMatchLineRight"
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index bbe27c0dbd6..f4b6bd85b84 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -1,6 +1,7 @@
 export const INLINE_DIFF_VIEW_TYPE = 'inline';
 export const PARALLEL_DIFF_VIEW_TYPE = 'parallel';
 export const MATCH_LINE_TYPE = 'match';
+export const EXPANDED_LINE_TYPE = 'expanded';
 export const OLD_NO_NEW_LINE_TYPE = 'old-nonewline';
 export const NEW_NO_NEW_LINE_TYPE = 'new-nonewline';
 export const CONTEXT_LINE_TYPE = 'context';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index fb35114c0a9..d2b798245fc 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -4,6 +4,7 @@ import {
   DIFF_FILE_MANUAL_COLLAPSE,
   DIFF_FILE_AUTOMATIC_COLLAPSE,
   INLINE_DIFF_LINES_KEY,
+  EXPANDED_LINE_TYPE,
 } from '../constants';
 import * as types from './mutation_types';
 import {
@@ -131,6 +132,7 @@ export default {
           : line.line_code || `${fileHash}_${line.old_line}_${line.new_line}`;
       return {
         ...line,
+        type: line.type || EXPANDED_LINE_TYPE,
         line_code: lineCode,
         discussions: line.discussions || [],
         hasForm: false,
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index 4526a34a2bd..5656416cf2b 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -15,13 +15,15 @@ import {
   CONFLICT_MARKER,
   CONFLICT_MARKER_OUR,
   CONFLICT_MARKER_THEIR,
+  EXPANDED_LINE_TYPE,
 } from '../constants';
 import { prepareRawDiffFile } from '../utils/diff_file';
 
 export const isAdded = (line) => ['new', 'new-nonewline'].includes(line.type);
 export const isRemoved = (line) => ['old', 'old-nonewline'].includes(line.type);
 export const isUnchanged = (line) => !line.type;
-export const isMeta = (line) => ['match', 'new-nonewline', 'old-nonewline'].includes(line.type);
+export const isMeta = (line) =>
+  ['match', EXPANDED_LINE_TYPE, 'new-nonewline', 'old-nonewline'].includes(line.type);
 export const isConflictMarker = (line) =>
   [CONFLICT_MARKER_OUR, CONFLICT_MARKER_THEIR].includes(line.type);
 export const isConflictSeperator = (line) => line.type === CONFLICT_MARKER;
@@ -205,7 +207,7 @@ export const findIndexInInlineLines = (lines, lineNumbers) => {
   );
 };
 
-export const getPreviousLineIndex = (diffViewType, file, lineNumbers) => {
+export const getPreviousLineIndex = (file, lineNumbers) => {
   return findIndexInInlineLines(file[INLINE_DIFF_LINES_KEY], lineNumbers);
 };