Display LFS badge when LFS enabled

Displays an LFS badge when LFS is enabled for a blob

app/assets/javascripts/blob/components/blob_header_filepath.vue

 <script>
+import { GlBadge } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -7,6 +8,7 @@ export default {
   components: {
     FileIcon,
     ClipboardButton,
+    GlBadge,
   },
   props: {
     blob: {
@@ -21,6 +23,9 @@ export default {
     gfmCopyText() {
       return `\`${this.blob.path}\``;
     },
+    showLfsBadge() {
+      return this.blob.storedExternally && this.blob.externalStorage === 'lfs';
+    },
   },
 };
 </script>
@@ -37,8 +42,6 @@ export default {
       >
     </template>
 
-    <small class="mr-2">{{ blobSize }}</small>
-
     <clipboard-button
       :text="blob.path"
       :gfm="gfmCopyText"
@@ -46,5 +49,9 @@ export default {
       category="tertiary"
       css-class="btn-clipboard btn-transparent lh-100 position-static"
     />
+
+    <small class="mr-2">{{ blobSize }}</small>
+
+    <gl-badge v-if="showLfsBadge">{{ __('LFS') }}</gl-badge>
   </div>
 </template>

app/assets/javascripts/repository/components/blob_content_viewer.vue

@@ -105,6 +105,7 @@ export default {
                 forkAndEditPath: '',
                 ideForkAndEditPath: '',
                 storedExternally: false,
+                externalStorage: '',
                 canModifyBlob: false,
                 canCurrentUserPushToBranch: false,
                 rawPath: '',

app/assets/javascripts/repository/queries/blob_info.query.graphql

@@ -36,6 +36,7 @@ query getBlobInfo($projectPath: ID!, $filePath: String!, $ref: String!) {
           canModifyBlob
           canCurrentUserPushToBranch
           storedExternally
+          externalStorage
           rawPath
           replacePath
           pipelineEditorPath

app/graphql/types/repository/blob_type.rb

@@ -56,6 +56,9 @@ module Types
       field :stored_externally, GraphQL::Types::Boolean, null: true, method: :stored_externally?,
             description: "Whether the blob's content is stored externally (for instance, in LFS)."
 
+      field :external_storage, GraphQL::Types::String, null: true, method: :external_storage,
+            description: "External storage being used, if enabled (for instance, 'LFS')."
+
       field :edit_blob_path, GraphQL::Types::String, null: true,
             description: 'Web path to edit the blob in the old-style editor.'
 

doc/api/graphql/reference/index.md

@@ -14282,6 +14282,7 @@ Returns [`Tree`](#tree).
 | <a id="repositoryblobcanmodifyblob"></a>`canModifyBlob` | [`Boolean`](#boolean) | Whether the current user can modify the blob. |
 | <a id="repositoryblobcodeowners"></a>`codeOwners` | [`[UserCore!]`](#usercore) | List of code owners for the blob. |
 | <a id="repositoryblobeditblobpath"></a>`editBlobPath` | [`String`](#string) | Web path to edit the blob in the old-style editor. |
+| <a id="repositoryblobexternalstorage"></a>`externalStorage` | [`String`](#string) | External storage being used, if enabled (for instance, 'LFS'). |
 | <a id="repositoryblobexternalstorageurl"></a>`externalStorageUrl` | [`String`](#string) | Web path to download the raw blob via external storage, if enabled. |
 | <a id="repositoryblobfiletype"></a>`fileType` | [`String`](#string) | Expected format of the blob based on the extension. |
 | <a id="repositoryblobforkandeditpath"></a>`forkAndEditPath` | [`String`](#string) | Web path to edit this blob using a forked project. |

spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap

@@ -20,12 +20,6 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
     foo/bar/dummy.md
   </strong>
    
-  <small
-    class="mr-2"
-  >
-    a lot
-  </small>
-   
   <clipboard-button-stub
     category="tertiary"
     cssclass="btn-clipboard btn-transparent lh-100 position-static"
@@ -36,5 +30,13 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
     tooltipplacement="top"
     variant="default"
   />
+   
+  <small
+    class="mr-2"
+  >
+    a lot
+  </small>
+   
+  <!---->
 </div>
 `;

spec/frontend/blob/components/blob_header_filepath_spec.js

+import { GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import BlobHeaderFilepath from '~/blob/components/blob_header_filepath.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -24,6 +25,8 @@ describe('Blob Header Filepath', () => {
     wrapper.destroy();
   });
 
+  const findBadge = () => wrapper.find(GlBadge);
+
   describe('rendering', () => {
     it('matches the snapshot', () => {
       createComponent();
@@ -54,6 +57,11 @@ describe('Blob Header Filepath', () => {
       expect(wrapper.vm.blobSize).toBe('a lot');
     });
 
+    it('renders LFS badge if LFS if enabled', () => {
+      createComponent({ storedExternally: true, externalStorage: 'lfs' });
+      expect(findBadge().text()).toBe('LFS');
+    });
+
     it('renders a slot and prepends its contents to the existing one', () => {
       const slotContent = 'Foo Bar';
       createComponent(

spec/frontend/repository/mock_data.js

@@ -14,6 +14,7 @@ export const simpleViewerMock = {
   canModifyBlob: true,
   canCurrentUserPushToBranch: true,
   storedExternally: false,
+  externalStorage: 'lfs',
   rawPath: 'some_file.js',
   replacePath: 'some_file.js/replace',
   pipelineEditorPath: '',

spec/graphql/types/repository/blob_type_spec.rb

@@ -21,6 +21,7 @@ RSpec.describe Types::Repository::BlobType do
       :file_type,
       :edit_blob_path,
       :stored_externally,
+      :external_storage,
       :raw_path,
       :replace_path,
       :pipeline_editor_path,