Merge remote-tracking branch 'origin/develop' into feature/newMappingSuggestion-CMEM-5433

Author: haschek

CHANGELOG.md

@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
--   `CntentGroup` component
+-   `<ContentGroup />` component
     -   Manage display of a grouped content section.
     -   Add info, actions and context annotations by using its properties.
     -   Can be nested into each other.
@@ -18,19 +18,30 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   editor is focused on load if `autoFocus` prop is set to `true`
     -   implemented support for `disabled` state in code editor
     -   implemented support for `intent` states in code editor
--   `Label` component
+-   `<Label />`
     -   `additionalElements` property to display elements at the end of the label
     -   `inline` property to display the label component as inline block
 -   `<NodeContent />`
     -   `resizeDirections` to specifiy the axis that can be used to resize the node
     -   `resizeMaxDimensions` to add maximum values for resizing height/width
+-   `<CardActions />`
+    -   `noWrap` property to display them without wrapping its children on multiple lines
+-   `<SimpleDialog />`
+    -   `actionsProps` property to forward `CardActions` properties, e.g. `noWrap`
+-   `<MenutItem />`
+    -   `tooltip` property to dislay tooltip on menu item label
+-   `<NodeContent />`
+    -   `resizeDirections` to specifiy the axis that can be used to resize the node
+    -   `resizeMaxDimensions` to add maximum values for resizing height/width
 -   New icons:
     -   "item-magic-edit": icon for "magic" edit suggestions
     -   "artefact-task-concatenatetofile": icon for "Concatenate to file" operator
 
 ### Fixed
 
--   `<OverviewItemActions/>`
+-   `<CodeAutocompleteField />`:
+    -    Code editor resets to initial value on every code editor instance re-init
+-   `<OverviewItemActions />`
     -   `hiddenInteractions` stay visible if they contain focused elements or opened overlays (e.g. context menus)
 
 ### Changed
@@ -39,6 +50,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   property color for `graph` configuration was adjusted
 -   `<Switch />`
     -   use always `<Label/>` component for `label` value
+-   `<StickyNoteNode />`
+    -   Refactored data structure position and dimension (breaking change)
 
 ## [24.0.1] - 2025-02-06
 

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -219,6 +219,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
+    const currentCm = React.useRef<EditorView>()
+    currentCm.current = cm
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -235,12 +237,12 @@ const AutoSuggestion = ({
     const pathIsValid = validationResponse?.valid ?? true;
 
     React.useEffect(() => {
-        if (reInitOnInitialValueChange && initialValue != null && cm) {
+        if (reInitOnInitialValueChange && initialValue != null && currentCm.current) {
             dispatch({
-                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
+                changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
         }
-    }, [initialValue, cm, reInitOnInitialValueChange]);
+    }, [initialValue, reInitOnInitialValueChange]);
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;

src/components/Card/CardActions.tsx

@@ -8,6 +8,10 @@ export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
      * Mainly used for cards used as modals (dialogs).
      */
     inverseDirection?: boolean;
+    /**
+     * Set footer to display its children on only one line.
+     */
+    noWrap?: boolean;
 }
 
 /**
@@ -18,6 +22,7 @@ export const CardActions = ({
     children,
     className = "",
     inverseDirection = false,
+    noWrap = false,
     ...otherProps
 }: CardActionsProps) => {
     return (
@@ -26,6 +31,7 @@ export const CardActions = ({
             className={
                 `${eccgui}-card__actions` +
                 (inverseDirection ? ` ${eccgui}-card__actions--inversedirection` : "") +
+                (noWrap ? ` ${eccgui}-card__actions--nowrap` : "") +
                 (className ? " " + className : "")
             }
         >

src/components/Card/card.scss

@@ -236,6 +236,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     flex-direction: row-reverse;
 }
 
+.#{$eccgui}-card__actions--nowrap {
+    flex-wrap: nowrap;
+}
+
 .#{$eccgui}-card__actions__aux {
     display: flex;
     flex-flow: row wrap;
@@ -272,4 +276,15 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     .#{$eccgui}-card__actions--inversedirection > & {
         justify-content: flex-start;
     }
+
+    .#{$eccgui}-card__actions--nowrap > & {
+        flex-shrink: 5;
+        flex-wrap: nowrap;
+        min-width: 0;
+
+        & > * {
+            flex-shrink: 10;
+            min-width: 0;
+        }
+    }
 }

src/components/Dialog/SimpleDialog.tsx

@@ -5,7 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import IconButton from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
+import { Card, CardActions, CardActionsProps, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
 
@@ -45,6 +45,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     showFullScreenToggler?: boolean;
     /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
     startInFullScreenMode?: boolean;
+    /** Forward properties to the actions footer component. */
+    actionsProps?: Omit<CardActionsProps, "inverseDirection">;
 }
 
 /**
@@ -66,6 +68,7 @@ export const SimpleDialog = ({
     showFullScreenToggler = false,
     startInFullScreenMode = false,
     size,
+    actionsProps,
     ...otherProps
 }: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
@@ -112,7 +115,11 @@ export const SimpleDialog = ({
                     <CardContent className={`${eccgui}-dialog__notifications`}>{notifications}</CardContent>
                 )}
                 {actions && (
-                    <CardActions inverseDirection className={intentClassName}>
+                    <CardActions
+                        {...actionsProps}
+                        inverseDirection
+                        className={`${actionsProps?.className ?? ""} ${intentClassName}`}
+                    >
                         {actions}
                     </CardActions>
                 )}

src/components/Menu/MenuItem.tsx

@@ -5,6 +5,7 @@ import { openInNewTab } from "../../common/utils/openInNewTab";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 
 import { TestIconProps } from "./../Icon/TestIcon";
 
@@ -15,16 +16,41 @@ export interface MenuItemProps
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+    /**
+     * Submenu.
+     */
     children?: React.ReactNode;
+    /**
+     * Tooltip, but only added to the label, not to the full menu item.
+     */
+    tooltip?: string | JSX.Element;
 }
 
 /**
  * Single item, used as child inside `Menu`.
  */
