diff options
Diffstat (limited to 'app/assets/javascripts/alert_management/components/alert_status.vue')
-rw-r--r-- | app/assets/javascripts/alert_management/components/alert_status.vue | 38 |
1 files changed, 14 insertions, 24 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_status.vue b/app/assets/javascripts/alert_management/components/alert_status.vue index ff71b348cc9..3083a85cbd9 100644 --- a/app/assets/javascripts/alert_management/components/alert_status.vue +++ b/app/assets/javascripts/alert_management/components/alert_status.vue @@ -1,9 +1,9 @@ <script> -import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlButton } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { s__ } from '~/locale'; import Tracking from '~/tracking'; import { trackAlertStatusUpdateOptions } from '../constants'; -import updateAlertStatus from '../graphql/mutations/update_alert_status.mutation.graphql'; +import updateAlertStatusMutation from '../graphql/mutations/update_alert_status.mutation.graphql'; export default { i18n: { @@ -18,9 +18,8 @@ export default { RESOLVED: s__('AlertManagement|Resolved'), }, components: { - GlDeprecatedDropdown, - GlDeprecatedDropdownItem, - GlButton, + GlDropdown, + GlDropdownItem, }, props: { projectPath: { @@ -51,7 +50,7 @@ export default { this.$emit('handle-updating', true); this.$apollo .mutate({ - mutation: updateAlertStatus, + mutation: updateAlertStatusMutation, variables: { iid: this.alert.iid, status: status.toUpperCase(), @@ -60,8 +59,6 @@ export default { }) .then(resp => { this.trackStatusUpdate(status); - this.$emit('hide-dropdown'); - const errors = resp.data?.updateAlertStatus?.errors || []; if (errors[0]) { @@ -70,6 +67,8 @@ export default { `${this.$options.i18n.UPDATE_ALERT_STATUS_ERROR} ${errors[0]}`, ); } + + this.$emit('hide-dropdown'); }) .catch(() => { this.$emit( @@ -91,39 +90,30 @@ export default { <template> <div class="dropdown dropdown-menu-selectable" :class="dropdownClass"> - <gl-deprecated-dropdown + <gl-dropdown ref="dropdown" right :text="$options.statuses[alert.status]" class="w-100" toggle-class="dropdown-menu-toggle" - variant="outline-default" @keydown.esc.native="$emit('hide-dropdown')" @hide="$emit('hide-dropdown')" > - <div v-if="isSidebar" class="dropdown-title gl-display-flex"> - <span class="alert-title gl-ml-auto">{{ s__('AlertManagement|Assign status') }}</span> - <gl-button - :aria-label="__('Close')" - variant="link" - class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-black-normal!" - icon="close" - @click="$emit('hide-dropdown')" - /> - </div> + <p v-if="isSidebar" class="gl-new-dropdown-header-top" data-testid="dropdown-header"> + {{ s__('AlertManagement|Assign status') }} + </p> <div class="dropdown-content dropdown-body"> - <gl-deprecated-dropdown-item + <gl-dropdown-item v-for="(label, field) in $options.statuses" :key="field" data-testid="statusDropdownItem" - class="gl-vertical-align-middle" :active="label.toUpperCase() === alert.status" :active-class="'is-active'" @click="updateAlertStatus(label)" > {{ label }} - </gl-deprecated-dropdown-item> + </gl-dropdown-item> </div> - </gl-deprecated-dropdown> + </gl-dropdown> </div> </template> |