mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Variables: change VariableEditorList row action Icon to IconButton (#25217)
Fixes #21807
This commit is contained in:
parent
467348bded
commit
5d6af607d7
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user