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

Fixes #21807
This commit is contained in:
Harrison Shoff 2020-06-03 07:32:44 -04:00 committed by GitHub
parent 467348bded
commit 5d6af607d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>
);