Removed blob fetching from blob view

Blob will be fetched together with the snippet on the higher
level and should be part of the passed `snippet` prop

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

@@ -6,7 +6,6 @@ import BlobContent from '~/blob/components/blob_content.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
 import CloneDropdownButton from '~/vue_shared/components/clone_dropdown.vue';
 
-import GetSnippetBlobQuery from '../queries/snippet.blob.query.graphql';
 import GetBlobContent from '../queries/snippet.blob.content.query.graphql';
 
 import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
@@ -20,21 +19,6 @@ export default {
     CloneDropdownButton,
   },
   apollo: {
-    blob: {
-      query: GetSnippetBlobQuery,
-      variables() {
-        return {
-          ids: this.snippet.id,
-        };
-      },
-      update: data => data.snippets.edges[0].node.blob,
-      result(res) {
-        const viewer = res.data.snippets.edges[0].node.blob.richViewer
-          ? RICH_BLOB_VIEWER
-          : SIMPLE_BLOB_VIEWER;
-        this.switchViewer(viewer, true);
-      },
-    },
     blobContent: {
       query: GetBlobContent,
       variables() {
@@ -55,18 +39,18 @@ export default {
   },
   data() {
     return {
-      blob: {},
+      blob: this.snippet.blob,
       blobContent: '',
-      activeViewerType: window.location.hash ? SIMPLE_BLOB_VIEWER : '',
+      activeViewerType:
+        this.snippet.blob?.richViewer && !window.location.hash
+          ? RICH_BLOB_VIEWER
+          : SIMPLE_BLOB_VIEWER,
     };
   },
   computed: {
     embeddable() {
       return this.snippet.visibilityLevel === SNIPPET_VISIBILITY_PUBLIC;
     },
-    isBlobLoading() {
-      return this.$apollo.queries.blob.loading;
-    },
     isContentLoading() {
       return this.$apollo.queries.blobContent.loading;
     },
@@ -79,8 +63,8 @@ export default {
     },
   },
   methods: {
-    switchViewer(newViewer, respectHash = false) {
-      this.activeViewerType = respectHash && window.location.hash ? SIMPLE_BLOB_VIEWER : newViewer;
+    switchViewer(newViewer) {
+      this.activeViewerType = newViewer;
     },
   },
 };
@@ -88,13 +72,7 @@ export default {
 <template>
   <div>
     <blob-embeddable v-if="embeddable" class="mb-3" :url="snippet.webUrl" />
-    <gl-loading-icon
-      v-if="isBlobLoading"
-      :label="__('Loading blob')"
-      size="lg"
-      class="prepend-top-20 append-bottom-20"
-    />
-    <article v-else class="file-holder snippet-file-content">
+    <article class="file-holder snippet-file-content">
       <blob-header :blob="blob" :active-viewer-type="viewer.type" @viewer-changed="switchViewer">
         <template #actions>
           <clone-dropdown-button
@@ -104,7 +82,18 @@ export default {
           />
         </template>
       </blob-header>
-      <blob-content :loading="isContentLoading" :content="blobContent" :active-viewer="viewer" />
+      <gl-loading-icon
+        v-if="isContentLoading"
+        :label="__('Loading blob')"
+        size="lg"
+        class="prepend-top-20 append-bottom-20"
+      />
+      <blob-content
+        v-else
+        :loading="isContentLoading"
+        :content="blobContent"
+        :active-viewer="viewer"
+      />
     </article>
   </div>
 </template>

spec/frontend/snippets/components/snippet_blob_view_spec.js

@@ -19,23 +19,15 @@ describe('Blob Embeddable', () => {
     id: 'gid://foo.bar/snippet',
     webUrl: 'https://foo.bar',
     visibilityLevel: SNIPPET_VISIBILITY_PUBLIC,
+    blob: BlobMock,
   };
   const dataMock = {
-    blob: BlobMock,
     activeViewerType: SimpleViewerMock.type,
   };
 
-  function createComponent(
-    props = {},
-    data = dataMock,
-    blobLoading = false,
-    contentLoading = false,
-  ) {
+  function createComponent(props = {}, data = dataMock, contentLoading = false) {
     const $apollo = {
       queries: {
-        blob: {
-          loading: blobLoading,
-        },
         blobContent: {
           loading: contentLoading,
         },
@@ -87,10 +79,10 @@ describe('Blob Embeddable', () => {
       expect(wrapper.find(BlobEmbeddable).exists()).toBe(true);
     });
 
-    it('shows loading icon while blob data is in flight', () => {
+    it('shows loading icon while blob content data is in flight', () => {
       createComponent({}, dataMock, true);
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
-      expect(wrapper.find('.snippet-file-content').exists()).toBe(false);
+      expect(wrapper.find(BlobContent).exists()).toBe(false);
     });
 
     it('sets simple viewer correctly', () => {
@@ -133,14 +125,14 @@ describe('Blob Embeddable', () => {
       });
 
       it('renders simple viewer by default if URL contains hash', () => {
-        createComponent();
+        createComponent({}, {});
 
         expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
         expect(wrapper.find(SimpleViewer).exists()).toBe(true);
       });
 
       describe('switchViewer()', () => {
-        it('by default switches to the passed viewer', () => {
+        it('switches to the passed viewer', () => {
           createComponent();
 
           wrapper.vm.switchViewer(RichViewerMock.type);
@@ -157,22 +149,6 @@ describe('Blob Embeddable', () => {
               expect(wrapper.find(SimpleViewer).exists()).toBe(true);
             });
         });
-
-        it('respects hash over richViewer in the blob when corresponding parameter is passed', () => {
-          createComponent(
-            {},
-            {
-              blob: BlobMock,
-            },
-          );
-          expect(wrapper.vm.blob.richViewer).toEqual(expect.any(Object));
-
-          wrapper.vm.switchViewer(RichViewerMock.type, true);
-          return wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
-            expect(wrapper.find(SimpleViewer).exists()).toBe(true);
-          });
-        });
       });
     });
   });