Add latest changes from gitlab-org/gitlab@master

9 files changed, 37 insertions, 46 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/init_gfm.js b/app/assets/javascripts/behaviors/markdown/init_gfm.js
deleted file mode 100644
index d9c7cee50da..00000000000
--- a/app/assets/javascripts/behaviors/markdown/init_gfm.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import $ from 'jquery';
-import { renderGFM } from '~/behaviors/markdown/render_gfm';
-
-$.fn.renderGFM = function plugin() {
-  this.get().forEach(renderGFM);
-  return this;
-};
-requestIdleCallback(
-  () => {
-    renderGFM(document.body);
-  },
-  { timeout: 500 },
-);
diff --git a/app/assets/javascripts/behaviors/preview_markdown.js b/app/assets/javascripts/behaviors/preview_markdown.js
index 86a05f24dfc..32e395e4f3c 100644
--- a/app/assets/javascripts/behaviors/preview_markdown.js
+++ b/app/assets/javascripts/behaviors/preview_markdown.js
@@ -1,10 +1,10 @@
 /* eslint-disable func-names */
 
 import $ from 'jquery';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import '~/behaviors/markdown/init_gfm';
 
 // MarkdownPreview
 //
@@ -51,7 +51,7 @@ MarkdownPreview.prototype.showPreview = function ($form) {
       }
 
       preview.removeClass('md-preview-loading').html(body);
