Skip to content

N
nexpie-grafana-theme
Commit 0ecc9a57 by Ivana Huckova Committed by GitHub
Options

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

parent 069d718b
Showing with 29 additions and 21 deletions
public/app/features/explore/QueryRow.tsx
...@@ -85,7 +85,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> { ...@@ -85,7 +85,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
this.props.addQueryRow(exploreId, index); this.props.addQueryRow(exploreId, index);
}; };
onClickToggleHiddenQuery = () => { onClickToggleDisabled = () => {
const { exploreId, index, query } = this.props; const { exploreId, index, query } = this.props;
const newQuery = { const newQuery = {
...query, ...query,
...@@ -136,7 +136,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> { ...@@ -136,7 +136,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
const canToggleEditorModes = const canToggleEditorModes =
mode === ExploreMode.Metrics && has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode'); 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] : []; const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : [];
let QueryField; let QueryField;
...@@ -181,10 +181,10 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> { ...@@ -181,10 +181,10 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
</div> </div>
<QueryRowActions <QueryRowActions
canToggleEditorModes={canToggleEditorModes} canToggleEditorModes={canToggleEditorModes}
hideQuery={query.hide} isDisabled={query.hide}
canHide={canHide} isNotStarted={isNotStarted}
onClickToggleEditorMode={this.onClickToggleEditorMode} onClickToggleEditorMode={this.onClickToggleEditorMode}
onClickToggleHiddenQuery={this.onClickToggleHiddenQuery} onClickToggleDisabled={this.onClickToggleDisabled}
onClickAddButton={this.onClickAddButton} onClickAddButton={this.onClickAddButton}
onClickRemoveButton={this.onClickRemoveButton} onClickRemoveButton={this.onClickRemoveButton}
/> />
......
public/app/features/explore/QueryRowActions.test.tsx
...@@ -4,11 +4,11 @@ import { shallow } from 'enzyme'; ...@@ -4,11 +4,11 @@ import { shallow } from 'enzyme';
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: Props = { const props: Props = {
hideQuery: false, isDisabled: false,
canHide: true, isNotStarted: true,
canToggleEditorModes: true, canToggleEditorModes: true,
onClickToggleEditorMode: () => {}, onClickToggleEditorMode: () => {},
onClickToggleHiddenQuery: () => {}, onClickToggleDisabled: () => {},
onClickAddButton: () => {}, onClickAddButton: () => {},
onClickRemoveButton: () => {}, onClickRemoveButton: () => {},
}; };
...@@ -29,11 +29,11 @@ describe('QueryRowActions', () => { ...@@ -29,11 +29,11 @@ describe('QueryRowActions', () => {
expect(wrapper.find({ 'aria-label': 'Edit mode button' })).toHaveLength(0); expect(wrapper.find({ 'aria-label': 'Edit mode button' })).toHaveLength(0);
}); });
it('should change icon to fa-eye-slash when query row result is hidden', () => { 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); expect(wrapper.find('i.fa-eye-slash')).toHaveLength(1);
}); });
it('should change icon to fa-eye when query row result is not hidden', () => { 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); expect(wrapper.find('i.fa-eye')).toHaveLength(1);
}); });
}); });
public/app/features/explore/QueryRowActions.tsx
...@@ -2,10 +2,10 @@ import React from 'react'; ...@@ -2,10 +2,10 @@ import React from 'react';
export type Props = { export type Props = {
canToggleEditorModes: boolean; canToggleEditorModes: boolean;
hideQuery: boolean; isDisabled: boolean;
canHide: boolean; isNotStarted: boolean;
onClickToggleEditorMode: () => void; onClickToggleEditorMode: () => void;
onClickToggleHiddenQuery: () => void; onClickToggleDisabled: () => void;
onClickAddButton: () => void; onClickAddButton: () => void;
onClickRemoveButton: () => void; onClickRemoveButton: () => void;
}; };
...@@ -14,11 +14,11 @@ export function QueryRowActions(props: Props) { ...@@ -14,11 +14,11 @@ export function QueryRowActions(props: Props) {
const { const {
canToggleEditorModes, canToggleEditorModes,
onClickToggleEditorMode, onClickToggleEditorMode,
onClickToggleHiddenQuery, onClickToggleDisabled,
onClickAddButton, onClickAddButton,
onClickRemoveButton, onClickRemoveButton,
hideQuery, isDisabled,
canHide, isNotStarted,
} = props; } = props;
return ( return (
...@@ -35,17 +35,22 @@ export function QueryRowActions(props: Props) { ...@@ -35,17 +35,22 @@ export function QueryRowActions(props: Props) {
</div> </div>
)} )}
<div className="gf-form"> <div className="gf-form">
<button disabled={!canHide} className="gf-form-label gf-form-label--btn" onClick={onClickToggleHiddenQuery}> <button
<i className={hideQuery ? 'fa fa-eye-slash' : 'fa fa-eye'} /> 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> </button>
</div> </div>
<div className="gf-form"> <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" /> <i className="fa fa-plus" />
</button> </button>
</div> </div>
<div className="gf-form"> <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" /> <i className="fa fa-minus" />
</button> </button>
</div> </div>
......
public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap
...@@ -22,8 +22,9 @@ exports[`QueryRowActions should render component 1`] = ` ...@@ -22,8 +22,9 @@ exports[`QueryRowActions should render component 1`] = `
> >
<button <button
className="gf-form-label gf-form-label--btn" className="gf-form-label gf-form-label--btn"
disabled={false} disabled={true}
onClick={[Function]} onClick={[Function]}
title="Disable/enable query"
> >
<i <i
className="fa fa-eye" className="fa fa-eye"
...@@ -36,6 +37,7 @@ exports[`QueryRowActions should render component 1`] = ` ...@@ -36,6 +37,7 @@ exports[`QueryRowActions should render component 1`] = `
<button <button
className="gf-form-label gf-form-label--btn" className="gf-form-label gf-form-label--btn"
onClick={[Function]} onClick={[Function]}
title="Add query"
> >
<i <i
className="fa fa-plus" className="fa fa-plus"
...@@ -48,6 +50,7 @@ exports[`QueryRowActions should render component 1`] = ` ...@@ -48,6 +50,7 @@ exports[`QueryRowActions should render component 1`] = `
<button <button
className="gf-form-label gf-form-label--btn" className="gf-form-label gf-form-label--btn"
onClick={[Function]} onClick={[Function]}
title="Remove query"
> >
<i <i
className="fa fa-minus" className="fa fa-minus"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment