1 files changed, 70 insertions, 1 deletions
diff --git a/app/assets/javascripts/blob/components/blob_content_error.vue b/app/assets/javascripts/blob/components/blob_content_error.vue
index 0f1af0a962d..44dc4a6c727 100644
--- a/app/assets/javascripts/blob/components/blob_content_error.vue
+++ b/app/assets/javascripts/blob/components/blob_content_error.vue
@@ -1,15 +1,84 @@
 <script>
+import { __ } from '~/locale';
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import { BLOB_RENDER_ERRORS } from './constants';
+
 export default {
+  components: {
+    GlSprintf,
+    GlLink,
+  },
   props: {
     viewerError: {
       type: String,
       required: true,
     },
+    blob: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    notStoredExternally() {
+      return this.viewerError !== BLOB_RENDER_ERRORS.REASONS.EXTERNAL.id;
+    },
+    renderErrorReason() {
+      const defaultReasonPath = Object.keys(BLOB_RENDER_ERRORS.REASONS).find(
+        reason => BLOB_RENDER_ERRORS.REASONS[reason].id === this.viewerError,
+      );
+      const defaultReason = BLOB_RENDER_ERRORS.REASONS[defaultReasonPath].text;
+      return this.notStoredExternally
+        ? defaultReason
+        : defaultReason[this.blob.externalStorage || 'default'];
+    },
+    renderErrorOptions() {
+      const load = {
+        ...BLOB_RENDER_ERRORS.OPTIONS.LOAD,
+        condition: this.shouldShowLoadBtn,
+      };
+      const showSource = {
+        ...BLOB_RENDER_ERRORS.OPTIONS.SHOW_SOURCE,
+        condition: this.shouldShowSourceBtn,
+      };
+      const download = {
+        ...BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD,
+        href: this.blob.rawPath,
+      };
+      return [load, showSource, download];
+    },
+    shouldShowLoadBtn() {
+      return this.viewerError === BLOB_RENDER_ERRORS.REASONS.COLLAPSED.id;
+    },
+    shouldShowSourceBtn() {
+      return this.blob.richViewer && this.blob.renderedAsText && this.notStoredExternally;
+    },
   },
+  errorMessage: __(
+    'This content could not be displayed because %{reason}. You can %{options} instead.',
+  ),
 };
 </script>
 <template>
   <div class="file-content code">
-    <div class="text-center py-4" v-html="viewerError"></div>
+    <div class="text-center py-4">
+      <gl-sprintf :message="$options.errorMessage">
+        <template #reason>{{ renderErrorReason }}</template>
+        <template #options>
+          <template v-for="option in renderErrorOptions">
+            <span v-if="option.condition" :key="option.text">
+              <gl-link
+                :href="option.href"
+                :target="option.target"
+                :data-test-id="`option-${option.id}`"
+                @click="option.event && $emit(option.event)"
+                >{{ option.text }}</gl-link
+              >
+              {{ option.conjunction }}
+            </span>
+          </template>
+        </template>
+      </gl-sprintf>
+    </div>
   </div>
 </template>