1 files changed, 54 insertions, 13 deletions

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 7fbf331d585..09ac60c94c7 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -5,16 +5,19 @@ 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 axios from '~/lib/utils/axios_utils';
+import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
-import BlobHeaderEdit from './blob_header_edit.vue';
-import BlobReplace from './blob_replace.vue';
+import BlobButtonGroup from './blob_button_group.vue';
+import BlobEdit from './blob_edit.vue';
+import { loadViewer, viewerProps } from './blob_viewers';
 
 export default {
   components: {
     BlobHeader,
-    BlobHeaderEdit,
-    BlobReplace,
+    BlobEdit,
+    BlobButtonGroup,
     BlobContent,
     GlLoadingIcon,
   },
@@ -31,9 +34,12 @@ export default {
         this.switchViewer(
           this.hasRichViewer && !window.location.hash ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER,
         );
+        if (this.hasRichViewer && !this.blobViewer) {
+          this.loadLegacyViewer();
+        }
       },
       error() {
-        createFlash({ message: __('An error occurred while loading the file. Please try again.') });
+        this.displayError();
       },
     },
   },
@@ -54,9 +60,16 @@ export default {
   },
   data() {
     return {
+      legacyRichViewer: null,
+      isBinary: false,
+      isLoadingLegacyViewer: false,
       activeViewerType: SIMPLE_BLOB_VIEWER,
       project: {
+        userPermissions: {
+          pushCode: false,
+        },
         repository: {
+          empty: true,
           blobs: {
             nodes: [
               {
@@ -77,10 +90,10 @@ export default {
                 canLock: false,
                 isLocked: false,
                 lockLink: '',
-                canModifyBlob: true,
                 forkPath: '',
                 simpleViewer: {},
                 richViewer: null,
+                webPath: '',
               },
             ],
           },
@@ -90,10 +103,10 @@ export default {
   },
   computed: {
     isLoggedIn() {
-      return Boolean(gon.current_user_id);
+      return isLoggedIn();
     },
     isLoading() {
-      return this.$apollo.queries.project.loading;
+      return this.$apollo.queries.project.loading || this.isLoadingLegacyViewer;
     },
     blobInfo() {
       const nodes = this.project?.repository?.blobs?.nodes;
@@ -110,8 +123,30 @@ export default {
     hasRenderError() {
       return Boolean(this.viewer.renderError);
     },
+    blobViewer() {
+      const { fileType } = this.viewer;
+      return loadViewer(fileType);
+    },
+    viewerProps() {
+      const { fileType } = this.viewer;
+      return viewerProps(fileType, this.blobInfo);
+    },
   },
   methods: {
+    loadLegacyViewer() {
+      this.isLoadingLegacyViewer = true;
+      axios
+        .get(`${this.blobInfo.webPath}?format=json&viewer=rich`)
+        .then(({ data: { html, binary } }) => {
+          this.legacyRichViewer = html;
+          this.isBinary = binary;
+          this.isLoadingLegacyViewer = false;
+        })
+        .catch(() => this.displayError());
+    },
+    displayError() {
+      createFlash({ message: __('An error occurred while loading the file. Please try again.') });
+    },
     switchViewer(newViewer) {
       this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER;
     },
@@ -121,36 +156,42 @@ export default {
 
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <div v-if="blobInfo && !isLoading" class="file-holder">
       <blob-header
         :blob="blobInfo"
-        :hide-viewer-switcher="!hasRichViewer"
+        :hide-viewer-switcher="!hasRichViewer || isBinary"
         :active-viewer-type="viewer.type"
         :has-render-error="hasRenderError"
         @viewer-changed="switchViewer"
       >
         <template #actions>
-          <blob-header-edit
+          <blob-edit
+            v-if="!isBinary"
             :edit-path="blobInfo.editBlobPath"
             :web-ide-path="blobInfo.ideEditPath"
           />
-          <blob-replace
+          <blob-button-group
             v-if="isLoggedIn"
             :path="path"
             :name="blobInfo.name"
             :replace-path="blobInfo.replacePath"
-            :can-push-code="blobInfo.canModifyBlob"
+            :delete-path="blobInfo.webPath"
+            :can-push-code="project.userPermissions.pushCode"
+            :empty-repo="project.repository.empty"
           />
         </template>
       </blob-header>
       <blob-content
+        v-if="!blobViewer"
+        :rich-viewer="legacyRichViewer"
         :blob="blobInfo"
         :content="blobInfo.rawTextBlob"
         :is-raw-content="true"
         :active-viewer="viewer"
         :loading="false"
       />
+      <component :is="blobViewer" v-else v-bind="viewerProps" class="blob-viewer" />
     </div>
   </div>
 </template>