kie-issues#738: Test Scenario Editor: Bee Table integration with Sele…

…ctor Panel (#2162)

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

@@ -68,6 +68,14 @@ export interface BeeTableProps<R extends object> {
   getRowKey?: (row: ReactTable.Row<R>) => string;
   /** Custom function for getting column key prop, and avoid using the column index */
   getColumnKey?: (column: ReactTable.ColumnInstance<R>) => string;
+  /** Function to be executed when a column's header is clicked */
+  onHeaderClick?: (columnKey: string) => void;
+  /** Function to be executed when a key up event occurs in a column's header */
+  onHeaderKeyUp?: (columnKey: string) => void;
+  /** Function to be executed when a column's data cell is clicked */
+  onDataCellClick?: (columnID: string) => void;
+  /** Function to be executed when a column's data cell is clicked */
+  onDataCellKeyUp?: (columnID: string) => void;
   /** Disable/Enable cell edits. Enabled by default */
   isReadOnly?: boolean;
   /** Enable keyboard navigation */

packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx

@@ -84,6 +84,10 @@ export function BeeTableInternal<R extends object>({
   onRowDeleted,
   onColumnAdded,
   onColumnDeleted,
+  onHeaderClick,
+  onHeaderKeyUp,
+  onDataCellClick,
+  onDataCellKeyUp,
   controllerCell = ROW_INDEX_COLUMN_ACCESOR,
   cellComponentByColumnAccessor,
   rows,
@@ -627,6 +631,8 @@ export function BeeTableInternal<R extends object>({
           tableColumns={columnsWithAddedIndexColumns}
           reactTableInstance={reactTableInstance}
           onColumnAdded={onColumnAdded2}
+          onHeaderClick={onHeaderClick}
+          onHeaderKeyUp={onHeaderKeyUp}
           lastColumnMinWidth={lastColumnMinWidth}
           setEditing={setEditing}
         />
@@ -641,6 +647,8 @@ export function BeeTableInternal<R extends object>({
           reactTableInstance={reactTableInstance}
           additionalRow={additionalRow}
           onRowAdded={onRowAdded2}
+          onDataCellClick={onDataCellClick}
+          onDataCellKeyUp={onDataCellKeyUp}
           lastColumnMinWidth={lastColumnMinWidth}
         />
       </table>

packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx

@@ -37,6 +37,10 @@ export interface BeeTableBodyProps<R extends object> {
   getRowKey: (row: ReactTable.Row<R>) => string;
   /** Custom function for getting column key prop, and avoid using the column index */
   getColumnKey: (column: ReactTable.ColumnInstance<R>) => string;
+  /** Function to be executed when a column's data cell is clicked */
+  onDataCellClick?: (columnID: string) => void;
+  /** Function to be executed when a key up event occurs in a column's data cell */
+  onDataCellKeyUp?: (columnID: string) => void;
   /** */
   onRowAdded?: (args: { beforeIndex: number; rowsCount: number; insertDirection: InsertRowColumnsDirection }) => void;
 
@@ -58,6 +62,8 @@ export function BeeTableBody<R extends object>({
   getRowKey,
   getColumnKey,
   onRowAdded,
+  onDataCellClick,
+  onDataCellKeyUp,
   shouldRenderRowIndexColumn,
   shouldShowRowsInlineControls,
   resizerStopBehavior,
@@ -82,6 +88,8 @@ export function BeeTableBody<R extends object>({
                     row={row}
                     rowIndex={rowIndex}
                     column={reactTableInstance.allColumns[cellIndex]}
+                    onDataCellClick={onDataCellClick}
+                    onDataCellKeyUp={onDataCellKeyUp}
                     onRowAdded={onRowAdded}
                     isActive={false}
                     shouldRenderInlineButtons={

packages/boxed-expression-component/src/table/BeeTable/BeeTableHeader.tsx

@@ -66,6 +66,10 @@ export interface BeeTableHeaderProps<R extends object> {
   tableColumns: ReactTable.Column<R>[];
   /** Function to be executed when columns are modified */
   onColumnUpdates?: (columnUpdates: BeeTableColumnUpdate<R>[]) => void;
+  /** Function to be executed when a column's header is clicked */
+  onHeaderClick?: (columnKey: string) => void;
+  /** Function to be executed when a key up event occurs in a column's header */
+  onHeaderKeyUp?: (columnKey: string) => void;
   /** Option to enable or disable header edits */
   isEditableHeader: boolean;
   /** */
@@ -94,6 +98,8 @@ export function BeeTableHeader<R extends object>({
   onColumnUpdates,
   isEditableHeader,
   onColumnAdded,
+  onHeaderClick,
+  onHeaderKeyUp,
   shouldRenderRowIndexColumn,
   shouldShowRowsInlineControls,
   resizerStopBehavior,
@@ -187,6 +193,8 @@ export function BeeTableHeader<R extends object>({
           {!visitedColumns.has(column) && (
             <BeeTableThResizable
               forwardRef={thRef}
+              onHeaderClick={onHeaderClick}
+              onHeaderKeyUp={onHeaderKeyUp}
               resizerStopBehavior={resizerStopBehavior}
               rowSpan={rowSpan}
               shouldRenderRowIndexColumn={shouldRenderRowIndexColumn}

packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx

@@ -46,6 +46,8 @@ export interface BeeTableTdProps<R extends object> {
   column: ReactTable.ColumnInstance<R>;
   resizerStopBehavior: ResizerStopBehavior;
   lastColumnMinWidth?: number;
+  onDataCellClick?: (columnID: string) => void;
+  onDataCellKeyUp?: (columnID: string) => void;
 }
 
 export type HoverInfo =
@@ -67,6 +69,8 @@ export function BeeTableTd<R extends object>({
   resizerStopBehavior,
   onRowAdded,
   lastColumnMinWidth,
+  onDataCellClick,
+  onDataCellKeyUp,
 }: BeeTableTdProps<R>) {
   const [isResizing, setResizing] = useState(false);
   const [hoverInfo, setHoverInfo] = useState<HoverInfo>({ isHovered: false });
@@ -212,11 +216,21 @@ export function BeeTableTd<R extends object>({
     [column.isWidthConstant, hoverInfo.isHovered, isActive, isResizing, resizingWidth?.isPivoting]
   );
 
+  const onClick = useCallback(() => {
+    return onDataCellClick?.(column.id);
+  }, [column, onDataCellClick]);
+
+  const onKeyUp = useCallback(() => {
+    return onDataCellKeyUp?.(column.id);
+  }, [column, onDataCellClick]);
+
   return (
     <BeeTableCoordinatesContextProvider coordinates={coordinates}>
       <td
         onMouseDown={onMouseDown}
         onDoubleClick={onDoubleClick}
+        onClick={onClick}
+        onKeyUp={onKeyUp}
         ref={tdRef}
         tabIndex={-1}
         className={`${cssClass} ${cssClasses}`}

packages/boxed-expression-component/src/table/BeeTable/BeeTableTh.tsx

@@ -42,6 +42,7 @@ export interface BeeTableThProps<R extends object> {
   className: string;
   thProps: Partial<ReactTable.TableHeaderProps>;
   onClick?: React.MouseEventHandler;
+  onHeaderKeyUp?: React.KeyboardEventHandler;
   isLastLevelColumn: boolean;
   rowIndex: number;
   rowSpan: number;
@@ -68,6 +69,7 @@ export function BeeTableTh<R extends object>({
   className,
   thProps,
   onClick,
+  onHeaderKeyUp,
   columnIndex,
   columnKey,
   rowIndex,
@@ -92,7 +94,8 @@ export function BeeTableTh<R extends object>({
         beforeIndex: hoverInfo.part === "left" ? columnIndex - 1 : columnIndex,
         groupType: groupType,
         columnsCount: 1,
-        insertDirection: InsertRowColumnsDirection.AboveOrRight,
+        insertDirection:
+          hoverInfo.part === "left" ? InsertRowColumnsDirection.BelowOrLeft : InsertRowColumnsDirection.AboveOrRight,
         currentIndex: columnIndex,
       });
 
@@ -189,6 +192,7 @@ export function BeeTableTh<R extends object>({
         onMouseDown={onMouseDown}
         onDoubleClick={onDoubleClick}
         onClick={onClick}
+        onKeyUp={onHeaderKeyUp}
         className={`${className} ${cssClasses}`}
         tabIndex={-1}
       >

packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx

@@ -46,7 +46,8 @@ export interface BeeTableThResizableProps<R extends object> {
   getColumnKey: (column: ReactTable.ColumnInstance<R>) => string;
   getColumnLabel: (groupType: string | undefined) => string | undefined;
   onExpressionHeaderUpdated: (args: Pick<ExpressionDefinition, "name" | "dataType">) => void;
-  onHeaderClick?: (columnKey: string) => () => void;
+  onHeaderClick?: (columnKey: string) => void;
+  onHeaderKeyUp?: (columnKey: string) => void;
   reactTableInstance: ReactTable.TableInstance<R>;
   headerCellInfo: React.ReactElement;
   shouldShowColumnsInlineControls: boolean;
@@ -68,6 +69,7 @@ export function BeeTableThResizable<R extends object>({
   getColumnKey,
   onExpressionHeaderUpdated,
   onHeaderClick,
+  onHeaderKeyUp,
   headerCellInfo,
   onColumnAdded,
   resizerStopBehavior,
@@ -91,10 +93,14 @@ export function BeeTableThResizable<R extends object>({
     return cssClasses.join(" ");
   }, [columnKey, column.dataType, column.groupType]);
 
-  const onClick = useMemo(() => {
+  const onClick = useCallback(() => {
     return onHeaderClick?.(columnKey);
   }, [columnKey, onHeaderClick]);
 
+  const onKeyUp = useCallback(() => {
+    return onHeaderKeyUp?.(columnKey);
+  }, [columnKey, onHeaderKeyUp]);
+
   const { resizingWidth, setResizingWidth } = useBeeTableResizableCell(
     columnIndex,
     resizerStopBehavior,
@@ -187,6 +193,7 @@ export function BeeTableThResizable<R extends object>({
         },
       }}
       onClick={onClick}
+      onHeaderKeyUp={onKeyUp}
       columnKey={columnKey}
       columnIndex={columnIndex}
       rowIndex={rowIndex}

packages/scesim-editor/dev-webapp/src/AvailableDMNModels.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 { DmnLatestModel, getMarshaller } from "@kie-tools/dmn-marshaller";
+import { LOAN_PRE_QUALIFICATION, TRAFFIC_VIOLATION } from "./ExternalDmnModels";
+
+export const loanPreQualification = getMarshaller(LOAN_PRE_QUALIFICATION, { upgradeTo: "latest" }).parser.parse();
+export const trafficViolationModel = getMarshaller(TRAFFIC_VIOLATION, { upgradeTo: "latest" }).parser.parse();
+
+export const avaiableModels: {
+  model: DmnLatestModel;
+  normalizedPosixPathRelativeToTheOpenFile: string;
+  svg: string;
+}[] = [
+  {
+    model: loanPreQualification,
+    svg: "",
+    normalizedPosixPathRelativeToTheOpenFile: "dev-webapp/available-dmn-models/loan-pre-qualification.dmn",
+  },
+  {
+    model: trafficViolationModel,
+    svg: "",
+    normalizedPosixPathRelativeToTheOpenFile: "dev-webapp/available-dmn-models/traffic-violation.dmn",
+  },
+];
+
+// export const availableModelsByPath: Record<string, DmnEditor.ExternalModel> = Object.values(avaiableModels).reduce(
+//   (acc, v) => {
+//     acc[v.normalizedPosixPathRelativeToTheOpenFile] = v;
+//     return acc;
+//   },
+//   {} as Record<string, DmnEditor.ExternalModel>
+// );
+
+// export const modelsByNamespace = Object.values(avaiableModels).reduce((acc, v) => {
+//   if (v.type === "dmn") {
+//     acc[v.model.definitions["@_namespace"]] = v;
+//   } else if (v.type === "pmml") {
+//     acc[getPmmlNamespace({ normalizedPosixPathRelativeToTheOpenFile: v.normalizedPosixPathRelativeToTheOpenFile })] = v;
+//   }
+//   return acc;
+// }, {} as DmnEditor.ExternalModelsIndex);

packages/scesim-editor/dev-webapp/src/DevWebApp.css

@@ -23,3 +23,7 @@
   --pf-c-page__main-section--PaddingBottom: 0px;
   --pf-c-page__main-section--PaddingLeft: 0px;
 }
+
+.dev-webapp--example-dropdown {
+  z-index: 99999;
+}

packages/scesim-editor/dev-webapp/src/DevWebApp.tsx

@@ -18,17 +18,23 @@
  */
 
 import * as React from "react";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { TestScenarioEditor, TestScenarioEditorRef } from "../../src/TestScenarioEditor";
 
+import { Button } from "@patternfly/react-core/dist/js/components/Button";
+import { Dropdown, DropdownToggle, DropdownItem } from "@patternfly/react-core/dist/js/components/Dropdown";
 import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
 import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
 
+import { LOAN_PRE_QUALIFICATION, TRAFFIC_VIOLATION } from "./ExternalDmnModels";
+import { IS_OLD_ENOUGH_RULE, TRAFFIC_VIOLATION_DMN } from "./ExternalScesimModels";
+
 import "./DevWebApp.css";
 
 export function DevWebApp() {
   const ref = useRef<TestScenarioEditorRef>(null);
+  const [isExampleDropdownOpen, setExampleDropdownIsOpen] = useState(false);
 
   useEffect(() => {
     /* Simulating a call from "Foundation" code */
@@ -77,6 +83,46 @@ export function DevWebApp() {
     }
   }, []);
 
+  const onOpenStaticScesimExample = useCallback((fileName: string, content: string) => {
+    ref.current?.setContent(fileName, content);
+  }, []);
+
+  const dropdownExamplesItems = [
+    <DropdownItem
+      key="TrafficViolationTest.scesim"
+      component="button"
+      onClick={() => onOpenStaticScesimExample("TrafficViolationTest.scesim", TRAFFIC_VIOLATION_DMN)}
+    >
+      DMN-Based: TrafficViolationTest
+    </DropdownItem>,
+    <DropdownItem
+      key="AreTheyOldEnoughTest.scesim"
+      component="button"
+      onClick={() => onOpenStaticScesimExample("AreTheyOldEnoughTest.scesim", IS_OLD_ENOUGH_RULE)}
+    >
+      Rule-Based: AreTheyOldEnoughTest
+    </DropdownItem>,
+  ];
+
+  const onExampleDropdownToggle = useCallback((isOpen: boolean) => {
+    setExampleDropdownIsOpen(isOpen);
+  }, []);
+
+  const onExampleDropdownSelect = useCallback(() => {
+    setExampleDropdownIsOpen(false);
+    const element = document.getElementById("toggle-basic");
+    element?.focus();
+  }, []);
+
+  // const onRequestExternalModelByPath = useCallback<Promise<string[]>>(async (path) => {
+  //   return availableModelsByPath[path] ?? null;
+  // }, []);
+
+  // const onRequestExternalModelsAvailableToInclude =
+  //   useCallback<DmnEditor.OnRequestExternalModelsAvailableToInclude>(async () => {
+  //     return Object.keys(availableModelsByPath);
+  //   }, []);
+
   return (
     <>
       <Page onDragOver={onDragOver} onDrop={onDrop}>
@@ -89,12 +135,30 @@ export function DevWebApp() {
               <h5>(Drag & drop a file anywhere to open it)</h5>
             </FlexItem>
             <FlexItem shrink={{ default: "shrink" }}>
-              &nbsp; &nbsp; | &nbsp; &nbsp;
-              <button onClick={reset}>Reset</button>
               &nbsp; &nbsp;
-              <button onClick={copyAsXml}>Copy as XML</button>
+              <Dropdown
+                className="dev-webapp--example-dropdown"
+                onSelect={onExampleDropdownSelect}
+                toggle={
+                  <DropdownToggle id="toggle-basic" onToggle={onExampleDropdownToggle}>
+                    Examples
+                  </DropdownToggle>
+                }
+                isOpen={isExampleDropdownOpen}
+                dropdownItems={dropdownExamplesItems}
+              />
+              &nbsp; &nbsp;
+              <Button onClick={reset} variant="tertiary">
+                Reset
+              </Button>
+              &nbsp; &nbsp;
+              <Button onClick={copyAsXml} variant="tertiary">
+                Copy as XML
+              </Button>
               &nbsp; &nbsp;
-              <button onClick={downloadAsXml}>Download as XML</button>
+              <Button onClick={downloadAsXml} variant="tertiary">
+                Download as XML
+              </Button>
             </FlexItem>
           </Flex>
           <a ref={downloadRef} />