Explore: Add titles to query row action buttons (#20128)

This commit is contained in:
Ivana Huckova 2019-11-01 14:48:35 +01:00 committed by GitHub
parent 069d718b84
commit 0ecc9a57f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 21 deletions

View File

@ -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}
/>

View File

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

View File

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

View File

@ -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"