Variables: change VariableEditorList row action Icon to IconButton (#25217)

Fixes #21807

(cherry picked from commit 5d6af607d7)
This commit is contained in:
Harrison Shoff
2020-06-03 17:19:31 +02:00
committed by Marcus Andersson
parent 4a331327b2
commit b6865b3427
@@ -1,5 +1,5 @@
import React, { MouseEvent, PureComponent } from 'react';
import { Icon } from '@grafana/ui';
import { IconButton } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
import EmptyListCTA from '../../../core/components/EmptyListCTA/EmptyListCTA';
@@ -111,9 +111,10 @@ export class VariableEditorList extends PureComponent<Props> {
<td style={{ width: '1%' }}>
{index > 0 && (
<Icon
<IconButton
onClick={event => this.onChangeVariableOrder(event, variable, MoveType.up)}
name="arrow-up"
title="Move variable up"
aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons(
variable.name
)}
@@ -122,9 +123,10 @@ export class VariableEditorList extends PureComponent<Props> {
</td>
<td style={{ width: '1%' }}>
{index < this.props.variables.length - 1 && (
<Icon
<IconButton
onClick={event => this.onChangeVariableOrder(event, variable, MoveType.down)}
name="arrow-down"
title="Move variable down"
aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons(
variable.name
)}
@@ -132,26 +134,24 @@ export class VariableEditorList extends PureComponent<Props> {
)}
</td>
<td style={{ width: '1%' }}>
<a
<IconButton
onClick={event => this.onDuplicateVariable(event, toVariableIdentifier(variable))}
className="btn btn-inverse btn-small"
name="copy"
title="Duplicate variable"
aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(
variable.name
)}
>
Duplicate
</a>
/>
</td>
<td style={{ width: '1%' }}>
<a
<IconButton
onClick={event => this.onRemoveVariable(event, toVariableIdentifier(variable))}
className="btn btn-danger btn-small"
name="trash-alt"
title="Remove variable"
aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(
variable.name
)}
>
<Icon name="times" style={{ marginBottom: 0 }} />
</a>
/>
</td>
</tr>
);