Dynamic Dashboards: Fix changing repeat option for panels in default grid (#101300)

public/app/features/dashboard-scene/scene/layout-default/DashboardGridItem.tsx

@@ -1,4 +1,5 @@
 import { isEqual } from 'lodash';
+import { Unsubscribable } from 'rxjs';
 
 import {
   VizPanel,
@@ -49,17 +50,12 @@ export class DashboardGridItem
 
   private _prevRepeatValues?: VariableValueSingle[];
 
+  private _gridSizeSub: Unsubscribable | undefined;
+
   public constructor(state: DashboardGridItemState) {
     super(state);
 
-    this.addActivationHandler(() => this._activationHandler());
-  }
-
-  private _activationHandler() {
-    if (this.state.variableName) {
-      this._subs.add(this.subscribeToState((newState, prevState) => this._handleGridResize(newState, prevState)));
-      this.performRepeat();
-    }
+    this.addActivationHandler(() => this.handleVariableName());
   }
 
   private _handleGridResize(newState: DashboardGridItemState, prevState: DashboardGridItemState) {
@@ -197,6 +193,23 @@ export class DashboardGridItem
     this.publishEvent(new DashboardRepeatsProcessedEvent({ source: this }), true);
   }
 
+  public handleVariableName() {
+    if (this.state.variableName) {
+      if (!this._gridSizeSub) {
+        this._gridSizeSub = this.subscribeToState((newState, prevState) => this._handleGridResize(newState, prevState));
+        this._subs.add(this._gridSizeSub);
+      }
+    } else {
+      if (this._gridSizeSub) {
+        this._gridSizeSub.unsubscribe();
+        this._subs.remove(this._gridSizeSub);
+        this._gridSizeSub = undefined;
+      }
+    }
+
+    this.performRepeat();
+  }
+
   public setRepeatByVariable(variableName: string | undefined) {
     const stateUpdate: Partial<DashboardGridItemState> = { variableName };
 

public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx

@@ -1,4 +1,5 @@
 import { SelectableValue } from '@grafana/data';
+import { sceneGraph, SceneGridLayout } from '@grafana/scenes';
 import { RadioButtonGroup, Select } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
@@ -88,14 +89,24 @@ function MaxPerRowOption({ gridItem }: OptionComponentProps) {
 }
 
 function RepeatByOption({ gridItem }: OptionComponentProps) {
-  const { variableName } = gridItem.useState();
+  const { variableName, width } = gridItem.useState();
 
   return (
     <RepeatRowSelect2
       id="repeat-by-variable-select"
       sceneContext={gridItem}
       repeat={variableName}
-      onChange={(value?: string) => gridItem.setRepeatByVariable(value)}
+      onChange={(value?: string) => {
+        if (value !== variableName) {
+          gridItem.setRepeatByVariable(value);
+          gridItem.handleVariableName();
+
+          if (width !== 24) {
+            gridItem.setState({ width: 24 });
+            sceneGraph.getAncestor(gridItem, SceneGridLayout).forceRender();
+          }
+        }
+      }}
     />
   );
 }