Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

5 files changed, 52 insertions, 18 deletions

diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index c5ab28e6ec5..8a4fe1a9025 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -63,6 +63,9 @@ export default {
     isEmpty() {
       return this.blob.rawSize === 0;
     },
+    blobSwitcherDocIcon() {
+      return this.blob.richViewer?.fileType === 'csv' ? 'table' : 'document';
+    },
   },
   watch: {
     viewer(newVal, oldVal) {
@@ -90,7 +93,7 @@ export default {
     </div>
 
     <div class="gl-sm-display-flex file-actions">
-      <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" />
+      <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" :doc-icon="blobSwitcherDocIcon" />
 
       <slot name="actions"></slot>
 
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 12bcb24b0cc..61baf4fa495 100644
--- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue
+++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
+import { setUrlParams, relativePathToAbsolute, getBaseURL } from '~/lib/utils/url_utility';
 import {
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
@@ -56,7 +57,7 @@ export default {
   },
   computed: {
     downloadUrl() {
-      return `${this.rawPath}?inline=false`;
+      return setUrlParams({ inline: false }, relativePathToAbsolute(this.rawPath, getBaseURL()));
     },
     copyDisabled() {
       return this.activeViewer === RICH_BLOB_VIEWER;
diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
index b2546d47694..7351df0f93b 100644
--- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
+++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
@@ -21,6 +21,11 @@ export default {
       default: SIMPLE_BLOB_VIEWER,
       required: false,
     },
+    docIcon: {
+      type: String,
+      default: 'document',
+      required: false,
+    },
   },
   computed: {
     isSimpleViewer() {
@@ -62,7 +67,7 @@ export default {
       :aria-label="$options.RICH_BLOB_VIEWER_TITLE"
       :title="$options.RICH_BLOB_VIEWER_TITLE"
       :selected="isRichViewer"
-      icon="document"
+      :icon="docIcon"
       category="primary"
       variant="default"
       class="js-blob-viewer-switch-btn"
diff --git a/app/assets/javascripts/blob/csv/csv_viewer.vue b/app/assets/javascripts/blob/csv/csv_viewer.vue
index 1f9d20a487f..169167625e0 100644
--- a/app/assets/javascripts/blob/csv/csv_viewer.vue
+++ b/app/assets/javascripts/blob/csv/csv_viewer.vue
@@ -14,6 +14,11 @@ export default {
       type: String,
       required: true,
     },
+    remoteFile: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -23,14 +28,29 @@ export default {
     };
   },
   mounted() {
-    const parsed = Papa.parse(this.csv, { skipEmptyLines: true });
-    this.items = parsed.data;
-
-    if (parsed.errors.length) {
-      this.papaParseErrors = parsed.errors;
+    if (!this.remoteFile) {
+      const parsed = Papa.parse(this.csv, { skipEmptyLines: true });
+      this.handleParsedData(parsed);
+    } else {
+      Papa.parse(this.csv, {
+        download: true,
+        skipEmptyLines: true,
+        complete: (parsed) => {
+          this.handleParsedData(parsed);
+        },
+      });
     }
+  },
+  methods: {
+    handleParsedData(parsed) {
+      this.items = parsed.data;
 
-    this.loading = false;
+      if (parsed.errors.length) {
+        this.papaParseErrors = parsed.errors;
+      }
+
+      this.loading = false;
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/blob/template_selector.js b/app/assets/javascripts/blob/template_selector.js
index 9fa70ce3c62..7eb699eacbe 100644
--- a/app/assets/javascripts/blob/template_selector.js
+++ b/app/assets/javascripts/blob/template_selector.js
@@ -2,6 +2,7 @@
 
 import $ from 'jquery';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
+import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js';
 
 export default class TemplateSelector {
   constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
@@ -10,10 +11,9 @@ export default class TemplateSelector {
     this.dropdown = dropdown;
     this.$dropdownContainer = wrapper;
     this.$filenameInput = $input || $('#file_name');
-    this.$dropdownIcon = $('.dropdown-menu-toggle-icon', dropdown);
-    this.$loadingIcon = $(
-      '<div class="gl-spinner gl-spinner-orange gl-spinner-sm gl-absolute gl-top-3 gl-right-3 gl-display-none"></div>',
-    ).insertAfter(this.$dropdownIcon);
+    this.dropdownIcon = dropdown[0].querySelector('.dropdown-menu-toggle-icon');
+    this.loadingIcon = loadingIconForLegacyJS({ classes: ['gl-display-none'] });
+    this.dropdownIcon.parentNode.insertBefore(this.loadingIcon, this.dropdownIcon.nextSibling);
 
     this.initDropdown(dropdown, data);
     this.listenForFilenameInput();
@@ -78,7 +78,12 @@ export default class TemplateSelector {
   setEditorContent(file, { skipFocus } = {}) {
     if (!file) return;
 
-    const newValue = file.content;
+    let newValue = file.content;
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('issue[description]')) {
+      newValue += `\n${urlParams.get('issue[description]')}`;
+    }
 
     this.editor.setValue(newValue, 1);
 
@@ -95,12 +100,12 @@ export default class TemplateSelector {
   }
 
   startLoadingSpinner() {
-    this.$loadingIcon.removeClass('gl-display-none');
-    this.$dropdownIcon.addClass('gl-display-none');
+    this.loadingIcon.classList.remove('gl-display-none');
+    this.dropdownIcon.classList.add('gl-display-none');
   }
 
   stopLoadingSpinner() {
-    this.$loadingIcon.addClass('gl-display-none');
-    this.$dropdownIcon.removeClass('gl-display-none');
+    this.loadingIcon.classList.add('gl-display-none');
+    this.dropdownIcon.classList.remove('gl-display-none');
   }
 }