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

Loading