Refactor codeQuality transition to use vue's transition component

What does this MR do and why?

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

It refactors the CodeQuality Indicator Transition from a pure DOM-based transition to use Vue's <transition> component.

Screenshots or screen recordings

No visual changes

before	after
2022-11-10_23-08-57	2022-12-06_17-06-04

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!4 (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.

• I have evaluated the MR acceptance checklist for this MR.