Dynamic Dashboards: Fix navigation to repeated panels and update outline when lazy items repeat (#116030)

Dashboard Outline: Fix navigation to repeated panels and lazy-loaded repeats

- Remove cursor: not-allowed styling from repeated panels in outline
- Add RepeatsUpdatedEvent to notify when panel repeats are populated
- Subscribe to RepeatsUpdatedEvent in DashboardEditPane to refresh outline
- Remove memoization from visibleChildren to ensure outline updates on re-render

public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx

@@ -18,6 +18,7 @@ import {
   NewObjectAddedToCanvasEvent,
   ObjectRemovedFromCanvasEvent,
   ObjectsReorderedOnCanvasEvent,
+  RepeatsUpdatedEvent,
 } from './shared';
 
 export interface DashboardEditPaneState extends SceneObjectState {
@@ -87,6 +88,12 @@ export class DashboardEditPane extends SceneObjectBase<DashboardEditPaneState> {
       })
     );
 
+    this._subs.add(
+      dashboard.subscribeToEvent(RepeatsUpdatedEvent, () => {
+        this.forceRender();
+      })
+    );
+
     if (this.panelEditAction) {
       this.performPanelEditAction(this.panelEditAction);
       this.panelEditAction = undefined;

public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx

@@ -57,12 +57,10 @@ function DashboardOutlineNode({ sceneObject, editPane, isEditing, depth, index }
   const instanceName = elementInfo.instanceName === '' ? noTitleText : elementInfo.instanceName;
   const outlineRename = useOutlineRename(editableElement, isEditing);
   const isContainer = editableElement.getOutlineChildren ? true : false;
-  const visibleChildren = useMemo(() => {
-    const children = editableElement.getOutlineChildren?.(isEditing) ?? [];
-    return isEditing
-      ? children
-      : children.filter((child) => !getEditableElementFor(child)?.getEditableElementInfo().isHidden);
-  }, [editableElement, isEditing]);
+  const outlineChildren = editableElement.getOutlineChildren?.(isEditing) ?? [];
+  const visibleChildren = isEditing
+    ? outlineChildren
+    : outlineChildren.filter((child) => !getEditableElementFor(child)?.getEditableElementInfo().isHidden);
 
   const onNodeClicked = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -258,7 +256,6 @@ function getStyles(theme: GrafanaTheme2) {
     }),
     nodeButtonClone: css({
       color: theme.colors.text.secondary,
-      cursor: 'not-allowed',
     }),
     outlineInput: css({
       border: `1px solid ${theme.components.input.borderColor}`,

public/app/features/dashboard-scene/edit-pane/shared.ts

@@ -84,6 +84,10 @@ export class ConditionalRenderingChangedEvent extends BusEventWithPayload<SceneO
   static type = 'conditional-rendering-changed';
 }
 
+export class RepeatsUpdatedEvent extends BusEventWithPayload<SceneObject> {
+  static type = 'repeats-updated';
+}
+
 export interface DashboardEditActionEventPayload {
   removedObject?: SceneObject;
   addedObject?: SceneObject;

public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItem.tsx

@@ -14,7 +14,7 @@ import {
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 
 import { ConditionalRenderingGroup } from '../../conditional-rendering/group/ConditionalRenderingGroup';
-import { DashboardStateChangedEvent } from '../../edit-pane/shared';
+import { DashboardStateChangedEvent, RepeatsUpdatedEvent } from '../../edit-pane/shared';
 import { getCloneKey, getLocalVariableValueSet } from '../../utils/clone';
 import { getMultiVariableValues } from '../../utils/utils';
 import { scrollCanvasElementIntoView } from '../layouts-shared/scrollCanvasElementIntoView';
@@ -147,6 +147,7 @@ export class AutoGridItem extends SceneObjectBase<AutoGridItemState> implements
 
     this.setState({ repeatedPanels, repeatedConditionalRendering });
     this._prevRepeatValues = values;
+    this.publishEvent(new RepeatsUpdatedEvent(this), true);
   }
 
   public getPanelCount() {

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

@@ -17,7 +17,7 @@ import {
 import { GRID_COLUMN_COUNT } from 'app/core/constants';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 
-import { DashboardStateChangedEvent } from '../../edit-pane/shared';
+import { DashboardStateChangedEvent, RepeatsUpdatedEvent } from '../../edit-pane/shared';
 import { getCloneKey, getLocalVariableValueSet } from '../../utils/clone';
 import { getMultiVariableValues } from '../../utils/utils';
 import { scrollCanvasElementIntoView, scrollIntoView } from '../layouts-shared/scrollCanvasElementIntoView';
@@ -219,6 +219,7 @@ export class DashboardGridItem
     }
 
     this._prevRepeatValues = values;
+    this.publishEvent(new RepeatsUpdatedEvent(this), true);
   }
 
   public handleVariableName() {