IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Make QueryEditor not collapsable (#70112)

Browse Source 
* Add option to make QueryEditor not collapsable

* Make QueryEditor not collapsable in Alerting

* Change query editor border to weak

The medium border is really only for inputs, everything else should use weak border

* Add tests
This commit is contained in:
Virginia Cepeda 2023-06-16 15:14:00 -03:00 committed by GitHub
parent 934ba1aaa1
commit 160ff360c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 61 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@ -20,6 +20,7 @@ export interface QueryOperationRowProps {
children: React.ReactNode;
isOpen?: boolean;
draggable?: boolean;
collapsable?: boolean;
disabled?: boolean;
}
@ -41,6 +42,7 @@ export function QueryOperationRow({
isOpen,
disabled,
draggable,
collapsable,
index,
id,
}: QueryOperationRowProps) {
@ -106,6 +108,7 @@ export function QueryOperationRow({
actionsElement={actionsElement}
disabled={disabled}
draggable
collapsable={collapsable}
dragHandleProps={provided.dragHandleProps}
headerElement={headerElementRendered}
isContentVisible={isContentVisible}
@ -130,6 +133,7 @@ export function QueryOperationRow({
actionsElement={actionsElement}
disabled={disabled}
draggable={false}
collapsable={collapsable}
headerElement={headerElementRendered}
isContentVisible={isContentVisible}
onRowToggle={onRowToggle}

34
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.test.tsx Normal file
View File

@ -0,0 +1,34 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { QueryOperationRowHeader, QueryOperationRowHeaderProps } from './QueryOperationRowHeader';
const setup = (propOverrides?: Partial<QueryOperationRowHeaderProps>) => {
const props: QueryOperationRowHeaderProps = {
title: 'test-title',
draggable: true,
isContentVisible: true,
id: 'test-id',
onRowToggle: jest.fn(),
reportDragMousePosition: jest.fn(),
...propOverrides,
};
return render(<QueryOperationRowHeader {...props}></QueryOperationRowHeader>);
};
describe('QueryOperationRowHeader', () => {
test('renders without exploding', () => {
expect(() => setup()).not.toThrow();
});
describe('collapsable property', () => {
test('should show the button to collapse the query row by default', () => {
setup();
expect(screen.getByLabelText('toggle collapse and expand query row')).toBeInTheDocument();
});
test('should hide the button to collapse the query row when collapsable is set as false', () => {
setup({ collapsable: false });
expect(screen.queryByLabelText('toggle collapse and expand query row')).not.toBeInTheDocument();
});
});
});

24
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -5,10 +5,11 @@ import { DraggableProvided } from 'react-beautiful-dnd';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, IconButton, useStyles2 } from '@grafana/ui';
interface QueryOperationRowHeaderProps {
export interface QueryOperationRowHeaderProps {
actionsElement?: React.ReactNode;
disabled?: boolean;
draggable: boolean;
collapsable?: boolean;
dragHandleProps?: DraggableProvided['dragHandleProps'];
headerElement?: React.ReactNode;
isContentVisible: boolean;
@ -22,6 +23,7 @@ export const QueryOperationRowHeader = ({
actionsElement,
disabled,
draggable,
collapsable = true,
dragHandleProps,
headerElement,
isContentVisible,
@ -35,15 +37,17 @@ export const QueryOperationRowHeader = ({
return (
<div className={styles.header}>
<div className={styles.column}>
<IconButton
name={isContentVisible ? 'angle-down' : 'angle-right'}
aria-label="toggle collapse and expand query row"
tooltip={isContentVisible ? 'Collapse query row' : 'Expand query row'}
className={styles.collapseIcon}
onClick={onRowToggle}
aria-expanded={isContentVisible}
aria-controls={id}
/>
{collapsable && (
<IconButton
name={isContentVisible ? 'angle-down' : 'angle-right'}
aria-label="toggle collapse and expand query row"
tooltip={isContentVisible ? 'Collapse query row' : 'Expand query row'}
className={styles.collapseIcon}
onClick={onRowToggle}
aria-expanded={isContentVisible}
aria-controls={id}
/>
)}
{title && (
// disabling the a11y rules here as the IconButton above handles keyboard interactions
// this is just to provide a better experience for mouse users

7
public/app/features/alerting/unified/components/expressions/Expression.tsx
View File

@ -396,8 +396,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
expression: {
wrapper: css`
display: flex;
border: solid 1px ${theme.colors.border.medium};
border: solid 1px ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius()};
max-width: 640px;
`,
@ -475,13 +474,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
background: ${theme.colors.background.secondary};
padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
border-bottom: solid 1px ${theme.colors.border.medium};
border-bottom: solid 1px ${theme.colors.border.weak};
`,
},
footer: css`
background: ${theme.colors.background.secondary};
padding: ${theme.spacing(1)};
border-top: solid 1px ${theme.colors.border.medium};
border-top: solid 1px ${theme.colors.border.weak};
`,
draggableIcon: css`
cursor: grab;

2
public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
View File

@ -260,7 +260,7 @@ const DatasourceNotFound = ({ index, onUpdateDatasource, onRemoveQuery, model }:
return (
<EmptyQueryWrapper>
<QueryOperationRow title={refId} draggable index={index} id={refId} isOpen>
<QueryOperationRow title={refId} draggable index={index} id={refId} isOpen collapsable={false}>
<Card>
<Card.Heading>This datasource has been removed</Card.Heading>
<Card.Description>

3
public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
View File

@ -151,6 +151,7 @@ export const QueryWrapper = ({
<div className={styles.wrapper}>
<QueryEditorRow<DataQuery>
alerting
collapsable={false}
dataSource={dsSettings}
onDataSourceLoaded={setDsInstance}
onChangeDataSource={(settings) => onChangeDataSource(settings, index)}
@ -237,7 +238,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
label: AlertingQueryWrapper;
margin-bottom: ${theme.spacing(1)};
border: 1px solid ${theme.colors.border.medium};
border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius(1)};
`,
queryOptions: css`

4
public/app/features/query/components/QueryEditorRow.tsx
View File

@ -64,6 +64,7 @@ interface Props<TQuery extends DataQuery> {
onQueryCopied?: () => void;
onQueryRemoved?: () => void;
onQueryToggled?: (queryStatus?: boolean | undefined) => void;
collapsable?: boolean;
}
interface State<TQuery extends DataQuery> {
@ -491,7 +492,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
};
render() {
const { query, index, visualization } = this.props;
const { query, index, visualization, collapsable } = this.props;
const { datasource, showingHelp, data } = this.state;
const isDisabled = query.hide;
@ -512,6 +513,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
<QueryOperationRow
id={this.id}
draggable={true}
collapsable={collapsable}
index={index}
headerElement={this.renderHeader}
actions={this.renderActions}