Add latest changes from gitlab-org/gitlab@master

8 files changed, 57 insertions, 42 deletions

diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 81da8409873..b778e05c7b1 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -343,7 +343,9 @@ class GfmAutoComplete {
             icon,
             availabilityStatus:
               availability && isUserBusy(availability)
-                ? `<span class="gl-text-gray-500"> ${s__('UserAvailability|(Busy)')}</span>`
+                ? `<span class="badge badge-warning badge-pill gl-badge sm gl-ml-2"> ${s__(
+                    'UserProfile|Busy',
+                  )}</span>`
                 : '',
           });
         }
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index dee13f60008..7ec56b29c88 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -114,6 +114,7 @@ const initForkInfo = () => {
     aheadComparePath,
     behindComparePath,
     canUserCreateMrInFork,
+    createMrPath,
   } = forkEl.dataset;
   return new Vue({
     el: forkEl,
@@ -130,6 +131,7 @@ const initForkInfo = () => {
           aheadComparePath,
           behindComparePath,
           canUserCreateMrInFork,
+          createMrPath,
         },
       });
     },
diff --git a/app/assets/javascripts/repository/components/fork_info.vue b/app/assets/javascripts/repository/components/fork_info.vue
index 07a29bd3b96..99cbe555a2d 100644
--- a/app/assets/javascripts/repository/components/fork_info.vue
+++ b/app/assets/javascripts/repository/components/fork_info.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIcon, GlLink, GlSkeletonLoader, GlLoadingIcon, GlSprintf, GlButton } from '@gitlab/ui';
 import { s__, sprintf, n__ } from '~/locale';
-import { createAlert } from '~/alert';
+import { createAlert, VARIANT_INFO } from '~/alert';
 import syncForkMutation from '~/repository/mutations/sync_fork.mutation.graphql';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../event_hub';
@@ -26,6 +26,9 @@ export const i18n = {
   error: s__('ForksDivergence|Failed to fetch fork details. Try again later.'),
   updateFork: s__('ForksDivergence|Update fork'),
   createMergeRequest: s__('ForksDivergence|Create merge request'),
+  successMessage: s__(
+    'ForksDivergence|Successfully fetched and merged from the upstream repository.',
+  ),
 };
 
 export default {
@@ -62,6 +65,10 @@ export default {
           this.increasePollInterval();
         }
         if (this.isForkUpdated) {
+          createAlert({
+            message: this.$options.i18n.successMessage,
+            variant: VARIANT_INFO,
+          });
           eventHub.$emit(FORK_UPDATED_EVENT);
         }
       },
