1 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue b/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue
new file mode 100644
index 00000000000..95255ce3d8e
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlBadge, GlDisclosureDropdownItem, GlTooltip } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { s__ } from '~/locale';
+import { USER_MENU_TRACKING_DEFAULTS } from '../constants';
+
+export default {
+  i18n: {
+    user: {
+      busy: s__('UserProfile|Busy'),
+    },
+  },
+  components: {
+    GlBadge,
+    GlDisclosureDropdownItem,
+    GlTooltip,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    user: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    menuItem() {
+      const item = {
+        text: this.user.name,
+      };
+      if (this.user.has_link_to_profile) {
+        item.href = this.user.link_to_profile;
+
+        item.extraAttrs = {
+          ...USER_MENU_TRACKING_DEFAULTS,
+          'data-track-label': 'user_profile',
+          'data-testid': 'user-profile-link',
+        };
+      }
+
+      return item;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown-item :item="menuItem">
+    <template #list-item>
+      <span class="gl-display-flex gl-flex-direction-column">
+        <span>
+          <span class="gl-font-weight-bold">
+            {{ user.name }}
+          </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 gl-word-break-all">@{{ user.username }}</span>
+
+        <span
+          v-if="user.status.customized"
+          ref="statusTooltipTarget"
+          data-testid="user-menu-status"
+          class="gl-display-flex gl-align-items-baseline gl-mt-2 gl-font-sm"
+        >
+          <gl-emoji :data-name="user.status.emoji" class="gl-mr-1" />
+          <span v-safe-html="user.status.message_html" class="gl-text-truncate"></span>
+          <gl-tooltip
+            v-if="user.status.message_html"
+            :target="() => $refs.statusTooltipTarget"
+            boundary="viewport"
+            placement="bottom"
+          >
+            <span v-safe-html="user.status.message_html"></span>
+          </gl-tooltip>
+        </span>
+      </span>
+    </template>
+  </gl-disclosure-dropdown-item>
+</template>