DashboardScene: De-select object after they are removed (#101940)

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

@@ -21,7 +21,7 @@ import { DashboardAddPane } from './DashboardAddPane';
 import { DashboardOutline } from './DashboardOutline';
 import { ElementEditPane } from './ElementEditPane';
 import { ElementSelection } from './ElementSelection';
-import { NewObjectAddedToCanvasEvent } from './shared';
+import { NewObjectAddedToCanvasEvent, ObjectRemovedFromCanvasEvent } from './shared';
 import { useEditableElement } from './useEditableElement';
 
 export interface DashboardEditPaneState extends SceneObjectState {
@@ -53,6 +53,12 @@ export class DashboardEditPane extends SceneObjectBase<DashboardEditPaneState> {
         this.newObjectAddedToCanvas(payload);
       })
     );
+
+    this._subs.add(
+      dashboard.subscribeToEvent(ObjectRemovedFromCanvasEvent, ({ payload }) => {
+        this.clearSelection();
+      })
+    );
   }
 
   public enableSelection() {

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

@@ -58,3 +58,7 @@ export function hasEditableElement(sceneObj: SceneObject | undefined): boolean {
 export class NewObjectAddedToCanvasEvent extends BusEventWithPayload<SceneObject> {
   static type = 'new-object-added-to-canvas';
 }
+
+export class ObjectRemovedFromCanvasEvent extends BusEventWithPayload<SceneObject> {
+  static type = 'object-removed-from-canvas';
+}

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

@@ -15,7 +15,7 @@ import { GRID_COLUMN_COUNT } from 'app/core/constants';
 import { t } from 'app/core/internationalization';
 import DashboardEmpty from 'app/features/dashboard/dashgrid/DashboardEmpty';
 
-import { NewObjectAddedToCanvasEvent } from '../../edit-pane/shared';
+import { NewObjectAddedToCanvasEvent, ObjectRemovedFromCanvasEvent } from '../../edit-pane/shared';
 import { isClonedKey, joinCloneKeys } from '../../utils/clone';
 import { dashboardSceneGraph } from '../../utils/dashboardSceneGraph';
 import {
@@ -108,6 +108,8 @@ export class DefaultGridLayoutManager
     this.state.grid.setState({
       children: layout.state.children.filter((child) => child !== gridItem),
     });
+
+    this.publishEvent(new ObjectRemovedFromCanvasEvent(panel), true);
   }
 
   public duplicatePanel(vizPanel: VizPanel) {

public/app/features/dashboard-scene/scene/layout-responsive-grid/ResponsiveGridLayoutManager.tsx

@@ -2,7 +2,7 @@ import { SceneComponentProps, SceneCSSGridLayout, SceneObjectBase, SceneObjectSt
 import { t } from 'app/core/internationalization';
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 
-import { NewObjectAddedToCanvasEvent } from '../../edit-pane/shared';
+import { NewObjectAddedToCanvasEvent, ObjectRemovedFromCanvasEvent } from '../../edit-pane/shared';
 import { joinCloneKeys } from '../../utils/clone';
 import { dashboardSceneGraph } from '../../utils/dashboardSceneGraph';
 import { getGridItemKeyForPanelId, getPanelIdForVizPanel, getVizPanelKeyForPanelId } from '../../utils/utils';
@@ -68,6 +68,7 @@ export class ResponsiveGridLayoutManager
   public removePanel(panel: VizPanel) {
     const element = panel.parent;
     this.state.layout.setState({ children: this.state.layout.state.children.filter((child) => child !== element) });
+    this.publishEvent(new ObjectRemovedFromCanvasEvent(panel), true);
   }
 
   public duplicatePanel(panel: VizPanel) {

public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx

@@ -1,7 +1,7 @@
 import { SceneGridItemLike, SceneGridRow, SceneObjectBase, SceneObjectState, VizPanel } from '@grafana/scenes';
 import { t } from 'app/core/internationalization';
 
-import { NewObjectAddedToCanvasEvent } from '../../edit-pane/shared';
+import { NewObjectAddedToCanvasEvent, ObjectRemovedFromCanvasEvent } from '../../edit-pane/shared';
 import { isClonedKey } from '../../utils/clone';
 import { dashboardSceneGraph } from '../../utils/dashboardSceneGraph';
 import { DashboardGridItem } from '../layout-default/DashboardGridItem';
@@ -128,6 +128,7 @@ export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> i
   public removeRow(row: RowItem) {
     const rows = this.state.rows.filter((r) => r !== row);
     this.setState({ rows: rows.length === 0 ? [new RowItem()] : rows });
+    this.publishEvent(new ObjectRemovedFromCanvasEvent(row), true);
   }
 
   public moveRowUp(row: RowItem) {

public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx

@@ -7,6 +7,7 @@ import {
 } from '@grafana/scenes';
 import { t } from 'app/core/internationalization';
 
+import { ObjectRemovedFromCanvasEvent } from '../../edit-pane/shared';
 import { DashboardLayoutManager } from '../types/DashboardLayoutManager';
 import { LayoutRegistryItem } from '../types/LayoutRegistryItem';
 
@@ -115,6 +116,7 @@ export class TabsLayoutManager extends SceneObjectBase<TabsLayoutManagerState> i
     if (currentTab === tabToRemove) {
       const nextTabIndex = this.state.currentTabIndex > 0 ? this.state.currentTabIndex - 1 : 0;
       this.setState({ tabs: this.state.tabs.filter((t) => t !== tabToRemove), currentTabIndex: nextTabIndex });
+      this.publishEvent(new ObjectRemovedFromCanvasEvent(tabToRemove), true);
       return;
     }
 
@@ -122,6 +124,7 @@ export class TabsLayoutManager extends SceneObjectBase<TabsLayoutManagerState> i
     const tabs = filteredTab.length === 0 ? [new TabItem()] : filteredTab;
 
     this.setState({ tabs, currentTabIndex: 0 });
+    this.publishEvent(new ObjectRemovedFromCanvasEvent(tabToRemove), true);
   }
 
   public addTabBefore(tab: TabItem) {