Replaced blob name with path on Snippet view

After switching to versioned snippets, we should show blob's path
instead of name for each snippet's blob

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

@@ -28,12 +28,12 @@ export default {
   <div class="file-header-content d-flex align-items-center lh-100">
     <slot name="filepathPrepend"></slot>
 
-    <file-icon :file-name="blob.path" :size="18" aria-hidden="true" css-classes="mr-2" />
-    <strong
-      v-if="blob.name"
-      class="file-title-name qa-file-title-name mr-1 js-blob-header-filepath"
-      >{{ blob.name }}</strong
-    >
+    <template v-if="blob.path">
+      <file-icon :file-name="blob.path" :size="18" aria-hidden="true" css-classes="mr-2" />
+      <strong class="file-title-name qa-file-title-name mr-1 js-blob-header-filepath">{{
+        blob.path
+      }}</strong>
+    </template>
 
     <small class="mr-2">{{ blobSize }}</small>
 

changelogs/unreleased/211637-blob-path-name.yml

+---
+title: Updated snippet view to show path instead of name for a blob
+merge_request: 30550
+author:
+type: changed

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

@@ -8,14 +8,14 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
   <file-icon-stub
     aria-hidden="true"
     cssclasses="mr-2"
-    filename="dummy.md"
+    filename="foo/bar/dummy.md"
     size="18"
   />
    
   <strong
     class="file-title-name qa-file-title-name mr-1 js-blob-header-filepath"
   >
-    dummy.md
+    foo/bar/dummy.md
   </strong>
    
   <small
@@ -26,8 +26,8 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
    
   <clipboard-button-stub
     cssclass="btn-clipboard btn-transparent lh-100 position-static"
-    gfm="\`dummy.md\`"
-    text="dummy.md"
+    gfm="\`foo/bar/dummy.md\`"
+    text="foo/bar/dummy.md"
     title="Copy file path"
     tooltipplacement="top"
   />

spec/frontend/blob/components/blob_header_filepath_spec.js

@@ -38,12 +38,12 @@ describe('Blob Header Filepath', () => {
           .find('.js-blob-header-filepath')
           .text()
           .trim(),
-      ).toBe(MockBlob.name);
+      ).toBe(MockBlob.path);
     });
 
     it('does not fail if the name is empty', () => {
-      const emptyName = '';
-      createComponent({ name: emptyName });
+      const emptyPath = '';
+      createComponent({ path: emptyPath });
       expect(wrapper.find('.js-blob-header-filepath').exists()).toBe(false);
     });
 
@@ -84,7 +84,7 @@ describe('Blob Header Filepath', () => {
   describe('functionality', () => {
     it('sets gfm value correctly on the clipboard-button', () => {
       createComponent();
-      expect(wrapper.vm.gfmCopyText).toBe('`dummy.md`');
+      expect(wrapper.vm.gfmCopyText).toBe(`\`${MockBlob.path}\``);
     });
   });
 });

spec/frontend/blob/components/mock_data.js

@@ -21,7 +21,7 @@ export const RichViewerMock = {
 export const Blob = {
   binary: false,
   name: 'dummy.md',
-  path: 'dummy.md',
+  path: 'foo/bar/dummy.md',
   rawPath: '/flightjs/flight/snippets/51/raw',
   size: 75,
   simpleViewer: {