kie-issues#980: On the DMN Editor it's not possible to use the Palett…

…e if the focus is on another element (#2598)

packages/dmn-editor/src/diagram/Palette.tsx

@@ -101,6 +101,10 @@ export function Palette({ pulse }: { pulse: boolean }) {
 
   const { maxHeight } = useInViewSelect(dmnEditorRootElementRef, nodesPalletePopoverRef);
 
+  const clearCurrentFocusToAllowDraggingNewNode = useCallback(() => {
+    (document.activeElement as any)?.blur?.();
+  }, []);
+
   return (
     <>
       <RF.Panel position={"top-left"}>
@@ -162,7 +166,11 @@ export function Palette({ pulse }: { pulse: boolean }) {
         </aside>
       </RF.Panel>
       {!settings.isReadOnly && (
-        <RF.Panel position={"top-left"} style={{ marginTop: "78px" }}>
+        <RF.Panel
+          position={"top-left"}
+          style={{ marginTop: "78px" }}
+          onMouseDownCapture={clearCurrentFocusToAllowDraggingNewNode}
+        >
           <div ref={nodesPalletePopoverRef} style={{ position: "absolute", left: 0, height: 0, zIndex: -1 }} />
           <aside className={`kie-dmn-editor--palette ${pulse ? "pulse" : ""}`}>
             <div

packages/dmn-editor/tests-e2e/drdArtifacts/addAssociation.spec.ts

@@ -50,7 +50,7 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.TEXT_ANNOTATION,
       });
 
-      expect(await edges.get({ from: DefaultNodeName.BKM, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(await edges.get({ from: DefaultNodeName.BKM, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.BKM, to: DefaultNodeName.TEXT_ANNOTATION })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -70,7 +70,9 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.TEXT_ANNOTATION,
       });
 
-      expect(await edges.get({ from: DefaultNodeName.DECISION, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.DECISION, to: DefaultNodeName.TEXT_ANNOTATION })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.DECISION, to: DefaultNodeName.TEXT_ANNOTATION })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -97,7 +99,7 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.TEXT_ANNOTATION,
       });
 
-      expect(
+      await expect(
         await edges.get({ from: DefaultNodeName.KNOWLEDGE_SOURCE, to: DefaultNodeName.TEXT_ANNOTATION })
       ).toBeAttached();
       expect(
@@ -121,7 +123,9 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.TEXT_ANNOTATION,
       });
 
-      expect(await edges.get({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -143,7 +147,7 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.TEXT_ANNOTATION,
       });
 
-      expect(
+      await expect(
         await edges.get({ from: DefaultNodeName.DECISION_SERVICE, to: DefaultNodeName.TEXT_ANNOTATION })
       ).toBeAttached();
       expect(
@@ -167,7 +171,9 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.TEXT_ANNOTATION,
       });
 
-      expect(await edges.get({ from: DefaultNodeName.GROUP, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.GROUP, to: DefaultNodeName.TEXT_ANNOTATION })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.GROUP, to: DefaultNodeName.TEXT_ANNOTATION })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -198,7 +204,7 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.BKM,
       });
 
-      expect(await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.BKM })).toBeAttached();
+      await expect(await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.BKM })).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.BKM })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -218,7 +224,9 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.DECISION,
       });
 
-      expect(await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.DECISION })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.DECISION })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.DECISION })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -240,7 +248,7 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.KNOWLEDGE_SOURCE,
       });
 
-      expect(
+      await expect(
         await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.KNOWLEDGE_SOURCE })
       ).toBeAttached();
       expect(
@@ -264,7 +272,9 @@ test.describe("Add edge - Association", () => {
         to: DefaultNodeName.INPUT_DATA,
       });
 
-      expect(await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.INPUT_DATA })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.INPUT_DATA })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.INPUT_DATA })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -287,7 +297,7 @@ test.describe("Add edge - Association", () => {
         position: NodePosition.TOP,
       });
 
-      expect(
+      await expect(
         await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.DECISION_SERVICE })
       ).toBeAttached();
       expect(
@@ -316,7 +326,9 @@ test.describe("Add edge - Association", () => {
         position: NodePosition.TOP,
       });
 
-      expect(await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.GROUP })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.GROUP })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.TEXT_ANNOTATION, to: DefaultNodeName.GROUP })).toEqual(
         EdgeType.ASSOCIATION
       );

packages/dmn-editor/tests-e2e/drdArtifacts/addGroup.spec.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { TestAnnotations } from "@kie-tools/playwright-base/annotations";
 import { test, expect } from "../__fixtures__/base";
 import { DefaultNodeName, NodeType } from "../__fixtures__/nodes";
 
