kie-issues#1741: Sandbox: Add “Open Boxed Expression Editor” button in the DMN Runner table output columns

packages/boxed-expression-component/src/@types/react-table.ts

@@ -50,6 +50,8 @@ declare module "react-table" {
     label: string;
     /** Custom Element to be rendered in place of the column label */
     headerCellElement?: JSX.Element;
+    /** Additional Element to be rendered in the Header Cell top right corner */
+    headerCellElementExtension?: JSX.Element;
     /** It makes this column header inline editable (with double-click) */
     isInlineEditable?: boolean;
     /** Column data type */

packages/boxed-expression-component/src/BoxedExpressionEditorContext.css

@@ -99,3 +99,9 @@
   font-size: smaller;
   color: #1b515f;
 }
+
+.kie-tools--bee--header-cell-element-extension {
+  position: absolute;
+  top: 0;
+  right: 0;
+}

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

@@ -265,6 +265,11 @@ export function BeeTableHeader<R extends object>({
                       ({column.dataType})
                     </p>
                   ) : null}
+                  {column.headerCellElementExtension !== undefined && (
+                    <div className="kie-tools--bee--header-cell-element-extension">
+                      {column.headerCellElementExtension}
+                    </div>
+                  )}
                 </div>
               }
             />

packages/form-dmn/src/FormDmnOutputs.tsx

