Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

4 files changed, 34 insertions, 4 deletions

diff --git a/app/assets/javascripts/blob/components/blob_content.vue b/app/assets/javascripts/blob/components/blob_content.vue
index eb7f45cba6f..f5f06436bcc 100644
--- a/app/assets/javascripts/blob/components/blob_content.vue
+++ b/app/assets/javascripts/blob/components/blob_content.vue
@@ -21,6 +21,11 @@ export default {
       default: '',
       required: false,
     },
+    isRawContent: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
     loading: {
       type: Boolean,
       default: true,
@@ -65,6 +70,8 @@ export default {
         v-else
         ref="contentViewer"
         :content="content"
+        :is-raw-content="isRawContent"
+        :file-name="blob.name"
         :type="activeViewer.fileType"
         data-qa-selector="file_content"
       />
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
index a5c8050b772..e02217d0deb 100644
--- a/app/assets/javascripts/blob/file_template_selector.js
+++ b/app/assets/javascripts/blob/file_template_selector.js
@@ -19,6 +19,17 @@ export default class FileTemplateSelector {
     this.$dropdownToggleText = this.$wrapper.find('.dropdown-toggle-text');
 
     this.initDropdown();
+    this.selectInitialTemplate();
+  }
+
+  selectInitialTemplate() {
+    const template = this.$dropdown.data('selected');
+
+    if (!template) {
+      return;
+    }
+
+    this.mediator.selectTemplateFile(this, template);
   }
 
   show() {
@@ -27,6 +38,19 @@ export default class FileTemplateSelector {
     }
 
     this.$wrapper.removeClass('hidden');
+
+    /**
+     * We set the focus on the dropdown that was just shown. This is done so that, after selecting
+     * a template type, the template selector immediately receives the focus.
+     * This improves the UX of the tour as the suggest_gitlab_ci_yml popover requires its target to
+     * be have the focus to appear. This way, users don't have to interact with the template
+     * selector to actually see the first hint: it is shown as soon as the selector becomes visible.
+     * We also need a timeout here, otherwise the template type selector gets stuck and can not be
+     * closed anymore.
+     */
+    setTimeout(() => {
+      this.$dropdown.focus();
+    }, 0);
   }
 
   hide() {
@@ -36,7 +60,7 @@ export default class FileTemplateSelector {
   }
 
   isHidden() {
-    return this.$wrapper.hasClass('hidden');
+    return !this.$wrapper || this.$wrapper.hasClass('hidden');
   }
 
   getToggleText() {
diff --git a/app/assets/javascripts/blob/stl_viewer.js b/app/assets/javascripts/blob/stl_viewer.js
index 339906adc34..0ea623a705a 100644
--- a/app/assets/javascripts/blob/stl_viewer.js
+++ b/app/assets/javascripts/blob/stl_viewer.js
@@ -9,8 +9,8 @@ export default () => {
 
       e.preventDefault();
 
-      document.querySelector('.js-material-changer.active').classList.remove('active');
-      target.classList.add('active');
+      document.querySelector('.js-material-changer.selected').classList.remove('selected');
+      target.classList.add('selected');
       target.blur();
 
       viewer.changeObjectMaterials(target.dataset.type);
diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
index 6fee40fb061..aee8bf15e44 100644
--- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
+++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
@@ -108,7 +108,6 @@ export default {
     show
     :target="target"
     placement="right"
-    trigger="manual"
     container="viewport"
     :css-classes="['suggest-gitlab-ci-yml', 'ml-4']"
   >