Filter out blobs on blob_view

When querying for blob content, GraphQL still returns the array of the
blobs. In order to find the correct content, we have to filter out
the list

app/assets/javascripts/snippets/components/show.vue

@@ -50,9 +50,7 @@ export default {
           data-qa-selector="clone_button"
         />
       </div>
-      <div v-for="blob in blobs" :key="blob.path">
-        <snippet-blob :snippet="snippet" :blob="blob" />
-      </div>
+      <snippet-blob v-for="blob in blobs" :key="blob.path" :snippet="snippet" :blob="blob" />
     </template>
   </div>
 </template>

app/assets/javascripts/snippets/components/snippet_blob_view.vue

@@ -25,8 +25,9 @@ export default {
           rich: this.activeViewerType === RICH_BLOB_VIEWER,
         };
       },
-      update: data =>
-        data.snippets.edges[0].node.blob.richData || data.snippets.edges[0].node.blob.plainData,
+      update(data) {
+        return this.onContentUpdate(data);
+      },
       result() {
         if (this.activeViewerType === RICH_BLOB_VIEWER) {
           this.blob.richViewer.renderError = null;
@@ -76,6 +77,12 @@ export default {
       this.$apollo.queries.blobContent.skip = false;
       this.$apollo.queries.blobContent.refetch();
     },
+    onContentUpdate(data) {
+      const { path: blobPath } = this.blob;
+      const { blobs } = data.snippets.edges[0].node;
+      const updatedBlobData = blobs.find(blob => blob.path === blobPath);
+      return updatedBlobData.richData || updatedBlobData.plainData;
+    },
   },
   BLOB_RENDER_EVENT_LOAD,
   BLOB_RENDER_EVENT_SHOW_SOURCE,

app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql

@@ -3,7 +3,8 @@ query SnippetBlobContent($ids: [ID!], $rich: Boolean!) {
     edges {
       node {
         id
-        blob {
+        blobs {
+          path
           richData @include(if: $rich)
           plainData @skip(if: $rich)
         }

app/assets/stylesheets/framework/snippets.scss

@@ -32,6 +32,10 @@
 
 .snippet-file-content {
   border-radius: 3px;
+
+  + .snippet-file-content {
+    @include gl-mt-5;
+  }
 }
 
 .snippet-header {

spec/frontend/blob/components/mock_data.js

@@ -47,10 +47,12 @@ export const BinaryBlob = {
 };
 
 export const RichBlobContentMock = {
+  path: 'foo.md',
   richData: '<h1>Rich</h1>',
 };
 
 export const SimpleBlobContentMock = {
+  path: 'foo.js',
   plainData: 'Plain',
 };
 

spec/frontend/snippets/components/snippet_blob_view_spec.js

+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import SnippetBlobView from '~/snippets/components/snippet_blob_view.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
@@ -10,7 +11,13 @@ import {
 import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
 import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
 
-import { Blob as BlobMock, SimpleViewerMock, RichViewerMock } from 'jest/blob/components/mock_data';
+import {
+  Blob as BlobMock,
+  SimpleViewerMock,
+  RichViewerMock,
+  RichBlobContentMock,
+  SimpleBlobContentMock,
+} from 'jest/blob/components/mock_data';
 
 describe('Blob Embeddable', () => {
   let wrapper;
@@ -111,6 +118,59 @@ describe('Blob Embeddable', () => {
       expect(wrapper.find(BlobHeader).props('hasRenderError')).toBe(true);
     });
 
+    describe('bob content in multi-file scenario', () => {
+      const SimpleBlobContentMock2 = {
+        ...SimpleBlobContentMock,
+        plainData: 'Another Plain Foo',
+      };
+      const RichBlobContentMock2 = {
+        ...SimpleBlobContentMock,
+        richData: 'Another Rich Foo',
+      };
+
+      it.each`
+        snippetBlobs                                       | description                                  | currentBlob              | expectedContent
+        ${[SimpleBlobContentMock]}                         | ${'one existing textual blob'}               | ${SimpleBlobContentMock} | ${SimpleBlobContentMock.plainData}
+        ${[RichBlobContentMock]}                           | ${'one existing rich blob'}                  | ${RichBlobContentMock}   | ${RichBlobContentMock.richData}
+        ${[SimpleBlobContentMock, RichBlobContentMock]}    | ${'mixed blobs with current textual blob'}   | ${SimpleBlobContentMock} | ${SimpleBlobContentMock.plainData}
+        ${[SimpleBlobContentMock, RichBlobContentMock]}    | ${'mixed blobs with current rich blob'}      | ${RichBlobContentMock}   | ${RichBlobContentMock.richData}
+        ${[SimpleBlobContentMock, SimpleBlobContentMock2]} | ${'textual blobs with current textual blob'} | ${SimpleBlobContentMock} | ${SimpleBlobContentMock.plainData}
+        ${[RichBlobContentMock, RichBlobContentMock2]}     | ${'rich blobs with current rich blob'}       | ${RichBlobContentMock}   | ${RichBlobContentMock.richData}
+      `(
+        'renders correct content for $description',
+        async ({ snippetBlobs, currentBlob, expectedContent }) => {
+          const apolloData = {
+            snippets: {
+              edges: [
+                {
+                  node: {
+                    blobs: snippetBlobs,
+                  },
+                },
+              ],
+            },
+          };
+          createComponent({
+            blob: {
+              ...BlobMock,
+              path: currentBlob.path,
+            },
+          });
+
+          // mimic apollo's update
+          wrapper.setData({
+            blobContent: wrapper.vm.onContentUpdate(apolloData),
+          });
+
+          await nextTick();
+
+          const findContent = () => wrapper.find(BlobContent);
+
+          expect(findContent().props('content')).toBe(expectedContent);
+        },
+      );
+    });
+
     describe('URLS with hash', () => {
       beforeEach(() => {
         window.location.hash = '#LC2';