kie-issues#577: Build a first version of the new React-based DMN Edit…

…or with ~90% feature parity with the current GWT-based one (#2064)

examples/ping-pong-view-angular/src/environments/environment.prod.ts

@@ -1,3 +1,22 @@
+/*
+ * 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.
+ */
+
 export const environment = {
   production: true,
 };

examples/ping-pong-view-angular/src/test.ts

@@ -1,3 +1,22 @@
+/*
+ * 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.
+ */
+
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import "zone.js/testing";

package.json

@@ -45,7 +45,9 @@
       }
     },
     "patchedDependencies": {
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
     }
   },
   "kieTools": {

packages/boxed-expression-component/package.json

@@ -30,10 +30,8 @@
     "@patternfly/react-styles": "^4.92.6",
     "@patternfly/react-table": "^4.112.39",
     "lodash": "^4.17.21",
-    "papaparse": "^5.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-id-generator": "^3.0.1",
     "react-resizable": "^1.11.0",
     "react-table": "^7.6.2",
     "uuid": "^8.3.2"
@@ -58,7 +56,6 @@
     "@storybook/react": "^7.3.2",
     "@storybook/react-webpack5": "^7.3.2",
     "@types/lodash": "^4.14.168",
-    "@types/papaparse": "^5.3.2",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "@types/react-resizable": "^1.7.2",
@@ -67,7 +64,6 @@
     "copy-webpack-plugin": "^11.0.0",
     "copyfiles": "^2.4.1",
     "file-loader": "^6.2.0",
-    "gh-pages": "^3.2.3",
     "jest": "^26.6.3",
     "jest-junit": "^14.0.0",
     "jest-when": "^3.5.0",

packages/boxed-expression-component/src/api/BeeGwtService.ts

@@ -23,7 +23,7 @@ import { ExpressionDefinition } from "./ExpressionDefinition";
  * This interface defines all the API methods which BoxedExpressionEditor component can use to dialog with GWT Layer
  */
 export interface BeeGwtService {
-  getDefaultExpressionDefinition(logicType: string, dataType: string): ExpressionDefinition;
+  getDefaultExpressionDefinition(logicType: string, typeRef: string, isRoot?: boolean): ExpressionDefinition;
   openDataTypePage: () => void; // Just open the data types tab
   selectObject: (uuid?: string) => void; // Changes the Properties panel
 }

packages/boxed-expression-component/src/api/BeeTable.ts

@@ -77,7 +77,13 @@ export interface BeeTableProps<R extends object> {
   onRowDuplicated?: (args: { rowIndex: number }) => void;
   onRowReset?: (args: { rowIndex: number }) => void;
   onRowDeleted?: (args: { rowIndex: number }) => void;
-  onColumnAdded?: (args: { beforeIndex: number; currentIndex?: number; groupType: string | undefined }) => void;
+  onColumnAdded?: (args: {
+    beforeIndex: number;
+    currentIndex?: number;
+    groupType: string | undefined;
+    columnsCount: number;
+    insertDirection: InsertRowColumnsDirection;
+  }) => void;
   onColumnDeleted?: (args: { columnIndex: number; groupType: string | undefined }) => void;
   shouldRenderRowIndexColumn: boolean;
   shouldShowRowsInlineControls: boolean;
@@ -135,3 +141,8 @@ export type BeeTableContextMenuAllowedOperationsConditions = {
   column: ReactTable.ColumnInstance<any> | undefined;
   columns: ReactTable.ColumnInstance<any>[] | undefined;
 };
+
+export enum InsertRowColumnsDirection {
+  AboveOrRight,
+  BelowOrLeft,
+}

packages/boxed-expression-component/src/api/ExpressionDefinition.ts

@@ -135,8 +135,8 @@ export enum DecisionTableExpressionDefinitionHitPolicy {
   Unique = "UNIQUE",
   First = "FIRST",
   Priority = "PRIORITY",
-  Any = "ANY",
   Collect = "COLLECT",
+  Any = "ANY",
   RuleOrder = "RULE ORDER",
   OutputOrder = "OUTPUT ORDER",
 }

packages/boxed-expression-component/src/expressions/BoxedExpressionEditor/BoxedExpressionEditor.tsx

@@ -28,6 +28,7 @@ import {
 } from "../../i18n";
 import { ExpressionDefinitionRoot } from "../ExpressionDefinitionRoot";
 import "./base-no-reset-wrapped.css";
+import "../../@types/react-table";
 import { BoxedExpressionEditorContextProvider } from "./BoxedExpressionEditorContext";
 import { FeelVariables } from "@kie-tools/dmn-feel-antlr4-parser";
 

packages/boxed-expression-component/src/expressions/ContextExpression/ContextExpression.tsx

@@ -32,6 +32,7 @@ import {
   ExpressionDefinitionLogicType,
   generateUuid,
   getNextAvailablePrefixedName,
+  InsertRowColumnsDirection,
 } from "../../api";
 import { useBoxedExpressionEditorI18n } from "../../i18n";
 import { useNestedExpressionContainerWithNestedExpressions } from "../../resizing/Hooks";
@@ -42,7 +43,7 @@ import {
   CONTEXT_ENTRY_INFO_MIN_WIDTH,
   CONTEXT_EXPRESSION_EXTRA_WIDTH,
 } from "../../resizing/WidthConstants";
-import { useBeeTableSelectableCellRef, useBeeTableCoordinates } from "../../selection/BeeTableSelectionContext";
+import { useBeeTableCoordinates, useBeeTableSelectableCellRef } from "../../selection/BeeTableSelectionContext";
 import { BeeTable, BeeTableColumnUpdate } from "../../table/BeeTable";
 import {
   useBoxedExpressionEditor,
@@ -66,6 +67,7 @@ export function ContextExpression(
   }
 ) {
   const { i18n } = useBoxedExpressionEditorI18n();
+  const { decisionNodeId } = useBoxedExpressionEditor();
   const { setExpression } = useBoxedExpressionEditorDispatch();
   const { variables } = useBoxedExpressionEditor();
 
@@ -139,10 +141,10 @@ export function ContextExpression(
   const beeTableColumns = useMemo<ReactTable.Column<ROWTYPE>[]>(() => {
     return [
       {
-        accessor: contextExpression.id as any, // FIXME: https://github.com/kiegroup/kie-issues/issues/169
+        accessor: decisionNodeId as any, // FIXME: https://github.com/kiegroup/kie-issues/issues/169
         label: contextExpression.name ?? DEFAULT_EXPRESSION_NAME,
         isRowIndexColumn: false,
-        dataType: contextExpression.dataType ?? CONTEXT_ENTRY_DEFAULT_DATA_TYPE,
+        dataType: contextExpression.dataType,
         width: undefined,
         columns: [
           {
@@ -166,7 +168,7 @@ export function ContextExpression(
         ],
       },
     ];
-  }, [contextExpression.id, contextExpression.name, contextExpression.dataType, entryInfoWidth, setEntryInfoWidth]);
+  }, [decisionNodeId, contextExpression.name, contextExpression.dataType, entryInfoWidth, setEntryInfoWidth]);
 
   const onColumnUpdates = useCallback(
     ([{ name, dataType }]: BeeTableColumnUpdate<ROWTYPE>[]) => {
@@ -253,7 +255,7 @@ export function ContextExpression(
       return {
         entryInfo: {
           id: generateUuid(),
-          dataType: DmnBuiltInDataType.Undefined,
+          dataType: CONTEXT_ENTRY_DEFAULT_DATA_TYPE,
           name:
             name ||
             getNextAvailablePrefixedName(
@@ -264,7 +266,7 @@ export function ContextExpression(
         entryExpression: {
           id: generateUuid(),
           logicType: ExpressionDefinitionLogicType.Undefined,
-          dataType: DmnBuiltInDataType.Undefined,
+          dataType: CONTEXT_ENTRY_DEFAULT_DATA_TYPE,
         },
       };
     },
@@ -304,21 +306,36 @@ export function ContextExpression(
   );
 
   const onRowAdded = useCallback(
-    (args: { beforeIndex: number }) => {
+    (args: { beforeIndex: number; rowsCount: number; insertDirection: InsertRowColumnsDirection }) => {
       setExpression((prev: ContextExpressionDefinition) => {
         const newContextEntries = [...(prev.contextEntries ?? [])];
-        const defaultContextEntry = getDefaultContextEntry();
-        addVariable(args, newContextEntries, prev, defaultContextEntry);
 
-        newContextEntries.splice(args.beforeIndex, 0, defaultContextEntry);
+        const newEntries = [];
+        const names = contextExpression.contextEntries.map((e) => e.entryInfo.name);
+        for (let i = 0; i < args.rowsCount; i++) {
+          const name = getNextAvailablePrefixedName(names, "ContextEntry");
+          names.push(name);
+
+          const defaultContextEntry = getDefaultContextEntry(name);
+          addVariable(args, newContextEntries, prev, defaultContextEntry);
+          newEntries.push(defaultContextEntry);
+        }
+
+        for (const newEntry of newEntries) {
+          let index = args.beforeIndex;
+          newContextEntries.splice(index, 0, newEntry);
+          if (args.insertDirection === InsertRowColumnsDirection.AboveOrRight) {
+            index++;
+          }
+        }
 
         return {
           ...prev,
           contextEntries: newContextEntries,
         };
       });
     },
-    [addVariable, getDefaultContextEntry, setExpression]
+    [addVariable, contextExpression.contextEntries, getDefaultContextEntry, setExpression]
   );
 
   const onRowDeleted = useCallback(
@@ -449,7 +466,7 @@ export function ContextResultInfoCell() {
 
   useEffect(() => {
     if (isActive) {
-      beeGwtService?.selectObject("");
+      beeGwtService?.selectObject(""); // FIXME: Tiago --> This should actually be the id of the parent expression, as the <result> of a context follows its parent's data type.
     }
   }, [beeGwtService, isActive]);