Add latest changes from gitlab-org/gitlab@master

3 files changed, 116 insertions, 9 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_code_quality.vue b/app/assets/javascripts/diffs/components/diff_code_quality.vue
new file mode 100644
index 00000000000..f339b108a11
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_code_quality.vue
@@ -0,0 +1,56 @@
+<script>
+import { GlButton, GlIcon } from '@gitlab/ui';
+import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/reports/codequality_report/constants';
+
+export default {
+  components: { GlButton, GlIcon },
+  props: {
+    line: {
+      type: Number,
+      required: true,
+    },
+    codeQuality: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    severityClass(severity) {
+      return SEVERITY_CLASSES[severity] || SEVERITY_CLASSES.unknown;
+    },
+    severityIcon(severity) {
+      return SEVERITY_ICONS[severity] || SEVERITY_ICONS.unknown;
+    },
+  },
+};
+</script>
+
+<template>
+  <div data-testid="diff-codequality" class="gl-relative">
+    <ul
+      class="gl-list-style-none gl-mb-0 gl-p-0 codequality-findings-list gl-border-top-1 gl-border-bottom-1 gl-bg-gray-10"
+    >
+      <li
+        v-for="finding in codeQuality"
+        :key="finding.description"
+        class="gl-pt-1 gl-pb-1 gl-pl-3 gl-border-solid gl-border-bottom-0 gl-border-right-0 gl-border-1 gl-border-gray-100"
+      >
+        <gl-icon
+          :size="12"
+          :name="severityIcon(finding.severity)"
+          :class="severityClass(finding.severity)"
+          class="codequality-severity-icon"
+        />
+        {{ finding.description }}
+      </li>
+    </ul>
+    <gl-button
+      data-testid="diff-codequality-close"
+      category="tertiary"
+      size="small"
+      icon="close"
+      class="gl-absolute gl-right-2 gl-top-2"
+      @click="$emit('hideCodeQualityFindings', line)"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index 1b07b00d725..63c5aedd7ce 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -274,6 +274,9 @@ export default {
             v-if="$options.showCodequalityLeft(props)"
             :codequality="props.line.left.codequality"
             :file-path="props.filePath"
+            @showCodeQualityFindings="
+              listeners.toggleCodeQualityFindings(props.line.left.codequality[0].line)
+            "
           />
         </div>
         <div
@@ -395,6 +398,9 @@ export default {
             :codequality="props.line.right.codequality"
             :file-path="props.filePath"
             data-testid="codeQualityIcon"
+            @showCodeQualityFindings="
+              listeners.toggleCodeQualityFindings(props.line.right.codequality[0].line)
+            "
           />
         </div>
         <div
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index d740d5adcb6..ad406947561 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -2,12 +2,14 @@
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { IdState } from 'vendor/vue-virtual-scroller';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
 import { hide } from '~/tooltips';
 import { pickDirection } from '../utils/diff_line';
 import DiffCommentCell from './diff_comment_cell.vue';
+import DiffCodeQuality from './diff_code_quality.vue';
 import DiffExpansionCell from './diff_expansion_cell.vue';
 import DiffRow from './diff_row.vue';
 import { isHighlighted } from './diff_row_utils';
@@ -17,12 +19,17 @@ export default {
     DiffExpansionCell,
     DiffRow,
     DiffCommentCell,
+    DiffCodeQuality,
     DraftNote,
   },
   directives: {
     SafeHtml,
   },
-  mixins: [draftCommentsMixin, IdState({ idProp: (vm) => vm.diffFile.file_hash })],
+  mixins: [
+    draftCommentsMixin,
+    IdState({ idProp: (vm) => vm.diffFile.file_hash }),
+    glFeatureFlagsMixin(),
+  ],
   props: {
     diffFile: {
       type: Object,
@@ -43,6 +50,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      codeQualityExpandedLines: [],
+    };
+  },
   idState() {
     return {
       dragStart: null,
@@ -84,6 +96,23 @@ export default {
       }
       this.idState.dragStart = line;
     },
+    parseCodeQuality(line) {
+      return (line.left ?? line.right)?.codequality;
+    },
+
+    hideCodeQualityFindings(line) {
+      const index = this.codeQualityExpandedLines.indexOf(line);
+      if (index > -1) {
+        this.codeQualityExpandedLines.splice(index, 1);
+      }
+    },
+    toggleCodeQualityFindings(line) {
+      if (!this.codeQualityExpandedLines.includes(line)) {
+        this.codeQualityExpandedLines.push(line);
+      } else {
+        this.hideCodeQualityFindings(line);
+      }
+    },
     onDragOver(line) {
       if (line.chunk !== this.idState.dragStart.chunk) return;
 
@@ -125,15 +154,16 @@ export default {
     },
     handleParallelLineMouseDown(e) {
       const line = e.target.closest('.diff-td');
-      const table = line.closest('.diff-table');
-
-      table.classList.remove('left-side-selected', 'right-side-selected');
-      const [lineClass] = ['left-side', 'right-side'].filter((name) =>
-        line.classList.contains(name),
-      );
+      if (line) {
+        const table = line.closest('.diff-table');
+        table.classList.remove('left-side-selected', 'right-side-selected');
+        const [lineClass] = ['left-side', 'right-side'].filter((name) =>
+          line.classList.contains(name),
+        );
 
-      if (lineClass) {
-        table.classList.add(`${lineClass}-selected`);
+        if (lineClass) {
+          table.classList.add(`${lineClass}-selected`);
+        }
       }
     },
     getCountBetweenIndex(index) {
@@ -148,6 +178,9 @@ export default {
         Number(this.diffLines[index - 1].left.new_line)
       );
     },
+    getCodeQualityLine(line) {
+      return this.parseCodeQuality(line)?.[0]?.line;
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
@@ -190,6 +223,7 @@ export default {
         :coverage-loaded="coverageLoaded"
         @showCommentForm="(code) => singleLineComment(code, line)"
         @setHighlightedRow="setHighlightedRow"
+        @toggleCodeQualityFindings="toggleCodeQualityFindings"
         @toggleLineDiscussions="
           ({ lineCode, expanded }) =>
             toggleLineDiscussions({ lineCode, fileHash: diffFile.file_hash, expanded })
@@ -198,6 +232,17 @@ export default {
         @startdragging="onStartDragging"
         @stopdragging="onStopDragging"
       />
+
+      <diff-code-quality
+        v-if="
+          glFeatures.refactorCodeQualityInlineFindings &&
+          codeQualityExpandedLines.includes(getCodeQualityLine(line))
+        "
+        :key="line.line_code"
+        :line="getCodeQualityLine(line)"
+        :code-quality="parseCodeQuality(line)"
+        @hideCodeQualityFindings="hideCodeQualityFindings"
+      />
       <div
         v-if="line.renderCommentRow"
         :key="`dcr-${line.line_code || index}`"