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 React, { MouseEvent, PureComponent } from 'react';
import { Icon } from '@grafana/ui'; import { IconButton } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import EmptyListCTA from '../../../core/components/EmptyListCTA/EmptyListCTA'; import EmptyListCTA from '../../../core/components/EmptyListCTA/EmptyListCTA';
@ -111,9 +111,10 @@ export class VariableEditorList extends PureComponent<Props> {
<td style={{ width: '1%' }}> <td style={{ width: '1%' }}>
{index > 0 && ( {index > 0 && (
<Icon <IconButton
onClick={event => this.onChangeVariableOrder(event, variable, MoveType.up)} onClick={event => this.onChangeVariableOrder(event, variable, MoveType.up)}
name="arrow-up" name="arrow-up"
title="Move variable up"
aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons( aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons(
variable.name variable.name
)} )}
@ -122,9 +123,10 @@ export class VariableEditorList extends PureComponent<Props> {
</td> </td>
<td style={{ width: '1%' }}> <td style={{ width: '1%' }}>
{index < this.props.variables.length - 1 && ( {index < this.props.variables.length - 1 && (
<Icon <IconButton
onClick={event => this.onChangeVariableOrder(event, variable, MoveType.down)} onClick={event => this.onChangeVariableOrder(event, variable, MoveType.down)}
name="arrow-down" name="arrow-down"
title="Move variable down"
aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons( aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons(
variable.name variable.name
)} )}
@ -132,26 +134,24 @@ export class VariableEditorList extends PureComponent<Props> {
)} )}
</td> </td>
<td style={{ width: '1%' }}> <td style={{ width: '1%' }}>
<a <IconButton
onClick={event => this.onDuplicateVariable(event, toVariableIdentifier(variable))} 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( aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(
variable.name variable.name
)} )}
> />
Duplicate
</a>
</td> </td>
<td style={{ width: '1%' }}> <td style={{ width: '1%' }}>
<a <IconButton
onClick={event => this.onRemoveVariable(event, toVariableIdentifier(variable))} 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( aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(
variable.name variable.name
)} )}
> />
<Icon name="times" style={{ marginBottom: 0 }} />
</a>
</td> </td>
</tr> </tr>
); );