Skip to content

Add Codequality multiple findings indicator

What does this MR do and why?

fixes: #364259 (closed)

This MR enhances the codequality findings inline indicator.

Screenshots or screen recordings

1 finding 3 findings 5 findings
2022-11-10_23-06-09 2022-11-10_23-08-17 2022-11-10_23-08-57

How to set up and validate locally

  1. enable refactor_code_quality_inline_findings flag
  2. clone this project or any project with codequality enabled https://gitlab.com/jannik_lehmann/code-quality-test
  3. recreate this MR or any MR with multiple findings on 1 line jannik_lehmann/code-quality-test!2 (diffs)
  4. for full experience apply this patch
diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index e5695c4390f1..9ad0d08554de 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -278,7 +278,6 @@ export default {
             :is="$options.CodeQualityGutterIcon"
             v-if="$options.showCodequalityLeft(props)"
             :code-quality-expanded="props.codeQualityExpanded"
-            :codequality="props.line.left.codequality"
             :file-path="props.filePath"
             @showCodeQualityFindings="
               listeners.toggleCodeQualityFindings(props.line.left.codequality[0].line)
@@ -401,7 +400,6 @@ export default {
           <component
             :is="$options.CodeQualityGutterIcon"
             v-if="$options.showCodequalityRight(props)"
-            :codequality="props.line.right.codequality"
             :file-path="props.filePath"
             data-testid="codeQualityIcon"
             @showCodeQualityFindings="
diff --git a/ee/app/assets/javascripts/diffs/components/code_quality_gutter_icon.vue b/ee/app/assets/javascripts/diffs/components/code_quality_gutter_icon.vue
index 2fdde5c179e6..aadfe855bc47 100644
--- a/ee/app/assets/javascripts/diffs/components/code_quality_gutter_icon.vue
+++ b/ee/app/assets/javascripts/diffs/components/code_quality_gutter_icon.vue
@@ -29,7 +29,13 @@ export default {
     codequality: {
       type: Array,
       required: false,
-      default: () => [],
+      default: () => [
+        { line: 3, description: "Unexpected hardcoded 'debugger' statement.", severity: 'major' },
+        { line: 3, description: 'Unreachable code.', severity: 'minor' },
+        { line: 3, description: 'Unreachable code.3', severity: 'info' },
+        { line: 3, description: 'Unreachable code.3', severity: 'blocker' },
+        { line: 3, description: 'Unreachable code.3', severity: 'critical' },
+      ],
     },
   },
   data() {

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Jannik Lehmann

Merge request reports