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

.betterer.results

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

public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx

@@ -29,12 +29,16 @@ describe('DashboardRow', () => {
     expect(row).not.toHaveClass('dashboard-row--collapsed');
   });
 
-  it('Should collapse after clicking title', async () => {
+  it('Should collapse when the panel is collapsed', async () => {
+    const panel = new PanelModel({ collapsed: true });
     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');
+  });
+
+  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

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