kie-issues#1158: On the Boxed Expression Component, changing the Expr…

…essionVariableCell text content will fail to commit if the focus is changed to another cell

Closes: apache/incubator-kie-issues#1158

packages/boxed-expression-component/src/selection/BeeTableSelectionContext.tsx

@@ -1019,6 +1019,10 @@ export function useBeeTableSelectableCell(
 
   const onMouseDown = useCallback(
     (e: React.MouseEvent) => {
+      if (document.activeElement instanceof HTMLInputElement) {
+        // See https://github.com/apache/incubator-kie-issues/issues/1158
+        (document.activeElement as any)?.blur?.();
+      }
       e.stopPropagation();
 
       if (

packages/boxed-expression-component/tests-e2e/api/annotationCell.ts

@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Locator } from "@playwright/test";
+import { ContextMenu } from "./expressionContainer";
+
+export class AnnotationCell {
+  constructor(private locator: Locator) {}
+
+  public async open() {
+    await this.locator.nth(0).click();
+  }
+
+  public async getPopoverMenu() {
+    return this.locator.page().getByTestId("kie-tools--bee--expression-popover-menu");
+  }
+
+  public async setName(params: { name: string; close: boolean }) {
+    await this.locator.click();
+    await this.locator.getByRole("textbox").fill(params.name);
+    if (params.close) {
+      await this.locator.getByRole("textbox").press("Enter");
+    }
+  }
+
+  public async getName() {
+    return await this.locator.getByTestId("kie-tools--bee--expression-info-name").nth(0).innerText();
+  }
+  public async select() {
+    // Uses the 1,1 to avoid problems by clicking on the element corner
+    await this.content.click({ position: { x: 1, y: 1 } });
+  }
+
+  get content() {
+    return this.locator.nth(0);
+  }
+
+  get contextMenu() {
+    return new ContextMenu(this.locator);
+  }
+}

packages/boxed-expression-component/tests-e2e/api/expressions/decisionTableExpressionElement.ts

@@ -21,6 +21,7 @@ import { Locator } from "@playwright/test";
 import { Monaco } from "../../__fixtures__/monaco";
 import { ExpressionCell } from "../expressionContainer";
 import { NameAndDataTypeCell } from "../nameAndDataTypeCell";
+import { AnnotationCell } from "../annotationCell";
 
 export class DecisionTableExpressionElement {
   constructor(
@@ -284,7 +285,7 @@ export class DecisionTableExpressionElement {
   }
 
   public annotationHeaderAt(index: number) {
-    return new NameAndDataTypeCell(this.locator.getByTestId("kie-tools--bee--table-header-annotation").nth(index));
+    return new AnnotationCell(this.locator.getByTestId("kie-tools--bee--table-header-annotation").nth(index));
   }
 
   get expressionHeaderCell() {

packages/boxed-expression-component/tests-e2e/boxedExpressions/decisionTable/decisionTableExpression.spec.ts

@@ -112,4 +112,16 @@ test.describe("Create Decision table", () => {
       }
     });
   });
+
+  test("should commit annotation name by other cell click", async ({ bee }) => {
+    await bee.expression
+      .asDecisionTable()
+      .annotationHeaderAt(0)
+      .setName({ name: "Changed Annotation Name", close: false });
+
+    // commit a change by a click to another cell
+    await bee.expression.asDecisionTable().cellAt({ row: 1, column: 1 }).content.click();
+
+    await expect(bee.getContainer()).toHaveScreenshot("boxed-decision-table-annotation-commit-on-cell-click.png");
+  });
 });

packages/boxed-expression-component/tests-e2e/boxedExpressions/every/everyExpression.spec.ts

@@ -45,4 +45,13 @@ test.describe("Create Boxed Every", () => {
     expect((await jsonModel.getEveryExpression()).in["@_id"]).not.toBeUndefined();
     expect((await jsonModel.getEveryExpression()).satisfies["@_id"]).not.toBeUndefined();
   });
+
+  test("should commit variable name by other cell click", async ({ bee, stories, page }) => {
+    await bee.expression.asEvery().variable.fill("Change Variable Name");
+
+    // commit a change by a click to another cell
+    await bee.expression.asEvery().in.elementCell.click();
+
+    await expect(bee.getContainer()).toHaveScreenshot("boxed-every-variable-commit-on-cell-click.png");
+  });
 });

packages/boxed-expression-component/tests-e2e/boxedExpressions/invocation/invocationExpression.spec.ts

@@ -23,11 +23,22 @@ test.describe("Create Boxed Invocation", () => {
   test("should render expression correctly", async ({ bee, stories, page }) => {
     await stories.openBoxedInvocation();
     await expect(page.getByRole("columnheader", { name: "Expression Name (<Undefined>)" })).toBeAttached();
-    await expect(page.getByRole("columnheader", { name: "FUNCTION" })).toBeAttached();
+    await expect(bee.expression.asInvocation().invokedFunctionNameCell).toBeAttached();
     await expect(page.getByRole("cell", { name: "p-1" })).toBeAttached();
     await expect(page.getByText("Select expression")).toHaveCount(1);
     await expect(page.getByRole("columnheader")).toHaveCount(2);
     await expect(page.getByRole("cell")).toHaveCount(2);
     await expect(bee.getContainer()).toHaveScreenshot("boxed-invocation.png");
   });
+
+  test("should commit invoked function name by other cell click", async ({ bee, stories, page }) => {
+    await stories.openBoxedInvocation();
+    await bee.expression.asInvocation().invokedFunctionNameCell.click();
+    await page.keyboard.type("Change Invoked Function Name");
+
+    // commit a change by a click to another cell
+    await bee.expression.asInvocation().parameter(0).descriptionCell.select();
+
+    await expect(bee.getContainer()).toHaveScreenshot("boxed-invocation-function-name-commit-on-cell-click.png");
+  });
 });

packages/boxed-expression-component/tests-e2e/boxedExpressions/invocation/populate.spec.ts

@@ -78,7 +78,7 @@ test.describe("Populate Boxed Invocation", () => {
 
     await resizing.reset(page.getByRole("cell", { name: "Required monthly installment" }));
 
-    await page.getByRole("columnheader", { name: "FUNCTION NAME" }).click();
+    await bee.expression.asInvocation().invokedFunctionNameCell.click();
     await page.keyboard.type(`Affordability calculation`);
     await page.keyboard.press("Enter");
 

packages/boxed-expression-component/tests-e2e/boxedExpressions/some/someExpression.spec.ts

@@ -45,4 +45,13 @@ test.describe("Create Boxed Some", () => {
     expect((await jsonModel.getSomeExpression()).in["@_id"]).not.toBeUndefined();
     expect((await jsonModel.getSomeExpression()).satisfies["@_id"]).not.toBeUndefined();
   });
+
+  test("should commit variable name by other cell click", async ({ bee }) => {
+    await bee.expression.asSome().variable.fill("Change Variable Name");
+
+    // commit a change by a click to another cell
+    await bee.expression.asSome().in.elementCell.click();
+
+    await expect(bee.getContainer()).toHaveScreenshot("boxed-some-variable-commit-on-cell-click.png");
+  });
 });