Merge branch '48496-merge-request-refactor-does-not-highlight-selected-line' into 'master'

Resolve "Merge request refactor does not highlight selected line"

Closes #48496

See merge request gitlab-org/gitlab-ce!23121

9 files changed, 85 insertions, 10 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 22da38ce7a5..bf9244df7f7 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -102,6 +102,12 @@ export default {
     if (this.shouldShow) {
       this.fetchData();
     }
+
+    const id = window && window.location && window.location.hash;
+
+    if (id) {
+      this.setHighlightedRow(id.slice(1));
+    }
   },
   created() {
     this.adjustView();
@@ -114,6 +120,7 @@ export default {
       'fetchDiffFiles',
       'startRenderDiffsQueue',
       'assignDiscussionsToDiff',
+      'setHighlightedRow',
     ]),
     fetchData() {
       this.fetchDiffFiles()
diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
index aecdd133bf8..c0613d80d37 100644
--- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@@ -72,6 +72,13 @@ export default {
       diffFiles: state => state.diffs.diffFiles,
     }),
     ...mapGetters(['isLoggedIn']),
+    lineCode() {
+      return (
+        this.line.line_code ||
+        (this.line.left && this.line.line.left.line_code) ||
+        (this.line.right && this.line.right.line_code)
+      );
+    },
     lineHref() {
       return `#${this.line.line_code || ''}`;
     },
@@ -97,7 +104,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions('diffs', ['loadMoreLines', 'showCommentForm']),
+    ...mapActions('diffs', ['loadMoreLines', 'showCommentForm', 'setHighlightedRow']),
     handleCommentButton() {
       this.showCommentForm({ lineCode: this.line.line_code, fileHash: this.fileHash });
     },
