mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Explore: Add titles to query row action buttons (#20128)
This commit is contained in:
parent
069d718b84
commit
0ecc9a57f1
@ -85,7 +85,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
|
||||
this.props.addQueryRow(exploreId, index);
|
||||
};
|
||||
|
||||
onClickToggleHiddenQuery = () => {
|
||||
onClickToggleDisabled = () => {
|
||||
const { exploreId, index, query } = this.props;
|
||||
const newQuery = {
|
||||
...query,
|
||||
@ -136,7 +136,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
|
||||
|
||||
const canToggleEditorModes =
|
||||
mode === ExploreMode.Metrics && has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode');
|
||||
const canHide = queryResponse.state !== LoadingState.NotStarted;
|
||||
const isNotStarted = queryResponse.state === LoadingState.NotStarted;
|
||||
const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : [];
|
||||
let QueryField;
|
||||
|
||||
@ -181,10 +181,10 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
|
||||
</div>
|
||||
<QueryRowActions
|
||||
canToggleEditorModes={canToggleEditorModes}
|
||||
hideQuery={query.hide}
|
||||
canHide={canHide}
|
||||
isDisabled={query.hide}
|
||||
isNotStarted={isNotStarted}
|
||||
onClickToggleEditorMode={this.onClickToggleEditorMode}
|
||||
onClickToggleHiddenQuery={this.onClickToggleHiddenQuery}
|
||||
onClickToggleDisabled={this.onClickToggleDisabled}
|
||||
onClickAddButton={this.onClickAddButton}
|
||||
onClickRemoveButton={this.onClickRemoveButton}
|
||||
/>
|
||||
|
@ -4,11 +4,11 @@ import { shallow } from 'enzyme';
|
||||
|
||||
const setup = (propOverrides?: object) => {
|
||||
const props: Props = {
|
||||
hideQuery: false,
|
||||
canHide: true,
|
||||
isDisabled: false,
|
||||
isNotStarted: true,
|
||||
canToggleEditorModes: true,
|
||||
onClickToggleEditorMode: () => {},
|
||||
onClickToggleHiddenQuery: () => {},
|
||||
onClickToggleDisabled: () => {},
|
||||
onClickAddButton: () => {},
|
||||
onClickRemoveButton: () => {},
|
||||
};
|
||||
@ -29,11 +29,11 @@ describe('QueryRowActions', () => {
|
||||
expect(wrapper.find({ 'aria-label': 'Edit mode button' })).toHaveLength(0);
|
||||
});
|
||||
it('should change icon to fa-eye-slash when query row result is hidden', () => {
|
||||
const wrapper = setup({ hideQuery: true });
|
||||
const wrapper = setup({ isDisabled: true });
|
||||
expect(wrapper.find('i.fa-eye-slash')).toHaveLength(1);
|
||||
});
|
||||
it('should change icon to fa-eye when query row result is not hidden', () => {
|
||||
const wrapper = setup({ hideQuery: false });
|
||||
const wrapper = setup({ isDisabled: false });
|
||||
expect(wrapper.find('i.fa-eye')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
@ -2,10 +2,10 @@ import React from 'react';
|
||||
|
||||
export type Props = {
|
||||
canToggleEditorModes: boolean;
|
||||
hideQuery: boolean;
|
||||
canHide: boolean;
|
||||
isDisabled: boolean;
|
||||
isNotStarted: boolean;
|
||||
onClickToggleEditorMode: () => void;
|
||||
onClickToggleHiddenQuery: () => void;
|
||||
onClickToggleDisabled: () => void;
|
||||
onClickAddButton: () => void;
|
||||
onClickRemoveButton: () => void;
|
||||
};
|
||||
@ -14,11 +14,11 @@ export function QueryRowActions(props: Props) {
|
||||
const {
|
||||
canToggleEditorModes,
|
||||
onClickToggleEditorMode,
|
||||
onClickToggleHiddenQuery,
|
||||
onClickToggleDisabled,
|
||||
onClickAddButton,
|
||||
onClickRemoveButton,
|
||||
hideQuery,
|
||||
canHide,
|
||||
isDisabled,
|
||||
isNotStarted,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
@ -35,17 +35,22 @@ export function QueryRowActions(props: Props) {
|
||||
</div>
|
||||
)}
|
||||
<div className="gf-form">
|
||||
<button disabled={!canHide} className="gf-form-label gf-form-label--btn" onClick={onClickToggleHiddenQuery}>
|
||||
<i className={hideQuery ? 'fa fa-eye-slash' : 'fa fa-eye'} />
|
||||
<button
|
||||
disabled={isNotStarted}
|
||||
className="gf-form-label gf-form-label--btn"
|
||||
onClick={onClickToggleDisabled}
|
||||
title="Disable/enable query"
|
||||
>
|
||||
<i className={isDisabled ? 'fa fa-eye-slash' : 'fa fa-eye'} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<button className="gf-form-label gf-form-label--btn" onClick={onClickAddButton}>
|
||||
<button className="gf-form-label gf-form-label--btn" onClick={onClickAddButton} title="Add query">
|
||||
<i className="fa fa-plus" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<button className="gf-form-label gf-form-label--btn" onClick={onClickRemoveButton}>
|
||||
<button className="gf-form-label gf-form-label--btn" onClick={onClickRemoveButton} title="Remove query">
|
||||
<i className="fa fa-minus" />
|
||||
</button>
|
||||
</div>
|
||||
|
@ -22,8 +22,9 @@ exports[`QueryRowActions should render component 1`] = `
|
||||
>
|
||||
<button
|
||||
className="gf-form-label gf-form-label--btn"
|
||||
disabled={false}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
title="Disable/enable query"
|
||||
>
|
||||
<i
|
||||
className="fa fa-eye"
|
||||
@ -36,6 +37,7 @@ exports[`QueryRowActions should render component 1`] = `
|
||||
<button
|
||||
className="gf-form-label gf-form-label--btn"
|
||||
onClick={[Function]}
|
||||
title="Add query"
|
||||
>
|
||||
<i
|
||||
className="fa fa-plus"
|
||||
@ -48,6 +50,7 @@ exports[`QueryRowActions should render component 1`] = `
|
||||
<button
|
||||
className="gf-form-label gf-form-label--btn"
|
||||
onClick={[Function]}
|
||||
title="Remove query"
|
||||
>
|
||||
<i
|
||||
className="fa fa-minus"
|
||||
|
Loading…
Reference in New Issue
Block a user