Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

6 files changed, 30 insertions, 22 deletions

diff --git a/app/assets/javascripts/blob/components/blob_content.vue b/app/assets/javascripts/blob/components/blob_content.vue
index 9832ebbea5c..f032e2e7fb8 100644
--- a/app/assets/javascripts/blob/components/blob_content.vue
+++ b/app/assets/javascripts/blob/components/blob_content.vue
@@ -66,7 +66,7 @@ export default {
 </script>
 <template>
   <div class="blob-viewer" :data-type="activeViewer.type" :data-loaded="!loading">
-    <gl-loading-icon v-if="loading" size="md" color="dark" class="my-4 mx-auto" />
+    <gl-loading-icon v-if="loading" size="lg" color="dark" class="my-4 mx-auto" />
 
     <template v-else>
       <blob-content-error
diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index 8a4fe1a9025..f78d921fa90 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -92,7 +92,7 @@ export default {
       </blob-filepath>
     </div>
 
-    <div class="gl-sm-display-flex file-actions">
+    <div class="gl-display-flex gl-flex-wrap file-actions">
       <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" :doc-icon="blobSwitcherDocIcon" />
 
       <slot name="actions"></slot>
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
index e02217d0deb..4f970d657c2 100644
--- a/app/assets/javascripts/blob/file_template_selector.js
+++ b/app/assets/javascripts/blob/file_template_selector.js
@@ -1,10 +1,14 @@
 import $ from 'jquery';
+import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js';
 
 export default class FileTemplateSelector {
   constructor(mediator) {
     this.mediator = mediator;
     this.$dropdown = null;
     this.$wrapper = null;
+
+    this.dropdown = null;
+    this.wrapper = null;
   }
 
   init() {
@@ -12,18 +16,21 @@ export default class FileTemplateSelector {
 
     this.$dropdown = $(cfg.dropdown);
     this.$wrapper = $(cfg.wrapper);
-    this.$dropdownIcon = this.$wrapper.find('.dropdown-menu-toggle-icon');
-    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.$dropdownToggleText = this.$wrapper.find('.dropdown-toggle-text');
+
+    this.dropdown = document.querySelector(cfg.dropdown);
+    this.wrapper = document.querySelector(cfg.wrapper);
+
+    this.dropdownIcon = this.wrapper.querySelector('.dropdown-menu-toggle-icon');
+    this.loadingIcon = loadingIconForLegacyJS({ classes: ['gl-display-none'] });
+    this.dropdown.appendChild(this.loadingIcon);
+    this.dropdownToggleText = this.wrapper.querySelector('.dropdown-toggle-text');
 
     this.initDropdown();
     this.selectInitialTemplate();
   }
 
   selectInitialTemplate() {
-    const template = this.$dropdown.data('selected');
+    const template = this.dropdown.dataset.selected;
 
     if (!template) {
       return;
@@ -33,11 +40,11 @@ export default class FileTemplateSelector {
   }
 
   show() {
-    if (this.$dropdown === null) {
+    if (this.dropdown === null) {
       this.init();
     }
 
-    this.$wrapper.removeClass('hidden');
+    this.wrapper.classList.remove('hidden');
 
     /**
      * We set the focus on the dropdown that was just shown. This is done so that, after selecting
@@ -49,36 +56,36 @@ export default class FileTemplateSelector {
      * closed anymore.
      */
     setTimeout(() => {
-      this.$dropdown.focus();
+      this.dropdown.focus();
     }, 0);
   }
 
   hide() {
-    if (this.$dropdown !== null) {
-      this.$wrapper.addClass('hidden');
+    if (this.dropdown !== null) {
+      this.wrapper.classList.add('hidden');
     }
   }
 
   isHidden() {
-    return !this.$wrapper || this.$wrapper.hasClass('hidden');
+    return !this.wrapper || this.wrapper.classList.contains('hidden');
   }
 
   getToggleText() {
-    return this.$dropdownToggleText.text();
+    return this.dropdownToggleText.textContent;
   }
 
   setToggleText(text) {
-    this.$dropdownToggleText.text(text);
+    this.dropdownToggleText.textContent = text;
   }
 
   renderLoading() {
-    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');
   }
 
   renderLoaded() {
-    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');
   }
 
   reportSelection(options) {
diff --git a/app/assets/javascripts/blob/openapi/index.js b/app/assets/javascripts/blob/openapi/index.js
index a04da98ff77..4c497db9842 100644
--- a/app/assets/javascripts/blob/openapi/index.js
+++ b/app/assets/javascripts/blob/openapi/index.js
@@ -11,6 +11,7 @@ export default () => {
         url: el.dataset.endpoint,
         dom_id: '#js-openapi-viewer',
         deepLinking: true,
+        displayOperationId: true,
       });
     })
     .catch((error) => {
diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
index b4ca29114cb..f3c542c467a 100644
--- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
+++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
@@ -132,7 +132,7 @@ export default {
       <gl-button
         ref="goToPipelines"
         :href="goToPipelinesPath"
-        variant="success"
+        variant="confirm"
         :data-track-property="humanAccess"
         :data-track-value="$options.goToTrackValuePipelines"
         :data-track-action="$options.trackEvent"
diff --git a/app/assets/javascripts/blob/sketch/index.js b/app/assets/javascripts/blob/sketch/index.js
index d257810da65..a92161bbc1b 100644
--- a/app/assets/javascripts/blob/sketch/index.js
+++ b/app/assets/javascripts/blob/sketch/index.js
@@ -27,7 +27,7 @@ export default class SketchLoader {
   }
 
   getZipFile() {
-    return new JSZip.external.Promise((resolve, reject) => {
+    return new Promise((resolve, reject) => {
       JSZipUtils.getBinaryContent(this.container.dataset.endpoint, (err, data) => {
         if (err) {
           reject(err);