@@ -168,7 +175,13 @@ export default {
       >
         <icon :size="12" name="comment" />
       </button>
-      <a v-if="lineNumber" :data-linenumber="lineNumber" :href="lineHref"> </a>
+      <a
+        v-if="lineNumber"
+        :data-linenumber="lineNumber"
+        :href="lineHref"
+        @click="setHighlightedRow(lineCode);"
+      >
+      </a>
       <diff-gutter-avatars v-if="shouldShowAvatarsOnGutter" :discussions="line.discussions" />
     </template>
   </div>
diff --git a/app/assets/javascripts/diffs/components/diff_table_cell.vue b/app/assets/javascripts/diffs/components/diff_table_cell.vue
index f4eb956adcb..d174b13e133 100644
--- a/app/assets/javascripts/diffs/components/diff_table_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_table_cell.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import DiffLineGutterContent from './diff_line_gutter_content.vue';
 import {
   MATCH_LINE_TYPE,
@@ -30,6 +30,11 @@ export default {
       type: String,
       required: true,
     },
+    isHighlighted: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
     diffViewType: {
       type: String,
       required: false,
@@ -85,6 +90,7 @@ export default {
       const { type } = this.line;
 
       return {
+        hll: this.isHighlighted,
         [type]: type,
         [LINE_UNFOLD_CLASS_NAME]: this.isMatchLine,
         [LINE_HOVER_CLASS_NAME]:
@@ -99,6 +105,7 @@ export default {
       return this.lineType === OLD_LINE_TYPE ? this.line.old_line : this.line.new_line;
     },
   },
+  methods: mapActions('diffs', ['setHighlightedRow']),
 };
 </script>
 
diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
index 8d53fbded73..c764cbeb8e0 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { mapGetters, mapActions, mapState } from 'vuex';
 import DiffTableCell from './diff_table_cell.vue';
 import {
   NEW_LINE_TYPE,
@@ -40,6 +40,11 @@ export default {
     };
   },
   computed: {
+    ...mapState({
+      isHighlighted(state) {
+        return this.line.line_code !== null && this.line.line_code === state.diffs.highlightedRow;
+      },
+    }),
     ...mapGetters('diffs', ['isInlineView']),
     isContextLine() {
       return this.line.type === CONTEXT_LINE_TYPE;
@@ -91,6 +96,7 @@ export default {
       :is-bottom="isBottom"
       :is-hover="isHover"
       :show-comment-button="true"
+      :is-highlighted="isHighlighted"
       class="diff-line-num old_line"
     />
     <diff-table-cell
@@ -100,8 +106,18 @@ export default {
       :line-type="newLineType"
       :is-bottom="isBottom"
       :is-hover="isHover"
+      :is-highlighted="isHighlighted"
       class="diff-line-num new_line qa-new-diff-line"
     />
-    <td :class="line.type" class="line_content" v-html="line.rich_text"></td>
+    <td
+      :class="[
+        line.type,
+        {
+          hll: isHighlighted,
+        },
+      ]"
+      class="line_content"
+      v-html="line.rich_text"
+    ></td>
   </tr>
 </template>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
index 248dfd9815e..caf0df8a4e3 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import $ from 'jquery';
 import DiffTableCell from './diff_table_cell.vue';
 import {
@@ -43,6 +43,15 @@ export default {
     };
   },
   computed: {
+    ...mapState({
+      isHighlighted(state) {
+        const lineCode =
+          (this.line.left && this.line.left.line_code) ||
+          (this.line.right && this.line.right.line_code);
+
+        return lineCode ? lineCode === state.diffs.highlightedRow : false;
+      },
+    }),
     isContextLine() {
       return this.line.left && this.line.left.type === CONTEXT_LINE_TYPE;
     },
@@ -57,7 +66,14 @@ export default {
         return OLD_NO_NEW_LINE_TYPE;
       }
 
-      return this.line.left ? this.line.left.type : EMPTY_CELL_TYPE;
+      const lineTypeClass = this.line.left ? this.line.left.type : EMPTY_CELL_TYPE;
+
+      return [
+        lineTypeClass,
+        {
+          hll: this.isHighlighted,
+        },
+      ];
     },
   },
   created() {
@@ -114,6 +130,7 @@ export default {
         :line-type="oldLineType"
         :is-bottom="isBottom"
         :is-hover="isLeftHover"
+        :is-highlighted="isHighlighted"
         :show-comment-button="true"
         :diff-view-type="parallelDiffViewType"
         line-position="left"
@@ -139,6 +156,7 @@ export default {
         :line-type="newLineType"
         :is-bottom="isBottom"
         :is-hover="isRightHover"
+        :is-highlighted="isHighlighted"
         :show-comment-button="true"
         :diff-view-type="parallelDiffViewType"
         line-position="right"
@@ -146,7 +164,12 @@ export default {
       />
       <td
         :id="line.right.line_code"
-        :class="line.right.type"
+        :class="[
+          line.right.type,
+          {
+            hll: isHighlighted,
+          },
+        ]"
         class="line_content parallel right-side"
         @mousedown.native="handleParallelLineMouseDown"
         v-html="line.right.rich_text"
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 0899d793c91..8b477c678fd 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -33,6 +33,10 @@ export const fetchDiffFiles = ({ state, commit }) => {
     .then(handleLocationHash);
 };
 
+export const setHighlightedRow = ({ commit }, lineCode) => {
+  commit(types.SET_HIGHLIGHTED_ROW, lineCode);
+};
+
 // This is adding line discussions to the actual lines in the diff tree
 // once for parallel and once for inline mode
 export const assignDiscussionsToDiff = (
@@ -127,7 +131,7 @@ export const loadMoreLines = ({ commit }, options) => {
 export const scrollToLineIfNeededInline = (_, line) => {
   const hash = getLocationHash();
 
-  if (hash && line.lineCode === hash) {
+  if (hash && line.line_code === hash) {
     handleLocationHash();
   }
 };
@@ -137,7 +141,7 @@ export const scrollToLineIfNeededParallel = (_, line) => {
 
   if (
     hash &&
-    ((line.left && line.left.lineCode === hash) || (line.right && line.right.lineCode === hash))
+    ((line.left && line.left.line_code === hash) || (line.right && line.right.line_code === hash))
   ) {
     handleLocationHash();
   }
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 8fb2f0e17ac..98e57d52d77 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -26,4 +26,5 @@ export default () => ({
   currentDiffFileId: '',
   projectPath: '',
   commentForms: [],
+  highlightedRow: null,
 });
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index 74961a74899..0338cde3658 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -17,3 +17,4 @@ export const UPDATE_CURRENT_DIFF_FILE_ID = 'UPDATE_CURRENT_DIFF_FILE_ID';
 export const OPEN_DIFF_FILE_COMMENT_FORM = 'OPEN_DIFF_FILE_COMMENT_FORM';
 export const UPDATE_DIFF_FILE_COMMENT_FORM = 'UPDATE_DIFF_FILE_COMMENT_FORM';
 export const CLOSE_DIFF_FILE_COMMENT_FORM = 'CLOSE_DIFF_FILE_COMMENT_FORM';
+export const SET_HIGHLIGHTED_ROW = 'SET_HIGHLIGHTED_ROW';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 7baf2ed17e6..f0895661bf2 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -241,4 +241,7 @@ export default {
   [types.CLOSE_DIFF_FILE_COMMENT_FORM](state, fileHash) {
     state.commentForms = state.commentForms.filter(form => form.fileHash !== fileHash);
   },
+  [types.SET_HIGHLIGHTED_ROW](state, lineCode) {
+    state.highlightedRow = lineCode;
+  },
 };