1 files changed, 16 insertions, 2 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 1f50b3a38a6..3b4e21ab61b 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -41,6 +41,7 @@ export default {
     GlDropdownDivider,
     GlFormCheckbox,
     GlLoadingIcon,
+    CodeQualityBadge: () => import('ee_component/diffs/components/code_quality_badge.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -49,6 +50,7 @@ export default {
   mixins: [glFeatureFlagsMixin()],
   i18n: {
     ...DIFF_FILE_HEADER,
+    compareButtonLabel: s__('Compare submodule commit revisions'),
   },
   props: {
     discussionPath: {
@@ -94,6 +96,11 @@ export default {
       required: false,
       default: false,
     },
+    hasCodequalityChanges: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -192,6 +199,9 @@ export default {
     isReviewable() {
       return reviewable(this.diffFile);
     },
+    externalUrlLabel() {
+      return sprintf(__('View on %{url}'), { url: this.diffFile.formatted_external_url });
+    },
   },
   methods: {
     ...mapActions('diffs', [
@@ -323,6 +333,8 @@ export default {
         data-track-property="diff_copy_file"
       />
 
+      <code-quality-badge v-if="hasCodequalityChanges" class="gl-mr-2" />
+
       <small v-if="isModeChanged" ref="fileMode" class="mr-1">
         {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
@@ -352,7 +364,8 @@ export default {
           ref="externalLink"
           v-gl-tooltip.hover
           :href="diffFile.external_url"
-          :title="`View on ${diffFile.formatted_external_url}`"
+          :title="externalUrlLabel"
+          :aria-label="externalUrlLabel"
           target="_blank"
           data-track-event="click_toggle_external_button"
           data-track-label="diff_toggle_external_button"
@@ -444,7 +457,8 @@ export default {
         v-gl-tooltip.hover
         v-safe-html="submoduleDiffCompareLinkText"
         class="submodule-compare"
-        :title="s__('Compare submodule commit revisions')"
+        :title="$options.i18n.compareButtonLabel"
+        :aria-label="$options.i18n.compareButtonLabel"
         :href="diffFile.submodule_compare.url"
       />
     </div>