Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

8 files changed, 70 insertions, 43 deletions

diff --git a/app/assets/javascripts/behaviors/copy_to_clipboard.js b/app/assets/javascripts/behaviors/copy_to_clipboard.js
index 430a8c38387..e822072d669 100644
--- a/app/assets/javascripts/behaviors/copy_to_clipboard.js
+++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js
@@ -79,3 +79,33 @@ export default function initCopyToClipboard() {
     clipboardData.setData('text/x-gfm', json.gfm);
   });
 }
+
+/**
+ * Programmatically triggers a click event on a
+ * "copy to clipboard" button, causing its
+ * contents to be copied. Handles some of the messiniess
+ * around managing the button's tooltip.
+ * @param {HTMLElement} btnElement
+ */
+export function clickCopyToClipboardButton(btnElement) {
+  const $btnElement = $(btnElement);
+
+  // Ensure the button has already been tooltip'd.
+  // If the use hasn't yet interacted (i.e. hovered or clicked)
+  // with the button, Bootstrap hasn't yet initialized
+  // the tooltip, and its `data-original-title` will be `undefined`.
+  // This value is used in the functions above.
+  $btnElement.tooltip();
+  btnElement.dispatchEvent(new MouseEvent('mouseover'));
+
+  btnElement.click();
+
+  // Manually trigger the necessary events to hide the
+  // button's tooltip and allow the button to perform its
+  // tooltip cleanup (updating the title from "Copied" back
+  // to its original title, "Copy branch name").
+  setTimeout(() => {
+    btnElement.dispatchEvent(new MouseEvent('mouseout'));
+    $btnElement.tooltip('hide');
+  }, 2000);
+}
diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js
deleted file mode 100644
index 9bdfc21c7e4..00000000000
--- a/app/assets/javascripts/behaviors/details_behavior.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import $ from 'jquery';
-
-$(() => {
-  $('body').on('click', '.js-details-target', function target() {
-    $(this)
-      .closest('.js-details-container')
-      .toggleClass('open');
-  });
-
-  // Show details content. Hides link after click.
-  //
-  // %div
-  //   %a.js-details-expand
-  //   %div.js-details-content
-  //
-  $('body').on('click', '.js-details-expand', function expand(e) {
-    e.preventDefault();
-    $(this)
-      .next('.js-details-content')
-      .removeClass('hide');
-    $(this).hide();
-
-    const truncatedItem = $(this).siblings('.js-details-short');
-    if (truncatedItem.length) {
-      truncatedItem.addClass('hide');
-    }
-  });
-});
diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js
index 613309a1c5a..75659bbf685 100644
--- a/app/assets/javascripts/behaviors/index.js
+++ b/app/assets/javascripts/behaviors/index.js
@@ -4,7 +4,6 @@ import './bind_in_out';
 import './markdown/render_gfm';
 import initCopyAsGFM from './markdown/copy_as_gfm';
 import initCopyToClipboard from './copy_to_clipboard';
-import './details_behavior';
 import installGlEmojiElement from './gl_emoji';
 import './quick_submit';
 import './requires_input';
