1 files changed, 40 insertions, 0 deletions
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
new file mode 100644
index 00000000000..41b3b6c9a45
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/assignees/user_name_with_status.vue
@@ -0,0 +1,40 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { isUserBusy } from '~/set_status_modal/utils';
+
+export default {
+  name: 'UserNameWithStatus',
+  components: {
+    GlSprintf,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    containerClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    availability: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    isBusy() {
+      return isUserBusy(this.availability);
+    },
+  },
+};
+</script>
+<template>
+  <span :class="containerClasses">
+    <gl-sprintf v-if="isBusy" :message="s__('UserAvailability|%{author} (Busy)')">
+      <template #author>{{ name }}</template>
+    </gl-sprintf>
+    <template v-else>{{ name }}</template>
+  </span>
+</template>