description in window

designer/client/package.json

@@ -15,7 +15,7 @@
         "@mui/lab": "5.0.0-alpha.165",
         "@mui/material": "5.15.7",
         "@touk/federated-component": "1.0.0",
-        "@touk/window-manager": "1.9.0-beta.4",
+        "@touk/window-manager": "1.9.0-beta.8",
         "ace-builds": "1.34.2",
         "axios": "1.6.7",
         "d3-transition": "3.0.1",

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

@@ -0,0 +1,48 @@
+import { Box } from "@mui/material";
+import { get } from "lodash";
+import React from "react";
+import { DescriptionView } from "../../../containers/DescriptionView";
+import { FieldType } from "./editors/field/Field";
+import { rowAceEditor } from "./NodeDetailsContent/NodeTableStyled";
+import { NodeField } from "./NodeField";
+import { NodeTypeDetailsContentProps, useNodeTypeDetailsContentLogic } from "./NodeTypeDetailsContent";
+
+export function DescriptionOnlyContent({
+    preview,
+    ...props
+}: Pick<NodeTypeDetailsContentProps, "node" | "onChange"> & {
+    preview?: boolean;
+}): JSX.Element {
+    const { setProperty, node } = useNodeTypeDetailsContentLogic({ ...props, errors: [] });
+    const fieldName = "additionalFields.description";
+
+    return (
+        <>
+            {!preview ? (
+                <Box
+                    sx={{
+                        [`.${rowAceEditor}, .ace_editor`]: {
+                            outline: "none",
+                        },
+                        padding: 2,
+                    }}
+                >
+                    <NodeField
+                        autoFocus
+                        renderFieldLabel={() => null}
+                        setProperty={setProperty}
+                        node={node}
+                        isEditMode={true}
+                        showValidation={false}
+                        readonly={false}
+                        errors={[]}
+                        fieldType={FieldType.markdown}
+                        fieldName={fieldName}
+                    />
+                </Box>
+            ) : (
+                <DescriptionView>{get(node, fieldName)}</DescriptionView>
+            )}
+        </>
+    );
+}

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

