Canvas: Update element(s) selection after action (#61204)

public/app/features/canvas/runtime/frame.tsx

@@ -212,6 +212,10 @@ export class FrameState extends ElementState {
         this.scene.byName.set(copy.options.name, copy);
         this.scene.save();
         this.reinitializeMoveable();
+
+        setTimeout(() => {
+          this.scene.targetsToSelect.add(copy.div!);
+        });
         break;
       case LayerActionID.MoveTop:
       case LayerActionID.MoveBottom:

public/app/features/canvas/runtime/scene.tsx

@@ -5,7 +5,7 @@ import { BehaviorSubject, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { first } from 'rxjs/operators';
 import Selecto from 'selecto';
 
-import { GrafanaTheme2, PanelData } from '@grafana/data';
+import { AppEvents, GrafanaTheme2, PanelData } from '@grafana/data';
 import { locationService } from '@grafana/runtime/src';
 import { Portal, stylesFactory } from '@grafana/ui';
 import { config } from 'app/core/config';
@@ -28,6 +28,7 @@ import {
 import { CanvasContextMenu } from 'app/plugins/panel/canvas/CanvasContextMenu';
 import { AnchorPoint, LayerActionID } from 'app/plugins/panel/canvas/types';
 
+import appEvents from '../../../core/app_events';
 import { CanvasPanel } from '../../../plugins/panel/canvas/CanvasPanel';
 import { HorizontalConstraint, Placement, VerticalConstraint } from '../types';
 
@@ -73,6 +74,8 @@ export class Scene {
   readonly editModeEnabled = new BehaviorSubject<boolean>(false);
   subscription: Subscription;
 
+  targetsToSelect = new Set<HTMLDivElement>();
+
   constructor(
     cfg: CanvasFrameOptions,
     enableEditing: boolean,
@@ -564,6 +567,16 @@ export class Scene {
     dest.reinitializeMoveable();
   };
 
+  addToSelection = () => {
+    try {
+      let selection: SelectionParams = { targets: [] };
+      selection.targets = [...this.targetsToSelect];
+      this.select(selection);
+    } catch (error) {
+      appEvents.emit(AppEvents.alertError, ['Unable to add to selection']);
+    }
+  };
+
   render() {
     const canShowContextMenu = this.isPanelEditing || (!this.isPanelEditing && this.isEditingEnabled);
 

public/app/plugins/panel/canvas/CanvasContextMenu.tsx

@@ -215,6 +215,11 @@ export const CanvasContextMenu = ({ scene, panel }: Props) => {
         currentLayer.doAction(actionType, currentSelectedElement);
       });
     });
+
+    setTimeout(() => {
+      scene.addToSelection();
+      scene.targetsToSelect.clear();
+    });
   };
 
   if (isMenuVisible) {

public/app/plugins/panel/canvas/utils.ts

@@ -94,7 +94,8 @@ export function onAddItem(sel: SelectableValue<string>, rootLayer: FrameState |
     newElement.updateData(rootLayer.scene.context);
     rootLayer.elements.push(newElement);
     rootLayer.scene.save();
-
     rootLayer.reinitializeMoveable();
+
+    setTimeout(() => doSelect(rootLayer.scene, newElement));
   }
 }