Add latest changes from gitlab-org/gitlab@master

3 files changed, 67 insertions, 6 deletions

diff --git a/app/assets/javascripts/blob/components/blob_content.vue b/app/assets/javascripts/blob/components/blob_content.vue
new file mode 100644
index 00000000000..2639a099093
--- /dev/null
+++ b/app/assets/javascripts/blob/components/blob_content.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
+import BlobContentError from './blob_content_error.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    BlobContentError,
+  },
+  props: {
+    content: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    loading: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    activeViewer: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    viewer() {
+      switch (this.activeViewer.type) {
+        case 'rich':
+          return RichViewer;
+        default:
+          return SimpleViewer;
+      }
+    },
+    viewerError() {
+      return this.activeViewer.renderError;
+    },
+  },
+};
+</script>
+<template>
+  <div class="blob-viewer" :data-type="activeViewer.type">
+    <gl-loading-icon v-if="loading" size="md" color="dark" class="my-4 mx-auto" />
+
+    <template v-else>
+      <blob-content-error v-if="viewerError" :viewer-error="viewerError" />
+      <component :is="viewer" v-else ref="contentViewer" :content="content" />
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/blob/components/blob_content_error.vue b/app/assets/javascripts/blob/components/blob_content_error.vue
new file mode 100644
index 00000000000..0f1af0a962d
--- /dev/null
+++ b/app/assets/javascripts/blob/components/blob_content_error.vue
@@ -0,0 +1,15 @@
+<script>
+export default {
+  props: {
+    viewerError: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="file-content code">
+    <div class="text-center py-4" v-html="viewerError"></div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/blob/components/blob_header_default_actions.vue b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
index f5157fba819..6b38b871606 100644
--- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue
+++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
@@ -36,11 +36,6 @@ export default {
       return this.activeViewer === RICH_BLOB_VIEWER;
     },
   },
-  methods: {
-    requestCopyContents() {
-      this.$emit('copy');
-    },
-  },
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
   BTN_RAW_TITLE,
@@ -53,7 +48,7 @@ export default {
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
       :disabled="copyDisabled"
-      @click="requestCopyContents"
+      data-clipboard-target="#blob-code-content"
     >
       <gl-icon name="copy-to-clipboard" :size="14" />
     </gl-button>