This is an automated email from the ASF dual-hosted git repository.
jomarko pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 801d2200e58 kie-issues#1872: Sandbox: Render selected indicator in the
DMN Runner table output column when Highlight evaluation results is on (#3014)
801d2200e58 is described below
commit 801d2200e58db594775139622a504ebec5138039
Author: Jozef Marko <[email protected]>
AuthorDate: Wed Apr 23 11:23:14 2025 +0200
kie-issues#1872: Sandbox: Render selected indicator in the DMN Runner table
output column when Highlight evaluation results is on (#3014)
Co-authored-by: Tiago Bento <[email protected]>
---
.../DecisionTableExpression.css | 37 ----------------------
.../DecisionTableExpression.tsx | 4 ---
.../src/table/BeeTable/BeeTableTd.tsx | 2 +-
.../src/table/BeeTable/BeeTableThResizable.tsx | 6 ++--
.../online-editor/src/dmnRunner/DmnRunnerTable.tsx | 7 ++++
.../unitables-dmn/src/DmnRunnerOutputsTable.css | 15 +++++++++
.../unitables-dmn/src/DmnRunnerOutputsTable.tsx | 10 ++++++
7 files changed, 36 insertions(+), 45 deletions(-)
diff --git
a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.css
b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.css
index 45af9079bde..fe48ed5d5ac 100644
---
a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.css
+++
b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.css
@@ -31,40 +31,3 @@
.expression-container .decision-table-expression table thead th.annotation
.add-column-button {
background-color: #ffffff;
}
-
-/* FIXME: This is not working. See
https://github.com/apache/incubator-kie-issues/issues/162 */
-/**********************************************************************
-
- NOTE
-
- The CSS below is here to simulate rowspan=2 on Input and Annotation
- columns, as Output columns are subject to a single DMN data type.
-
- React Table doesn't seem to support it, so what we do is position
- the columns of the last thead row on top of the "aggregator columns"
-
- Please take a look at this comment for more context:
- https://github.com/TanStack/table/discussions/2233#discussioncomment-97404
-
- ***********************************************************************/
-
-.expression-container .decision-table-expression table thead tr:last-child
th.decision-table--input,
-.expression-container .decision-table-expression table thead tr:last-child
th.decision-table--annotation {
- height: 115px !important;
- align-items: center;
- display: flex;
- top: -59px;
-}
-
-.expression-container .decision-table-expression table thead tr:last-child
th.decision-table--input .react-resizable,
-.expression-container
- .decision-table-expression
- table
- thead
- tr:last-child
- th.decision-table--annotation
- .react-resizable {
- display: flex;
- align-items: center;
- justify-content: space-around;
-}
diff --git
a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx
b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx
index 620b0a5798c..d4bcaab9bbe 100644
---
a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx
+++
b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx
@@ -366,7 +366,6 @@ export function DecisionTableExpression({
setWidth: setInputColumnWidth(inputIndex),
minWidth: DECISION_TABLE_INPUT_MIN_WIDTH,
groupType: DecisionTableColumnType.InputClause,
- cssClasses: "decision-table--input",
isRowIndexColumn: false,
isHeaderAFeelExpression: true,
})
@@ -388,7 +387,6 @@ export function DecisionTableExpression({
setWidth: setOutputColumnWidth(outputIndex),
minWidth: DECISION_TABLE_OUTPUT_MIN_WIDTH,
groupType: DecisionTableColumnType.OutputClause,
- cssClasses: "decision-table--output",
isRowIndexColumn: false,
})
);
@@ -399,7 +397,6 @@ export function DecisionTableExpression({
accessor: "decision-table-expression" as any, // FIXME:
https://github.com/apache/incubator-kie-issues/issues/169
label: decisionTableExpression["@_label"] ??
DEFAULT_EXPRESSION_VARIABLE_NAME,
dataType: decisionTableExpression["@_typeRef"] ??
DmnBuiltInDataType.Undefined,
- cssClasses: "decision-table--output",
isRowIndexColumn: false,
width: undefined,
columns: outputColumns,
@@ -417,7 +414,6 @@ export function DecisionTableExpression({
minWidth: DECISION_TABLE_ANNOTATION_MIN_WIDTH,
isInlineEditable: true,
groupType: DecisionTableColumnType.Annotation,
- cssClasses: "decision-table--annotation",
isRowIndexColumn: false,
dataType: undefined!,
};
diff --git
a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx
b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx
index a9ce90b8575..92e02f0f3ca 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx
+++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx
@@ -248,7 +248,7 @@ export function BeeTableTd<R extends object>({
onKeyUp={isReadOnly ? undefined : onKeyUp}
ref={tdRef}
tabIndex={-1}
- className={`${cssClass} ${cssClasses}`}
+ className={`${cssClass} ${cssClasses} ${column.cssClasses}`}
data-testid={`kie-tools--bee--expression-column-${columnIndex}`}
data-ouia-component-id={`expression-column-${columnIndex}`}
style={{
diff --git
a/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx
b/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx
index 9e0bb54abc9..9e2ce74ca09 100644
---
a/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx
+++
b/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx
@@ -90,9 +90,9 @@ export function BeeTableThResizable<R extends object>({
}
cssClasses.push(column.groupType ?? "");
- // cssClasses.push(column.cssClasses ?? ""); // FIXME: Breaking Decision
tables because of positioning of rowSpan=2 column headers (See
https://github.com/apache/incubator-kie-issues/issues/162)
+ cssClasses.push(column.cssClasses ?? "");
return cssClasses.join(" ");
- }, [columnKey, column.dataType, column.groupType]);
+ }, [columnKey, column.cssClasses, column.dataType, column.groupType]);
const onClick = useCallback(() => {
return onHeaderClick?.(columnKey);
@@ -207,7 +207,7 @@ export function BeeTableThResizable<R extends object>({
column={column}
>
<div
- className="header-cell"
+ className={`header-cell ${cssClasses}`}
data-ouia-component-type="expression-column-header"
ref={headerCellRef}
// We stop propagation here because if the user performs a double
click on any component inside
diff --git a/packages/online-editor/src/dmnRunner/DmnRunnerTable.tsx
b/packages/online-editor/src/dmnRunner/DmnRunnerTable.tsx
index 9799f00e5b2..448298eae88 100644
--- a/packages/online-editor/src/dmnRunner/DmnRunnerTable.tsx
+++ b/packages/online-editor/src/dmnRunner/DmnRunnerTable.tsx
@@ -36,6 +36,7 @@ import { MessageBusClientApi } from
"@kie-tools-core/envelope-bus/dist/api";
import { NewDmnEditorEnvelopeApi } from
"@kie-tools/dmn-editor-envelope/dist/NewDmnEditorEnvelopeApi";
import { useSettings } from "../settings/SettingsContext";
import { useEditorDockContext } from "../editor/EditorPageDockContextProvider";
+import { useSharedValue } from "@kie-tools-core/envelope-bus/dist/hooks";
export function DmnRunnerTable() {
// STATEs
@@ -122,6 +123,11 @@ export function DmnRunnerTable() {
const { envelopeServer } = useEditorDockContext();
+ const [openedBoxedExpressionNodeId, _] = useSharedValue(
+ (envelopeServer?.envelopeApi as
MessageBusClientApi<NewDmnEditorEnvelopeApi>).shared
+ .newDmnEditor_openedBoxedExpressionEditorNodeId
+ );
+
return (
<>
{extendedServicesError ? (
@@ -158,6 +164,7 @@ export function DmnRunnerTable() {
}
: undefined
}
+
openedBoxedExpressionEditorNodeId={openedBoxedExpressionNodeId}
/>
</div>
</DrawerPanelContent>
diff --git a/packages/unitables-dmn/src/DmnRunnerOutputsTable.css
b/packages/unitables-dmn/src/DmnRunnerOutputsTable.css
index 3b4a6ef0624..14081b03387 100644
--- a/packages/unitables-dmn/src/DmnRunnerOutputsTable.css
+++ b/packages/unitables-dmn/src/DmnRunnerOutputsTable.css
@@ -21,3 +21,18 @@
.expression-container .standalone-bee-table table thead th.dmn-runner-output
.add-column-button {
background-color: #bee1f4;
}
+
+.expression-container .table-component table thead th.runner-column-highlight,
+.expression-container .table-component table tbody td.runner-column-highlight,
+.expression-container .table-component table tbody
td:first-child.runner-column-highlight {
+ border-left: var(--pf-global--BorderWidth--md) solid
var(--pf-global--BorderColor--200);
+ border-right: var(--pf-global--BorderWidth--md) solid
var(--pf-global--BorderColor--200);
+}
+
+.expression-container .table-component table thead tr:last-child
th.runner-column-highlight {
+ border-top: var(--pf-global--BorderWidth--md) solid
var(--pf-global--BorderColor--200);
+}
+
+.expression-container .table-component table tbody tr:last-child
td.runner-column-highlight {
+ border-bottom: var(--pf-global--BorderWidth--md) solid
var(--pf-global--BorderColor--200);
+}
diff --git a/packages/unitables-dmn/src/DmnRunnerOutputsTable.tsx
b/packages/unitables-dmn/src/DmnRunnerOutputsTable.tsx
index 99f87096a6d..c63fb7bb75e 100644
--- a/packages/unitables-dmn/src/DmnRunnerOutputsTable.tsx
+++ b/packages/unitables-dmn/src/DmnRunnerOutputsTable.tsx
@@ -54,6 +54,7 @@ interface Props {
jsonSchemaBridge: DmnUnitablesJsonSchemaBridge;
scrollableParentRef: React.RefObject<HTMLElement>;
openBoxedExpressionEditor?: (nodeId: string) => void;
+ openedBoxedExpressionEditorNodeId: string | undefined;
}
export function DmnRunnerOutputsTable({
@@ -62,6 +63,7 @@ export function DmnRunnerOutputsTable({
results,
scrollableParentRef,
openBoxedExpressionEditor,
+ openedBoxedExpressionEditorNodeId,
}: Props) {
const outputUid = useMemo(() => nextId(), []);
const outputErrorBoundaryRef = useRef<ErrorBoundary>(null);
@@ -91,6 +93,7 @@ export function DmnRunnerOutputsTable({
results={results}
id={outputUid}
openBoxedExpressionEditor={openBoxedExpressionEditor}
+
openedBoxedExpressionEditorNodeId={openedBoxedExpressionEditorNodeId}
/>
</ErrorBoundary>
) : (
@@ -139,6 +142,7 @@ interface OutputsTableProps {
outputsPropertiesMap: Map<string, OutputField>;
scrollableParentRef: React.RefObject<HTMLElement>;
openBoxedExpressionEditor?: (nodeId: string) => void;
+ openedBoxedExpressionEditorNodeId: string | undefined;
}
function OutputsBeeTable({
@@ -148,6 +152,7 @@ function OutputsBeeTable({
results,
scrollableParentRef,
openBoxedExpressionEditor,
+ openedBoxedExpressionEditorNodeId,
}: OutputsTableProps) {
const beeTableOperationConfig = useMemo<BeeTableOperationConfig>(
() => [
@@ -303,6 +308,7 @@ function OutputsBeeTable({
return [
{
originalId: `${outputProperties?.name}-${generateUuid()}`,
+ cssClasses: decisionId === openedBoxedExpressionEditorNodeId ?
"runner-column-highlight" : "",
headerCellElementExtension: openBoxedExpressionHeaderButton({
decisionId, decisionName }),
label: parentLabel,
accessor: (`output-object-parent-${outputProperties?.name}-` +
generateUuid()) as any,
@@ -362,6 +368,7 @@ function OutputsBeeTable({
columns: [
{
originalId:
`${outputProperties?.name}-${generateUuid()}-${outputProperties?.properties?.id}`,
+ cssClasses: decisionId === openedBoxedExpressionEditorNodeId ?
"runner-column-highlight" : "",
headerCellElementExtension: openBoxedExpressionHeaderButton({
decisionId, decisionName }),
label: label,
accessor: (`output-${outputProperties?.name}-` +
generateUuid()) as any,
@@ -382,6 +389,7 @@ function OutputsBeeTable({
return [
{
originalId: `${outputProperties?.name}-${generateUuid()}`,
+ cssClasses: decisionId === openedBoxedExpressionEditorNodeId ?
"runner-column-highlight" : "",
headerCellElementExtension: openBoxedExpressionHeaderButton({
decisionId, decisionName }),
label: parentLabel,
accessor: (`output-array-parent-${outputProperties?.name}-` +
generateUuid()) as any,
@@ -414,6 +422,7 @@ function OutputsBeeTable({
return [
{
originalId: `${outputProperties?.name}-${generateUuid()}`,
+ cssClasses: decisionId === openedBoxedExpressionEditorNodeId ?
"runner-column-highlight" : "",
headerCellElementExtension: openBoxedExpressionHeaderButton({
decisionId, decisionName }),
label: parentLabel,
accessor: (`output-object-parent-${outputProperties?.name}-` +
generateUuid()) as any,
@@ -430,6 +439,7 @@ function OutputsBeeTable({
deepFlattenObjectColumn,
getDefaultDmnRunnerOutputColumnWidth,
openBoxedExpressionHeaderButton,
+ openedBoxedExpressionEditorNodeId,
outputsPropertiesMap,
results,
]);
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