@@ -124,7 +131,6 @@ export default {
     return {
       project: {},
       currentPollInterval: null,
-      isSyncTriggered: false,
     };
   },
   computed: {
@@ -150,7 +156,7 @@ export default {
       return this.forkDetails?.isSyncing;
     },
     isForkUpdated() {
-      return !this.hasConflicts && !this.isSyncing && this.currentPollInterval;
+      return this.isUpToDate && this.currentPollInterval;
     },
     ahead() {
       return this.project?.forkDetails?.ahead;
@@ -216,9 +222,8 @@ export default {
   },
   watch: {
     hasConflicts(newVal) {
-      if (newVal && this.isSyncTriggered) {
+      if (newVal && this.currentPollInterval) {
         this.showConflictsModal();
-        this.isSyncTriggered = false;
       }
     },
   },
@@ -257,7 +262,6 @@ export default {
       this.$refs.modal.show();
     },
     startSyncing() {
-      this.isSyncTriggered = true;
       this.syncForkWithPolling();
     },
     checkIfSyncIsPossible() {
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_participant.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_participant.vue
index 8b40b48b54a..c61c02c8b3a 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_participant.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_participant.vue
@@ -1,7 +1,7 @@
 <script>
-import { GlAvatarLabeled, GlIcon } from '@gitlab/ui';
+import { GlAvatarLabeled, GlBadge, GlIcon } from '@gitlab/ui';
 import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
-import { s__, sprintf } from '~/locale';
+import { __ } from '~/locale';
 
 const AVAILABILITY_STATUS = {
   NOT_SET: 'NOT_SET',
@@ -11,6 +11,7 @@ const AVAILABILITY_STATUS = {
 export default {
   components: {
     GlAvatarLabeled,
+    GlBadge,
     GlIcon,
   },
   props: {
@@ -25,30 +26,23 @@ export default {
     },
   },
   computed: {
-    userLabel() {
-      const { name, status } = this.user;
-      if (!status || status?.availability !== AVAILABILITY_STATUS.BUSY) {
-        return name;
-      }
-      return sprintf(
-        s__('UserAvailability|%{author} (Busy)'),
-        {
-          author: name,
-        },
-        false,
-      );
+    isBusy() {
+      return this.user?.status?.availability === AVAILABILITY_STATUS.BUSY;
     },
     hasCannotMergeIcon() {
       return this.issuableType === TYPE_MERGE_REQUEST && !this.user.canMerge;
     },
   },
+  i18n: {
+    busy: __('Busy'),
+  },
 };
 </script>
 
 <template>
   <gl-avatar-labeled
     :size="32"
-    :label="userLabel"
+    :label="user.name"
     :sub-label="`@${user.username}`"
     :src="user.avatarUrl || user.avatar || user.avatar_url"
     class="gl-align-items-center gl-relative sidebar-participant"
@@ -61,6 +55,9 @@ export default {
         class="merge-icon"
         :size="12"
       />
+      <gl-badge v-if="isBusy" size="sm" variant="warning" class="gl-ml-2">
+        {{ $options.i18n.busy }}
+      </gl-badge>
     </template>
   </gl-avatar-labeled>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/user_name_with_status.vue b/app/assets/javascripts/sidebar/components/assignees/user_name_with_status.vue
index bed84dc5706..72084fdafb1 100644
--- a/app/assets/javascripts/sidebar/components/assignees/user_name_with_status.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/user_name_with_status.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlSprintf } from '@gitlab/ui';
+import { GlBadge, GlSprintf } from '@gitlab/ui';
 import { isUserBusy } from '~/set_status_modal/utils';
 
 export default {
   name: 'UserNameWithStatus',
   components: {
+    GlBadge,
     GlSprintf,
   },
   props: {
@@ -40,17 +41,17 @@ export default {
 </script>
 <template>
   <span :class="containerClasses">
-    <gl-sprintf :message="s__('UserAvailability|%{author} %{spanStart}(Busy)%{spanEnd}')">
+    <gl-sprintf :message="s__('UserAvailability|%{author}%{badgeStart}Busy%{badgeEnd}')">
       <template #author
-        >{{ name }}
-        <span v-if="hasPronouns" class="gl-text-gray-500 gl-font-sm gl-font-weight-normal"
+        ><span>{{ name }}</span
+        ><span v-if="hasPronouns" class="gl-text-gray-500 gl-font-sm gl-font-weight-normal gl-ml-1"
           >({{ pronouns }})</span
         ></template
       >
-      <template #span="{ content }"
-        ><span v-if="isBusy" class="gl-text-gray-500 gl-font-sm gl-font-weight-normal">{{
-          content
-        }}</span>
+      <template #badge="{ content }">
+        <gl-badge v-if="isBusy" size="sm" variant="warning" class="gl-ml-2">
+          {{ content }}
+        </gl-badge>
       </template>
     </gl-sprintf>
   </span>
diff --git a/app/assets/javascripts/super_sidebar/components/user_name_group.vue b/app/assets/javascripts/super_sidebar/components/user_name_group.vue
index a24299d449b..57958a03edd 100644
--- a/app/assets/javascripts/super_sidebar/components/user_name_group.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_name_group.vue
@@ -1,5 +1,10 @@
 <script>
-import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlTooltip } from '@gitlab/ui';
+import {
+  GlBadge,
+  GlDisclosureDropdownGroup,
+  GlDisclosureDropdownItem,
+  GlTooltip,
+} from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__ } from '~/locale';
 import { USER_MENU_TRACKING_DEFAULTS } from '../constants';
@@ -7,10 +12,11 @@ import { USER_MENU_TRACKING_DEFAULTS } from '../constants';
 export default {
   i18n: {
     user: {
-      busy: s__('UserProfile|(Busy)'),
+      busy: s__('UserProfile|Busy'),
     },
   },
   components: {
+    GlBadge,
     GlDisclosureDropdownGroup,
     GlDisclosureDropdownItem,
     GlTooltip,
@@ -53,9 +59,9 @@ export default {
             <span class="gl-font-weight-bold">
               {{ user.name }}
             </span>
-            <span v-if="user.status.busy" class="gl-text-gray-500">{{
-              $options.i18n.user.busy
-            }}</span>
+            <gl-badge v-if="user.status.busy" size="sm" variant="warning">
+              {{ $options.i18n.user.busy }}
+            </gl-badge>
           </span>
 
           <span class="gl-text-gray-400">@{{ user.username }}</span>
diff --git a/app/assets/javascripts/users_select/index.js b/app/assets/javascripts/users_select/index.js
index 694f5a7fe16..66e54b59187 100644
--- a/app/assets/javascripts/users_select/index.js
+++ b/app/assets/javascripts/users_select/index.js
@@ -696,17 +696,18 @@ UsersSelect.prototype.renderRow = function (
     : '';
   const dataUserSuggested = user.suggested ? `data-user-suggested=${user.suggested}` : '';
 
-  const name =
+  const busyBadge =
     user?.availability && isUserBusy(user.availability)
-      ? sprintf(__('%{name} (Busy)'), { name: user.name })
-      : user.name;
+      ? `<span class="badge badge-warning badge-pill gl-badge sm">${__('Busy')}</span>`
+      : '';
   return `
     <li data-user-id=${user.id} ${dataUserSuggested}>
       <a href="#" class="dropdown-menu-user-link gl-display-flex! gl-align-items-center ${linkClasses}" ${tooltipAttributes}>
         ${this.renderRowAvatar(issuableType, user, img)}
         <span class="gl-display-flex gl-flex-direction-column gl-overflow-hidden">
           <strong class="dropdown-menu-user-full-name gl-font-weight-bold">
-            ${escape(name)}
+            ${escape(user.name)}
+            ${busyBadge}
           </strong>
           ${
             username
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 4c8e4eb5aa1..e09f193310b 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
@@ -1,5 +1,6 @@
 <script>
 import {
+  GlBadge,
   GlPopover,
   GlLink,
   GlSkeletonLoader,
@@ -35,6 +36,7 @@ export default {
   I18N_USER_LEARN,
   USER_POPOVER_DELAY,
   components: {
+    GlBadge,
     GlIcon,
     GlLink,
     GlPopover,
@@ -226,9 +228,9 @@ export default {
             data-testid="user-popover-pronouns"
             >({{ user.pronouns }})</span
           >
-          <span v-if="isBusy" class="gl-text-gray-500 gl-font-sm gl-font-weight-normal gl-p-1"
-            >({{ $options.I18N_USER_BUSY }})</span
-          >
+          <gl-badge v-if="isBusy" size="sm" variant="warning" class="gl-ml-1">
+            {{ $options.I18N_USER_BUSY }}
+          </gl-badge>
         </template>
       </gl-avatar-labeled>
     </div>