@@ -29,8 +30,28 @@ test.describe("Add node - Group", () => {
     test("should add Group node from palette", async ({ palette, nodes, diagram }) => {
       await palette.dragNewNode({ type: NodeType.GROUP, targetPosition: { x: 100, y: 100 } });
 
-      expect(nodes.get({ name: DefaultNodeName.GROUP })).toBeAttached();
+      await expect(nodes.get({ name: DefaultNodeName.GROUP })).toBeAttached();
       await expect(diagram.get()).toHaveScreenshot("add-group-node-from-palette.png");
     });
+
+    test("should add multiple Group nodes from palette in a row", async ({ palette, nodes, diagram }) => {
+      test.info().annotations.push({
+        type: TestAnnotations.REGRESSION,
+        description: "https://github.com/apache/incubator-kie-issues/issues/980",
+      });
+
+      await palette.dragNewNode({ type: NodeType.GROUP, targetPosition: { x: 100, y: 100 } });
+      await palette.dragNewNode({
+        type: NodeType.GROUP,
+        targetPosition: { x: 300, y: 300 },
+        thenRenameTo: "Second Group",
+      });
+
+      await diagram.resetFocus();
+
+      await expect(nodes.get({ name: DefaultNodeName.GROUP })).toBeAttached();
+      await expect(nodes.get({ name: "Second Group" })).toBeAttached();
+      await expect(diagram.get()).toHaveScreenshot("add-2-group-nodes-from-palette.png");
+    });
   });
 });

packages/dmn-editor/tests-e2e/drdArtifacts/addTextAnnotation.spec.ts

