diff options
Diffstat (limited to 'app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue')
| -rw-r--r-- | app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue | 64 |
1 files changed, 40 insertions, 24 deletions
diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue index 453a3901665..cb32a5ffd4f 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue @@ -11,20 +11,26 @@ import { GlSprintf, } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; -import { s__ } from '~/locale'; -import alertSetAssignees from '../../graphql/mutations/alert_set_assignees.graphql'; +import { s__, __ } from '~/locale'; +import alertSetAssignees from '../../graphql/mutations/alert_set_assignees.mutation.graphql'; import SidebarAssignee from './sidebar_assignee.vue'; import { debounce } from 'lodash'; const DATA_REFETCH_DELAY = 250; export default { - FETCH_USERS_ERROR: s__( - 'AlertManagement|There was an error while updating the assignee(s) list. Please try again.', - ), - UPDATE_ALERT_ASSIGNEES_ERROR: s__( - 'AlertManagement|There was an error while updating the assignee(s) of the alert. Please try again.', - ), + i18n: { + FETCH_USERS_ERROR: s__( + 'AlertManagement|There was an error while updating the assignee(s) list. Please try again.', + ), + UPDATE_ALERT_ASSIGNEES_ERROR: s__( + 'AlertManagement|There was an error while updating the assignee(s) of the alert. Please try again.', + ), + UPDATE_ALERT_ASSIGNEES_GRAPHQL_ERROR: s__( + 'AlertManagement|This assignee cannot be assigned to this alert.', + ), + ASSIGNEES_BLOCK: s__('AlertManagement|Alert assignee(s): %{assignees}'), + }, components: { GlIcon, GlDropdown, @@ -38,6 +44,10 @@ export default { SidebarAssignee, }, props: { + projectId: { + type: String, + required: true, + }, projectPath: { type: String, required: true, @@ -73,7 +83,7 @@ export default { return this.alert?.assignees?.nodes[0]?.username; }, assignedUser() { - return this.userName || s__('AlertManagement|None'); + return this.userName || __('None'); }, sortedUsers() { return this.users @@ -122,20 +132,20 @@ export default { updateAssigneesDropdown() { this.isDropdownSearching = true; return axios - .get(this.buildUrl(gon.relative_url_root, '/autocomplete/users.json'), { + .get(this.buildUrl(gon.relative_url_root, '/-/autocomplete/users.json'), { params: { search: this.search, per_page: 20, active: true, current_user: true, - project_id: gon?.current_project_id, + project_id: this.projectId, }, }) .then(({ data }) => { this.users = data; }) .catch(() => { - this.$emit('alert-sidebar-error', this.$options.FETCH_USERS_ERROR); + this.$emit('alert-error', this.$options.i18n.FETCH_USERS_ERROR); }) .finally(() => { this.isDropdownSearching = false; @@ -152,12 +162,18 @@ export default { projectPath: this.projectPath, }, }) - .then(() => { + .then(({ data: { alertSetAssignees: { errors } = [] } = {} } = {}) => { this.hideDropdown(); - this.$emit('alert-refresh'); + + if (errors[0]) { + this.$emit( + 'alert-error', + `${this.$options.i18n.UPDATE_ALERT_ASSIGNEES_GRAPHQL_ERROR} ${errors[0]}.`, + ); + } }) .catch(() => { - this.$emit('alert-sidebar-error', this.$options.UPDATE_ALERT_ASSIGNEES_ERROR); + this.$emit('alert-error', this.$options.i18n.UPDATE_ALERT_ASSIGNEES_ERROR); }) .finally(() => { this.isUpdating = false; @@ -174,7 +190,7 @@ export default { <gl-loading-icon v-if="isUpdating" /> </div> <gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left"> - <gl-sprintf :message="s__('AlertManagement|Alert assignee(s): %{assignees}')"> + <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK"> <template #assignees> {{ assignedUser }} </template> @@ -183,7 +199,7 @@ export default { <div class="hide-collapsed"> <p class="title gl-display-flex gl-justify-content-space-between"> - {{ s__('AlertManagement|Assignee') }} + {{ __('Assignee') }} <a v-if="isEditable" ref="editButton" @@ -192,7 +208,7 @@ export default { @click="toggleFormDropdown" @keydown.esc="hideDropdown" > - {{ s__('AlertManagement|Edit') }} + {{ __('Edit') }} </a> </p> @@ -207,7 +223,7 @@ export default { @hide="hideDropdown" > <div class="dropdown-title"> - <span class="alert-title">{{ s__('AlertManagement|Assign To') }}</span> + <span class="alert-title">{{ __('Assign To') }}</span> <gl-button :aria-label="__('Close')" variant="link" @@ -232,12 +248,12 @@ export default { active-class="is-active" @click="updateAlertAssignees('')" > - {{ s__('AlertManagement|Unassigned') }} + {{ __('Unassigned') }} </gl-dropdown-item> <gl-dropdown-divider /> <gl-dropdown-header class="mt-0"> - {{ s__('AlertManagement|Assignee') }} + {{ __('Assignee') }} </gl-dropdown-header> <sidebar-assignee v-for="user in sortedUsers" @@ -248,7 +264,7 @@ export default { /> </template> <gl-dropdown-item v-else-if="userListEmpty"> - {{ s__('AlertManagement|No Matching Results') }} + {{ __('No Matching Results') }} </gl-dropdown-item> <gl-loading-icon v-else /> </div> @@ -261,7 +277,7 @@ export default { assignedUser }}</span> <span v-else class="gl-display-flex gl-align-items-center"> - {{ s__('AlertManagement|None -') }} + {{ __('None') }} - <gl-button class="gl-pl-2" href="#" @@ -269,7 +285,7 @@ export default { data-testid="unassigned-users" @click="updateAlertAssignees(currentUser)" > - {{ s__('AlertManagement| assign yourself') }} + {{ __('assign yourself') }} </gl-button> </span> </p> |