Add latest changes from gitlab-org/gitlab@master

2 files changed, 57 insertions, 0 deletions

diff --git a/app/assets/javascripts/snippets/components/snippet_blob_view.vue b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
index b91e08a4251..49e0ef35cb8 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
@@ -1,10 +1,26 @@
 <script>
 import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import { SNIPPET_VISIBILITY_PUBLIC } from '../constants';
+import BlobHeader from '~/blob/components/blob_header.vue';
+import GetSnippetBlobQuery from '../queries/snippet.blob.query.graphql';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
     BlobEmbeddable,
+    BlobHeader,
+    GlLoadingIcon,
+  },
+  apollo: {
+    blob: {
+      query: GetSnippetBlobQuery,
+      variables() {
+        return {
+          ids: this.snippet.id,
+        };
+      },
+      update: data => data.snippets.edges[0].node.blob,
+    },
   },
   props: {
     snippet: {
@@ -12,15 +28,32 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      blob: {},
+    };
+  },
   computed: {
     embeddable() {
       return this.snippet.visibilityLevel === SNIPPET_VISIBILITY_PUBLIC;
     },
+    isBlobLoading() {
+      return this.$apollo.queries.blob.loading;
+    },
   },
 };
 </script>
 <template>
   <div>
     <blob-embeddable v-if="embeddable" class="mb-3" :url="snippet.webUrl" />
+    <gl-loading-icon
+      v-if="isBlobLoading"
+      :label="__('Loading blob')"
+      :size="2"
+      class="prepend-top-20 append-bottom-20"
+    />
+    <article v-else class="file-holder snippet-file-content">
+      <blob-header :blob="blob" />
+    </article>
   </div>
 </template>
diff --git a/app/assets/javascripts/snippets/queries/snippet.blob.query.graphql b/app/assets/javascripts/snippets/queries/snippet.blob.query.graphql
new file mode 100644
index 00000000000..785c88c185a
--- /dev/null
+++ b/app/assets/javascripts/snippets/queries/snippet.blob.query.graphql
@@ -0,0 +1,24 @@
+#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
+          }
+        }
+      }
+    }
+  }
+}