Merge branch '344308-lfs-diff-badge' into 'master'

feat(badge): Migrate diff LFS badge to glbadge

See merge request gitlab-org/gitlab!78413

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -3,6 +3,7 @@ import {
   GlTooltipDirective,
   GlSafeHtmlDirective,
   GlIcon,
+  GlBadge,
   GlButton,
   GlButtonGroup,
   GlDropdown,
@@ -34,6 +35,7 @@ export default {
     GlIcon,
     FileIcon,
     DiffStats,
+    GlBadge,
     GlButton,
     GlButtonGroup,
     GlDropdown,
@@ -349,7 +351,9 @@ export default {
         {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
 
-      <span v-if="isUsingLfs" class="badge label label-lfs gl-mr-2"> {{ __('LFS') }} </span>
+      <gl-badge v-if="isUsingLfs" variant="neutral" class="gl-mr-2" data-testid="label-lfs">{{
+        __('LFS')
+      }}</gl-badge>
     </div>
 
     <div

app/assets/stylesheets/framework/files.scss

@@ -411,11 +411,6 @@ span.idiff {
   margin-right: 1.5em;
 }
 
-.label-lfs {
-  color: $common-gray-light;
-  border: 1px solid $common-gray-light;
-}
-
 .preview-container {
   overflow: auto;
 

app/views/projects/blob/_header_content.html.haml

@@ -14,4 +14,4 @@
     = number_to_human_size(blob.raw_size)
 
   - if blob.stored_externally? && blob.external_storage == :lfs
-    %span.badge.label-lfs.gl-mr-2 LFS
+    = gl_badge_tag(_('LFS'), variant: :neutral)

spec/features/merge_request/user_creates_image_diff_notes_spec.rb

@@ -127,7 +127,7 @@ RSpec.describe 'Merge request > User creates image diff notes', :js do
           visit diffs_project_merge_request_path(project, merge_request, view: view)
           wait_for_requests
 
-          expect(page.all('.diff-file span.label-lfs', visible: :all)).not_to be_empty
+          expect(page.all('[data-testid="label-lfs"]', visible: :all)).not_to be_empty
         end
 
         it_behaves_like 'creates image diff note'

spec/frontend/diffs/components/diff_file_header_spec.js

@@ -82,7 +82,7 @@ describe('DiffFileHeader component', () => {
   const findExpandButton = () => wrapper.find({ ref: 'expandDiffToFullFileButton' });
   const findFileActions = () => wrapper.find('.file-actions');
   const findModeChangedLine = () => wrapper.find({ ref: 'fileMode' });
-  const findLfsLabel = () => wrapper.find('.label-lfs');
+  const findLfsLabel = () => wrapper.find('[data-testid="label-lfs"]');
   const findToggleDiscussionsButton = () => wrapper.find({ ref: 'toggleDiscussionsButton' });
   const findExternalLink = () => wrapper.find({ ref: 'externalLink' });
   const findReplacedFileButton = () => wrapper.find({ ref: 'replacedFileButton' });