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

7 files changed, 132 insertions, 62 deletions

diff --git a/app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js b/app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js
new file mode 100644
index 00000000000..d9164f6204a
--- /dev/null
+++ b/app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js
@@ -0,0 +1,41 @@
+import $ from 'jquery';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
+
+/**
+ * This behavior collapses the right sidebar
+ * if the window size changes
+ *
+ * @sentrify
+ */
+export default () => {
+  const $sidebarGutterToggle = $('.js-sidebar-toggle');
+  let bootstrapBreakpoint = bp.getBreakpointSize();
+
+  $(window).on('resize.app', () => {
+    const oldBootstrapBreakpoint = bootstrapBreakpoint;
+    bootstrapBreakpoint = bp.getBreakpointSize();
+
+    if (bootstrapBreakpoint !== oldBootstrapBreakpoint) {
+      const breakpointSizes = ['md', 'sm', 'xs'];
+
+      if (breakpointSizes.includes(bootstrapBreakpoint)) {
+        const $gutterIcon = $sidebarGutterToggle.find('i');
+        if ($gutterIcon.hasClass('fa-angle-double-right')) {
+          $sidebarGutterToggle.trigger('click');
+        }
+
+        const sidebarGutterVueToggleEl = document.querySelector('.js-sidebar-vue-toggle');
+
+        // Sidebar has an icon which corresponds to collapsing the sidebar
+        // only then trigger the click.
+        if (sidebarGutterVueToggleEl) {
+          const collapseIcon = sidebarGutterVueToggleEl.querySelector('i.fa-angle-double-right');
+
+          if (collapseIcon) {
+            collapseIcon.click();
+          }
+        }
+      }
+    }
+  });
+};
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index d1d75658181..bcf732e9522 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -1,47 +1,69 @@
 import 'document-register-element';
 import isEmojiUnicodeSupported from '../emoji/support';
+import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji';
 
 class GlEmoji extends HTMLElement {
   constructor() {
     super();
 
-    const emojiUnicode = this.textContent.trim();
-    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
-
-    const isEmojiUnicode =
-      this.childNodes &&
-      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
-    const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
-    const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
-
-    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
-      // CSS sprite fallback takes precedence over image fallback
-      if (hasCssSpriteFalback) {
-        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
-          const emojiSpriteLinkTag = document.createElement('link');
-          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
-          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
-          document.head.appendChild(emojiSpriteLinkTag);
-          gon.emoji_sprites_css_added = true;
+    this.initialize();
+  }
+  initialize() {
+    let emojiUnicode = this.textContent.trim();
+    const { fallbackSpriteClass, fallbackSrc } = this.dataset;
+    let { name, unicodeVersion } = this.dataset;
+
+    return initEmojiMap().then(() => {
+      if (!unicodeVersion) {
+        const emojiInfo = getEmojiInfo(name);
+
+        if (emojiInfo) {
+          if (name !== emojiInfo.name) {
+            ({ name } = emojiInfo);
+            this.dataset.name = emojiInfo.name;
+          }
+          unicodeVersion = emojiInfo.u;
+          this.dataset.unicodeVersion = unicodeVersion;
+
+          emojiUnicode = emojiInfo.e;
+          this.innerHTML = emojiInfo.e;
+
+          this.title = emojiInfo.d;
+        }
+      }
+
+      const isEmojiUnicode =
+        this.childNodes &&
+        Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
+
+      if (
+        emojiUnicode &&
+        isEmojiUnicode &&
+        !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
+      ) {
+        const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
+        const hasCssSpriteFallback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+
+        // CSS sprite fallback takes precedence over image fallback
+        if (hasCssSpriteFallback) {
+          if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+            const emojiSpriteLinkTag = document.createElement('link');
+            emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+            emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+            document.head.appendChild(emojiSpriteLinkTag);
+            gon.emoji_sprites_css_added = true;
+          }
+          // IE 11 doesn't like adding multiple at once :(
+          this.classList.add('emoji-icon');
+          this.classList.add(fallbackSpriteClass);
+        } else if (hasImageFallback) {
+          this.innerHTML = emojiImageTag(name, fallbackSrc);
+        } else {
+          const src = emojiFallbackImageSrc(name);
+          this.innerHTML = emojiImageTag(name, src);
         }
-        // IE 11 doesn't like adding multiple at once :(
-        this.classList.add('emoji-icon');
-        this.classList.add(fallbackSpriteClass);
-      } else {
-        import(/* webpackChunkName: 'emoji' */ '../emoji')
-          .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
-            if (hasImageFallback) {
-              this.innerHTML = emojiImageTag(name, fallbackSrc);
-            } else {
-              const src = emojiFallbackImageSrc(name);
-              this.innerHTML = emojiImageTag(name, src);
-            }
-          })
-          .catch(() => {
-            // do nothing
-          });
       }
-    }
+    });
   }
 }
 
diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js
index 8c4eccc34a3..8060938c72a 100644
--- a/app/assets/javascripts/behaviors/index.js
+++ b/app/assets/javascripts/behaviors/index.js
@@ -11,9 +11,13 @@ import './requires_input';
 import initPageShortcuts from './shortcuts';
 import './toggler_behavior';
 import './preview_markdown';
+import initCollapseSidebarOnWindowResize from './collapse_sidebar_on_window_resize';
+import initSelect2Dropdowns from './select2';
 
 installGlEmojiElement();
 initGFMInput();
 initCopyAsGFM();
 initCopyToClipboard();
 initPageShortcuts();
+initCollapseSidebarOnWindowResize();
+initSelect2Dropdowns();
diff --git a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
index 03c1b5a0169..bbcfa50ba35 100644
--- a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import { getSelectedFragment } from '~/lib/utils/common_utils';
+import { getSelectedFragment, insertText } from '~/lib/utils/common_utils';
 
 export class CopyAsGFM {
   constructor() {
@@ -79,7 +79,7 @@ export class CopyAsGFM {
   }
 
   static insertPastedText(target, text, gfm) {
-    window.gl.utils.insertText(target, textBefore => {
+    insertText(target, textBefore => {
       // If the text before the cursor contains an odd number of backticks,
       // we are either inside an inline code span that starts with 1 backtick
       // or a code block that starts with 3 backticks.
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
index e4c69a114e0..94033e914ef 100644
--- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
@@ -174,7 +174,7 @@ export default function renderMermaid($els) {
   if (!$els.length) return;
 
   const visibleMermaids = $els.filter(function filter() {
-    return $(this).closest('details').length === 0;
+    return $(this).closest('details').length === 0 && $(this).is(':visible');
   });
 
   renderMermaids(visibleMermaids);
diff --git a/app/assets/javascripts/behaviors/select2.js b/app/assets/javascripts/behaviors/select2.js
new file mode 100644
index 00000000000..37b75bb5e56
--- /dev/null
+++ b/app/assets/javascripts/behaviors/select2.js
@@ -0,0 +1,23 @@
+import $ from 'jquery';
+
+export default () => {
+  if ($('select.select2').length) {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        $('select.select2').select2({
+          width: 'resolve',
+          minimumResultsForSearch: 10,
+          dropdownAutoWidth: true,
+        });
+
+        // Close select2 on escape
+        $('.js-select2').on('select2-close', () => {
+          setTimeout(() => {
+            $('.select2-container-active').removeClass('select2-container-active');
+            $(':focus').blur();
+          }, 1);
+        });
+      })
+      .catch(() => {});
+  }
+};
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
index a53b1b06be9..8418c0f66ac 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
@@ -1,11 +1,10 @@
 <script>
-import { GlToggle, GlSprintf } from '@gitlab/ui';
+import { GlToggle } from '@gitlab/ui';
 import AccessorUtilities from '~/lib/utils/accessor';
 import { disableShortcuts, enableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle';
 
 export default {
   components: {
-    GlSprintf,
     GlToggle,
   },
   data() {
@@ -32,29 +31,10 @@ export default {
     <gl-toggle
       v-model="shortcutsEnabled"
       aria-describedby="shortcutsToggle"
-      class="prepend-left-10 mb-0"
-      label-position="right"
+      label="Keyboard shortcuts"
+      label-position="left"
       @change="onChange"
-    >
-      <template #labelOn>
-        <gl-sprintf
-          :message="__('%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Enabled')"
-        >
-          <template #screenreaderOnly="{ content }">
-            <span class="sr-only">{{ content }}</span>
-          </template>
-        </gl-sprintf>
-      </template>
-      <template #labelOff>
-        <gl-sprintf
-          :message="__('%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled')"
-        >
-          <template #screenreaderOnly="{ content }">
-            <span class="sr-only">{{ content }}</span>
-          </template>
-        </gl-sprintf>
-      </template>
-    </gl-toggle>
+    />
     <div id="shortcutsToggle" class="sr-only">{{ __('Enable or disable keyboard shortcuts') }}</div>
   </div>
 </template>