Add latest changes from gitlab-org/gitlab@master

3 files changed, 38 insertions, 13 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_code_quality.vue b/app/assets/javascripts/diffs/components/diff_code_quality.vue
index 78f34bf355e..11aa856619b 100644
--- a/app/assets/javascripts/diffs/components/diff_code_quality.vue
+++ b/app/assets/javascripts/diffs/components/diff_code_quality.vue
@@ -1,8 +1,12 @@
 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/ci/reports/codequality_report/constants';
+import { NEW_CODE_QUALITY_FINDINGS } from '../i18n';
 
 export default {
+  i18n: {
+    newFindings: NEW_CODE_QUALITY_FINDINGS,
+  },
   components: { GlButton, GlIcon },
   props: {
     codeQuality: {
@@ -22,22 +26,33 @@ export default {
 </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"
+  <div
+    data-testid="diff-codequality"
+    class="gl-relative codequality-findings-list gl-border-top-1 gl-border-bottom-1 gl-bg-gray-10 gl-pl-5 gl-pt-4 gl-pb-4"
+  >
+    <h4
+      data-testid="diff-codequality-findings-heading"
+      class="gl-mt-0 gl-mb-0 gl-font-base gl-font-regular"
     >
+      {{ $options.i18n.newFindings }}
+    </h4>
+    <ul class="gl-list-style-none gl-mb-0 gl-p-0">
       <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-font-regular"
+        class="gl-pt-1 gl-pb-1 gl-font-regular gl-display-flex"
       >
-        <gl-icon
-          :size="12"
-          :name="severityIcon(finding.severity)"
-          :class="severityClass(finding.severity)"
-          class="codequality-severity-icon"
-        />
-        {{ finding.description }}
+        <span class="gl-mr-3">
+          <gl-icon
+            :size="12"
+            :name="severityIcon(finding.severity)"
+            :class="severityClass(finding.severity)"
+            class="codequality-severity-icon"
+          />
+        </span>
+        <span>
+          <span class="severity-copy">{{ finding.severity }}</span> - {{ finding.description }}
+        </span>
       </li>
     </ul>
     <gl-button
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index 4a5a626af8d..aa9a17d18e3 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -303,7 +303,11 @@ export default {
           class="diff-td notes-content parallel old"
         >
           <div v-for="draft in lineDrafts(line, 'left')" :key="draft.id" class="content">
-            <draft-note :draft="draft" :line="line.left" />
+            <article class="note-wrapper">
+              <ul class="notes draft-notes">
+                <draft-note :draft="draft" :line="line.left" />
+              </ul>
+            </article>
           </div>
         </div>
         <div
@@ -311,7 +315,11 @@ export default {
           class="diff-td notes-content parallel new"
         >
           <div v-for="draft in lineDrafts(line, 'right')" :key="draft.id" class="content">
-            <draft-note :draft="draft" :line="line.right" />
+            <article class="note-wrapper">
+              <ul class="notes draft-notes">
+                <draft-note :draft="draft" :line="line.right" />
+              </ul>
+            </article>
           </div>
         </div>
       </div>
diff --git a/app/assets/javascripts/diffs/i18n.js b/app/assets/javascripts/diffs/i18n.js
index f7f4aad3ad0..b6978689f7f 100644
--- a/app/assets/javascripts/diffs/i18n.js
+++ b/app/assets/javascripts/diffs/i18n.js
@@ -49,3 +49,5 @@ export const CONFLICT_TEXT = {
 };
 
 export const HIDE_COMMENTS = __('Hide comments');
+
+export const NEW_CODE_QUALITY_FINDINGS = __('New code quality findings');