Add latest changes from gitlab-org/gitlab@master

3 files changed, 41 insertions, 16 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_code_quality.vue b/app/assets/javascripts/diffs/components/diff_code_quality.vue
index f339b108a11..b91696526f5 100644
--- a/app/assets/javascripts/diffs/components/diff_code_quality.vue
+++ b/app/assets/javascripts/diffs/components/diff_code_quality.vue
@@ -5,10 +5,6 @@ import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/reports/codequality_report/c
 export default {
   components: { GlButton, GlIcon },
   props: {
-    line: {
-      type: Number,
-      required: true,
-    },
     codeQuality: {
       type: Array,
       required: true,
@@ -50,7 +46,7 @@ export default {
       size="small"
       icon="close"
       class="gl-absolute gl-right-2 gl-top-2"
-      @click="$emit('hideCodeQualityFindings', line)"
+      @click="$emit('hideCodeQualityFindings')"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/diff_line.vue b/app/assets/javascripts/diffs/components/diff_line.vue
new file mode 100644
index 00000000000..448272549d3
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_line.vue
@@ -0,0 +1,35 @@
+<script>
+import DiffCodeQuality from './diff_code_quality.vue';
+
+export default {
+  components: {
+    DiffCodeQuality,
+  },
+  props: {
+    line: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    parsedCodeQuality() {
+      return (this.line.left ?? this.line.right)?.codequality;
+    },
+    codeQualityLineNumber() {
+      return this.parsedCodeQuality[0].line;
+    },
+  },
+  methods: {
+    hideCodeQualityFindings() {
+      this.$emit('hideCodeQualityFindings', this.codeQualityLineNumber);
+    },
+  },
+};
+</script>
+
+<template>
+  <diff-code-quality
+    :code-quality="parsedCodeQuality"
+    @hideCodeQualityFindings="hideCodeQualityFindings"
+  />
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index ea94df1ad5b..03a5f5bebe3 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -9,7 +9,7 @@ import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
 import { hide } from '~/tooltips';
 import { pickDirection } from '../utils/diff_line';
 import DiffCommentCell from './diff_comment_cell.vue';
-import DiffCodeQuality from './diff_code_quality.vue';
+import DiffLine from './diff_line.vue';
 import DiffExpansionCell from './diff_expansion_cell.vue';
 import DiffRow from './diff_row.vue';
 import { isHighlighted } from './diff_row_utils';
@@ -18,8 +18,8 @@ export default {
   components: {
     DiffExpansionCell,
     DiffRow,
+    DiffLine,
     DiffCommentCell,
-    DiffCodeQuality,
     DraftNote,
   },
   directives: {
@@ -96,10 +96,6 @@ export default {
       }
       this.idState.dragStart = line;
     },
-    parseCodeQuality(line) {
-      return (line.left ?? line.right)?.codequality;
-    },
-
     hideCodeQualityFindings(line) {
       const index = this.codeQualityExpandedLines.indexOf(line);
       if (index > -1) {
@@ -179,7 +175,7 @@ export default {
       );
     },
     getCodeQualityLine(line) {
-      return this.parseCodeQuality(line)?.[0]?.line;
+      return (line.left ?? line.right)?.codequality?.[0]?.line;
     },
   },
   userColorScheme: window.gon.user_color_scheme,
@@ -248,15 +244,13 @@ export default {
         @startdragging="onStartDragging"
         @stopdragging="onStopDragging"
       />
-
-      <diff-code-quality
+      <diff-line
         v-if="
           glFeatures.refactorCodeQualityInlineFindings &&
           codeQualityExpandedLines.includes(getCodeQualityLine(line))
         "
         :key="line.line_code"
-        :line="getCodeQualityLine(line)"
-        :code-quality="parseCodeQuality(line)"
+        :line="line"
         @hideCodeQualityFindings="hideCodeQualityFindings"
       />
       <div