Add latest changes from gitlab-org/gitlab@master

9 files changed, 39 insertions, 25 deletions

diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue b/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue
index 5347f7c8712..e467053cd73 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue
@@ -101,7 +101,7 @@ export default {
 <template>
   <bubble-menu
     data-testid="code-block-bubble-menu"
-    class="gl-shadow gl-rounded-base"
+    class="gl-shadow gl-rounded-base gl-bg-white"
     :editor="tiptapEditor"
     plugin-key="bubbleMenuCodeBlock"
     :should-show="shouldShow"
@@ -109,7 +109,12 @@ export default {
   >
     <editor-state-observer @transaction="updateSelectedLanguage">
       <gl-button-group>
-        <gl-dropdown contenteditable="false" boundary="viewport" :text="selectedLanguage.label">
+        <gl-dropdown
+          category="tertiary"
+          contenteditable="false"
+          boundary="viewport"
+          :text="selectedLanguage.label"
+        >
           <template #header>
             <gl-search-box-by-type
               v-model="filterTerm"
@@ -136,7 +141,7 @@ export default {
         <gl-button
           v-gl-tooltip
           variant="default"
-          category="primary"
+          category="tertiary"
           size="medium"
           data-testid="copy-code-block"
           :aria-label="__('Copy code')"
@@ -147,7 +152,7 @@ export default {
         <gl-button
           v-gl-tooltip
           variant="default"
-          category="primary"
+          category="tertiary"
           size="medium"
           data-testid="delete-code-block"
           :aria-label="__('Delete code block')"
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/formatting.vue b/app/assets/javascripts/content_editor/components/bubble_menus/formatting.vue
index 34e5caeca94..dba03a1e3e2 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/formatting.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/formatting.vue
@@ -34,7 +34,7 @@ export default {
 <template>
   <bubble-menu
     data-testid="formatting-bubble-menu"
-    class="gl-shadow gl-rounded-base"
+    class="gl-shadow gl-rounded-base gl-bg-white"
     :editor="tiptapEditor"
     :should-show="shouldShow"
   >
@@ -44,7 +44,7 @@ export default {
         content-type="bold"
         icon-name="bold"
         editor-command="toggleBold"
-        category="primary"
+        category="tertiary"
         size="medium"
         :label="__('Bold text')"
         @execute="trackToolbarControlExecution"
@@ -54,7 +54,7 @@ export default {
         content-type="italic"
         icon-name="italic"
         editor-command="toggleItalic"
-        category="primary"
+        category="tertiary"
         size="medium"
         :label="__('Italic text')"
         @execute="trackToolbarControlExecution"
@@ -64,7 +64,7 @@ export default {
         content-type="strike"
         icon-name="strikethrough"
         editor-command="toggleStrike"
-        category="primary"
+        category="tertiary"
         size="medium"
         :label="__('Strikethrough')"
         @execute="trackToolbarControlExecution"
@@ -74,7 +74,7 @@ export default {
         content-type="code"
         icon-name="code"
         editor-command="toggleCode"
-        category="primary"
+        category="tertiary"
         size="medium"
         :label="__('Code')"
         @execute="trackToolbarControlExecution"
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index 829e2264152..ff51b14543b 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -90,10 +90,13 @@ MergeRequest.prototype.initMRBtnListeners = function () {
             MergeRequest.toggleDraftStatus(data.title, wipEvent === 'unwip');
           })
           .catch(() => {
-            draftToggle.removeAttribute('disabled');
             createFlash({
               message: __('Something went wrong. Please try again.'),
             });
+          })
+          .finally(() => {
+            draftToggle.removeAttribute('disabled');
+            loader.remove();
           });
       });
     });
@@ -162,7 +165,9 @@ MergeRequest.toggleDraftStatus = function (title, isReady) {
       );
 
       draftToggle.setAttribute('href', url);
-      draftToggle.textContent = isReady ? __('Mark as draft') : __('Mark as ready');
+      draftToggle.querySelector('.gl-new-dropdown-item-text-wrapper').textContent = isReady
+        ? __('Mark as draft')
+        : __('Mark as ready');
     });
   }
 };
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue
index 578c344da02..ef40de82d01 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue
@@ -101,14 +101,15 @@ export default {
 <template>
   <!-- must be `d-inline-block` or parent flex-basis causes width issues -->
   <gl-link
-    v-gl-tooltip="tooltipOption"
     :href="assigneeUrl"
     :title="tooltipTitle"
-    class="gl-display-inline-block"
+    :data-user-id="user.id"
+    data-placement="left"
+    class="gl-display-inline-block js-user-link"
   >
     <!-- use d-flex so that slot can be appropriately styled -->
     <span class="gl-display-flex">
-      <assignee-avatar :user="user" :img-size="32" :issuable-type="issuableType" />
+      <assignee-avatar :user="user" :img-size="24" :issuable-type="issuableType" />
       <slot></slot>
     </span>
   </gl-link>
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 8717d205dcb..293de444c0a 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -124,11 +124,10 @@ export default {
         >
           <div
             v-if="showVerticalList"
-            class="gl-ml-3 gl-line-height-normal gl-display-grid"
+            class="gl-ml-3 gl-line-height-normal gl-display-grid gl-align-items-center"
             data-testid="username"
           >
             <user-name-with-status :name="user.name" :availability="userAvailability(user)" />
-            <span>@{{ user.username }}</span>
           </div>
         </assignee-avatar-link>
         <attention-requested-toggle
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
index a11468c8761..36a08482e69 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
@@ -47,8 +47,6 @@ export default {
         return sprintf(__('%{userName} (cannot merge)'), { userName: this.user.name });
       } else if (this.cannotMerge) {
         return __('Cannot merge');
-      } else if (this.tooltipHasName) {
-        return this.user.name;
       }
 
       return '';
@@ -70,14 +68,15 @@ export default {
 <template>
   <!-- must be `d-inline-block` or parent flex-basis causes width issues -->
   <gl-link
-    v-gl-tooltip="tooltipOption"
     :href="reviewerUrl"
     :title="tooltipTitle"
-    class="gl-display-inline-block"
+    :data-user-id="user.id"
+    data-placement="left"
+    class="gl-display-inline-block js-user-link"
   >
     <!-- use d-flex so that slot can be appropriately styled -->
     <span class="gl-display-flex">
-      <reviewer-avatar :user="user" :img-size="32" :issuable-type="issuableType" />
+      <reviewer-avatar :user="user" :img-size="24" :issuable-type="issuableType" />
       <slot :user="user"></slot>
     </span>
   </gl-link>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
index 3e6be3487b1..ee3972ab3d5 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
@@ -108,9 +108,8 @@ export default {
         class="gl-word-break-word gl-mr-2"
         data-css-area="user"
       >
-        <div class="gl-ml-3 gl-line-height-normal gl-display-grid">
-          <span>{{ user.name }}</span>
-          <span>@{{ user.username }}</span>
+        <div class="gl-ml-3 gl-line-height-normal gl-display-grid gl-align-items-center">
+          {{ user.name }}
         </div>
       </reviewer-avatar-link>
       <attention-requested-toggle
diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js
index 4544373d8aa..4413be384e5 100644
--- a/app/assets/javascripts/user_popovers.js
+++ b/app/assets/javascripts/user_popovers.js
@@ -103,6 +103,7 @@ export default function addPopovers(elements = document.querySelectorAll('.js-us
         propsData: {
           target: el,
           user,
+          placement: el.dataset.placement || 'top',
         },
       });
 
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index cac8f0a9aa5..2c09fa71230 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -38,6 +38,11 @@ export default {
       required: true,
       default: null,
     },
+    placement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
   },
   computed: {
     statusHtml() {
@@ -66,7 +71,7 @@ export default {
 
 <template>
   <!-- 200ms delay so not every mouseover triggers Popover -->
-  <gl-popover :target="target" :delay="200" boundary="viewport" placement="top">
+  <gl-popover :target="target" :delay="200" :placement="placement" boundary="viewport">
     <div class="gl-p-3 gl-line-height-normal gl-display-flex" data-testid="user-popover">
       <div class="gl-p-2 flex-shrink-1">
         <user-avatar-image :img-src="user.avatarUrl" :size="64" css-classes="gl-mr-3!" />