Add latest changes from gitlab-org/gitlab@master

4 files changed, 68 insertions, 25 deletions

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 2ac1fa61631..547e41019a2 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -153,7 +153,7 @@ export default {
     },
     blobViewer() {
       const { fileType } = this.viewer;
-      return loadViewer(fileType);
+      return loadViewer(fileType, this.isUsingLfs);
     },
     viewerProps() {
       const { fileType } = this.viewer;
@@ -185,6 +185,9 @@ export default {
         ? this.blobInfo.ideForkAndEditPath
         : this.blobInfo.forkAndEditPath;
     },
+    isUsingLfs() {
+      return this.blobInfo.storedExternally && this.blobInfo.externalStorage === 'lfs';
+    },
   },
   methods: {
     loadLegacyViewer(type) {
@@ -245,10 +248,11 @@ export default {
     <div v-if="blobInfo && !isLoading" class="file-holder">
       <blob-header
         :blob="blobInfo"
-        :hide-viewer-switcher="!hasRichViewer || isBinaryFileType"
+        :hide-viewer-switcher="!hasRichViewer || isBinaryFileType || isUsingLfs"
         :is-binary="isBinaryFileType"
         :active-viewer-type="viewer.type"
         :has-render-error="hasRenderError"
+        :show-path="false"
         @viewer-changed="switchViewer"
       >
         <template #actions>
diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js
index 8f6f2d15215..6e4e36579d3 100644
--- a/app/assets/javascripts/repository/components/blob_viewers/index.js
+++ b/app/assets/javascripts/repository/components/blob_viewers/index.js
@@ -1,29 +1,25 @@
-export const loadViewer = (type) => {
-  switch (type) {
-    case 'empty':
-      return () => import(/* webpackChunkName: 'blob_empty_viewer' */ './empty_viewer.vue');
-    case 'text':
-      return gon.features.highlightJs
-        ? () =>
-            import(
-              /* webpackChunkName: 'blob_text_viewer' */ '~/vue_shared/components/source_viewer.vue'
-            )
-        : null;
-    case 'download':
-      return () => import(/* webpackChunkName: 'blob_download_viewer' */ './download_viewer.vue');
-    case 'image':
-      return () => import(/* webpackChunkName: 'blob_image_viewer' */ './image_viewer.vue');
-    case 'video':
-      return () => import(/* webpackChunkName: 'blob_video_viewer' */ './video_viewer.vue');
-    case 'pdf':
-      return () => import(/* webpackChunkName: 'blob_pdf_viewer' */ './pdf_viewer.vue');
-    default:
-      return null;
+const viewers = {
+  download: () => import('./download_viewer.vue'),
+  image: () => import('./image_viewer.vue'),
+  video: () => import('./video_viewer.vue'),
+  empty: () => import('./empty_viewer.vue'),
+  text: () => import('~/vue_shared/components/source_viewer.vue'),
+  pdf: () => import('./pdf_viewer.vue'),
+  lfs: () => import('./lfs_viewer.vue'),
+};
+
+export const loadViewer = (type, isUsingLfs) => {
+  let viewer = viewers[type];
+
+  if (!viewer && isUsingLfs) {
+    viewer = viewers.lfs;
   }
+
+  return viewer;
 };
 
 export const viewerProps = (type, blob) => {
-  return {
+  const props = {
     text: {
       content: blob.rawTextBlob,
       autoDetect: true, // We'll eventually disable autoDetect and pass the language explicitly to reduce the footprint (https://gitlab.com/gitlab-org/gitlab/-/issues/348145)
@@ -44,5 +40,11 @@ export const viewerProps = (type, blob) => {
       url: blob.rawPath,
       fileSize: blob.rawSize,
     },
-  }[type];
+    lfs: {
+      fileName: blob.name,
+      filePath: blob.rawPath,
+    },
+  };
+
+  return props[type] || props[blob.externalStorage];
 };
diff --git a/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue
new file mode 100644
index 00000000000..1596c5c91b1
--- /dev/null
+++ b/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue
@@ -0,0 +1,36 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  i18n: {
+    lfsText: __(
+      'This content could not be displayed because it is stored in LFS. You can %{linkStart}download it%{linkEnd} instead.',
+    ),
+  },
+  components: {
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    fileName: {
+      type: String,
+      required: true,
+    },
+    filePath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-text-center gl-py-13 gl-bg-gray-50" data-type="lfs">
+    <gl-sprintf :message="$options.i18n.lfsText">
+      <template #link="{ content }">
+        <gl-link :href="filePath" :download="fileName" target="_blank">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repository/queries/blob_info.query.graphql b/app/assets/javascripts/repository/queries/blob_info.query.graphql
index 66da13fa1e5..aeba84d481d 100644
--- a/app/assets/javascripts/repository/queries/blob_info.query.graphql
+++ b/app/assets/javascripts/repository/queries/blob_info.query.graphql
@@ -32,6 +32,7 @@ query getBlobInfo($projectPath: ID!, $filePath: String!, $ref: String!) {
           archived
           storedExternally
           externalStorage
+          externalStorageUrl
           rawPath
           replacePath
           pipelineEditorPath