kie-issues#1773: DMN Editor: Render badges with evaluation status on Decision nodes

packages/dmn-editor/src/DmnEditor.css

@@ -104,6 +104,39 @@
 }
 /* (end) nodes */
 
+/* (begin) decision node evaluation status */
+.kie-dmn-editor--decision-node--evaluation-status-failure::before {
+  content: " \2716";
+  font-size: 0.8em;
+  text-align: left;
+  color: white;
+  background-color: rgb(134, 106, 212);
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 40px;
+  width: 40px;
+  clip-path: polygon(0% 100%, 100% 0%, 0% 0%);
+  padding-left: 0.2em;
+}
+
+.kie-dmn-editor--decision-node--evaluation-status-success::before {
+  content: " \2714";
+  font-size: 0.8em;
+  text-align: left;
+  color: white;
+  background-color: rgb(134, 106, 212);
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 40px;
+  width: 40px;
+  clip-path: polygon(0% 100%, 100% 0%, 0% 0%);
+  padding-left: 0.2em;
+}
+
+/* (end) decision node evaluation status */
+
 /* (begin) decisionService and group nodes */
 /* DECISION SERVICES AND GROUPS HAVE A SPECIFIC SELECTION MECHANISM TO ALLOW EDITING EDGES INSIDE THEM */
 .kie-dmn-editor--node-decisionService-visibleRect {

packages/dmn-editor/src/DmnEditor.tsx

@@ -169,6 +169,10 @@ export type DmnEditorProps = {
    * Notifies the caller when the DMN Editor performs a new edit after the debounce time.
    */
   onModelDebounceStateChanged?: (changed: boolean) => void;
+  /**
+   * Its a map telling if given key (decisionId) was evaluated with value ("success" or "failure")
+   */
+  evaluationStatus?: Map<string, "success" | "failure">;
 };
 
 export const DmnEditorInternal = ({

packages/dmn-editor/src/DmnEditorContext.tsx

@@ -30,6 +30,7 @@ export type DmnEditorContextProviderProps = Pick<
   | "model"
   | "onRequestToJumpToPath"
   | "onRequestToResolvePath"
+  | "evaluationStatus"
 >;
 
 export type DmnModelBeforeEditing = DmnLatestModel;
@@ -41,6 +42,7 @@ export type DmnEditorContextType = Pick<
   | "issueTrackerHref"
   | "onRequestToJumpToPath"
   | "onRequestToResolvePath"
+  | "evaluationStatus"
 > & {
   dmnModelBeforeEditingRef: React.MutableRefObject<DmnModelBeforeEditing>;
   dmnEditorRootElementRef: React.RefObject<HTMLDivElement>;
@@ -65,13 +67,15 @@ export function DmnEditorContextProvider(props: React.PropsWithChildren<DmnEdito
       issueTrackerHref: props.issueTrackerHref,
       onRequestToJumpToPath: props.onRequestToJumpToPath,
       onRequestToResolvePath: props.onRequestToResolvePath,
+      evaluationStatus: props.evaluationStatus,
     }),
     [
       props.externalContextDescription,
       props.externalContextName,
       props.issueTrackerHref,
       props.onRequestToJumpToPath,
       props.onRequestToResolvePath,
+      props.evaluationStatus,
     ]
   );
   return <DmnEditorContext.Provider value={value}>{props.children}</DmnEditorContext.Provider>;

packages/dmn-editor/src/diagram/nodes/Nodes.tsx

@@ -73,6 +73,7 @@ import { propsHaveSameValuesDeep } from "../memoization/memoization";
 import { useExternalModels } from "../../includedModels/DmnEditorDependenciesContext";
 import { NODE_LAYERS } from "../../store/computed/computeDiagramData";
 import { useSettings } from "../../settings/DmnEditorSettingsContext";
+import { useDmnEditor } from "../../DmnEditorContext";
 
 export type ElementFilter<E extends { __$$element: string }, Filter extends string> = E extends any
   ? E["__$$element"] extends Filter
@@ -402,6 +403,13 @@ export const DecisionNode = React.memo(
       );
     });
 
+    const isEvaluationHighlightsEnabled = useDmnEditorStore((s) => s.diagram.overlays.enableEvaluationHighlights);
+    const { evaluationStatus } = useDmnEditor();
+    const evaluationStatusClassName =
+      isEvaluationHighlightsEnabled && evaluationStatus!.has(decision["@_id"])
+        ? `kie-dmn-editor--decision-node--evaluation-status-${evaluationStatus!.get(decision["@_id"])}`
+        : "";
+
     return (
       <>
         <svg className={`kie-dmn-editor--node-shape ${className}`}>
@@ -421,7 +429,7 @@ export const DecisionNode = React.memo(
 
         <div
           ref={ref}
-          className={`kie-dmn-editor--node kie-dmn-editor--decision-node ${className}`}
+          className={`kie-dmn-editor--node kie-dmn-editor--decision-node ${className} ${evaluationStatusClassName}`}
           tabIndex={-1}
           onDoubleClick={triggerEditing}
           onKeyDown={triggerEditingIfEnter}

packages/dmn-editor/stories/dmnEditorStoriesWrapper.tsx

@@ -109,6 +109,7 @@ export function DmnEditorWrapper(props?: Partial<StorybookDmnEditorProps>) {
           issueTrackerHref={props?.issueTrackerHref ?? args.issueTrackerHref}
           onRequestToJumpToPath={props?.onRequestToJumpToPath ?? args.onRequestToJumpToPath}
           onModelDebounceStateChanged={onModelDebounceStateChanged}
+          evaluationStatus={props?.evaluationStatus || args.evaluationStatus}
         />
       </div>
     </>

packages/dmn-editor/stories/misc/emptyWithAvailableExternalModels/EmptyWithAvailableExternalModels.mdx

@@ -1,22 +1,19 @@
-/\*
-
-- 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.
-  \*/
+{/* 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 EmptyWithAvailableExternalModelsStories from "./EmptyWithAvailableExternalModels.stories";
 import { Meta } from "@storybook/blocks";

packages/dmn-editor/stories/misc/evaluationStatus/EvaluationStatus.mdx

@@ -0,0 +1,25 @@
+{/* 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 EvaluationStatus from "./EvaluationStatus.stories";
+import { Meta } from "@storybook/blocks";
+
+<Meta title="MDX/Misc/EvaluationStatus" of={EvaluationStatus} />
+
+## Evaluation Status Demo
+
+Please use `Enable evaluation highlights` toggle to activate and deactivate the evaluation highlight feature. In this story you can see the evaluation status directly on the Decision node shape.