1 files changed, 42 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index d4a1a9e0e46..37dd7941b2e 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -24,6 +24,8 @@ import * as utils from './diff_row_utils';
 export default {
   components: {
     DiffGutterAvatars,
+    CodeQualityGutterIcon: () =>
+      import('ee_component/diffs/components/code_quality_gutter_icon.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -89,6 +91,20 @@ export default {
       if (!this.line.right) return {};
       return this.fileLineCoverage(this.filePath, this.line.right.new_line);
     },
+    showCodequalityLeft() {
+      return (
+        this.glFeatures.codequalityMrDiffAnnotations &&
+        this.inline &&
+        this.line.left?.codequality?.length > 0
+      );
+    },
+    showCodequalityRight() {
+      return (
+        this.glFeatures.codequalityMrDiffAnnotations &&
+        !this.inline &&
+        this.line.right?.codequality?.length > 0
+      );
+    },
     classNameMapCellLeft() {
       return utils.classNameMapCell({
         line: this.line.left,
@@ -269,6 +285,13 @@ export default {
           :class="[...parallelViewLeftLineType, coverageStateLeft.class]"
           class="diff-td line-coverage left-side"
         ></div>
+        <div class="diff-td line-codequality left-side" :class="[...parallelViewLeftLineType]">
+          <code-quality-gutter-icon
+            v-if="showCodequalityLeft"
+            :file-path="filePath"
+            :codequality="line.left.codequality"
+          />
+        </div>
         <div
           :id="line.left.line_code"
           :key="line.left.line_code"
@@ -299,6 +322,11 @@ export default {
           :class="emptyCellLeftClassMap"
         ></div>
         <div
+          v-if="inline"
+          class="diff-td line-codequality left-side empty-cell"
+          :class="emptyCellLeftClassMap"
+        ></div>
+        <div
           class="diff-td line_content with-coverage left-side empty-cell"
           :class="[emptyCellLeftClassMap, { parallel: !inline }]"
         ></div>
@@ -371,6 +399,16 @@ export default {
           class="diff-td line-coverage right-side"
         ></div>
         <div
+          class="diff-td line-codequality right-side"
+          :class="[line.right.type, { hll: isHighlighted, hll: isCommented }]"
+        >
+          <code-quality-gutter-icon
+            v-if="showCodequalityRight"
+            :file-path="filePath"
+            :codequality="line.right.codequality"
+          />
+        </div>
+        <div
           :id="line.right.line_code"
           :key="line.right.rich_text"
           :class="[
@@ -406,6 +444,10 @@ export default {
           :class="emptyCellRightClassMap"
         ></div>
         <div
+          class="diff-td line-codequality right-side empty-cell"
+          :class="emptyCellRightClassMap"
+        ></div>
+        <div
           class="diff-td line_content with-coverage right-side empty-cell"
           :class="[emptyCellRightClassMap, { parallel: !inline }]"
         ></div>