Add latest changes from gitlab-org/gitlab@master

4 files changed, 41 insertions, 15 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index 7934eac2f7e..4698fcd4d42 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -11,7 +11,7 @@ import renderMetrics from './render_metrics';
 // Delegates to syntax highlight and render math & mermaid diagrams.
 //
 $.fn.renderGFM = function renderGFM() {
-  syntaxHighlight(this.find('.js-syntax-highlight'));
+  syntaxHighlight(this.find('.js-syntax-highlight').get());
   renderMath(this.find('.js-render-math'));
   renderMermaid(this.find('.js-render-mermaid'));
   highlightCurrentUser(this.find('.gfm-project_member').get());
diff --git a/app/assets/javascripts/invite_members/components/group_select.vue b/app/assets/javascripts/invite_members/components/group_select.vue
index 2d1e57a1177..216078ed35e 100644
--- a/app/assets/javascripts/invite_members/components/group_select.vue
+++ b/app/assets/javascripts/invite_members/components/group_select.vue
@@ -111,6 +111,7 @@ export default {
       data-testid="group-select-dropdown"
       :text="selectedGroupName"
       block
+      toggle-class="gl-mb-2"
       menu-class="gl-w-full!"
     >
       <gl-search-box-by-type
diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
index 5881ec08a2e..40eccefd7e0 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
@@ -149,6 +149,13 @@ export default {
 
       return this.selectedAreasOfFocus;
     },
+    errorFieldDescription() {
+      if (this.inviteeType === 'group') {
+        return '';
+      }
+
+      return this.$options.labels[this.inviteeType].placeHolder;
+    },
   },
   mounted() {
     eventHub.$on('openModal', (options) => {
@@ -179,6 +186,7 @@ export default {
       tracking.event(eventName);
     },
     closeModal() {
+      this.resetFields();
       this.$refs.modal.hide();
     },
     sendInvite() {
@@ -349,6 +357,8 @@ export default {
     :title="$options.labels[inviteeType].modalTitle"
     :header-close-label="$options.labels.headerCloseLabel"
     @hidden="resetFields"
+    @close="resetFields"
+    @hide="resetFields"
   >
     <div>
       <p ref="introText">
@@ -360,10 +370,9 @@ export default {
       </p>
 
       <gl-form-group
-        class="gl-mt-2"
         :invalid-feedback="invalidFeedbackMessage"
         :state="validationState"
-        :description="$options.labels[inviteeType].placeHolder"
+        :description="errorFieldDescription"
         data-testid="members-form-group"
       >
         <label :id="$options.membersTokenSelectLabelId" class="col-form-label">{{
@@ -372,6 +381,7 @@ export default {
         <members-token-select
           v-if="!isInviteGroup"
           v-model="newUsersToInvite"
+          class="gl-mb-2"
           :validation-state="validationState"
           :aria-labelledby="$options.membersTokenSelectLabelId"
           @clear="handleMembersTokenSelectClear"
@@ -381,10 +391,11 @@ export default {
           v-model="groupToBeSharedWith"
           :groups-filter="groupSelectFilter"
           :parent-group-id="groupSelectParentId"
+          @input="handleMembersTokenSelectClear"
         />
       </gl-form-group>
 
-      <label class="gl-mt-3">{{ $options.labels.accessLevel }}</label>
+      <label class="gl-font-weight-bold">{{ $options.labels.accessLevel }}</label>
       <div class="gl-mt-2 gl-w-half gl-xs-w-full">
         <gl-dropdown
           class="gl-shadow-none gl-w-full"
diff --git a/app/assets/javascripts/syntax_highlight.js b/app/assets/javascripts/syntax_highlight.js
index 474b5132bc6..96b6e78c668 100644
--- a/app/assets/javascripts/syntax_highlight.js
+++ b/app/assets/javascripts/syntax_highlight.js
@@ -1,7 +1,5 @@
 /* eslint-disable consistent-return */
 
-import $ from 'jquery';
-
 // Syntax Highlighter
 //
 // Applies a syntax highlighting color scheme CSS class to any element with the
@@ -12,14 +10,30 @@ import $ from 'jquery';
 //   <div class="js-syntax-highlight"></div>
 //
 
-export default function syntaxHighlight(el) {
-  if ($(el).hasClass('js-syntax-highlight')) {
-    // Given the element itself, apply highlighting
-    return $(el).addClass(gon.user_color_scheme);
-  }
-  // Given a parent element, recurse to any of its applicable children
-  const $children = $(el).find('.js-syntax-highlight');
-  if ($children.length) {
-    return syntaxHighlight($children);
+export default function syntaxHighlight($els = null) {
+  if (!$els) return;
+
+  const els = $els.get ? $els.get() : $els;
+  const handler = (el) => {
+    if (el.classList.contains('js-syntax-highlight')) {
+      // Given the element itself, apply highlighting
+      return el.classList.add(gon.user_color_scheme);
+    }
+    // Given a parent element, recurse to any of its applicable children
+    const children = el.querySelectorAll('.js-syntax-highlight');
+    if (children.length) {
+      return syntaxHighlight(children);
+    }
+  };
+
+  // In order to account for NodeList returned by document.querySelectorAll,
+  // we should rather check whether the els object is iterable
+  // instead of relying on Array.isArray()
+  const isIterable = typeof els[Symbol.iterator] === 'function';
+
+  if (isIterable) {
+    els.forEach((el) => handler(el));
+  } else {
+    handler(els);
   }
 }