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

7 files changed, 139 insertions, 59 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"
diff --git a/app/assets/javascripts/repository/components/blob_header_edit.vue b/app/assets/javascripts/repository/components/blob_header_edit.vue
new file mode 100644
index 00000000000..f3649895736
--- /dev/null
+++ b/app/assets/javascripts/repository/components/blob_header_edit.vue
@@ -0,0 +1,25 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  i18n: {
+    edit: __('Edit'),
+  },
+  components: {
+    GlButton,
+  },
+  props: {
+    editPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button category="primary" variant="confirm" class="gl-mr-3" :href="editPath">
+    {{ $options.i18n.edit }}
+  </gl-button>
+</template>
diff --git a/app/assets/javascripts/repository/components/upload_blob_modal.vue b/app/assets/javascripts/repository/components/upload_blob_modal.vue
index d2ff01e7fc1..aa087d4c631 100644
--- a/app/assets/javascripts/repository/components/upload_blob_modal.vue
+++ b/app/assets/javascripts/repository/components/upload_blob_modal.vue
@@ -93,7 +93,7 @@ export default {
         text: PRIMARY_OPTIONS_TEXT,
         attributes: [
           {
-            variant: 'success',
+            variant: 'confirm',
             loading: this.loading,
             disabled: !this.formCompleted || this.loading,
           },
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 3a9a2adb417..501ae7e9f2f 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -4,6 +4,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
+import PerformancePlugin from '~/performance/vue_performance_plugin';
 import App from './components/app.vue';
 import Breadcrumbs from './components/breadcrumbs.vue';
 import DirectoryDownloadLinks from './components/directory_download_links.vue';
@@ -17,6 +18,10 @@ import createRouter from './router';
 import { updateFormAction } from './utils/dom';
 import { setTitle } from './utils/title';
 
+Vue.use(PerformancePlugin, {
+  components: ['SimpleViewer', 'BlobContent'],
+});
+
 export default function setupVueRepositoryList() {
   const el = document.getElementById('js-tree-list');
   const { dataset } = el;
diff --git a/app/assets/javascripts/repository/pages/blob.vue b/app/assets/javascripts/repository/pages/blob.vue
index 27af398be09..2645b294096 100644
--- a/app/assets/javascripts/repository/pages/blob.vue
+++ b/app/assets/javascripts/repository/pages/blob.vue
@@ -13,10 +13,14 @@ export default {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
 
 <template>
-  <blob-content-viewer :path="path" />
+  <blob-content-viewer :path="path" :project-path="projectPath" />
 </template>
diff --git a/app/assets/javascripts/repository/queries/blob_info.query.graphql b/app/assets/javascripts/repository/queries/blob_info.query.graphql
index e0bbf12f3eb..07c076af54b 100644
--- a/app/assets/javascripts/repository/queries/blob_info.query.graphql
+++ b/app/assets/javascripts/repository/queries/blob_info.query.graphql
@@ -2,28 +2,32 @@ query getBlobInfo($projectPath: ID!, $filePath: String!) {
   project(fullPath: $projectPath) {
     id
     repository {
-      blobs(path: $filePath) {
-        name
-        size
-        rawBlob
-        type
-        fileType
-        tooLarge
-        path
-        editBlobPath
-        ideEditPath
-        storedExternally
-        rawPath
-        externalStorageUrl
-        replacePath
-        deletePath
-        canLock
-        isLocked
-        lockLink
-        canModifyBlob
-        forkPath
-        simpleViewer
-        richViewer
+      blobs(paths: [$filePath]) {
+        nodes {
+          webPath
+          name
+          size
+          rawSize
+          rawTextBlob
+          fileType
+          path
+          editBlobPath
+          storedExternally
+          rawPath
+          replacePath
+          simpleViewer {
+            fileType
+            tooLarge
+            type
+            renderError
+          }
+          richViewer {
+            fileType
+            tooLarge
+            type
+            renderError
+          }
+        }
       }
     }
   }
diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js
index c7f7451fb55..6637d03a7a4 100644
--- a/app/assets/javascripts/repository/router.js
+++ b/app/assets/javascripts/repository/router.js
@@ -20,6 +20,7 @@ export default function createRouter(base, baseRef) {
     component: BlobPage,
     props: (route) => ({
       path: route.params.path,
+      projectPath: base,
     }),
   };