diff options
Diffstat (limited to 'app/assets/javascripts/alert_management/components/sidebar')
5 files changed, 78 insertions, 56 deletions
diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue index df07038151e..0a1478ef5fe 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue @@ -1,9 +1,9 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDeprecatedDropdownItem } from '@gitlab/ui'; export default { components: { - GlDropdownItem, + GlDeprecatedDropdownItem, }, props: { user: { @@ -24,7 +24,7 @@ export default { </script> <template> - <gl-dropdown-item + <gl-deprecated-dropdown-item :key="user.username" data-testid="assigneeDropdownItem" class="assignee-dropdown-item gl-vertical-align-middle" @@ -47,5 +47,5 @@ export default { </strong> <span class="dropdown-menu-user-username"> {{ user.username }}</span> </span> - </gl-dropdown-item> + </gl-deprecated-dropdown-item> </template> 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 cb32a5ffd4f..4af5c83b30c 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue @@ -1,20 +1,20 @@ <script> import { GlIcon, - GlDropdown, - GlDropdownDivider, - GlDropdownHeader, - GlDropdownItem, + GlDeprecatedDropdown, + GlDeprecatedDropdownDivider, + GlDeprecatedDropdownHeader, + GlDeprecatedDropdownItem, GlLoadingIcon, GlTooltip, GlButton, GlSprintf, } from '@gitlab/ui'; +import { debounce } from 'lodash'; import axios from '~/lib/utils/axios_utils'; 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; @@ -33,10 +33,10 @@ export default { }, components: { GlIcon, - GlDropdown, - GlDropdownItem, - GlDropdownDivider, - GlDropdownHeader, + GlDeprecatedDropdown, + GlDeprecatedDropdownItem, + GlDeprecatedDropdownDivider, + GlDeprecatedDropdownHeader, GlLoadingIcon, GlTooltip, GlButton, @@ -213,7 +213,7 @@ export default { </p> <div class="dropdown dropdown-menu-selectable" :class="dropdownClass"> - <gl-dropdown + <gl-deprecated-dropdown ref="dropdown" :text="assignedUser" class="w-100" @@ -243,18 +243,18 @@ export default { </div> <div class="dropdown-content dropdown-body"> <template v-if="userListValid"> - <gl-dropdown-item + <gl-deprecated-dropdown-item :active="!userName" active-class="is-active" @click="updateAlertAssignees('')" > {{ __('Unassigned') }} - </gl-dropdown-item> - <gl-dropdown-divider /> + </gl-deprecated-dropdown-item> + <gl-deprecated-dropdown-divider /> - <gl-dropdown-header class="mt-0"> + <gl-deprecated-dropdown-header class="mt-0"> {{ __('Assignee') }} - </gl-dropdown-header> + </gl-deprecated-dropdown-header> <sidebar-assignee v-for="user in sortedUsers" :key="user.username" @@ -263,17 +263,17 @@ export default { @update-alert-assignees="updateAlertAssignees" /> </template> - <gl-dropdown-item v-else-if="userListEmpty"> + <gl-deprecated-dropdown-item v-else-if="userListEmpty"> {{ __('No Matching Results') }} - </gl-dropdown-item> + </gl-deprecated-dropdown-item> <gl-loading-icon v-else /> </div> - </gl-dropdown> + </gl-deprecated-dropdown> </div> <gl-loading-icon v-if="isUpdating" :inline="true" /> <p v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !userName }"> - <span v-if="userName" class="gl-text-gray-700" data-testid="assigned-users">{{ + <span v-if="userName" class="gl-text-gray-500" data-testid="assigned-users">{{ assignedUser }}</span> <span v-else class="gl-display-flex gl-align-items-center"> diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_header.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_header.vue index fd40b5d9f65..70902a204f8 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_header.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_header.vue @@ -27,7 +27,7 @@ export default { <template> <div class="block gl-display-flex gl-justify-content-space-between"> <span class="issuable-header-text hide-collapsed"> - {{ __('To Do') }} + {{ __('To-Do') }} </span> <sidebar-todo v-if="!sidebarCollapsed" diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue index 44a81aba828..0a2bad5510b 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue @@ -107,7 +107,7 @@ export default { > <span v-if="$options.statuses[alert.status]" - class="gl-text-gray-700" + class="gl-text-gray-500" data-testid="status" >{{ $options.statuses[alert.status] }}</span > diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue index 7d3135ad50d..5bd69a1f0ec 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue @@ -1,13 +1,14 @@ <script> import { s__ } from '~/locale'; import Todo from '~/sidebar/components/todo_toggle/todo.vue'; -import axios from '~/lib/utils/axios_utils'; -import createAlertTodo from '../../graphql/mutations/alert_todo_create.graphql'; +import createAlertTodo from '../../graphql/mutations/alert_todo_create.mutation.graphql'; +import todoMarkDone from '../../graphql/mutations/alert_todo_mark_done.mutation.graphql'; +import alertQuery from '../../graphql/queries/details.query.graphql'; export default { i18n: { UPDATE_ALERT_TODO_ERROR: s__( - 'AlertManagement|There was an error while updating the To Do of the alert.', + 'AlertManagement|There was an error while updating the To-Do of the alert.', ), }, components: { @@ -30,14 +31,24 @@ export default { data() { return { isUpdating: false, - isTodo: false, - todo: '', }; }, computed: { alertID() { return parseInt(this.alert.iid, 10); }, + firstToDoId() { + return this.alert?.todos?.nodes[0]?.id; + }, + hasPendingTodos() { + return this.alert?.todos?.nodes.length > 0; + }, + getAlertQueryVariables() { + return { + fullPath: this.projectPath, + alertId: this.alert.iid, + }; + }, }, methods: { updateToDoCount(add) { @@ -51,11 +62,7 @@ export default { return document.dispatchEvent(headerTodoEvent); }, - toggleTodo() { - if (this.todo) { - return this.markAsDone(); - } - + addToDo() { this.isUpdating = true; return this.$apollo .mutate({ @@ -65,24 +72,14 @@ export default { projectPath: this.projectPath, }, }) - .then(({ data: { alertTodoCreate: { todo = {}, errors = [] } } = {} } = {}) => { + .then(({ data: { errors = [] } }) => { if (errors[0]) { - return this.$emit( - 'alert-error', - `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${errors[0]}.`, - ); + return this.throwError(errors[0]); } - - this.todo = todo.id; return this.updateToDoCount(true); }) .catch(() => { - this.$emit( - 'alert-error', - `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${s__( - 'AlertManagement|Please try again.', - )}`, - ); + this.throwError(); }) .finally(() => { this.isUpdating = false; @@ -90,20 +87,45 @@ export default { }, markAsDone() { this.isUpdating = true; - - return axios - .delete(`/dashboard/todos/${this.todo.split('/').pop()}`) - .then(() => { - this.todo = ''; + return this.$apollo + .mutate({ + mutation: todoMarkDone, + variables: { + id: this.firstToDoId, + }, + update: this.updateCache, + }) + .then(({ data: { errors = [] } }) => { + if (errors[0]) { + return this.throwError(errors[0]); + } return this.updateToDoCount(false); }) .catch(() => { - this.$emit('alert-error', this.$options.i18n.UPDATE_ALERT_TODO_ERROR); + this.throwError(); }) .finally(() => { this.isUpdating = false; }); }, + updateCache(store) { + const data = store.readQuery({ + query: alertQuery, + variables: this.getAlertQueryVariables, + }); + + data.project.alertManagementAlerts.nodes[0].todos.nodes.shift(); + + store.writeQuery({ + query: alertQuery, + variables: this.getAlertQueryVariables, + data, + }); + }, + throwError(err = '') { + const error = err || s__('AlertManagement|Please try again.'); + this.$emit('alert-error', `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${error}`); + }, }, }; </script> @@ -114,10 +136,10 @@ export default { data-testid="alert-todo-button" :collapsed="sidebarCollapsed" :issuable-id="alertID" - :is-todo="todo !== ''" + :is-todo="hasPendingTodos" :is-action-active="isUpdating" issuable-type="alert" - @toggleTodo="toggleTodo" + @toggleTodo="hasPendingTodos ? markAsDone() : addToDo()" /> </div> </template> |