diff options
Diffstat (limited to 'app/assets/javascripts/incidents/components/incidents_list.vue')
-rw-r--r-- | app/assets/javascripts/incidents/components/incidents_list.vue | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue index 37597da3c8e..7a904bdb6ad 100644 --- a/app/assets/javascripts/incidents/components/incidents_list.vue +++ b/app/assets/javascripts/incidents/components/incidents_list.vue @@ -12,7 +12,7 @@ import { } from '@gitlab/ui'; import { isValidSlaDueAt } from 'ee_else_ce/vue_shared/components/incidents/utils'; import { visitUrl, mergeUrlParams, joinPaths } from '~/lib/utils/url_utility'; -import { s__ } from '~/locale'; +import { s__, n__ } from '~/locale'; import { INCIDENT_SEVERITY } from '~/sidebar/components/severity/constants'; import SeverityToken from '~/sidebar/components/severity/severity.vue'; import Tracking from '~/tracking'; @@ -38,6 +38,8 @@ import { import getIncidentsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql'; import getIncidents from '../graphql/queries/get_incidents.query.graphql'; +const MAX_VISIBLE_ASSIGNEES = 4; + export default { trackIncidentCreateNewOptions, trackIncidentListViewsOptions, @@ -94,6 +96,7 @@ export default { thAttr: TH_PUBLISHED_TEST_ID, }, ], + MAX_VISIBLE_ASSIGNEES, components: { GlLoadingIcon, GlTable, @@ -295,6 +298,13 @@ export default { errorAlertDismissed() { this.isErrorAlertDismissed = true; }, + assigneesBadgeSrOnlyText(item) { + return n__( + '%d additional assignee', + '%d additional assignees', + item.assignees.nodes.length - MAX_VISIBLE_ASSIGNEES, + ); + }, isValidSlaDueAt, }, }; @@ -391,10 +401,11 @@ export default { <gl-avatars-inline :avatars="item.assignees.nodes" :collapsed="true" - :max-visible="4" + :max-visible="$options.MAX_VISIBLE_ASSIGNEES" :avatar-size="24" badge-tooltip-prop="name" :badge-tooltip-max-chars="100" + :badge-sr-only-text="assigneesBadgeSrOnlyText(item)" > <template #avatar="{ avatar }"> <gl-avatar-link |