Skip to content

Commit

Permalink
Click in header not loading properties panel (apache#97)
Browse files Browse the repository at this point in the history
* When a header of ContextExpression or the output column in DecisionTable are selected the properties panel was not being loaded.

* When a header of ContextExpression or the output column in DecisionTable are selected the properties panel was not being loaded.

* Fix for issue when select an empty expression
  • Loading branch information
danielzhe authored Apr 12, 2023
1 parent c7c3eb0 commit 93f150b
Show file tree
Hide file tree
Showing 19 changed files with 151 additions and 43 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,24 @@ import {
ContextExpressionDefinitionEntry,
ExpressionDefinitionLogicType,
} from "../../api";
import * as _ from "lodash";
import {
NestedExpressionDispatchContextProvider,
useBoxedExpressionEditorDispatch,
} from "../BoxedExpressionEditor/BoxedExpressionEditorContext";
import { useCallback, useMemo } from "react";
import { useCallback } from "react";
import { ExpressionContainer } from "../ExpressionDefinitionRoot/ExpressionContainer";

export interface ContextEntryExpressionCellProps {
// This name ('data') can't change, as this is used on "cellComponentByColumnAccessor".
data: readonly ContextExpressionDefinitionEntry[];
rowIndex: number;
columnIndex: number;
}

export const ContextEntryExpressionCell: React.FunctionComponent<ContextEntryExpressionCellProps> = ({
data: contextEntries,
rowIndex,
columnIndex,
}) => {
const { setExpression } = useBoxedExpressionEditorDispatch();

Expand All @@ -60,6 +61,8 @@ export const ContextEntryExpressionCell: React.FunctionComponent<ContextEntryExp
expression={contextEntries[rowIndex]?.entryExpression}
isResetSupported={true}
isNested={true}
rowIndex={rowIndex}
columnIndex={columnIndex}
/>
</NestedExpressionDispatchContextProvider>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,14 @@

import { ContextExpressionDefinitionEntry, DmnBuiltInDataType, ExpressionDefinition } from "../../api";
import * as React from "react";
import { useCallback, useMemo } from "react";
import { useCallback, useEffect, useMemo } from "react";
import * as _ from "lodash";
import { useBeeTableSelectableCellRef } from "../../selection/BeeTableSelectionContext";
import { DEFAULT_EXPRESSION_NAME, ExpressionDefinitionHeaderMenu } from "../ExpressionDefinitionHeaderMenu";
import "./ContextEntryInfoCell.css";
import { useCellWidthToFitDataRef } from "../../resizing/BeeTableCellWidthToFitDataContext";
import { getCanvasFont, getTextWidth } from "../../resizing/WidthsToFitData";
import { useBoxedExpressionEditor } from "../../expressions/BoxedExpressionEditor/BoxedExpressionEditorContext";

export interface ContextEntryInfoCellProps {
// This name ('data') can't change, as this is used on "cellComponentByColumnAccessor".
Expand Down Expand Up @@ -86,13 +87,21 @@ export const ContextEntryInfoCell: React.FunctionComponent<ContextEntryInfoCellP
)
);

useBeeTableSelectableCellRef(
const { isActive } = useBeeTableSelectableCellRef(
rowIndex,
columnIndex,
undefined,
useCallback(() => `${entryInfo.name} (${entryInfo.dataType})`, [entryInfo.dataType, entryInfo.name])
);

const { beeGwtService } = useBoxedExpressionEditor();

useEffect(() => {
if (isActive) {
beeGwtService?.selectObject(entryInfo.id);
}
}, [beeGwtService, entryInfo, isActive]);

const renderEntryDefinition = useCallback(
(args: { additionalCssClass?: string }) => (
<div className={`expression-info ${args.additionalCssClass}`} ref={ref}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export function ContextExpression(contextExpression: ContextExpressionDefinition
const beeTableColumns = useMemo<ReactTable.Column<ROWTYPE>[]>(() => {
return [
{
accessor: "context-expression" as any, // FIXME: Tiago -> ?
accessor: contextExpression.id as any, // FIXME: Tiago -> ?
label: contextExpression.name ?? DEFAULT_EXPRESSION_NAME,
isRowIndexColumn: false,
dataType: contextExpression.dataType ?? CONTEXT_ENTRY_DEFAULT_DATA_TYPE,
Expand Down Expand Up @@ -205,7 +205,12 @@ export function ContextExpression(contextExpression: ContextExpressionDefinition
const beeTableAdditionalRow = useMemo(() => {
return [
<ContextResultInfoCell key={"context-result-info"} />,
<ContextResultExpressionCell key={"context-result-expression"} contextExpression={contextExpression} />,
<ContextResultExpressionCell
key={"context-result-expression"}
contextExpression={contextExpression}
rowIndex={0}
columnIndex={0}
/>,
];
}, [contextExpression]);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import * as React from "react";
import { useCallback, useMemo } from "react";
import { useCallback } from "react";
import { ContextExpressionDefinition } from "../../api";
import {
useBoxedExpressionEditorDispatch,
NestedExpressionDispatchContextProvider,
} from "../BoxedExpressionEditor/BoxedExpressionEditorContext";
import { ExpressionContainer } from "../ExpressionDefinitionRoot/ExpressionContainer";

export function ContextResultExpressionCell(props: { contextExpression: ContextExpressionDefinition }) {
export function ContextResultExpressionCell(props: {
contextExpression: ContextExpressionDefinition;
rowIndex: number;
columnIndex: number;
}) {
const { setExpression } = useBoxedExpressionEditorDispatch();

const onSetExpression = useCallback(
Expand All @@ -22,7 +26,13 @@ export function ContextResultExpressionCell(props: { contextExpression: ContextE

return (
<NestedExpressionDispatchContextProvider onSetExpression={onSetExpression}>
<ExpressionContainer expression={props.contextExpression.result} isResetSupported={true} isNested={true} />
<ExpressionContainer
expression={props.contextExpression.result}
isResetSupported={true}
isNested={true}
rowIndex={props.rowIndex}
columnIndex={props.columnIndex}
/>
</NestedExpressionDispatchContextProvider>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ export function DecisionTableExpression(

const outputSection = {
groupType: DecisionTableColumnType.OutputClause,
id: "Outputs",
id: decisionTableExpression.id,
accessor: "decision-table-expression" as any, // FIXME: Tiago -> ?
label: decisionTableExpression.name ?? DEFAULT_EXPRESSION_NAME,
dataType: decisionTableExpression.dataType ?? DmnBuiltInDataType.Undefined,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,43 @@
* limitations under the License.
*/

import { DmnBuiltInDataType, ExpressionDefinition, ExpressionDefinitionLogicType, generateUuid } from "../../api";
import { ExpressionDefinition, ExpressionDefinitionLogicType, generateUuid } from "../../api";
import * as React from "react";
import { useCallback, useRef } from "react";
import { useCallback, useEffect, useRef } from "react";
import { ExpressionDefinitionLogicTypeSelector } from "./ExpressionDefinitionLogicTypeSelector";
import * as _ from "lodash";
import {
useBoxedExpressionEditor,
useBoxedExpressionEditorDispatch,
} from "../BoxedExpressionEditor/BoxedExpressionEditorContext";
import { DEFAULT_EXPRESSION_NAME } from "../ExpressionDefinitionHeaderMenu";
import { useNestedExpressionContainer } from "../../resizing/NestedExpressionContainerContext";
import { useBeeTableSelectableCellRef } from "../../selection/BeeTableSelectionContext";

export interface ExpressionContainerProps {
expression: ExpressionDefinition;
isNested: boolean;
isResetSupported: boolean;
rowIndex: number;
columnIndex: number;
}

export const ExpressionContainer: React.FunctionComponent<ExpressionContainerProps> = ({
expression,
isNested,
isResetSupported,
rowIndex,
columnIndex,
}) => {
const containerRef = useRef<HTMLDivElement>(null);

const { beeGwtService } = useBoxedExpressionEditor();
const { setExpression } = useBoxedExpressionEditorDispatch();
const { isActive } = useBeeTableSelectableCellRef(rowIndex, columnIndex, undefined);

useEffect(() => {
if (isActive) {
beeGwtService?.selectObject("");
}
}, [beeGwtService, isActive]);

const onLogicTypeSelected = useCallback(
(logicType) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import { CutIcon } from "@patternfly/react-icons/dist/js/icons/cut-icon";
import { ListIcon } from "@patternfly/react-icons/dist/js/icons/list-icon";
import { PasteIcon } from "@patternfly/react-icons/dist/js/icons/paste-icon";
import { TableIcon } from "@patternfly/react-icons/dist/js/icons/table-icon";
import _ from "lodash";
import * as React from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { ExpressionDefinition, ExpressionDefinitionLogicType, generateUuid } from "../../../api";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,13 @@ export function ExpressionDefinitionRoot({
<span className="expression-type">({expression.logicType})</span>
</div>

<ExpressionContainer expression={expression} isResetSupported={isResetSupported} isNested={false} />
<ExpressionContainer
expression={expression}
isResetSupported={isResetSupported}
isNested={false}
rowIndex={0}
columnIndex={0}
/>
</div>
</ResizingWidthsContextProvider>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export function FeelFunctionExpression({
return [
{
label: functionExpression.name ?? DEFAULT_EXPRESSION_NAME,
accessor: "function-expression" as any, // FIXME: Tiago -> ?
accessor: functionExpression.id as any, // FIXME: Tiago -> ?
dataType: functionExpression.dataType ?? DmnBuiltInDataType.Undefined,
isRowIndexColumn: false,
width: undefined,
Expand Down Expand Up @@ -182,7 +182,7 @@ export function FeelFunctionExpression({
);
}

export function FeelFunctionImplementationCell({ data, rowIndex }: BeeTableCellProps<FEEL_ROWTYPE>) {
export function FeelFunctionImplementationCell({ data, rowIndex, columnIndex }: BeeTableCellProps<FEEL_ROWTYPE>) {
const functionExpression = data[rowIndex].functionExpression as FeelFunctionExpressionDefinition;

const { setExpression } = useBoxedExpressionEditorDispatch();
Expand All @@ -199,7 +199,13 @@ export function FeelFunctionImplementationCell({ data, rowIndex }: BeeTableCellP

return (
<NestedExpressionDispatchContextProvider onSetExpression={onSetExpression}>
<ExpressionContainer expression={functionExpression.expression} isResetSupported={true} isNested={true} />
<ExpressionContainer
expression={functionExpression.expression}
isResetSupported={true}
isNested={true}
rowIndex={rowIndex}
columnIndex={columnIndex}
/>
</NestedExpressionDispatchContextProvider>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function JavaFunctionExpression({
return [
{
label: functionExpression.name ?? DEFAULT_EXPRESSION_NAME,
accessor: "function-expression" as any, // FIXME: Tiago -> ?
accessor: functionExpression.id as any, // FIXME: Tiago -> ?
dataType: functionExpression.dataType ?? DmnBuiltInDataType.Undefined,
isRowIndexColumn: false,
width: undefined,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export function PmmlFunctionExpression({
return [
{
label: functionExpression.name ?? DEFAULT_EXPRESSION_NAME,
accessor: "function-expression" as any, // FIXME: Tiago -> ?
accessor: functionExpression.id as any, // FIXME: Tiago -> ?
dataType: functionExpression.dataType ?? DmnBuiltInDataType.Undefined,
isRowIndexColumn: false,
width: undefined,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,13 @@ export interface ArgumentEntryExpressionCellProps {
// This name ('data') can't change, as this is used on "cellComponentByColumnAccessor".
data: readonly ContextExpressionDefinitionEntry[];
rowIndex: number;
columnIndex: number;
}

export const ArgumentEntryExpressionCell: React.FunctionComponent<ArgumentEntryExpressionCellProps> = ({
data: argumentEntries,
rowIndex,
columnIndex,
}) => {
const { setExpression } = useBoxedExpressionEditorDispatch();

Expand All @@ -59,6 +61,8 @@ export const ArgumentEntryExpressionCell: React.FunctionComponent<ArgumentEntryE
expression={argumentEntries[rowIndex]?.entryExpression}
isResetSupported={true}
isNested={true}
rowIndex={rowIndex}
columnIndex={columnIndex}
/>
</NestedExpressionDispatchContextProvider>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export function InvocationExpression(invocationExpression: InvocationExpressionD
() => [
{
label: invocationExpression.name ?? DEFAULT_EXPRESSION_NAME,
accessor: "invocation-expression" as keyof ROWTYPE,
accessor: invocationExpression.id as keyof ROWTYPE,
dataType: invocationExpression.dataType ?? INVOCATION_EXPRESSION_DEFAULT_PARAMETER_DATA_TYPE,
isRowIndexColumn: false,
width: undefined,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ import { useNestedExpressionContainerWithNestedExpressions } from "../../resizin
import { NestedExpressionContainerContext } from "../../resizing/NestedExpressionContainerContext";
import { LIST_EXPRESSION_EXTRA_WIDTH, LIST_EXPRESSION_ITEM_MIN_WIDTH } from "../../resizing/WidthConstants";
import { BeeTable, BeeTableColumnUpdate } from "../../table/BeeTable";
import { useBoxedExpressionEditorDispatch } from "../BoxedExpressionEditor/BoxedExpressionEditorContext";
import {
useBoxedExpressionEditor,
useBoxedExpressionEditorDispatch,
} from "../BoxedExpressionEditor/BoxedExpressionEditorContext";
import { DEFAULT_EXPRESSION_NAME } from "../ExpressionDefinitionHeaderMenu";
import "./ListExpression.css";
import { ListItemCell } from "./ListItemCell";
Expand All @@ -45,6 +48,7 @@ export type ROWTYPE = ContextExpressionDefinitionEntry;
export function ListExpression(listExpression: ListExpressionDefinition & { isNested: boolean }) {
const { i18n } = useBoxedExpressionEditorI18n();
const { setExpression } = useBoxedExpressionEditorDispatch();
const { decisionNodeId } = useBoxedExpressionEditor();

/// //////////////////////////////////////////////////////
/// ///////////// RESIZING WIDTHS ////////////////////////
Expand Down Expand Up @@ -93,7 +97,7 @@ export function ListExpression(listExpression: ListExpressionDefinition & { isNe
const beeTableColumns = useMemo<ReactTable.Column<ROWTYPE>[]>(
() => [
{
accessor: "list" as any,
accessor: decisionNodeId as any,
label: listExpression.name ?? DEFAULT_EXPRESSION_NAME,
dataType: listExpression.dataType,
isRowIndexColumn: false,
Expand All @@ -110,7 +114,7 @@ export function ListExpression(listExpression: ListExpressionDefinition & { isNe

const cellComponentByColumnAccessor: BeeTableProps<ROWTYPE>["cellComponentByColumnAccessor"] = useMemo(
() => ({
list: ListItemCell,
[decisionNodeId]: ListItemCell,
}),
[]
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
import { ExpressionContainer } from "../ExpressionDefinitionRoot/ExpressionContainer";
import { ROWTYPE } from "./ListExpression";

export function ListItemCell({ rowIndex, data: items }: BeeTableCellProps<ROWTYPE>) {
export function ListItemCell({ rowIndex, data: items, columnIndex }: BeeTableCellProps<ROWTYPE>) {
const { setExpression } = useBoxedExpressionEditorDispatch();

const onSetExpression = useCallback(
Expand All @@ -26,7 +26,13 @@ export function ListItemCell({ rowIndex, data: items }: BeeTableCellProps<ROWTYP

return (
<NestedExpressionDispatchContextProvider onSetExpression={onSetExpression}>
<ExpressionContainer expression={items[rowIndex]?.entryExpression} isResetSupported={true} isNested={true} />
<ExpressionContainer
expression={items[rowIndex]?.entryExpression}
isResetSupported={true}
isNested={true}
rowIndex={rowIndex}
columnIndex={columnIndex}
/>
</NestedExpressionDispatchContextProvider>
);
}
Loading

0 comments on commit 93f150b

Please sign in to comment.