Use node name in the canvas HUD (#1818)

Author: Janpot

packages/toolpad-app/cli/index.ts

@@ -143,7 +143,7 @@ export default async function cli(argv: string[]) {
   );
 
   const command: string | undefined = args._[0];
-  const dir: string = args._[1];
+  const dir: string = path.resolve(process.cwd(), args._[1] || '.');
 
   const runArgs = {
     devMode: args['--dev'],

packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx

@@ -306,7 +306,7 @@ export function BindingEditorDialog<V>({
   open,
   onClose,
 }: BindingEditorDialogProps<V>) {
-  const { propType } = useBindingEditorContext();
+  const { propType, label } = useBindingEditorContext();
 
   const [input, setInput] = React.useState(value);
   React.useEffect(() => {
@@ -360,7 +360,7 @@ export function BindingEditorDialog<V>({
       scroll="body"
       maxWidth="lg"
     >
-      <DialogTitle>Bind a property</DialogTitle>
+      <DialogTitle>Bind property &quot;{label}&quot;</DialogTitle>
       <DialogContent>
         {propType?.type === 'event' ? (
           <ActionEditor value={input} onChange={(newValue) => setInput(newValue)} />

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx

@@ -13,9 +13,6 @@ import {
   RECTANGLE_EDGE_LEFT,
   RECTANGLE_EDGE_RIGHT,
 } from '../../../../utils/geometry';
-import { useDom } from '../../../AppState';
-import { useToolpadComponent } from '../../toolpadComponents';
-import { getElementNodeComponentId } from '../../../../toolpadComponents';
 
 const HINT_POSITION_TOP = 'top';
 const HINT_POSITION_BOTTOM = 'bottom';
@@ -175,11 +172,6 @@ export default function NodeHud({
   isOutlineVisible = false,
   isHoverable = true,
 }: NodeHudProps) {
-  const { dom } = useDom();
-
-  const componentId = appDom.isElement(node) ? getElementNodeComponentId(node) : '';
-  const component = useToolpadComponent(dom, componentId);
-
   const hintPosition = rect.y > HUD_HEIGHT ? HINT_POSITION_TOP : HINT_POSITION_BOTTOM;
 
   return (
@@ -202,14 +194,15 @@ export default function NodeHud({
         <SelectionHintWrapper style={absolutePositionCss(rect)} hintPosition={hintPosition}>
           <div
             draggable
+            data-testid="node-hud-tag"
             className={nodeHudClasses.selectionHint}
             onDragStart={onNodeDragStart}
             role="presentation"
             onClick={stopPropagationHandler}
             onMouseDown={stopPropagationHandler}
             onMouseUp={stopPropagationHandler}
           >
-            {component?.displayName || '<unknown>'}
+            {node.name}
             <DragIndicatorIcon color="inherit" />
             <IconButton aria-label="Duplicate" color="inherit" onMouseUp={onDuplicate}>
               <Tooltip title="Duplicate" enterDelay={400}>

test/integration/editor/index.spec.ts

@@ -58,18 +58,13 @@ test.describe('with fixture', () => {
 
   test('can move elements in page', async ({ page }) => {
     const editorModel = new ToolpadEditor(page);
-    const TEXT_FIELD_COMPONENT_DISPLAY_NAME = 'Text field';
 
     await editorModel.goto();
 
     await editorModel.waitForOverlay();
 
-    const canvasMoveElementHandleSelector = `:has-text("${TEXT_FIELD_COMPONENT_DISPLAY_NAME}")[draggable]`;
-
     const canvasInputLocator = editorModel.appCanvas.locator('input');
-    const canvasMoveElementHandleLocator = editorModel.appCanvas.locator(
-      canvasMoveElementHandleSelector,
-    );
+    const canvasMoveElementHandleLocator = editorModel.appCanvas.getByTestId('node-hud-tag');
 
     const firstTextFieldLocator = canvasInputLocator.first();
     const secondTextFieldLocator = canvasInputLocator.nth(1);
@@ -96,7 +91,7 @@ test.describe('with fixture', () => {
     const moveTargetY = secondTextFieldBoundingBox!.y + secondTextFieldBoundingBox!.height / 2;
 
     await editorModel.dragToAppCanvas(
-      editorModel.appCanvas.locator(canvasMoveElementHandleSelector),
+      editorModel.appCanvas.getByTestId('node-hud-tag'),
       moveTargetX,
       moveTargetY,
     );

test/models/ToolpadEditor.ts

@@ -1,4 +1,5 @@
 import { expect, FrameLocator, Locator, Page } from '@playwright/test';
+import { setTimeout } from 'timers/promises';
 import { gotoIfNotCurrent } from './shared';
 
 class CreatePageDialog {
@@ -109,6 +110,9 @@ export class ToolpadEditor {
 
   async waitForOverlay() {
     await this.pageOverlay.waitFor({ state: 'visible' });
+    // Some tests seem to be flaky around this waitFor and perform better with a short timeout
+    // Not sure yet where the race condition is happening
+    await setTimeout(100);
   }
 
   async dragToAppCanvas(sourceLocator: Locator, moveTargetX: number, moveTargetY: number) {