@@ -31,9 +31,29 @@ test.describe("Add node - Text Annotation", () => {
     test("should add Text Annotation node from palette", async ({ palette, nodes, diagram }) => {
       await palette.dragNewNode({ type: NodeType.TEXT_ANNOTATION, targetPosition: { x: 100, y: 100 } });
 
-      expect(nodes.get({ name: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(nodes.get({ name: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
       await expect(diagram.get()).toHaveScreenshot("add-text-annotation-node-from-palette.png");
     });
+
+    test("should add two Text Annotation nodes from palette in a row", async ({ palette, nodes, diagram }) => {
+      test.info().annotations.push({
+        type: TestAnnotations.REGRESSION,
+        description: "https://github.com/apache/incubator-kie-issues/issues/980",
+      });
+
+      await palette.dragNewNode({ type: NodeType.TEXT_ANNOTATION, targetPosition: { x: 100, y: 100 } });
+      await palette.dragNewNode({
+        type: NodeType.TEXT_ANNOTATION,
+        targetPosition: { x: 300, y: 300 },
+        thenRenameTo: "Second Text Annotation",
+      });
+
+      await diagram.resetFocus();
+
+      await expect(nodes.get({ name: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(nodes.get({ name: "Second Text Annotation" })).toBeAttached();
+      await expect(diagram.get()).toHaveScreenshot("add-2-text-annotation-nodes-from-palette.png");
+    });
   });
 
   test.describe("add from nodes", () => {
@@ -53,7 +73,9 @@ test.describe("Add node - Text Annotation", () => {
         targetPosition: { x: 100, y: 300 },
       });
 
-      expect(await edges.get({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -71,7 +93,9 @@ test.describe("Add node - Text Annotation", () => {
         targetPosition: { x: 100, y: 300 },
       });
 
-      expect(await edges.get({ from: DefaultNodeName.DECISION, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.DECISION, to: DefaultNodeName.TEXT_ANNOTATION })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.DECISION, to: DefaultNodeName.TEXT_ANNOTATION })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -89,7 +113,7 @@ test.describe("Add node - Text Annotation", () => {
         targetPosition: { x: 500, y: 500 },
       });
 
-      expect(await edges.get({ from: DefaultNodeName.BKM, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(await edges.get({ from: DefaultNodeName.BKM, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.BKM, to: DefaultNodeName.TEXT_ANNOTATION })).toEqual(
         EdgeType.ASSOCIATION
       );
@@ -112,7 +136,7 @@ test.describe("Add node - Text Annotation", () => {
         targetPosition: { x: 500, y: 500 },
       });
 
-      expect(
+      await expect(
         await edges.get({ from: DefaultNodeName.DECISION_SERVICE, to: DefaultNodeName.TEXT_ANNOTATION })
       ).toBeAttached();
       expect(
@@ -142,7 +166,7 @@ test.describe("Add node - Text Annotation", () => {
         targetPosition: { x: 100, y: 300 },
       });
 
-      expect(
+      await expect(
         await edges.get({ from: DefaultNodeName.KNOWLEDGE_SOURCE, to: DefaultNodeName.TEXT_ANNOTATION })
       ).toBeAttached();
       expect(
@@ -162,7 +186,9 @@ test.describe("Add node - Text Annotation", () => {
         targetPosition: { x: 500, y: 500 },
       });
 
-      expect(await edges.get({ from: DefaultNodeName.GROUP, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+      await expect(
+        await edges.get({ from: DefaultNodeName.GROUP, to: DefaultNodeName.TEXT_ANNOTATION })
+      ).toBeAttached();
       expect(await edges.getType({ from: DefaultNodeName.GROUP, to: DefaultNodeName.TEXT_ANNOTATION })).toEqual(
         EdgeType.ASSOCIATION
       );

packages/dmn-editor/tests-e2e/drdArtifacts/deleteAssociation.spec.ts

@@ -34,14 +34,16 @@ test.describe("Delete edge - Association", () => {
       targetPosition: { x: 100, y: 300 },
     });
 
-    expect(await edges.get({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })).toBeAttached();
+    await expect(
+      await edges.get({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })
+    ).toBeAttached();
   });
 
   test("should delete an Association using the delete key", async ({ diagram, edges, nodes }) => {
     await diagram.resetFocus();
     await edges.delete({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION });
 
-    expect(
+    await expect(
       await edges.get({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })
     ).not.toBeAttached();
 
@@ -53,7 +55,7 @@ test.describe("Delete edge - Association", () => {
     await diagram.resetFocus();
     await edges.delete({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION, isBackspace: true });
 
-    expect(
+    await expect(
       await edges.get({ from: DefaultNodeName.INPUT_DATA, to: DefaultNodeName.TEXT_ANNOTATION })
     ).not.toBeAttached();
 

packages/dmn-editor/tests-e2e/drgElements/addBkm.spec.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { TestAnnotations } from "@kie-tools/playwright-base/annotations";
 import { test, expect } from "../__fixtures__/base";
 import { EdgeType } from "../__fixtures__/edges";
 import { DefaultNodeName, NodeType } from "../__fixtures__/nodes";
@@ -31,7 +32,7 @@ test.describe("Add node - BKM", () => {
       test("should add new BKM node from palette", async ({ jsonModel, palette, nodes, diagram }) => {
         await palette.dragNewNode({ type: NodeType.BKM, targetPosition: { x: 100, y: 100 } });
 
-        expect(nodes.get({ name: DefaultNodeName.BKM })).toBeAttached();
+        await expect(nodes.get({ name: DefaultNodeName.BKM })).toBeAttached();
         await expect(diagram.get()).toHaveScreenshot("add-bkm-node-from-palette.png");
 
         // JSON model assertions
@@ -52,6 +53,25 @@ test.describe("Add node - BKM", () => {
           "@_height": 80,
         });
       });
+
+      test("should add two new BKM nodes from palette in a row", async ({ palette, nodes, diagram }) => {
+        test.info().annotations.push({
+          type: TestAnnotations.REGRESSION,
+          description: "https://github.com/apache/incubator-kie-issues/issues/980",
+        });
+        await palette.dragNewNode({ type: NodeType.BKM, targetPosition: { x: 100, y: 100 } });
+        await palette.dragNewNode({
+          type: NodeType.BKM,
+          targetPosition: { x: 300, y: 300 },
+          thenRenameTo: "Second BKM",
+        });
+
+        await diagram.resetFocus();
+
+        await expect(nodes.get({ name: DefaultNodeName.BKM })).toBeAttached();
+        await expect(nodes.get({ name: "Second BKM" })).toBeAttached();
+        await expect(diagram.get()).toHaveScreenshot("add-2-bkm-nodes-from-palette.png");
+      });
     });
 
     test.describe("add from nodes", () => {
@@ -67,7 +87,7 @@ test.describe("Add node - BKM", () => {
           targetPosition: { x: 100, y: 300 },
         });
 
-        expect(await edges.get({ from: "BKM - A", to: DefaultNodeName.BKM })).toBeAttached();
+        await expect(await edges.get({ from: "BKM - A", to: DefaultNodeName.BKM })).toBeAttached();
         expect(await edges.getType({ from: "BKM - A", to: DefaultNodeName.BKM })).toEqual(
           EdgeType.KNOWLEDGE_REQUIREMENT
         );
@@ -85,7 +105,9 @@ test.describe("Add node - BKM", () => {
           targetPosition: { x: 500, y: 500 },
         });
 
-        expect(await edges.get({ from: DefaultNodeName.DECISION_SERVICE, to: DefaultNodeName.BKM })).toBeAttached();
+        await expect(
+          await edges.get({ from: DefaultNodeName.DECISION_SERVICE, to: DefaultNodeName.BKM })
+        ).toBeAttached();
         expect(await edges.getType({ from: DefaultNodeName.DECISION_SERVICE, to: DefaultNodeName.BKM })).toEqual(
           EdgeType.KNOWLEDGE_REQUIREMENT
         );
@@ -103,7 +125,9 @@ test.describe("Add node - BKM", () => {
           targetPosition: { x: 100, y: 300 },
         });
 
-        expect(await edges.get({ from: DefaultNodeName.KNOWLEDGE_SOURCE, to: DefaultNodeName.BKM })).toBeAttached();
+        await expect(
+          await edges.get({ from: DefaultNodeName.KNOWLEDGE_SOURCE, to: DefaultNodeName.BKM })
+        ).toBeAttached();
         expect(await edges.getType({ from: DefaultNodeName.KNOWLEDGE_SOURCE, to: DefaultNodeName.BKM })).toEqual(
           EdgeType.AUTHORITY_REQUIREMENT
         );