Skip to content

Adjust alignment of Codequality inline Icons

Jannik Lehmann requested to merge jnnkl-code-quality-indicator-alignment into master

What does this MR do and why?

This MR is meant to solve: #382333 (closed)

It adjusts the alignment of the CodeQuality inline icons.

Screenshots or screen recordings

before after
Screenshot_2022-12-02_at_18.52.37 Screenshot_2022-12-02_at_18.50.20

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