KOGITO-5909: [DMN Designer] New Boxed Expression editor - DMN Express…

…ion column width is updated too many times in some scenarios (#116)
apache · Sep 23, 2021 · ab89715 · ab89715
1 parent 86a5547
commit ab89715
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 0 deletions.
diff --git a/...js/packages/boxed-expression-component/src/__tests__/components/Resizer/dom/Cell.test.tsx b/...js/packages/boxed-expression-component/src/__tests__/components/Resizer/dom/Cell.test.tsx
@@ -28,6 +28,12 @@ let cell: Cell;
 let element: HTMLElement;
 let container: Element;
 
+const EMPTY_LIST_OF_NODES = {
+  length: 0,
+  item: (_index: number) => document.createElement("span"),
+  forEach: (_element: any) => ({}),
+};
+
 describe("Cell", () => {
   beforeAll(() => {
     document.dispatchEvent = jest.fn();
@@ -120,6 +126,61 @@ describe("Cell", () => {
       expect(cell.isLastColumn()).toBeFalsy();
     });
   });
+
+  describe("refreshWidthAsLastGroupColumn", () => {
+    describe("when cell has children", () => {
+      beforeEach(() => {
+        Element.prototype.getBoundingClientRect = jest.fn(() => {
+          return {
+            x: 4,
+            y: 8,
+            width: 16,
+            height: 32,
+            top: 64,
+            left: 128,
+            bottom: 256,
+            right: 512,
+          } as DOMRect;
+        });
+        createContextWithInnerDecisionTable();
+      });
+
+      it("returns the inner width", () => {
+        const elements = container.querySelectorAll(CELL_CSS_SELECTOR);
+        const cellElement = elements.item(7) as HTMLElement;
+        const cell = new Cell(cellElement, [], 1);
+        const setWidthSpy = jest.spyOn(cell, "setWidth");
+
+        cell.refreshWidthAsLastGroupColumn();
+
+        expect(setWidthSpy).toBeCalledWith(506);
+      });
+    });
+
+    describe("when cell doesn't have children", () => {
+      beforeEach(() => {
+        Element.prototype.querySelectorAll = jest.fn((selector): NodeListOf<HTMLElement> => {
+          if (selector === ".input") {
+            return EMPTY_LIST_OF_NODES;
+          }
+          return document.querySelectorAll(selector);
+        });
+
+        createContextWithInnerDecisionTable();
+      });
+
+      it("returns the inner width", () => {
+        const elements = container.querySelectorAll(CELL_CSS_SELECTOR);
+        const cellElement = elements.item(7) as HTMLElement;
+        const cell = new Cell(cellElement, [], 1);
+        const setWidthSpy = jest.spyOn(cell, "setWidth");
+
+        cell.refreshWidthAsLastGroupColumn();
+
+        expect(setWidthSpy).not.toBeCalled();
+      });
+    });
+  });
 });
 
 function renderLiteralAtRegularColumn() {
@@ -238,6 +299,101 @@ function createContext() {
   ).container;
 }
 
+function createContextWithInnerDecisionTable() {
+  container = render(
+    usingTestingBoxedExpressionI18nContext(
+      <ContextExpression
+        {...({
+          uid: "id1",
+          logicType: "Context",
+          name: "Expression Name",
+          dataType: "<Undefined>",
+          contextEntries: [
+            {
+              entryInfo: {
+                name: "ContextEntry-1",
+                dataType: "<Undefined>",
+              },
+              entryExpression: {
+                uid: "id2",
+                logicType: "Context",
+                contextEntries: [
+                  {
+                    entryInfo: {
+                      name: "ContextEntry-1",
+                      dataType: "<Undefined>",
+                    },
+                    entryExpression: {
+                      uid: "id4",
+                      logicType: "Context",
+                      contextEntries: [
+                        {
+                          entryInfo: {
+                            name: "ContextEntry-1",
+                            dataType: "<Undefined>",
+                          },
+                          entryExpression: {
+                            uid: "id6",
+                            logicType: "Decision Table",
+                            name: "ContextEntry-1",
+                            dataType: "<Undefined>",
+                            hitPolicy: "UNIQUE",
+                            aggregation: "",
+                            input: [
+                              {
+                                name: "input-1",
+                                dataType: "<Undefined>",
+                              },
+                            ],
+                            output: [
+                              {
+                                name: "output-1",
+                                dataType: "<Undefined>",
+                              },
+                            ],
+                            annotations: [
+                              {
+                                name: "annotation-1",
+                              },
+                            ],
+                            rules: [
+                              {
+                                inputEntries: ["-"],
+                                outputEntries: [""],
+                                annotationEntries: [""],
+                              },
+                            ],
+                          },
+                          editInfoPopoverLabel: "Edit Context Entry",
+                          nameAndDataTypeSynchronized: true,
+                        },
+                      ],
+                      result: {
+                        uid: "id7",
+                      },
+                    },
+                    editInfoPopoverLabel: "Edit Context Entry",
+                    nameAndDataTypeSynchronized: true,
+                  },
+                ],
+                result: {
+                  uid: "id5",
+                },
+              },
+              editInfoPopoverLabel: "Edit Context Entry",
+              nameAndDataTypeSynchronized: true,
+            },
+          ],
+          result: {
+            uid: "id3",
+          },
+          isHeadless: false,
+        } as unknown as ContextProps)}
+      />
+    ).wrapper
+  ).container;
+}
+
 jest.mock("uuid", () => {
   return { v4: () => "0000-1111-2222-3333" };
 });
diff --git a/kogito-editors-js/packages/boxed-expression-component/src/components/Resizer/Resizer.tsx b/kogito-editors-js/packages/boxed-expression-component/src/components/Resizer/Resizer.tsx
@@ -72,6 +72,10 @@ export const Resizer: React.FunctionComponent<ResizerProps> = ({
   useLayoutEffect(() => {
     function listener(event: CustomEvent) {
       const width = Math.round(event.detail.width);
+      if (width === resizerWidth) {
+        return;
+      }
+
       setResizerWidth(width);
       onHorizontalResizeStop?.(width);
     }

diff --git a/kogito-editors-js/packages/boxed-expression-component/src/components/Resizer/dom/Cell.ts b/kogito-editors-js/packages/boxed-expression-component/src/components/Resizer/dom/Cell.ts
@@ -86,6 +86,11 @@ export class Cell {
 
     const children = [].slice.call((refSibling as HTMLElement).querySelectorAll(`.${this.getHeaderType()}`));
     const childrenRects = children.map((c: HTMLElement) => c.getBoundingClientRect());
+
+    if (childrenRects.length === 0) {
+      return;
+    }
+
     const x = Math.min(...childrenRects.map((c: DOMRect) => c.x));
     const right = Math.max(...childrenRects.map((c: DOMRect) => c.right));