Add latest changes from gitlab-org/gitlab@13-4-stable-ee

17 files changed, 141 insertions, 70 deletions

diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue
index 26ba7b98a39..6293f3bed1c 100644
--- a/app/assets/javascripts/blob/components/blob_edit_content.vue
+++ b/app/assets/javascripts/blob/components/blob_edit_content.vue
@@ -46,7 +46,7 @@ export default {
       blobGlobalId: this.fileGlobalId,
     });
 
-    this.editor.onChangeContent(debounce(this.onFileChange.bind(this), 250));
+    this.editor.onDidChangeModelContent(debounce(this.onFileChange.bind(this), 250));
 
     window.requestAnimationFrame(() => {
       if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) {
diff --git a/app/assets/javascripts/blob/components/blob_embeddable.vue b/app/assets/javascripts/blob/components/blob_embeddable.vue
deleted file mode 100644
index 00b915ec8bd..00000000000
--- a/app/assets/javascripts/blob/components/blob_embeddable.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-import { GlFormInputGroup, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
-import { __ } from '~/locale';
-
-export default {
-  components: {
-    GlFormInputGroup,
-    GlDeprecatedButton,
-    GlIcon,
-  },
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      optionValues: [
-        // eslint-disable-next-line no-useless-escape
-        { name: __('Embed'), value: `<script src='${this.url}.js'><\/script>` },
-        { name: __('Share'), value: this.url },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <gl-form-input-group
-    id="embeddable-text"
-    :predefined-options="optionValues"
-    readonly
-    select-on-click
-  >
-    <template #append>
-      <gl-deprecated-button new-style data-clipboard-target="#embeddable-text">
-        <gl-icon name="copy-to-clipboard" :title="__('Copy')" />
-      </gl-deprecated-button>
-    </template>
-  </gl-form-input-group>
-</template>
diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index 4409d7a33cc..5058ca7122d 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -1,16 +1,18 @@
 import $ from 'jquery';
+
 import Api from '~/api';
+import toast from '~/vue_shared/plugins/global_toast';
+import { __ } from '~/locale';
+import initPopover from '~/blob/suggest_gitlab_ci_yml';
 
 import { deprecatedCreateFlash as Flash } from '../flash';
+
 import FileTemplateTypeSelector from './template_selectors/type_selector';
 import BlobCiYamlSelector from './template_selectors/ci_yaml_selector';
 import DockerfileSelector from './template_selectors/dockerfile_selector';
 import GitignoreSelector from './template_selectors/gitignore_selector';
 import LicenseSelector from './template_selectors/license_selector';
 import MetricsDashboardSelector from './template_selectors/metrics_dashboard_selector';
-import toast from '~/vue_shared/plugins/global_toast';
-import { __ } from '~/locale';
-import initPopover from '~/blob/suggest_gitlab_ci_yml';
 
 export default class FileTemplateMediator {
   constructor({ editor, currentAction, projectId }) {
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
index 476901aae75..bd39aa2e16f 100644
--- a/app/assets/javascripts/blob/file_template_selector.js
+++ b/app/assets/javascripts/blob/file_template_selector.js
@@ -45,11 +45,15 @@ export default class FileTemplateSelector {
   }
 
   renderLoading() {
-    this.$loadingIcon.addClass('fa-spinner fa-spin').removeClass('fa-chevron-down');
+    this.$loadingIcon
+      .addClass('gl-spinner gl-spinner-orange gl-spinner-sm')
+      .removeClass('fa-chevron-down');
   }
 
   renderLoaded() {
-    this.$loadingIcon.addClass('fa-chevron-down').removeClass('fa-spinner fa-spin');
+    this.$loadingIcon
+      .addClass('fa-chevron-down')
+      .removeClass('gl-spinner gl-spinner-orange gl-spinner-sm');
   }
 
   reportSelection(options) {
diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
index 90eafb75758..411241b72d5 100644
--- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
+++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
 import Cookies from 'js-cookie';
 import { sprintf, s__, __ } from '~/locale';
 import { glEmojiTag } from '~/emoji';
@@ -18,6 +18,8 @@ export default {
   helpMessage: s__(
     `MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd} and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd} to learn more.`,
   ),
+  pipelinesButton: s__('MR widget|See your pipeline in action'),
+  mergeRequestButton: s__('MR widget|Back to the Merge request'),
   modalTitle: sprintf(
     __("That's it, well done!%{celebrate}"),
     {
@@ -25,11 +27,13 @@ export default {
     },
     false,
   ),
-  goToTrackValue: 10,
+  goToTrackValuePipelines: 10,
+  goToTrackValueMergeRequest: 20,
   trackEvent: 'click_button',
   components: {
     GlModal,
     GlSprintf,
+    GlButton,
     GlLink,
   },
   mixins: [trackingMixin],
@@ -38,6 +42,11 @@ export default {
       type: String,
       required: true,
     },
+    projectMergeRequestsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     commitCookie: {
       type: String,
       required: true,
@@ -59,6 +68,15 @@ export default {
         property: this.humanAccess,
       };
     },
+    goToMergeRequestPath() {
+      return this.commitCookiePath || this.projectMergeRequestsPath;
+    },
+    commitCookiePath() {
+      const cookieVal = Cookies.get(this.commitCookie);
+
+      if (cookieVal !== 'true') return cookieVal;
+      return '';
+    },
   },
   mounted() {
     this.track();
@@ -100,17 +118,28 @@ export default {
       </template>
     </gl-sprintf>
     <template #modal-footer>
-      <a
-        ref="goto"
+      <gl-button
+        v-if="projectMergeRequestsPath"
+        ref="goToMergeRequest"
+        :href="goToMergeRequestPath"
+        :data-track-property="humanAccess"
+        :data-track-value="$options.goToTrackValueMergeRequest"
+        :data-track-event="$options.trackEvent"
+        :data-track-label="trackLabel"
+      >
+        {{ $options.mergeRequestButton }}
+      </gl-button>
+      <gl-button
+        ref="goToPipelines"
         :href="goToPipelinesPath"
-        class="btn btn-success"
+        variant="success"
         :data-track-property="humanAccess"
-        :data-track-value="$options.goToTrackValue"
+        :data-track-value="$options.goToTrackValuePipelines"
         :data-track-event="$options.trackEvent"
         :data-track-label="trackLabel"
       >
-        {{ __('See your pipeline in action') }}
-      </a>
+        {{ $options.pipelinesButton }}
+      </gl-button>
     </template>
   </gl-modal>
 </template>
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 aff6a56cb0b..06f436adb8e 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
@@ -49,6 +49,10 @@ export default {
       type: String,
       required: true,
     },
+    mergeRequestPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -109,7 +113,7 @@ export default {
     :css-classes="['suggest-gitlab-ci-yml', 'ml-4']"
   >
     <template #title>
-      <span v-html="suggestTitle"></span>
+      <span>{{ suggestTitle }}</span>
       <span class="ml-auto">
         <gl-button
           :aria-label="__('Close')"
diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js
index 3b67b3dd259..55edb852ee6 100644
--- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js
+++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js
@@ -10,6 +10,7 @@ export default el =>
           target: el.dataset.target,
           trackLabel: el.dataset.trackLabel,
           dismissKey: el.dataset.dismissKey,
+          mergeRequestPath: el.dataset.mergeRequestPath,
           humanAccess: el.dataset.humanAccess,
         },
       });
diff --git a/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue b/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue
new file mode 100644
index 00000000000..1308ca53e74
--- /dev/null
+++ b/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue
@@ -0,0 +1,50 @@
+<script>
+import { GlAlert, GlButton } from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
+
+export default {
+  components: {
+    GlAlert,
+    GlButton,
+  },
+  props: {
+    dismissEndpoint: {
+      type: String,
+      required: true,
+    },
+    featureId: {
+      type: String,
+      required: true,
+    },
+    editPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showAlert: true,
+    };
+  },
+  methods: {
+    dismissAlert() {
+      this.showAlert = false;
+
+      return axios.post(this.dismissEndpoint, {
+        feature_name: this.featureId,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert v-if="showAlert" class="gl-mt-5" @dismiss="dismissAlert">
+    {{ __('The Web IDE offers advanced syntax highlighting capabilities and more.') }}
+    <div class="gl-mt-5">
+      <gl-button :href="editPath" category="primary" variant="info">{{
+        __('Open Web IDE')
+      }}</gl-button>
+    </div>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/blob/suggest_web_ide_ci/index.js b/app/assets/javascripts/blob/suggest_web_ide_ci/index.js
new file mode 100644
index 00000000000..eadf3cd6216
--- /dev/null
+++ b/app/assets/javascripts/blob/suggest_web_ide_ci/index.js
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import WebIdeAlert from './components/web_ide_alert.vue';
+
+export default el => {
+  const { dismissEndpoint, featureId, editPath } = el.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    render(createElement) {
+      return createElement(WebIdeAlert, {
+        props: {
+          dismissEndpoint,
+          featureId,
+          editPath,
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/blob/template_selector.js b/app/assets/javascripts/blob/template_selector.js
index 2427e25a17d..257458138dc 100644
--- a/app/assets/javascripts/blob/template_selector.js
+++ b/app/assets/javascripts/blob/template_selector.js
@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 
 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class TemplateSelector {
   constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
@@ -19,7 +19,7 @@ export default class TemplateSelector {
   }
 
   initDropdown(dropdown, data) {
-    return $(dropdown).glDropdown({
+    return initDeprecatedJQueryDropdown($(dropdown), {
       data,
       filterable: true,
       selectable: true,
diff --git a/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js b/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js
index d819452df68..3a4e86fe572 100644
--- a/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js
@@ -1,4 +1,5 @@
 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class BlobCiYamlSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -15,7 +16,7 @@ export default class BlobCiYamlSelector extends FileTemplateSelector {
 
   initDropdown() {
     // maybe move to super class as well
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,
diff --git a/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
index 7d5e98889d3..3cb4bb83930 100644
--- a/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
@@ -1,5 +1,6 @@
 import FileTemplateSelector from '../file_template_selector';
 import { __ } from '~/locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class DockerfileSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -16,7 +17,7 @@ export default class DockerfileSelector extends FileTemplateSelector {
 
   initDropdown() {
     // maybe move to super class as well
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,
diff --git a/app/assets/javascripts/blob/template_selectors/gitignore_selector.js b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
index 39a8937641d..1721230dcb7 100644
--- a/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
@@ -1,4 +1,5 @@
 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class BlobGitignoreSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -14,7 +15,7 @@ export default class BlobGitignoreSelector extends FileTemplateSelector {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,
diff --git a/app/assets/javascripts/blob/template_selectors/license_selector.js b/app/assets/javascripts/blob/template_selectors/license_selector.js
index f4041835a7d..dafde82b1e0 100644
--- a/app/assets/javascripts/blob/template_selectors/license_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/license_selector.js
@@ -1,4 +1,5 @@
 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class BlobLicenseSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -14,7 +15,7 @@ export default class BlobLicenseSelector extends FileTemplateSelector {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,
diff --git a/app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js b/app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js
index b4accaadfa3..9e698bfea5d 100644
--- a/app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js
@@ -1,4 +1,5 @@
 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class MetricsDashboardSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -14,7 +15,7 @@ export default class MetricsDashboardSelector extends FileTemplateSelector {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,
diff --git a/app/assets/javascripts/blob/template_selectors/type_selector.js b/app/assets/javascripts/blob/template_selectors/type_selector.js
index cb4e1aaa9ac..01625911815 100644
--- a/app/assets/javascripts/blob/template_selectors/type_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/type_selector.js
@@ -1,4 +1,5 @@
 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class FileTemplateTypeSelector extends FileTemplateSelector {
   constructor({ mediator, dropdownData }) {
@@ -12,7 +13,7 @@ export default class FileTemplateTypeSelector extends FileTemplateSelector {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.config.dropdownData,
       filterable: false,
       selectable: true,
diff --git a/app/assets/javascripts/blob/utils.js b/app/assets/javascripts/blob/utils.js
index a0211c8bb8e..8043c0bbc07 100644
--- a/app/assets/javascripts/blob/utils.js
+++ b/app/assets/javascripts/blob/utils.js
@@ -1,20 +1,16 @@
 import Editor from '~/editor/editor_lite';
 
 export function initEditorLite({ el, ...args }) {
-  if (!el) {
-    throw new Error(`"el" parameter is required to initialize Editor`);
-  }
   const editor = new Editor({
     scrollbar: {
       alwaysConsumeMouseWheel: false,
     },
   });
-  editor.createInstance({
+
+  return editor.createInstance({
     el,
     ...args,
   });
-
-  return editor;
 }
 
 export default () => ({});