@@ -1,56 +1,50 @@
-import { Edge, NodeType, NodeValidationError, PropertiesType } from "../../../types";
+import { cloneDeep, isEqual, set } from "lodash";
 import React, { SetStateAction, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { nodeDetailsClosed, nodeDetailsOpened, validateNodeData } from "../../../actions/nk";
 import { getProcessDefinitionData } from "../../../reducers/selectors/settings";
+import { Edge, NodeType, NodeValidationError, PropertiesType } from "../../../types";
+import NodeUtils from "../NodeUtils";
+import { CustomNode } from "./customNode";
+import { EnricherProcessor } from "./enricherProcessor";
+import { ParamFieldLabel } from "./FieldLabel";
+import { Filter } from "./filter";
+import FragmentInputDefinition from "./fragment-input-definition/FragmentInputDefinition";
+import { FragmentInputParameter } from "./fragment-input-definition/item";
+import { FragmentInput } from "./fragmentInput";
+import FragmentOutputDefinition from "./FragmentOutputDefinition";
+import { JoinNode } from "./joinNode";
+import { NodeDetailsFallback } from "./NodeDetailsContent/NodeDetailsFallback";
 import {
     getDynamicParameterDefinitions,
     getFindAvailableBranchVariables,
     getFindAvailableVariables,
     getProcessName,
     getProcessProperties,
 } from "./NodeDetailsContent/selectors";
-import { adjustParameters } from "./ParametersUtils";
 import { generateUUIDs } from "./nodeUtils";
-import { ParamFieldLabel } from "./FieldLabel";
-import { cloneDeep, isEqual, set } from "lodash";
-import { nodeDetailsClosed, nodeDetailsOpened, validateNodeData } from "../../../actions/nk";
-import NodeUtils from "../NodeUtils";
-import { Source } from "./source";
+import { adjustParameters } from "./ParametersUtils";
+import { Properties } from "./properties";
 import { Sink } from "./sink";
-import FragmentInputDefinition from "./fragment-input-definition/FragmentInputDefinition";
-import FragmentOutputDefinition from "./FragmentOutputDefinition";
-import { Filter } from "./filter";
-import { EnricherProcessor } from "./enricherProcessor";
-import { FragmentInput } from "./fragmentInput";
-import { JoinNode } from "./joinNode";
-import { VariableBuilder } from "./variableBuilder";
-import { Switch } from "./switch";
+import { Source } from "./source";
 import { Split } from "./split";
-import { Properties } from "./properties";
-import { NodeDetailsFallback } from "./NodeDetailsContent/NodeDetailsFallback";
+import { Switch } from "./switch";
 import Variable from "./Variable";
-import { FragmentInputParameter } from "./fragment-input-definition/item";
-import { CustomNode } from "./customNode";
+import { VariableBuilder } from "./variableBuilder";
 
 type ArrayElement<A extends readonly unknown[]> = A extends readonly (infer E)[] ? E : never;
 
-interface NodeTypeDetailsContentProps {
+export type NodeTypeDetailsContentProps = {
     node: NodeType;
     edges?: Edge[];
     onChange?: (node: SetStateAction<NodeType>, edges?: SetStateAction<Edge[]>) => void;
     showValidation?: boolean;
     showSwitch?: boolean;
     errors: NodeValidationError[];
-}
+};
 
-export function NodeTypeDetailsContent({
-    node,
-    edges,
-    onChange,
-    errors,
-    showValidation,
-    showSwitch,
-}: NodeTypeDetailsContentProps): JSX.Element {
+export function useNodeTypeDetailsContentLogic(props: NodeTypeDetailsContentProps) {
+    const { onChange, node, edges, showValidation } = props;
     const dispatch = useDispatch();
     const isEditMode = !!onChange;
 
@@ -153,6 +147,40 @@ export function NodeTypeDetailsContent({
         });
     }, [adjustNode, setEditedNode]);
 
+    return {
+        ...props,
+        isEditMode,
+        processDefinitionData,
+        findAvailableVariables,
+        variableTypes,
+        setEditedEdges,
+        parameterDefinitions,
+        renderFieldLabel,
+        removeElement,
+        addElement,
+        setProperty,
+    };
+}
+
+export function NodeTypeDetailsContent(props: NodeTypeDetailsContentProps): JSX.Element {
+    const {
+        isEditMode,
+        processDefinitionData,
+        findAvailableVariables,
+        variableTypes,
+        setEditedEdges,
+        parameterDefinitions,
+        renderFieldLabel,
+        removeElement,
+        addElement,
+        setProperty,
+        node,
+        edges,
+        errors,
+        showValidation,
+        showSwitch,
+    } = useNodeTypeDetailsContentLogic(props);
+
     switch (NodeUtils.nodeType(node)) {
         case "Source":
             return (

designer/client/src/components/graph/node-modal/edge/EdgeDetailsContent.tsx

@@ -1,10 +1,9 @@
+import { FormLabel } from "@mui/material";
 import React, { useCallback } from "react";
 import { Edge, EdgeKind, EdgeType } from "../../../../types";
 import BaseModalContent from "../BaseModalContent";
 import EditableEditor from "../editors/EditableEditor";
 import { useDiffMark } from "../PathsToMark";
-import { getValidationErrorsForField } from "../editors/Validators";
-import { FormLabel } from "@mui/material";
 
 interface Props {
     edge: Edge;
@@ -14,12 +13,17 @@ interface Props {
     showValidation?: boolean;
     showSwitch?: boolean;
     variableTypes;
-    edgeErrors?;
 }
 
-export default function EdgeDetailsContent(props: Props): JSX.Element | null {
-    const { edge, edgeErrors, readOnly, changeEdgeTypeCondition, showValidation, showSwitch, changeEdgeTypeValue, variableTypes } = props;
-
+export default function EdgeDetailsContent({
+    edge,
+    readOnly,
+    changeEdgeTypeValue,
+    changeEdgeTypeCondition,
+    showValidation,
+    showSwitch,
+    variableTypes,
+}: Props): JSX.Element | null {
     const [isMarked] = useDiffMark();
     const renderFieldLabel = useCallback((label) => <FormLabel>{label}</FormLabel>, []);
 
@@ -28,7 +32,7 @@ export default function EdgeDetailsContent(props: Props): JSX.Element | null {
             return (
                 <BaseModalContent
                     edge={edge}
-                    edgeErrors={edgeErrors}
+                    edgeErrors={[]}
                     readOnly={readOnly}
                     isMarked={isMarked}
                     changeEdgeTypeValue={changeEdgeTypeValue}
@@ -43,7 +47,7 @@ export default function EdgeDetailsContent(props: Props): JSX.Element | null {
             return (
                 <BaseModalContent
                     edge={edge}
-                    edgeErrors={edgeErrors}
+                    edgeErrors={[]}
                     readOnly={readOnly}
                     isMarked={isMarked}
                     changeEdgeTypeValue={changeEdgeTypeValue}
@@ -58,7 +62,7 @@ export default function EdgeDetailsContent(props: Props): JSX.Element | null {
                         showValidation={showValidation}
                         showSwitch={showSwitch}
                         onValueChange={changeEdgeTypeCondition}
-                        fieldErrors={getValidationErrorsForField(edgeErrors, "edgeType.condition.expression")}
+                        fieldErrors={[]}
                     />
                 </BaseModalContent>
             );

designer/client/src/components/graph/node-modal/editors/expression/AceWithSettings.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable i18next/no-literal-string */
-import React, { ForwardedRef, forwardRef, useMemo } from "react";
+import { throttle } from "lodash";
+import React, { ForwardedRef, forwardRef, useEffect, useMemo, useRef } from "react";
 import ReactAce from "react-ace/lib/ace";
+import { useMergeRefs } from "rooks";
 import { useUserSettings } from "../../../../../common/userSettings";
-import AceWrapper, { AceKeyCommand, AceWrapperProps } from "./AceWrapper";
 import { UserSettings } from "../../../../../reducers/userSettings";
+import AceWrapper, { AceKeyCommand, AceWrapperProps } from "./AceWrapper";
 
 export default forwardRef(function AceWithSettings(
     props: Omit<AceWrapperProps, "noWrap" | "showLines">,
@@ -34,10 +36,38 @@ export default forwardRef(function AceWithSettings(
         [toggleSettings, showLinesName, noWrapName],
     );
 
+    const editorRef = useRef<ReactAce>();
+    useEffect(() => {
+        const editor = editorRef.current?.editor;
+        const selection = editor?.session.selection;
+
+        // before setting cursor position ensure all position calculations are actual
+        const prepare = () => editor?.renderer.updateFull(true);
+
+        const scrollToView = throttle(
+            () => {
+                document.activeElement.scrollIntoView({ block: "nearest", inline: "nearest" });
+            },
+            150,
+            { leading: false },
+        );
+
+        editor?.addEventListener("mousedown", prepare);
+        editor?.addEventListener("mouseup", scrollToView);
+        selection?.on("changeCursor", scrollToView);
+        return () => {
+            editor?.removeEventListener("mousedown", prepare);
+            editor?.removeEventListener("mouseup", scrollToView);
+            selection?.off("changeCursor", scrollToView);
+        };
+    }, []);
+
+    const mergedRefs = useMergeRefs(editorRef, ref);
+
     return (
         <AceWrapper
             {...props}
-            ref={ref}
+            ref={mergedRefs}
             commands={commands}
             showLineNumbers={userSettings[showLinesName]}
             wrapEnabled={!userSettings[noWrapName]}