Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

4 files changed, 53 insertions, 39 deletions

diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index 9c023235428..4742b4ae4b4 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -25,6 +25,11 @@ export default {
       required: false,
       default: false,
     },
+    isBinary: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     activeViewerType: {
       type: String,
       required: false,
@@ -81,6 +86,7 @@ export default {
         :raw-path="blob.rawPath"
         :active-viewer="viewer"
         :has-render-error="hasRenderError"
+        :is-binary="isBinary"
         @copy="proxyCopyRequest"
       />
     </div>
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 b9f2c5b42e4..2798a918b15 100644
--- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue
+++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
@@ -32,6 +32,11 @@ export default {
       required: false,
       default: false,
     },
+    isBinary: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     downloadUrl() {
@@ -43,6 +48,9 @@ export default {
     getBlobHashTarget() {
       return `[data-blob-hash="${this.blobHash}"]`;
     },
+    showCopyButton() {
+      return !this.hasRenderError && !this.isBinary;
+    },
   },
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
@@ -52,7 +60,7 @@ export default {
 <template>
   <gl-button-group data-qa-selector="default_actions_container">
     <gl-button
-      v-if="!hasRenderError"
+      v-if="showCopyButton"
       v-gl-tooltip.hover
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
@@ -65,6 +73,7 @@ export default {
       variant="default"
     />
     <gl-button
+      v-if="!isBinary"
       v-gl-tooltip.hover
       :aria-label="$options.BTN_RAW_TITLE"
       :title="$options.BTN_RAW_TITLE"
diff --git a/app/assets/javascripts/blob/csv/csv_viewer.vue b/app/assets/javascripts/blob/csv/csv_viewer.vue
index 050f2785d9a..1f9d20a487f 100644
--- a/app/assets/javascripts/blob/csv/csv_viewer.vue
+++ b/app/assets/javascripts/blob/csv/csv_viewer.vue
@@ -1,11 +1,12 @@
 <script>
-import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
 import Papa from 'papaparse';
+import PapaParseAlert from '~/vue_shared/components/papa_parse_alert.vue';
 
 export default {
   components: {
+    PapaParseAlert,
     GlTable,
-    GlAlert,
     GlLoadingIcon,
   },
   props: {
@@ -17,7 +18,7 @@ export default {
   data() {
     return {
       items: [],
-      errorMessage: null,
+      papaParseErrors: [],
       loading: true,
     };
   },
@@ -26,7 +27,7 @@ export default {
     this.items = parsed.data;
 
     if (parsed.errors.length) {
-      this.errorMessage = parsed.errors.map((e) => e.message).join('. ');
+      this.papaParseErrors = parsed.errors;
     }
 
     this.loading = false;
@@ -40,9 +41,7 @@ export default {
       <gl-loading-icon class="gl-mt-5" size="lg" />
     </div>
     <div v-else>
-      <gl-alert v-if="errorMessage" variant="danger" :dismissible="false">
-        {{ errorMessage }}
-      </gl-alert>
+      <papa-parse-alert v-if="papaParseErrors.length" :papa-parse-errors="papaParseErrors" />
       <gl-table
         :empty-text="__('No CSV data to display.')"
         :items="items"
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 4d133659daa..1bda7d4e3f0 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -36,6 +36,34 @@ const loadRichBlobViewer = (type) => {
   }
 };
 
+const loadViewer = (viewerParam) => {
+  const viewer = viewerParam;
+  const url = viewer.getAttribute('data-url');
+
+  if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+    return Promise.resolve(viewer);
+  }
+
+  viewer.setAttribute('data-loading', 'true');
+
+  return axios.get(url).then(({ data }) => {
+    viewer.innerHTML = data.html;
+
+    window.requestIdleCallback(() => {
+      viewer.removeAttribute('data-loading');
+    });
+
+    return viewer;
+  });
+};
+
+export const initAuxiliaryViewer = () => {
+  const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]');
+  if (!auxiliaryViewer) return;
+
+  loadViewer(auxiliaryViewer);
+};
+
 export const handleBlobRichViewer = (viewer, type) => {
   if (!viewer || !type) return;
 
@@ -49,27 +77,20 @@ export const handleBlobRichViewer = (viewer, type) => {
     });
 };
 
-export default class BlobViewer {
+export class BlobViewer {
   constructor() {
     performanceMarkAndMeasure({
       mark: REPO_BLOB_LOAD_VIEWER_START,
     });
     const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
     const type = viewer?.dataset?.richType;
-    BlobViewer.initAuxiliaryViewer();
+    initAuxiliaryViewer();
 
     handleBlobRichViewer(viewer, type);
 
     this.initMainViewers();
   }
 
-  static initAuxiliaryViewer() {
-    const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]');
-    if (!auxiliaryViewer) return;
-
-    BlobViewer.loadViewer(auxiliaryViewer);
-  }
-
   initMainViewers() {
     this.$fileHolder = $('.file-holder');
     if (!this.$fileHolder.length) return;
@@ -173,7 +194,7 @@ export default class BlobViewer {
     this.activeViewer = newViewer;
 
     this.toggleCopyButtonState();
-    BlobViewer.loadViewer(newViewer)
+    loadViewer(newViewer)
       .then((viewer) => {
         $(viewer).renderGFM();
         window.requestIdleCallback(() => {
@@ -205,25 +226,4 @@ export default class BlobViewer {
         }),
       );
   }
-
-  static loadViewer(viewerParam) {
-    const viewer = viewerParam;
-    const url = viewer.getAttribute('data-url');
-
-    if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
-      return Promise.resolve(viewer);
-    }
-
-    viewer.setAttribute('data-loading', 'true');
-
-    return axios.get(url).then(({ data }) => {
-      viewer.innerHTML = data.html;
-
-      window.requestIdleCallback(() => {
-        viewer.removeAttribute('data-loading');
-      });
-
-      return viewer;
-    });
-  }
 }