Canvas: Remove deleted connections from source (#65321)

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

@@ -6,6 +6,7 @@ import { notFoundItem } from 'app/features/canvas/elements/notFound';
 import { DimensionContext } from 'app/features/dimensions';
 import { LayerActionID } from 'app/plugins/panel/canvas/types';
 
+import { updateConnectionsForSource } from '../../../plugins/panel/canvas/utils';
 import { CanvasElementItem } from '../element';
 import { HorizontalConstraint, Placement, VerticalConstraint } from '../types';
 
@@ -114,6 +115,7 @@ export class FrameState extends ElementState {
     switch (action) {
       case LayerActionID.Delete:
         this.elements = this.elements.filter((e) => e !== element);
+        updateConnectionsForSource(element, this.scene);
         this.scene.byName.delete(element.options.name);
         this.scene.save();
         this.reinitializeMoveable();

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

@@ -161,3 +161,12 @@ export function getConnections(sceneByName: Map<string, ElementState>) {
 export function getConnectionsByTarget(element: ElementState, scene: Scene) {
   return getConnections(scene.byName).filter((connection) => connection.target === element);
 }
+
+export function updateConnectionsForSource(element: ElementState, scene: Scene) {
+  const targetConnections = getConnectionsByTarget(element, scene);
+  targetConnections.forEach((connection) => {
+    const sourceConnections = connection.source.options.connections?.splice(0) ?? [];
+    const connections = sourceConnections.filter((con) => con.targetName !== element.getName());
+    connection.source.onChange({ ...connection.source.options, connections });
+  });
+}