Add latest changes from gitlab-org/gitlab@master

2 files changed, 54 insertions, 3 deletions

diff --git a/app/assets/javascripts/snippets/components/snippet_blob_view.vue b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
index 49e0ef35cb8..4703a940e08 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
@@ -2,13 +2,19 @@
 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 BlobContent from '~/blob/components/blob_content.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
 
+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';
+
 export default {
   components: {
     BlobEmbeddable,
     BlobHeader,
+    BlobContent,
     GlLoadingIcon,
   },
   apollo: {
@@ -20,6 +26,23 @@ export default {
         };
       },
       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() {
+        return {
+          ids: this.snippet.id,
+          rich: this.activeViewerType === RICH_BLOB_VIEWER,
+        };
+      },
+      update: data =>
+        data.snippets.edges[0].node.blob.richData || data.snippets.edges[0].node.blob.plainData,
     },
   },
   props: {
@@ -31,6 +54,8 @@ export default {
   data() {
     return {
       blob: {},
+      blobContent: '',
+      activeViewerType: window.location.hash ? SIMPLE_BLOB_VIEWER : '',
     };
   },
   computed: {
@@ -40,6 +65,18 @@ export default {
     isBlobLoading() {
       return this.$apollo.queries.blob.loading;
     },
+    isContentLoading() {
+      return this.$apollo.queries.blobContent.loading;
+    },
+    viewer() {
+      const { richViewer, simpleViewer } = this.blob;
+      return this.activeViewerType === RICH_BLOB_VIEWER ? richViewer : simpleViewer;
+    },
+  },
+  methods: {
+    switchViewer(newViewer, respectHash = false) {
+      this.activeViewerType = respectHash && window.location.hash ? SIMPLE_BLOB_VIEWER : newViewer;
+    },
   },
 };
 </script>
@@ -49,11 +86,12 @@ export default {
     <gl-loading-icon
       v-if="isBlobLoading"
       :label="__('Loading blob')"
-      :size="2"
+      size="lg"
       class="prepend-top-20 append-bottom-20"
     />
     <article v-else class="file-holder snippet-file-content">
-      <blob-header :blob="blob" />
+      <blob-header :blob="blob" :active-viewer-type="viewer.type" @viewer-changed="switchViewer" />
+      <blob-content :loading="isContentLoading" :content="blobContent" :active-viewer="viewer" />
     </article>
   </div>
 </template>
diff --git a/app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql b/app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql
new file mode 100644
index 00000000000..889a88dd93c
--- /dev/null
+++ b/app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql
@@ -0,0 +1,13 @@
+query SnippetBlobContent($ids: [ID!], $rich: Boolean!) {
+  snippets(ids: $ids) {
+    edges {
+      node {
+        id
+        blob {
+          richData @include(if: $rich)
+          plainData @skip(if: $rich)
+        }
+      }
+    }
+  }
+}