Commit 9732f906 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch 'lm-replace-buttons-with-group' into 'master'

Replaces separate buttons with button group in error tracking page

See merge request gitlab-org/gitlab!24103
parents f6826053 7dd68e9b
......@@ -13,6 +13,7 @@ import {
GlDropdownDivider,
GlTooltipDirective,
GlPagination,
GlButtonGroup,
} from '@gitlab/ui';
import AccessorUtils from '~/lib/utils/accessor';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -20,12 +21,16 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import { __ } from '~/locale';
import _ from 'underscore';
export const tableDataClass = 'table-col d-flex d-sm-table-cell';
export const tableDataClass = 'table-col d-flex d-sm-table-cell align-items-center';
export default {
FIRST_PAGE: 1,
PREV_PAGE: 1,
NEXT_PAGE: 2,
statusButtons: [
{ status: 'ignored', icon: 'eye-slash', title: __('Ignore') },
{ status: 'resolved', icon: 'check-circle', title: __('Resolve') },
],
fields: [
{
key: 'error',
......@@ -48,20 +53,13 @@ export default {
{
key: 'lastSeen',
label: __('Last seen'),
thClass: '',
thClass: 'w-15p',
tdClass: `${tableDataClass}`,
},
{
key: 'ignore',
label: '',
thClass: 'w-3rem',
tdClass: `${tableDataClass} pl-0`,
},
{
key: 'resolved',
key: 'status',
label: '',
thClass: 'w-3rem',
tdClass: `${tableDataClass} pl-0`,
tdClass: `${tableDataClass} text-right`,
},
{
key: 'details',
......@@ -88,6 +86,7 @@ export default {
Icon,
GlPagination,
TimeAgo,
GlButtonGroup,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -332,25 +331,19 @@ export default {
<time-ago :time="errors.item.lastSeen" class="text-secondary" />
</div>
</template>
<template #cell(ignore)="errors">
<template #cell(status)="errors">
<gl-button-group>
<gl-button
ref="ignoreError"
v-for="button in $options.statusButtons"
:key="button.status"
:ref="button.title.toLowerCase() + 'Error'"
v-gl-tooltip.hover
:title="__('Ignore')"
@click="updateIssueStatus(errors.item.id, 'ignored')"
>
<gl-icon name="eye-slash" :size="12" />
</gl-button>
</template>
<template #cell(resolved)="errors">
<gl-button
ref="resolveError"
v-gl-tooltip
:title="__('Resolve')"
@click="updateIssueStatus(errors.item.id, 'resolved')"
:title="button.title"
@click="updateIssueStatus(errors.item.id, button.status)"
>
<gl-icon name="check-circle" :size="12" />
<gl-icon :name="button.icon" :size="12" />
</gl-button>
</gl-button-group>
</template>
<template #cell(details)="errors">
<gl-button
......
......@@ -239,7 +239,7 @@ describe('ErrorTrackingList', () => {
expect(actions.updateStatus).toHaveBeenCalledWith(
expect.anything(),
{
endpoint: '/project/test/-/error_tracking/3.json',
endpoint: `/project/test/-/error_tracking/${errorsList[0].id}.json`,
redirectUrl: '/error_tracking',
status: 'ignored',
},
......@@ -267,7 +267,7 @@ describe('ErrorTrackingList', () => {
expect(actions.updateStatus).toHaveBeenCalledWith(
expect.anything(),
{
endpoint: '/project/test/-/error_tracking/3.json',
endpoint: `/project/test/-/error_tracking/${errorsList[0].id}.json`,
redirectUrl: '/error_tracking',
status: 'resolved',
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment