public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DashboardRow: collapse shortcut doesn't allow to move the row (#51589) (#51713)

Browse Source 
(cherry picked from commit f8ac160545)
This commit is contained in:
Ivan Ortega Alba
2022-07-05 09:12:25 +02:00
committed by GitHub
parent d990511121
commit 5860091328
3 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.betterer.results
+3 -4
View File
@@ -140,8 +140,8 @@ exports[`no enzyme tests`] = {
"public/app/features/api-keys/ApiKeysAddedModal.test.tsx:3246264379": [
[0, 20, 13, "RegExp match", "2409514259"]
],
"public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx:1463123173": [
[0, 17, 13, "RegExp match", "2409514259"]
"public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx:1538132660": [
[2, 17, 13, "RegExp match", "2409514259"]
],
"public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx:2357087833": [
[0, 35, 13, "RegExp match", "2409514259"]
@@ -4339,8 +4339,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
+11 -3
View File
@@ -1,3 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { mount } from 'enzyme';
import React from 'react';
@@ -27,10 +29,16 @@ describe('DashboardRow', () => {
expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(0);
});
it('Should collapse after clicking title', () => {
wrapper.find('.dashboard-row__title').simulate('click');
it('Should collapse when the panel is collapsed', async () => {
const panel = new PanelModel({ collapsed: true });
render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
const row = screen.getByTestId('dashboard-row-container');
expect(row).toHaveClass('dashboard-row--collapsed');
});
expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(1);
it('Should collapse after clicking title', async () => {
render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
await userEvent.click(screen.getByTestId('data-testid dashboard-row-title-'));
expect(dashboardMock.toggleRow.mock.calls).toHaveLength(1);
});
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
+4 -15
View File
@@ -19,13 +19,6 @@ export interface DashboardRowProps {
export class DashboardRow extends React.Component<DashboardRowProps, any> {
sub?: Unsubscribable;
constructor(props: DashboardRowProps) {
super(props);
this.state = {
collapsed: this.props.panel.collapsed,
};
}
componentDidMount() {
this.sub = this.props.dashboard.events.subscribe(RefreshEvent, this.onVariableUpdated);
@@ -43,10 +36,6 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
onToggle = () => {
this.props.dashboard.toggleRow(this.props.panel);
this.setState((prevState: any) => {
return { collapsed: !prevState.collapsed };
});
};
onUpdate = (title: string, repeat?: string | null) => {
@@ -77,7 +66,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
render() {
const classes = classNames({
'dashboard-row': true,
'dashboard-row--collapsed': this.state.collapsed,
'dashboard-row--collapsed': this.props.panel.collapsed,
});
const title = getTemplateSrv().replace(this.props.panel.title, this.props.panel.scopedVars, 'text');
@@ -86,13 +75,13 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
const canEdit = this.props.dashboard.meta.canEdit === true;
return (
<div className={classes}>
<div className={classes} data-testid="dashboard-row-container">
<a
className="dashboard-row__title pointer"
data-testid={selectors.components.DashboardRow.title(title)}
onClick={this.onToggle}
>
<Icon name={this.state.collapsed ? 'angle-right' : 'angle-down'} />
<Icon name={this.props.panel.collapsed ? 'angle-right' : 'angle-down'} />
{title}
<span className="dashboard-row__panel_count">
({count} {panels})
@@ -110,7 +99,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
</a>
</div>
)}
{this.state.collapsed === true && (
{this.props.panel.collapsed === true && (
<div className="dashboard-row__toggle-target" onClick={this.onToggle}>
&nbsp;
</div>