diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/oncall_schedules_list.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/oncall_schedules_list.vue | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/oncall_schedules_list.vue b/app/assets/javascripts/vue_shared/components/oncall_schedules_list.vue new file mode 100644 index 00000000000..ff2847624c5 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/oncall_schedules_list.vue @@ -0,0 +1,70 @@ +<script> +import { GlSprintf, GlLink } from '@gitlab/ui'; +import { sprintf, s__ } from '~/locale'; + +export default { + components: { + GlSprintf, + GlLink, + }, + props: { + schedules: { + type: Array, + required: true, + }, + userName: { + type: String, + required: false, + default: null, + }, + isCurrentUser: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + title() { + return this.isCurrentUser + ? s__('OnCallSchedules|You are currently a part of:') + : sprintf(s__('OnCallSchedules|User %{name} is currently part of:'), { + name: this.userName, + }); + }, + footer() { + return this.isCurrentUser + ? s__( + 'OnCallSchedules|Removing yourself may put your on-call team at risk of missing a notification.', + ) + : s__( + 'OnCallSchedules|Removing this user may put their on-call team at risk of missing a notification.', + ); + }, + }, +}; +</script> + +<template> + <div> + <p data-testid="title">{{ title }}</p> + + <ul data-testid="schedules-list"> + <li v-for="(schedule, index) in schedules" :key="`${schedule.name}-${index}`"> + <gl-sprintf + :message="s__('OnCallSchedules|On-call schedule %{schedule} in Project %{project}')" + > + <template #schedule> + <gl-link :href="schedule.scheduleUrl" target="_blank">{{ schedule.name }}</gl-link> + </template> + <template #project> + <gl-link :href="schedule.projectUrl" target="_blank">{{ + schedule.projectName + }}</gl-link> + </template> + </gl-sprintf> + </li> + </ul> + + <p data-testid="footer">{{ footer }}</p> + </div> +</template> |