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

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

Browse Source
This commit is contained in:
Ivan Ortega Alba
2022-07-04 12:32:21 +02:00
committed by GitHub
parent e781ef582f
commit f8ac160545
3 changed files with 13 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.betterer.results
View File

@@ -4655,12 +4655,11 @@ exports[`better eslint`] = {
[207, 40, 20, "Do not use any type assertions.", "2225958749"],
[207, 57, 3, "Unexpected any. Specify a different type.", "193409811"]
],
"public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx:3204880669": [
"public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx:3328105205": [
[9, 40, 3, "Unexpected any. Specify a different type.", "193409811"]
],
"public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx:2916737379": [
[19, 69, 3, "Unexpected any. Specify a different type.", "193409811"],
[46, 30, 3, "Unexpected any. Specify a different type.", "193409811"]
"public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx:3890988818": [
[19, 69, 3, "Unexpected any. Specify a different type.", "193409811"]
],
"public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx:1365286122": [
[12, 17, 3, "Unexpected any. Specify a different type.", "193409811"]

10
public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
View File

@@ -29,12 +29,16 @@ describe('DashboardRow', () => {
expect(row).not.toHaveClass('dashboard-row--collapsed');
});
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');
});
it('Should collapse after clicking title', async () => {
render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
await userEvent.click(screen.getByTestId('data-testid dashboard-row-title-'));
const row = screen.getByTestId('dashboard-row-container');
expect(row).toHaveClass('dashboard-row--collapsed');
expect(dashboardMock.toggleRow.mock.calls).toHaveLength(1);
});

17
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
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');
@@ -92,7 +81,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
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>