diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx index 64f0c774ea8..1f5a25013be 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx +++ b/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 { }) ); + this._subs.add( + dashboard.subscribeToEvent(RepeatsUpdatedEvent, () => { + this.forceRender(); + }) + ); + if (this.panelEditAction) { this.performPanelEditAction(this.panelEditAction); this.panelEditAction = undefined; diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx index d368de82c65..616f7c715f1 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx +++ b/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}`, diff --git a/public/app/features/dashboard-scene/edit-pane/shared.ts b/public/app/features/dashboard-scene/edit-pane/shared.ts index 2a60fb33546..e17c314e1c7 100644 --- a/public/app/features/dashboard-scene/edit-pane/shared.ts +++ b/public/app/features/dashboard-scene/edit-pane/shared.ts @@ -84,6 +84,10 @@ export class ConditionalRenderingChangedEvent extends BusEventWithPayload { + static type = 'repeats-updated'; +} + export interface DashboardEditActionEventPayload { removedObject?: SceneObject; addedObject?: SceneObject; diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItem.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItem.tsx index 3b7b6cf03d2..3b76452aec0 100644 --- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItem.tsx +++ b/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 implements this.setState({ repeatedPanels, repeatedConditionalRendering }); this._prevRepeatValues = values; + this.publishEvent(new RepeatsUpdatedEvent(this), true); } public getPanelCount() { diff --git a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItem.tsx b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItem.tsx index 2a2c741c425..8eed7b8fdf1 100644 --- a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItem.tsx +++ b/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() {