new aggregations UI

designer/client/cypress/e2e/sqlEditor.cy.ts

@@ -15,7 +15,9 @@ describe("Sql editor", () => {
         cy.layoutScenario();
         cy.get("[model-id=sql-source]").should("be.visible").trigger("dblclick");
         cy.get("[data-testid=window]").should("be.visible");
-        cy.get("#ace-editor").should("not.have.class", "tokenizer-working").parent().matchImage({ maxDiffThreshold });
+        cy.get("#ace-editor").should("not.have.class", "tokenizer-working");
+        cy.wait(1000);
+        cy.get("#ace-editor").parent().matchImage({ maxDiffThreshold });
         cy.get("[data-testid=window]").matchImage();
     });
 
@@ -26,7 +28,9 @@ describe("Sql editor", () => {
 
         cy.wrap(["sql-source", "sql-source2", "sql-source3"]).each((name) => {
             cy.get(`[model-id=${name}]`).should("be.visible").trigger("dblclick");
-            cy.get("#ace-editor").should("not.have.class", "tokenizer-working").parent().matchImage({ maxDiffThreshold });
+            cy.get("#ace-editor").should("not.have.class", "tokenizer-working");
+            cy.wait(1000);
+            cy.get("#ace-editor").parent().matchImage({ maxDiffThreshold });
             cy.get("[data-testid=window]")
                 .contains(/^cancel$/i)
                 .click();

designer/client/package.json

@@ -155,6 +155,7 @@
         "babel-loader": "8.2.3",
         "babel-plugin-istanbul": "6.1.1",
         "chalk": "4.1.2",
+        "chevrotain": "11.0.3",
         "color": "4.2.0",
         "copy-webpack-plugin": "11.0.0",
         "crypto-browserify": "3.12.0",

designer/client/src/common/ProcessUtils.ts

@@ -1,5 +1,9 @@
 /* eslint-disable i18next/no-literal-string */
 import { flatten, isEmpty, isEqual, omit, pickBy, transform } from "lodash";
+import { Scenario } from "src/components/Process/types";
+import { ScenarioLabelValidationError } from "../components/Labels/types";
+import { RootState } from "../reducers";
+import { isProcessRenamed } from "../reducers/selectors/graph";
 import {
     ComponentDefinition,
     NodeId,
@@ -13,10 +17,6 @@ import {
     ValidationResult,
     VariableTypes,
 } from "../types";
-import { RootState } from "../reducers";
-import { isProcessRenamed } from "../reducers/selectors/graph";
-import { Scenario } from "src/components/Process/types";
-import { ScenarioLabelValidationError } from "../components/Labels/types";
 
 class ProcessUtils {
     nothingToSave = (state: RootState): boolean => {
@@ -204,7 +204,7 @@ class ProcessUtils {
         }
     };
 
-    extractComponentDefinition = (node: NodeType, components: Record<string, ComponentDefinition>): ComponentDefinition | null => {
+    extractComponentDefinition = (node: NodeType, components?: Record<string, ComponentDefinition>): ComponentDefinition | null => {
         return components?.[this.determineComponentId(node)];
     };
 

designer/client/src/components/common/dndItems/DndItems.tsx

@@ -11,10 +11,11 @@ import { alpha, Box } from "@mui/material";
 interface DndListProps<I> extends ItemsProps<I> {
     disabled?: boolean;
     onChange: (value: I[]) => void;
+    onDestinationChange?: (index: number | null) => void;
 }
 
 export function DndItems<I>(props: DndListProps<I>): JSX.Element {
-    const { items, onChange, disabled } = props;
+    const { items, onChange, onDestinationChange, disabled } = props;
 
     const moveItem = useCallback(
         (source: number, target: number) => {
@@ -28,8 +29,9 @@ export function DndItems<I>(props: DndListProps<I>): JSX.Element {
                 });
                 onChange(newFields);
             }
+            onDestinationChange?.(null);
         },
-        [items, onChange],
+        [items, onChange, onDestinationChange],
     );
 
     const droppableId = useRef(Date.now().toString());
@@ -61,6 +63,8 @@ export function DndItems<I>(props: DndListProps<I>): JSX.Element {
             renderClone={renderDraggable}
             CloneWrapper={FakeFormWindow}
             onDragEnd={({ destination, source }) => moveItem(source?.index, destination?.index)}
+            onDragStart={({ source }) => onDestinationChange?.(source?.index)}
+            onDragUpdate={({ destination }) => onDestinationChange?.(destination?.index)}
         >
             {items.map((_, index) => (
                 <Draggable key={index} draggableId={`${index}`} index={index} isDragDisabled={disabled}>

designer/client/src/components/common/dndItems/DropTarget.tsx

@@ -8,16 +8,19 @@ export function DropTarget({
     renderClone,
     CloneWrapper = "div",
     onDragEnd,
+    onDragStart,
+    onDragUpdate,
     ...props
 }: PropsWithChildren<
-    { CloneWrapper?: ReactComponentLike } & Pick<DragDropContextProps, "onDragEnd"> & Omit<DroppableProps, "children">
+    { CloneWrapper?: ReactComponentLike } & Pick<DragDropContextProps, "onDragEnd" | "onDragUpdate" | "onDragStart"> &
+        Omit<DroppableProps, "children">
 >): JSX.Element {
     const clone: DraggableChildrenFn = useCallback(
         (...args) => <CloneWrapper>{renderClone(...args)}</CloneWrapper>,
         [CloneWrapper, renderClone],
     );
     return (
-        <DragDropContext onDragEnd={onDragEnd}>
+        <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart} onDragUpdate={onDragUpdate}>
             <Droppable {...props} renderClone={clone}>
                 {(p) => (
                     <div ref={p.innerRef}>

designer/client/src/components/graph/node-modal/FieldLabel.tsx

@@ -4,13 +4,10 @@ import { UIParameter } from "../../../types";
 import NodeTip from "./NodeTip";
 import InfoIcon from "@mui/icons-material/Info";
 import ProcessUtils from "../../../common/ProcessUtils";
+import { findParamDefinitionByName } from "./parameterHelpers";
 import { ErrorBoundary } from "react-error-boundary";
 import { PlaceholderIconFallbackComponent } from "../../common/error-boundary/fallbackComponent/PlaceholderIconFallbackComponent";
 
-export function findParamDefinitionByName(definitions: UIParameter[], paramName: string): UIParameter {
-    return definitions?.find((param) => param.name === paramName);
-}
-
 export const StyledNodeTip = styled(NodeTip)({
     margin: "0 8px",
     flex: 1,

designer/client/src/components/graph/node-modal/ParameterExpressionField.tsx

@@ -1,9 +1,9 @@
 import { useTestResults } from "./TestResultsWrapper";
 import ExpressionField from "./editors/expression/ExpressionField";
-import { findParamDefinitionByName } from "./FieldLabel";
 import React, { ComponentType, PropsWithChildren, useMemo } from "react";
 import { NodeId, NodeType, NodeValidationError, Parameter, UIParameter, VariableTypes } from "../../../types";
 import { getValidationErrorsForField } from "./editors/Validators";
+import { findParamDefinitionByName } from "./parameterHelpers";
 
 export type FieldWrapperProps = PropsWithChildren<Omit<ParameterExpressionFieldProps, "FieldWrapper">>;
 
@@ -24,7 +24,7 @@ export type ParameterExpressionFieldProps = {
 };
 
 //this is for "dynamic" parameters in sources, sinks, services etc.
-export function ParameterExpressionField({ FieldWrapper = React.Fragment, ...props }: ParameterExpressionFieldProps): JSX.Element {
+export function ParameterExpressionField({ FieldWrapper, ...props }: ParameterExpressionFieldProps): JSX.Element {
     const {
         errors,
         findAvailableVariables,
@@ -50,8 +50,8 @@ export function ParameterExpressionField({ FieldWrapper = React.Fragment, ...pro
         [findAvailableVariables, node.id, parameter.name, parameterDefinitions],
     );
 
-    return (
-        <FieldWrapper {...props}>
+    const field = useMemo(
+        () => (
             <ExpressionField
                 fieldName={parameter.name}
                 fieldLabel={parameter.name}
@@ -67,6 +67,22 @@ export function ParameterExpressionField({ FieldWrapper = React.Fragment, ...pro
                 variableTypes={variableTypes}
                 fieldErrors={getValidationErrorsForField(errors, parameter.name)}
             />
-        </FieldWrapper>
+        ),
+        [
+            errors,
+            isEditMode,
+            listFieldPath,
+            node,
+            parameter.name,
+            parameterDefinitions,
+            renderFieldLabel,
+            setProperty,
+            showSwitch,
+            showValidation,
+            testResultsState.testResultsToShow,
+            variableTypes,
+        ],
     );
+
+    return FieldWrapper ? <FieldWrapper {...props}>{field}</FieldWrapper> : <>{field}</>;
 }

designer/client/src/components/graph/node-modal/StaticExpressionField.tsx

@@ -1,9 +1,9 @@
 import { useTestResults } from "./TestResultsWrapper";
 import ExpressionField from "./editors/expression/ExpressionField";
-import { findParamDefinitionByName } from "./FieldLabel";
 import React from "react";
 import { NodeType, NodeValidationError, UIParameter, VariableTypes } from "../../../types";
 import { getValidationErrorsForField } from "./editors/Validators";
+import { findParamDefinitionByName } from "./parameterHelpers";
 
 //this is for "static" fields like expressions in filters, switches etc.
 export function StaticExpressionField({