Merge branch '207463-fetch-blob-with-snippet' into 'master'

Fetch Snippet's blob in the same GraphQL query as the Snippet itself

See merge request gitlab-org/gitlab!29441

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

@@ -3,10 +3,8 @@ import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import { SNIPPET_VISIBILITY_PUBLIC } from '../constants';
 import BlobHeader from '~/blob/components/blob_header.vue';
 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';
@@ -16,25 +14,9 @@ export default {
     BlobEmbeddable,
     BlobHeader,
     BlobContent,
-    GlLoadingIcon,
     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 +37,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 +61,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 +70,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

app/assets/javascripts/snippets/fragments/snippetBase.fragment.graphql

+#import '~/graphql_shared/fragments/blobviewer.fragment.graphql'
+
 fragment SnippetBase on Snippet {
   id
   title
@@ -9,6 +11,19 @@ fragment SnippetBase on Snippet {
   webUrl
   httpUrlToRepo
   sshUrlToRepo
+  blob {
+    binary
+    name
+    path
+    rawPath
+    size
+    simpleViewer {
+      ...BlobViewer
+    }
+    richViewer {
+      ...BlobViewer
+    }
+  }
   userPermissions {
     adminSnippet
     updateSnippet

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

-#import '~/graphql_shared/fragments/blobviewer.fragment.graphql'
-
-query SnippetBlobFull($ids: [ID!]) {
-  snippets(ids: $ids) {
-    edges {
-      node {
-        id
-        blob {
-          binary
-          name
-          path
-          rawPath
-          size
-          simpleViewer {
-            ...BlobViewer
-          }
-          richViewer {
-            ...BlobViewer
-          }
-        }
-      }
-    }
-  }
-}

locale/gitlab.pot

@@ -12189,9 +12189,6 @@ msgstr ""
 msgid "Loading"
 msgstr ""
 
-msgid "Loading blob"
-msgstr ""
-
 msgid "Loading contribution stats for group members"
 msgstr ""
 

spec/frontend/snippets/components/snippet_blob_view_spec.js

 import { mount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
 import SnippetBlobView from '~/snippets/components/snippet_blob_view.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
@@ -19,23 +18,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,12 +78,6 @@ describe('Blob Embeddable', () => {
       expect(wrapper.find(BlobEmbeddable).exists()).toBe(true);
     });
 
-    it('shows loading icon while blob data is in flight', () => {
-      createComponent({}, dataMock, true);
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
-      expect(wrapper.find('.snippet-file-content').exists()).toBe(false);
-    });
-
     it('sets simple viewer correctly', () => {
       createComponent();
       expect(wrapper.find(SimpleViewer).exists()).toBe(true);
@@ -133,14 +118,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 +142,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);
-          });
-        });
       });
     });
   });