Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

1 files changed, 76 insertions, 35 deletions

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 58b42fb7859..a9701c8f8aa 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -3,22 +3,21 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
+import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
-import projectPathQuery from '../queries/project_path.query.graphql';
+import BlobHeaderEdit from './blob_header_edit.vue';
 
 export default {
   components: {
     BlobHeader,
+    BlobHeaderEdit,
     BlobContent,
     GlLoadingIcon,
   },
   apollo: {
-    projectPath: {
-      query: projectPathQuery,
-    },
-    blobInfo: {
+    project: {
       query: blobInfoQuery,
       variables() {
         return {
@@ -26,6 +25,11 @@ export default {
           filePath: this.path,
         };
       },
+      result() {
+        this.switchViewer(
+          this.hasRichViewer && !window.location.hash ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER,
+        );
+      },
       error() {
         createFlash({ message: __('An error occurred while loading the file. Please try again.') });
       },
@@ -41,43 +45,70 @@ export default {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
-      projectPath: '',
-      blobInfo: {
-        name: '',
-        size: '',
-        rawBlob: '',
-        type: '',
-        fileType: '',
-        tooLarge: false,
-        path: '',
-        editBlobPath: '',
-        ideEditPath: '',
-        storedExternally: false,
-        rawPath: '',
-        externalStorageUrl: '',
-        replacePath: '',
-        deletePath: '',
-        canLock: false,
-        isLocked: false,
-        lockLink: '',
-        canModifyBlob: true,
-        forkPath: '',
-        simpleViewer: '',
-        richViewer: '',
+      activeViewerType: SIMPLE_BLOB_VIEWER,
+      project: {
+        repository: {
+          blobs: {
+            nodes: [
+              {
+                name: '',
+                size: '',
+                rawTextBlob: '',
+                type: '',
+                fileType: '',
+                tooLarge: false,
+                path: '',
+                editBlobPath: '',
+                ideEditPath: '',
+                storedExternally: false,
+                rawPath: '',
+                externalStorageUrl: '',
+                replacePath: '',
+                deletePath: '',
+                canLock: false,
+                isLocked: false,
+                lockLink: '',
+                canModifyBlob: true,
+                forkPath: '',
+                simpleViewer: {},
+                richViewer: null,
+              },
+            ],
+          },
+        },
       },
     };
   },
   computed: {
     isLoading() {
-      return this.$apollo.queries.blobInfo.loading;
+      return this.$apollo.queries.project.loading;
     },
-    viewer() {
-      const { fileType, tooLarge, type } = this.blobInfo;
+    blobInfo() {
+      const nodes = this.project?.repository?.blobs?.nodes;
 
-      return { fileType, tooLarge, type };
+      return nodes[0] || {};
+    },
+    viewer() {
+      const { richViewer, simpleViewer } = this.blobInfo;
+      return this.activeViewerType === RICH_BLOB_VIEWER ? richViewer : simpleViewer;
+    },
+    hasRichViewer() {
+      return Boolean(this.blobInfo.richViewer);
+    },
+    hasRenderError() {
+      return Boolean(this.viewer.renderError);
+    },
+  },
+  methods: {
+    switchViewer(newViewer) {
+      this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER;
     },
   },
 };
@@ -86,11 +117,21 @@ export default {
 <template>
   <div>
     <gl-loading-icon v-if="isLoading" />
-    <div v-if="blobInfo && !isLoading">
-      <blob-header :blob="blobInfo" />
+    <div v-if="blobInfo && !isLoading" class="file-holder">
+      <blob-header
+        :blob="blobInfo"
+        :hide-viewer-switcher="!hasRichViewer"
+        :active-viewer-type="viewer.type"
+        :has-render-error="hasRenderError"
+        @viewer-changed="switchViewer"
+      >
+        <template #actions>
+          <blob-header-edit :edit-path="blobInfo.editBlobPath" />
+        </template>
+      </blob-header>
       <blob-content
         :blob="blobInfo"
-        :content="blobInfo.rawBlob"
+        :content="blobInfo.rawTextBlob"
         :is-raw-content="true"
         :active-viewer="viewer"
         :loading="false"