-export const MenuItem = ({ children, className = "", icon, onClick, href, ...restProps }: MenuItemProps) => {
+export const MenuItem = ({
+    children,
+    className = "",
+    icon,
+    onClick,
+    href,
+    text,
+    tooltip,
+    ...restProps
+}: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
+            text={
+                tooltip ? (
+                    <Tooltip content={tooltip} fill>
+                        {text}
+                    </Tooltip>
+                ) : (
+                    text
+                )
+            }
             href={href}
             onClick={(e: React.MouseEvent<HTMLElement>) =>
                 openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)

src/extensions/react-flow/nodes/NodeContent.tsx

@@ -22,7 +22,7 @@ type NodeContentHandleNextProps = HandleNextProps;
 
 export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
 
-type NodeDimensions = {
+export type NodeDimensions = {
     width?: number;
     height?: number;
 };

src/extensions/react-flow/nodes/nodeUtils.tsx

@@ -1,28 +1,30 @@
 import { CSSProperties } from "react";
-import { Node } from "react-flow-renderer";
+import {Node, XYPosition} from "react-flow-renderer";
 import Color from "color";
+import {NodeDimensions} from "./NodeContent";
 
-type IStickyNote = {
+/** A sticky note for display in the UI as returned from the backend. */
+export interface StickyNote {
     id: string;
     content: string;
     color: string;
-    position: number[];
-    dimension: number[];
-};
+    position: XYPosition & NodeDimensions;
+}
 
 /**
  * converts a react-flow node with
- * type = "stickynote" to IStickyNote type compatible with the backend
+ * type = "stickynote" to StickyNote type compatible with the backend
  * @param node
- * @returns {IStickyNote}
+ * @returns {StickyNote}
  */
-const transformNodeToStickyNode = (node: Node<any>): IStickyNote => ({
-    id: node.id,
-    content: node.data.businessData.stickyNote!,
-    position: [node.position.x, node.position.y],
-    dimension: [node.data.nodeDimensions?.width!, node.data.nodeDimensions?.height!],
-    color: node.data.style?.borderColor!,
-});
+const transformNodeToStickyNode = (node: Node<any>): StickyNote => {
+    return {
+        id: node.id,
+        content: node.data.businessData.stickyNote!,
+        position: {x: node.position.x, y: node.position.y, width: node.data.nodeDimensions?.width, height: node.data.nodeDimensions?.height},
+        color: node.data.style?.borderColor!,
+    }
+};
 
 /**
  * takes in a hex color string and returns

yarn.lock

@@ -11218,10 +11218,10 @@ range-parser@^1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-re-resizable@^6.10.1:
-  version "6.10.1"
-  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.1.tgz#d062ca50bbc4ec7ae940f756cba36479e9015bc5"
-  integrity sha512-m33nSWRH57UZLmep5M/LatkZ2NRqimVD/bOOpvymw5Zf33+eTSEixsUugscOZzAtK0/nx+OSuOf8VbKJx/4ptw==
+re-resizable@^6.10.3:
+  version "6.11.2"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.11.2.tgz#2e8f7119ca3881d5b5aea0ffa014a80e5c1252b3"
+  integrity sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A==
 
 react-app-polyfill@^3.0.0:
   version "3.0.0"