From 42bbaf7286a989cfba57670f8a971378d4ab354d Mon Sep 17 00:00:00 2001 From: Bogdan Matei Date: Mon, 17 Nov 2025 11:14:06 +0200 Subject: [PATCH] Remove drop target from tab and row --- .../scene/layout-rows/RowItem.tsx | 56 +---------------- .../scene/layout-rows/RowItemRenderer.tsx | 6 +- .../scene/layout-tabs/TabItem.tsx | 62 +------------------ .../scene/layout-tabs/TabItemRenderer.tsx | 13 ++-- 4 files changed, 10 insertions(+), 127 deletions(-) diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx index 4568db703d0..fa4c715e660 100644 --- a/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx +++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx @@ -1,16 +1,7 @@ import React from 'react'; import { t } from '@grafana/i18n'; -import { logWarning } from '@grafana/runtime'; -import { - sceneGraph, - SceneObject, - SceneObjectBase, - SceneObjectState, - VariableDependencyConfig, - SceneGridItemLike, - SceneGridLayout, -} from '@grafana/scenes'; +import { sceneGraph, SceneObject, SceneObjectBase, SceneObjectState, VariableDependencyConfig } from '@grafana/scenes'; import { RowsLayoutRowKind } from '@grafana/schema/dist/esm/schema/dashboard/v2'; import { appEvents } from 'app/core/app_events'; import { LS_ROW_COPY_KEY } from 'app/core/constants'; @@ -22,15 +13,10 @@ import { ConditionalRenderingGroup } from '../../conditional-rendering/group/Con import { serializeRow } from '../../serialization/layoutSerializers/RowsLayoutSerializer'; import { getElements } from '../../serialization/layoutSerializers/utils'; import { getDashboardSceneFor } from '../../utils/utils'; -import { AutoGridItem } from '../layout-auto-grid/AutoGridItem'; -import { AutoGridLayout } from '../layout-auto-grid/AutoGridLayout'; import { AutoGridLayoutManager } from '../layout-auto-grid/AutoGridLayoutManager'; -import { DashboardGridItem } from '../layout-default/DashboardGridItem'; import { clearClipboard } from '../layouts-shared/paste'; import { scrollCanvasElementIntoView } from '../layouts-shared/scrollCanvasElementIntoView'; import { BulkActionElement } from '../types/BulkActionElement'; -import { DashboardDropTarget } from '../types/DashboardDropTarget'; -import { isDashboardLayoutGrid } from '../types/DashboardLayoutGrid'; import { DashboardLayoutManager } from '../types/DashboardLayoutManager'; import { EditableDashboardElement, EditableDashboardElementInfo } from '../types/EditableDashboardElement'; import { LayoutParent } from '../types/LayoutParent'; @@ -56,7 +42,7 @@ export interface RowItemState extends SceneObjectState { export class RowItem extends SceneObjectBase - implements LayoutParent, BulkActionElement, EditableDashboardElement, DashboardDropTarget + implements LayoutParent, BulkActionElement, EditableDashboardElement { public static Component = RowItemRenderer; @@ -168,44 +154,6 @@ export class RowItem store.set(LS_ROW_COPY_KEY, JSON.stringify({ elements, row: this.serialize() })); } - public setIsDropTarget(isDropTarget: boolean) { - if (!!this.state.isDropTarget !== isDropTarget) { - this.setState({ isDropTarget }); - } - } - - public draggedGridItemOutside?(gridItem: SceneGridItemLike): void { - // Remove from source layout - if (gridItem instanceof DashboardGridItem || gridItem instanceof AutoGridItem) { - const layout = gridItem.parent; - if (gridItem instanceof DashboardGridItem && layout instanceof SceneGridLayout) { - const newChildren = layout.state.children.filter((child) => child !== gridItem); - layout.setState({ children: newChildren }); - } else if (gridItem instanceof AutoGridItem && layout instanceof AutoGridLayout) { - const newChildren = layout.state.children.filter((child) => child !== gridItem); - layout.setState({ children: newChildren }); - } else { - const warningMessage = 'Grid item has unexpected parent type'; - console.warn(warningMessage); - logWarning(warningMessage); - } - } - this.setIsDropTarget(false); - } - - public draggedGridItemInside(gridItem: SceneGridItemLike): void { - const layout = this.getLayout(); - - if (isDashboardLayoutGrid(layout)) { - layout.addGridItem(gridItem); - } else { - const warningMessage = 'Layout manager does not support addGridItem'; - console.warn(warningMessage); - logWarning(warningMessage); - } - this.setIsDropTarget(false); - } - public onChangeTitle(title: string) { this.setState({ title }); } diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx index d35eb19c33c..43a22d09e21 100644 --- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx @@ -17,7 +17,7 @@ import { useSoloPanelContext } from '../SoloPanelContext'; import { RowItem } from './RowItem'; export function RowItemRenderer({ model }: SceneComponentProps) { - const { layout, collapse: isCollapsed, fillScreen, hideHeader: isHeaderHidden, isDropTarget, key } = model.useState(); + const { layout, collapse: isCollapsed, fillScreen, hideHeader: isHeaderHidden, key } = model.useState(); const isClone = isRepeatCloneOrChildOf(model); const { isEditing } = useDashboardState(model); const [isConditionallyHidden, conditionalRenderingClass, conditionalRenderingOverlay] = @@ -82,7 +82,6 @@ export function RowItemRenderer({ model }: SceneComponentProps) { dragProvided.innerRef(ref); model.containerRef.current = ref; }} - data-dashboard-drop-target-key={model.state.key} className={cx( styles.wrapper, !isCollapsed && styles.wrapperNotCollapsed, @@ -91,8 +90,7 @@ export function RowItemRenderer({ model }: SceneComponentProps) { shouldGrow && styles.wrapperGrow, conditionalRenderingClass, !isClone && isSelected && 'dashboard-selected-element', - !isClone && !isSelected && selectableHighlight && 'dashboard-selectable-element', - isDropTarget && 'dashboard-drop-target' + !isClone && !isSelected && selectableHighlight && 'dashboard-selectable-element' )} onPointerDown={(evt) => { evt.stopPropagation(); diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx index 8ee0b26633f..994718a8de9 100644 --- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx +++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx @@ -1,16 +1,7 @@ import React from 'react'; import { t } from '@grafana/i18n'; -import { logWarning } from '@grafana/runtime'; -import { - SceneObjectState, - SceneObjectBase, - sceneGraph, - VariableDependencyConfig, - SceneObject, - SceneGridItemLike, - SceneGridLayout, -} from '@grafana/scenes'; +import { SceneObjectState, SceneObjectBase, sceneGraph, VariableDependencyConfig, SceneObject } from '@grafana/scenes'; import { TabsLayoutTabKind } from '@grafana/schema/dist/esm/schema/dashboard/v2'; import { appEvents } from 'app/core/app_events'; import { LS_TAB_COPY_KEY } from 'app/core/constants'; @@ -22,15 +13,10 @@ import { ConditionalRenderingGroup } from '../../conditional-rendering/group/Con import { serializeTab } from '../../serialization/layoutSerializers/TabsLayoutSerializer'; import { getElements } from '../../serialization/layoutSerializers/utils'; import { getDashboardSceneFor } from '../../utils/utils'; -import { AutoGridItem } from '../layout-auto-grid/AutoGridItem'; -import { AutoGridLayout } from '../layout-auto-grid/AutoGridLayout'; import { AutoGridLayoutManager } from '../layout-auto-grid/AutoGridLayoutManager'; -import { DashboardGridItem } from '../layout-default/DashboardGridItem'; import { clearClipboard } from '../layouts-shared/paste'; import { scrollCanvasElementIntoView } from '../layouts-shared/scrollCanvasElementIntoView'; import { BulkActionElement } from '../types/BulkActionElement'; -import { DashboardDropTarget } from '../types/DashboardDropTarget'; -import { isDashboardLayoutGrid } from '../types/DashboardLayoutGrid'; import { DashboardLayoutManager } from '../types/DashboardLayoutManager'; import { EditableDashboardElement, EditableDashboardElementInfo } from '../types/EditableDashboardElement'; import { LayoutParent } from '../types/LayoutParent'; @@ -43,7 +29,6 @@ import { TabsLayoutManager } from './TabsLayoutManager'; export interface TabItemState extends SceneObjectState { layout: DashboardLayoutManager; title?: string; - isDropTarget?: boolean; conditionalRendering?: ConditionalRenderingGroup; repeatByVariable?: string; repeatedTabs?: TabItem[]; @@ -53,7 +38,7 @@ export interface TabItemState extends SceneObjectState { export class TabItem extends SceneObjectBase - implements LayoutParent, BulkActionElement, EditableDashboardElement, DashboardDropTarget + implements LayoutParent, BulkActionElement, EditableDashboardElement { public static Component = TabItemRenderer; @@ -186,49 +171,6 @@ export class TabItem } } - public setIsDropTarget(isDropTarget: boolean) { - if (!!this.state.isDropTarget !== isDropTarget) { - this.setState({ isDropTarget }); - } - } - - public draggedGridItemOutside?(gridItem: SceneGridItemLike): void { - // Remove from source layout - if (gridItem instanceof DashboardGridItem || gridItem instanceof AutoGridItem) { - const layout = gridItem.parent; - if (gridItem instanceof DashboardGridItem && layout instanceof SceneGridLayout) { - const newChildren = layout.state.children.filter((child) => child !== gridItem); - layout.setState({ children: newChildren }); - } else if (gridItem instanceof AutoGridItem && layout instanceof AutoGridLayout) { - const newChildren = layout.state.children.filter((child) => child !== gridItem); - layout.setState({ children: newChildren }); - } else { - const warningMessage = 'Grid item has unexpected parent type'; - console.warn(warningMessage); - logWarning(warningMessage); - } - } - this.setIsDropTarget(false); - } - - public draggedGridItemInside(gridItem: SceneGridItemLike): void { - const layout = this.getLayout(); - - if (isDashboardLayoutGrid(layout)) { - layout.addGridItem(gridItem); - } else { - const warningMessage = 'Layout manager does not support addGridItem'; - console.warn(warningMessage); - logWarning(warningMessage); - } - this.setIsDropTarget(false); - - const parentLayout = this.getParentLayout(); - if (parentLayout.state.currentTabSlug !== this.getSlug()) { - parentLayout.setState({ currentTabSlug: this.getSlug() }); - } - } - public getParentLayout(): TabsLayoutManager { return sceneGraph.getAncestor(this, TabsLayoutManager); } diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx index 6ddd916cad2..4eba2bb33fc 100644 --- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx @@ -15,7 +15,7 @@ import { useSoloPanelContext } from '../SoloPanelContext'; import { TabItem } from './TabItem'; export function TabItemRenderer({ model }: SceneComponentProps) { - const { title, key, isDropTarget, layout } = model.useState(); + const { title, key, layout } = model.useState(); const parentLayout = model.getParentLayout(); const { currentTabSlug } = parentLayout.useState(); const titleInterpolated = sceneGraph.interpolate(model, title, undefined, 'text'); @@ -67,8 +67,7 @@ export function TabItemRenderer({ model }: SceneComponentProps) { className={cx( isConditionallyHidden && styles.hidden, isSelected && 'dashboard-selected-element', - isSelectable && !isSelected && 'dashboard-selectable-element', - isDropTarget && 'dashboard-drop-target' + isSelectable && !isSelected && 'dashboard-selectable-element' )} active={isActive} title={titleInterpolated} @@ -89,7 +88,6 @@ export function TabItemRenderer({ model }: SceneComponentProps) { onSelect?.(evt); }} label={titleInterpolated} - data-dashboard-drop-target-key={model.state.key} {...titleCollisionProps} /> @@ -114,15 +112,12 @@ interface TabItemLayoutRendererProps { } export function TabItemLayoutRenderer({ tab, isEditing }: TabItemLayoutRendererProps) { - const { layout, key } = tab.useState(); + const { layout } = tab.useState(); const styles = useStyles2(getStyles); const [_, conditionalRenderingClass, conditionalRenderingOverlay] = useIsConditionallyHidden(tab); return ( - + {isEditing && conditionalRenderingOverlay}