Add latest changes from gitlab-org/gitlab@master

2 files changed, 88 insertions, 13 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/help_center.vue b/app/assets/javascripts/super_sidebar/components/help_center.vue
index 5e24f20f40a..fb23a4f2deb 100644
--- a/app/assets/javascripts/super_sidebar/components/help_center.vue
+++ b/app/assets/javascripts/super_sidebar/components/help_center.vue
@@ -126,7 +126,7 @@ export default {
   <gl-disclosure-dropdown ref="dropdown">
     <template #toggle>
       <gl-button category="tertiary" icon="question-o" class="btn-with-notification">
-        <span v-if="showWhatsNewNotification" class="notification"></span>
+        <span v-if="showWhatsNewNotification" class="notification-dot-info"></span>
         {{ $options.i18n.help }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue
index 7700b7fa3f8..103501e86ef 100644
--- a/app/assets/javascripts/super_sidebar/components/user_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue
@@ -9,6 +9,8 @@ import {
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, __, sprintf } from '~/locale';
 import NewNavToggle from '~/nav/components/new_nav_toggle.vue';
+import Tracking from '~/tracking';
+import PersistentUserCallout from '~/persistent_user_callout';
 import UserNameGroup from './user_name_group.vue';
 
 export default {
@@ -18,13 +20,13 @@ export default {
       badgeLabel: s__('NorthstarNavigation|Alpha'),
       sectionTitle: s__('NorthstarNavigation|Navigation redesign'),
     },
-    user: {
-      setStatus: s__('SetStatusModal|Set status'),
-      editStatus: s__('SetStatusModal|Edit status'),
-      editProfile: s__('CurrentUser|Edit profile'),
-      preferences: s__('CurrentUser|Preferences'),
-      gitlabNext: s__('CurrentUser|Switch to GitLab Next'),
-    },
+    setStatus: s__('SetStatusModal|Set status'),
+    editStatus: s__('SetStatusModal|Edit status'),
+    editProfile: s__('CurrentUser|Edit profile'),
+    preferences: s__('CurrentUser|Preferences'),
+    buyPipelineMinutes: s__('CurrentUser|Buy Pipeline minutes'),
+    oneOfGroupsRunningOutOfPipelineMinutes: s__('CurrentUser|One of your groups is running out'),
+    gitlabNext: s__('CurrentUser|Switch to GitLab Next'),
     provideFeedback: s__('NorthstarNavigation|Provide feedback'),
     startTrial: s__('CurrentUser|Start an Ultimate trial'),
     signOut: __('Sign out'),
@@ -41,6 +43,7 @@ export default {
   directives: {
     SafeHtml,
   },
+  mixins: [Tracking.mixin()],
   inject: ['toggleNewNavEndpoint'],
   props: {
     data: {
@@ -56,7 +59,7 @@ export default {
       const { busy, customized } = this.data.status;
 
       const statusLabel =
-        busy || customized ? this.$options.i18n.user.editStatus : this.$options.i18n.user.setStatus;
+        busy || customized ? this.$options.i18n.editStatus : this.$options.i18n.setStatus;
 
       return {
         text: statusLabel,
@@ -73,19 +76,32 @@ export default {
     },
     editProfileItem() {
       return {
-        text: this.$options.i18n.user.editProfile,
+        text: this.$options.i18n.editProfile,
         href: this.data.settings.profile_path,
       };
     },
     preferencesItem() {
       return {
-        text: this.$options.i18n.user.preferences,
+        text: this.$options.i18n.preferences,
         href: this.data.settings.profile_preferences_path,
       };
     },
+    addBuyPipelineMinutesMenuItem() {
+      return this.data.pipeline_minutes?.show_buy_pipeline_minutes;
+    },
+    buyPipelineMinutesItem() {
+      return {
+        text: this.$options.i18n.buyPipelineMinutes,
+        warningText: this.$options.i18n.oneOfGroupsRunningOutOfPipelineMinutes,
+        href: this.data.pipeline_minutes?.buy_pipeline_minutes_path,
+        extraAttrs: {
+          class: 'js-follow-link',
+        },
+      };
+    },
     gitlabNextItem() {
       return {
-        text: this.$options.i18n.user.gitlabNext,
+        text: this.$options.i18n.gitlabNext,
         href: this.data.canary_toggle_com_url,
       };
     },
@@ -130,6 +146,38 @@ export default {
         'data-current-clear-status-after': this.data.status.clear_after,
       };
     },
+    buyPipelineMinutesCalloutData() {
+      return this.showNotificationDot
+        ? {
+            'data-feature-id': this.data.pipeline_minutes.callout_attrs.feature_id,
+            'data-dismiss-endpoint': this.data.pipeline_minutes.callout_attrs.dismiss_endpoint,
+          }
+        : {};
+    },
+    showNotificationDot() {
+      return this.data.pipeline_minutes?.show_notification_dot;
+    },
+  },
+  methods: {
+    onShow() {
+      this.trackEvents();
+      this.initCallout();
+    },
+    initCallout() {
+      if (this.showNotificationDot) {
+        PersistentUserCallout.factory(this.$refs?.buyPipelineMinutesNotificationCallout.$el);
+      }
+    },
+    trackEvents() {
+      if (this.addBuyPipelineMinutesMenuItem) {
+        const {
+          'track-action': trackAction,
+          'track-label': label,
+          'track-property': property,
+        } = this.data.pipeline_minutes.tracking_attrs;
+        this.track(trackAction, { label, property });
+      }
+    },
   },
 };
 </script>
@@ -140,9 +188,10 @@ export default {
       placement="right"
       data-testid="user-dropdown"
       data-qa-selector="user_menu"
+      @shown="onShow"
     >
       <template #toggle>
-        <button class="user-bar-item">
+        <button class="user-bar-item btn-with-notification">
           <span class="gl-sr-only">{{ toggleText }}</span>
           <gl-avatar
             :size="24"
@@ -151,6 +200,13 @@ export default {
             aria-hidden="true"
             data-qa-selector="user_avatar_content"
           />
+          <span
+            v-if="showNotificationDot"
+            class="notification-dot-warning"
+            data-testid="buy-pipeline-minutes-notification-dot"
+            v-bind="data.pipeline_minutes.notification_dot_attrs"
+          >
+          </span>
         </button>
       </template>
 
@@ -178,6 +234,25 @@ export default {
         <gl-disclosure-dropdown-item :item="preferencesItem" data-testid="preferences-item" />
 
         <gl-disclosure-dropdown-item
+          v-if="addBuyPipelineMinutesMenuItem"
+          ref="buyPipelineMinutesNotificationCallout"
+          :item="buyPipelineMinutesItem"
+          v-bind="buyPipelineMinutesCalloutData"
+          data-testid="buy-pipeline-minutes-item"
+        >
+          <template #list-item>
+            <span class="gl-display-flex gl-flex-direction-column">
+              <span>{{ buyPipelineMinutesItem.text }} <gl-emoji data-name="clock9" /></span>
+              <span
+                v-if="data.pipeline_minutes.show_with_subtext"
+                class="gl-font-sm small gl-pt-2 gl-text-orange-800"
+                >{{ buyPipelineMinutesItem.warningText }}</span
+              >
+            </span>
+          </template>
+        </gl-disclosure-dropdown-item>
+
+        <gl-disclosure-dropdown-item
           v-if="data.gitlab_com_but_not_canary"
           :item="gitlabNextItem"
           data-testid="gitlab-next-item"