diff --git a/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js b/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js
index 83f2ca0bdc2..d712c90242c 100644
--- a/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js
+++ b/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js
@@ -14,6 +14,7 @@ export default function initGFMInput($els) {
       milestones: enableGFM,
       mergeRequests: enableGFM,
       labels: enableGFM,
+      vulnerabilities: enableGFM,
     });
   });
 }
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
index cb0e6345059..233c5f84340 100644
--- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
@@ -25,7 +25,7 @@ function importMermaidModule() {
   return import(/* webpackChunkName: 'mermaid' */ 'mermaid')
     .then(mermaid => {
       let theme = 'neutral';
-      const ideDarkThemes = ['dark', 'solarized-dark'];
+      const ideDarkThemes = ['dark', 'solarized-dark', 'monokai'];
 
       if (
         ideDarkThemes.includes(window.gon?.user_color_scheme) &&
diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js
index 49eab3e4f09..907cfc06e28 100644
--- a/app/assets/javascripts/behaviors/quick_submit.js
+++ b/app/assets/javascripts/behaviors/quick_submit.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import '../commons/bootstrap';
 import { isInIssuePage } from '../lib/utils/common_utils';
 import { __ } from '~/locale';
+import { add, show, hide } from '~/tooltips';
 
 // Quick Submit behavior
 //
@@ -65,18 +66,17 @@ $(document).on(
       return;
     }
 
-    const $this = $(this);
+    const $el = $(this);
     const title = isMac()
-      ? __('You can also press ⌘-Enter')
+      ? __('You can also press \u{2318}-Enter')
       : __('You can also press Ctrl-Enter');
 
-    $this.tooltip({
-      container: 'body',
-      html: true,
-      placement: 'top',
+    add($el, {
+      triggers: 'manual',
+      show: true,
       title,
-      trigger: 'manual',
     });
-    $this.tooltip('show').one('blur click', () => $this.tooltip('hide'));
+    $el.one('blur click', () => hide($el));
+    show($el);
   },
 );
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
index f7b327b2af1..5a5a67334d3 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
@@ -4,6 +4,8 @@ import Sidebar from '../../right_sidebar';
 import Shortcuts from './shortcuts';
 import { CopyAsGFM } from '../markdown/copy_as_gfm';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
+import { isElementVisible } from '~/lib/utils/dom_utils';
+import { clickCopyToClipboardButton } from '~/behaviors/copy_to_clipboard';
 
 export default class ShortcutsIssuable extends Shortcuts {
   constructor() {
@@ -14,6 +16,7 @@ export default class ShortcutsIssuable extends Shortcuts {
     Mousetrap.bind('l', () => ShortcutsIssuable.openSidebarDropdown('labels'));
     Mousetrap.bind('r', ShortcutsIssuable.replyWithSelectedText);
     Mousetrap.bind('e', ShortcutsIssuable.editIssue);
+    Mousetrap.bind('b', ShortcutsIssuable.copyBranchName);
   }
 
   static replyWithSelectedText() {
@@ -98,4 +101,18 @@ export default class ShortcutsIssuable extends Shortcuts {
     Sidebar.instance.openDropdown(name);
     return false;
   }
+
+  static copyBranchName() {
+    // There are two buttons - one that is shown when the sidebar
+    // is expanded, and one that is shown when it's collapsed.
+    const allCopyBtns = Array.from(document.querySelectorAll('.sidebar-source-branch button'));
+
+    // Select whichever button is currently visible so that
+    // the "Copied" tooltip is shown when a click is simulated.
+    const visibleBtn = allCopyBtns.find(isElementVisible);
+
+    if (visibleBtn) {
+      clickCopyToClipboardButton(visibleBtn);
+    }
+  }
 }
diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index ef8b8788abf..4b63143c4ba 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -12,11 +12,19 @@ import { getLocationHash } from '../lib/utils/url_utility';
 $(() => {
   function toggleContainer(container, toggleState) {
     const $container = $(container);
-
-    $container
-      .find('.js-toggle-button .fa-chevron-up, .js-toggle-button .fa-chevron-down')
-      .toggleClass('fa-chevron-up', toggleState)
-      .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
+    const isExpanded = $container.data('is-expanded');
+    const $collapseIcon = $container.find('.js-sidebar-collapse');
+    const $expandIcon = $container.find('.js-sidebar-expand');
+
+    if (isExpanded && !toggleState) {
+      $container.data('is-expanded', false);
+      $collapseIcon.addClass('hidden');
+      $expandIcon.removeClass('hidden');
+    } else {
+      $container.data('is-expanded', true);
+      $expandIcon.addClass('hidden');
+      $collapseIcon.removeClass('hidden');
+    }
 
     $container.find('.js-toggle-content').toggle(toggleState);
   }