-      preview.renderGFM();
+      renderGFM(preview.get(0));
       this.renderReferencedUsers(response.references.users, $form);
 
       if (response.references.commands) {
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 439c4258805..5e85e4cea38 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import '~/behaviors/markdown/init_gfm';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import {
@@ -195,7 +195,7 @@ export class BlobViewer {
     this.toggleCopyButtonState();
     loadViewer(newViewer)
       .then((viewer) => {
-        $(viewer).renderGFM();
+        renderGFM(viewer);
         window.requestIdleCallback(() => {
           this.$fileHolder.trigger('highlight:line');
           handleLocationHash();
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 46b3f16df77..a3d11d90ed2 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
 import { FileTemplateExtension } from '~/editor/extensions/source_editor_file_template_ext';
 import { ToolbarExtension } from '~/editor/extensions/source_editor_toolbar_ext';
@@ -9,7 +10,6 @@ import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
 import { insertFinalNewline } from '~/lib/utils/text_utility';
 import TemplateSelectorMediator from '../blob/file_template_mediator';
 import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants';
-import '~/behaviors/markdown/init_gfm';
 
 export default class EditBlob {
   // The options object has:
@@ -140,7 +140,7 @@ export default class EditBlob {
           })
           .then(({ data }) => {
             currentPane.empty().append(data);
-            currentPane.renderGFM();
+            renderGFM(currentPane.get(0));
           })
           .catch(() =>
             createAlert({
diff --git a/app/assets/javascripts/deprecated_notes.js b/app/assets/javascripts/deprecated_notes.js
index c090a66a69d..5c6874593a4 100644
--- a/app/assets/javascripts/deprecated_notes.js
+++ b/app/assets/javascripts/deprecated_notes.js
@@ -15,6 +15,7 @@ import Autosize from 'autosize';
 import $ from 'jquery';
 import { escape, uniqueId } from 'lodash';
 import Vue from 'vue';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import { createAlert, VARIANT_INFO } from '~/flash';
 import '~/lib/utils/jquery_at_who';
 import AjaxCache from '~/lib/utils/ajax_cache';
@@ -40,7 +41,6 @@ import { localTimeAgo } from './lib/utils/datetime_utility';
 import { getLocationHash } from './lib/utils/url_utility';
 import { sprintf, s__, __ } from './locale';
 import TaskList from './task_list';
-import '~/behaviors/markdown/init_gfm';
 
 window.autosize = Autosize;
 
@@ -516,7 +516,11 @@ export default class Notes {
     }
     if (discussionContainer.length === 0) {
       if (noteEntity.diff_discussion_html) {
-        const $discussion = $(noteEntity.diff_discussion_html).renderGFM();
+        const discussionElement = document.createElement('table');
+        // eslint-disable-next-line no-unsanitized/method
+        discussionElement.insertAdjacentHTML('afterbegin', noteEntity.diff_discussion_html);
+        renderGFM(discussionElement);
+        const $discussion = $(discussionElement).unwrap();
 
         if (!this.isParallelView() || row.hasClass('js-temp-notes-holder') || noteEntity.on_image) {
           // insert the note and the reply button after the temp row
@@ -708,7 +712,7 @@ export default class Notes {
 
     $noteAvatar.append($targetNoteBadge);
     this.revertNoteEditForm($targetNote);
-    $noteEntityEl.renderGFM();
+    renderGFM($noteEntityEl.get(0));
     // Find the note's `li` element by ID and replace it with the updated HTML
     const $note_li = $(`.note-row-${noteEntity.id}`);
 
@@ -1382,7 +1386,8 @@ export default class Notes {
   static animateAppendNote(noteHtml, $notesList) {
     const $note = $(noteHtml);
 
-    $note.addClass('fade-in-full').renderGFM();
+    $note.addClass('fade-in-full');
+    renderGFM($note.get(0));
     $notesList.append($note);
     return $note;
   }
@@ -1390,7 +1395,8 @@ export default class Notes {
   static animateUpdateNote(noteHtml, $note) {
     const $updatedNote = $(noteHtml);
 
-    $updatedNote.addClass('fade-in').renderGFM();
+    $updatedNote.addClass('fade-in');
+    renderGFM($updatedNote.get(0));
     $note.replaceWith($updatedNote);
     return $updatedNote;
   }
diff --git a/app/assets/javascripts/mr_notes/init_notes.js b/app/assets/javascripts/mr_notes/init_notes.js
index e10605609b0..f5f10aa4a9b 100644
--- a/app/assets/javascripts/mr_notes/init_notes.js
+++ b/app/assets/javascripts/mr_notes/init_notes.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import store from '~/mr_notes/stores';
 import notesEventHub from '~/notes/event_hub';
@@ -9,6 +10,13 @@ import { getNotesFilterData } from '../notes/utils/get_notes_filter_data';
 import initWidget from '../vue_merge_request_widget';
 
 export default () => {
+  requestIdleCallback(
+    () => {
+      renderGFM(document.getElementById('diff-notes-app'));
+    },
+    { timeout: 500 },
+  );
+
   const el = document.getElementById('js-vue-mr-discussions');
   if (!el) {
     return;
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index 30528ce8d17..c498f12d5c7 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui';
+import { GlEmptyState, GlIcon, GlLoadingIcon, GlCollapsibleListbox } from '@gitlab/ui';
 import { isEqual } from 'lodash';
 import { createAlert, VARIANT_INFO, VARIANT_WARNING } from '~/flash';
 import { getParameterByName } from '~/lib/utils/url_utility';
@@ -26,8 +26,7 @@ export default {
   PipelineKeyOptions,
   components: {
     EmptyState,
-    GlDropdown,
-    GlDropdownItem,
+    GlCollapsibleListbox,
     GlEmptyState,
     GlIcon,
     GlLoadingIcon,
@@ -315,7 +314,7 @@ export default {
       this.updateContent(this.requestData);
     },
     changeVisibilityPipelineID(val) {
-      this.selectedPipelineKeyOption = val;
+      this.selectedPipelineKeyOption = PipelineKeyOptions.find((e) => val === e.value);
     },
   },
 };
@@ -355,21 +354,12 @@ export default {
           :params="validatedParams"
           @filterPipelines="filterPipelines"
         />
-        <gl-dropdown
-          class="gl-display-flex"
-          :text="selectedPipelineKeyOption.text"
-          data-testid="pipeline-key-dropdown"
-        >
-          <gl-dropdown-item
-            v-for="(val, index) in $options.PipelineKeyOptions"
-            :key="index"
-            :is-checked="selectedPipelineKeyOption.key === val.key"
-            is-check-item
-            @click="changeVisibilityPipelineID(val)"
-          >
-            {{ val.text }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+        <gl-collapsible-listbox
+          data-testid="pipeline-key-collapsible-box"
+          :toggle-text="selectedPipelineKeyOption.text"
+          :items="$options.PipelineKeyOptions"
+          @select="changeVisibilityPipelineID"
+        />
       </div>
     </div>
 
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
index 346f5735576..ed32d643c0e 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -161,7 +161,7 @@ export default {
         <pipeline-url
           :pipeline="item"
           :pipeline-schedule-url="pipelineScheduleUrl"
-          :pipeline-key="pipelineKeyOption.key"
+          :pipeline-key="pipelineKeyOption.value"
         />
       </template>
 
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index ed8ec614304..2f37f90e625 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -71,12 +71,12 @@ export const PipelineKeyOptions = [
   {
     text: __('Show Pipeline ID'),
     label: __('Pipeline ID'),
-    key: 'id',
+    value: 'id',
   },
   {
     text: __('Show Pipeline IID'),
     label: __('Pipeline IID'),
-    key: 'iid',
+    value: 'iid',
   },
 ];