@@ -274,9 +274,8 @@ export function FormDmnOutputs({ openExecutionTab, openBoxedExpressionEditor, ..
                 {onOpenBoxedExpressionEditor !== undefined && (
                   <Button
                     variant={"plain"}
-                    title={`Open ${dmnFormResult.decisionName} expression`}
+                    title={`Open '${dmnFormResult.decisionName}' expression`}
                     icon={<ArrowUpIcon />}
-                    data-navigate-to-expression-id={dmnFormResult.decisionId}
                     onClick={() => onOpenBoxedExpressionEditor?.(dmnFormResult.decisionId)}
                   />
                 )}

packages/online-editor/src/dmnRunner/DmnRunnerTable.tsx

@@ -32,8 +32,12 @@ import setObjectValueByPath from "lodash/set";
 import cloneDeep from "lodash/cloneDeep";
 import { DmnRunnerProviderActionType } from "./DmnRunnerTypes";
 import { DmnRunnerExtendedServicesError } from "./DmnRunnerContextProvider";
+import { MessageBusClientApi } from "@kie-tools-core/envelope-bus/dist/api";
+import { NewDmnEditorEnvelopeApi } from "@kie-tools/dmn-editor-envelope/dist/NewDmnEditorEnvelopeApi";
+import { EmbeddedEditorRef } from "@kie-tools-core/editor/dist/embedded";
+import { useSettings } from "../settings/SettingsContext";
 
-export function DmnRunnerTable() {
+export function DmnRunnerTable(props: { editor: EmbeddedEditorRef | undefined }) {
   // STATEs
   const [dmnRunnerTableError, setDmnRunnerTableError] = useState<boolean>(false);
 
@@ -113,6 +117,9 @@ export function DmnRunnerTable() {
     setDmnRunnerTableError(false);
   }, [jsonSchema]);
 
+  const { settings } = useSettings();
+  const isLegacyDmnEditor = useMemo(() => settings.editors.useLegacyDmnEditor, [settings.editors.useLegacyDmnEditor]);
+
   return (
     <>
       {extendedServicesError ? (
@@ -137,6 +144,18 @@ export function DmnRunnerTable() {
                           i18n={i18n.dmnRunner.table}
                           jsonSchemaBridge={jsonSchemaBridge}
                           results={results}
+                          openBoxedExpressionEditor={
+                            !isLegacyDmnEditor
+                              ? (nodeId: string) => {
+                                  const newDmnEditorEnvelopeApi = props.editor?.getEnvelopeServer()
+                                    .envelopeApi as unknown as MessageBusClientApi<NewDmnEditorEnvelopeApi>;
+
+                                  newDmnEditorEnvelopeApi.notifications.dmnEditor_openBoxedExpressionEditor.send(
+                                    nodeId
+                                  );
+                                }
+                              : undefined
+                          }
                         />
                       </div>
                     </DrawerPanelContent>

packages/online-editor/src/editor/EditorPage.tsx

@@ -468,6 +468,7 @@ Error details: ${err}`);
                 workspaceFile={file.workspaceFile}
                 workspaces={workspaces}
                 dmnLanguageService={dmnLanguageService}
+                editor={editor}
                 isEditorReady={editor?.isReady ?? false}
                 editorValidate={editor?.validate}
               >

packages/online-editor/src/editor/EditorPageDockContextProvider.tsx

@@ -35,6 +35,7 @@
 import { DmnRunnerTable } from "../dmnRunner/DmnRunnerTable";
 import { ErrorBoundary } from "../reactExt/ErrorBoundary";
 import { DmnRunnerErrorBoundary } from "../dmnRunner/DmnRunnerErrorBoundary";
+import { EmbeddedEditorRef } from "@kie-tools-core/editor/dist/embedded";
 
 interface EditorPageDockContextType {
   panel: PanelId;
@@ -74,6 +75,7 @@
   workspaces: WorkspacesContextType;
   dmnLanguageService?: DmnLanguageService;
   isEditorReady: boolean;
+  editor: EmbeddedEditorRef | undefined;
   editorValidate?: () => Promise<Notification[]>;
 }
 
@@ -83,6 +85,7 @@
   workspaces,
   workspaceFile,
   isEditorReady,
+  editor,
   editorValidate,
 }: React.PropsWithChildren<Props>) {
   const { i18n } = useOnlineI18n();
@@ -186,13 +189,13 @@
       case PanelId.DMN_RUNNER_TABLE:
         return (
           <DmnRunnerErrorBoundary>
-            <DmnRunnerTable />
+            <DmnRunnerTable editor={editor} />
           </DmnRunnerErrorBoundary>
         );
       default:
         return undefined;
     }
   }, [notificationsPanelRef, notificationsPanelTabNames, panel]);
 
   const addToggleItem = useCallback((panelId: PanelId, newItem: JSX.Element) => {
     setToggleGroupItem((previousToggleGroupItems) => {

packages/unitables-dmn/src/DmnRunnerOutputsTable.tsx

@@ -44,15 +44,24 @@ import "@kie-tools/boxed-expression-component/dist/@types/react-table";
 import { ResizerStopBehavior } from "@kie-tools/boxed-expression-component/dist/resizing/ResizingWidthsContext";
 import "./DmnRunnerOutputsTable.css";
 import { DecisionResult, DmnEvaluationResult } from "@kie-tools/extended-services-api";
+import { Button } from "@patternfly/react-core/dist/js/components/Button";
+import { ArrowUpIcon } from "@patternfly/react-icons/dist/js/icons/arrow-up-icon";
 
 interface Props {
   i18n: DmnUnitablesI18n;
   results: Array<DecisionResult[] | undefined> | undefined;
   jsonSchemaBridge: DmnUnitablesJsonSchemaBridge;
   scrollableParentRef: React.RefObject<HTMLElement>;
+  openBoxedExpressionEditor?: (nodeId: string) => void;
 }
 
-export function DmnRunnerOutputsTable({ i18n, jsonSchemaBridge, results, scrollableParentRef }: Props) {
+export function DmnRunnerOutputsTable({
+  i18n,
+  jsonSchemaBridge,
+  results,
+  scrollableParentRef,
+  openBoxedExpressionEditor,
+}: Props) {
   const outputUid = useMemo(() => nextId(), []);
   const outputErrorBoundaryRef = useRef<ErrorBoundary>(null);
   const [outputError, setOutputError] = useState<boolean>(false);
@@ -80,6 +89,7 @@ export function DmnRunnerOutputsTable({ i18n, jsonSchemaBridge, results, scrolla
             outputsPropertiesMap={outputsPropertiesMap}
             results={results}
             id={outputUid}
+            openBoxedExpressionEditor={openBoxedExpressionEditor}
           />
         </ErrorBoundary>
       ) : (
@@ -129,9 +139,17 @@ interface OutputsTableProps {
   results: (DecisionResult[] | undefined)[] | undefined;
   outputsPropertiesMap: Map<string, OutputField>;
   scrollableParentRef: React.RefObject<HTMLElement>;
+  openBoxedExpressionEditor?: (nodeId: string) => void;
 }
 
-function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollableParentRef }: OutputsTableProps) {
+function OutputsBeeTable({
+  id,
+  i18n,
+  outputsPropertiesMap,
+  results,
+  scrollableParentRef,
+  openBoxedExpressionEditor,
+}: OutputsTableProps) {
   const beeTableOperationConfig = useMemo<BeeTableOperationConfig>(
     () => [
       {
@@ -228,8 +246,33 @@ function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollablePa
     [getRowValue]
   );
 
+  const onOpenBoxedExpressionHeaderButtonClick = useCallback(
+    (clickedDecisionId: string) => {
+      (results?.[0] ?? []).flatMap(({ decisionId: resultDecisionId }) => {
+        if (clickedDecisionId === resultDecisionId) {
+          openBoxedExpressionEditor?.(resultDecisionId);
+        }
+      });
+    },
+    [openBoxedExpressionEditor, results]
+  );
+
+  const openBoxedExpressionHeaderButton = useCallback(
+    ({ decisionId, decisionName }) => {
+      return (
+        <Button
+          variant={"plain"}
+          title={`Open '${decisionName}' expression`}
+          icon={<ArrowUpIcon />}
+          onClick={() => onOpenBoxedExpressionHeaderButtonClick(decisionId)}
+        />
+      );
+    },
+    [onOpenBoxedExpressionHeaderButtonClick]
+  );
+
   const beeTableColumns = useMemo<ReactTable.Column<ROWTYPE>[]>(() => {
-    return (results?.[0] ?? []).flatMap(({ result, decisionName }) => {
+    return (results?.[0] ?? []).flatMap(({ result, decisionName, decisionId }) => {
       const outputProperties = outputsPropertiesMap.get(decisionName);
       if (!outputProperties) {
         return [];
@@ -245,7 +288,8 @@ function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollablePa
         );
         return [
           {
-            originalId: `${outputProperties?.name}-` + generateUuid(),
+            originalId: `${outputProperties?.name}-${generateUuid()}`,
+            headerCellElementExtension: openBoxedExpressionHeaderButton({ decisionId, decisionName }),
             label: outputProperties?.name ?? "",
             accessor: (`output-object-parent-${outputProperties?.name}-` + generateUuid()) as any,
             dataType: outputProperties?.dataType,
@@ -259,7 +303,7 @@ function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollablePa
                     return deepFlattenObjectColumn(collectedOutput, outputProperties?.properties);
                   }
                   return {
-                    originalId: "context-" + generateUuid(),
+                    originalId: `context-${generateUuid()}`,
                     label: "context",
                     accessor: (`output-context-` + generateUuid()) as any,
                     dataType: outputProperties?.dataType ?? DmnBuiltInDataType.Any,
@@ -286,7 +330,7 @@ function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollablePa
       if (typeof result === "string" || typeof result === "number" || typeof result === "boolean" || result === null) {
         return [
           {
-            originalId: `parent-${outputProperties?.name}-` + generateUuid(),
+            originalId: `parent-${outputProperties?.name}-${generateUuid()}`,
             label: "",
             accessor: (`output-parent-${outputProperties?.name}-` + generateUuid()) as any,
             dataType: undefined as any,
@@ -295,7 +339,8 @@ function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollablePa
             minWidth: DMN_RUNNER_OUTPUT_COLUMN_MIN_WIDTH,
             columns: [
               {
-                originalId: `${outputProperties?.name}-` + generateUuid(),
+                originalId: `${outputProperties?.name}-${generateUuid()}-${outputProperties?.properties?.id}`,
+                headerCellElementExtension: openBoxedExpressionHeaderButton({ decisionId, decisionName }),
                 label: outputProperties?.name ?? "",
                 accessor: (`output-${outputProperties?.name}-` + generateUuid()) as any,
                 dataType: outputProperties?.dataType ?? DmnBuiltInDataType.Undefined,
@@ -312,14 +357,15 @@ function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollablePa
       if (Array.isArray(result)) {
         return [
           {
-            originalId: `${outputProperties?.name}-` + generateUuid(),
+            originalId: `${outputProperties?.name}-${generateUuid()}`,
+            headerCellElementExtension: openBoxedExpressionHeaderButton({ decisionId, decisionName }),
             label: `${outputProperties?.name}`,
             accessor: (`output-array-parent-${outputProperties?.name}-` + generateUuid()) as any,
             dataType: outputProperties?.dataType ?? DmnBuiltInDataType.Undefined,
             isRowIndexColumn: false,
             groupType: "dmn-runner-output",
             columns: result.map((entry, entryIndex) => ({
-              originalId: `${entryIndex}-` + generateUuid(),
+              originalId: `${entryIndex}-${generateUuid()}`,
               label: `[${entryIndex}]`,
               accessor: (`output-array-${entryIndex}-` + generateUuid()) as any,
               dataType: undefined as any,
@@ -336,7 +382,8 @@ function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollablePa
       if (typeof result === "object") {
         return [
           {
-            originalId: `${outputProperties?.name}-` + generateUuid(),
+            originalId: `${outputProperties?.name}-${generateUuid()}`,
+            headerCellElementExtension: openBoxedExpressionHeaderButton({ decisionId, decisionName }),
             label: outputProperties?.name ?? "",
             accessor: (`output-object-parent-${outputProperties?.name}-` + generateUuid()) as any,
             dataType: outputProperties?.dataType ?? DmnBuiltInDataType.Undefined,
@@ -349,7 +396,7 @@ function OutputsBeeTable({ id, i18n, outputsPropertiesMap, results, scrollablePa
       }
       return [] as ReactTable.Column<ROWTYPE>[];
     });
-  }, [deepFlattenObjectColumn, outputsPropertiesMap, results]);
+  }, [deepFlattenObjectColumn, openBoxedExpressionHeaderButton, outputsPropertiesMap, results]);
 
   const beeTableRows = useMemo<ROWTYPE[]>(() => {
     return (results ?? []).map((decisionResult, rowIndex) => {