Delta DI 25.2.0 GUI (CMEM-6858)

CHANGELOG.md

@@ -10,22 +10,97 @@ This is a major release, and it might be not compatible with your current usage
 
 ### Added
 
--   Extended existing height and readOnly props from `CodeEditorProps` to `AutoSuggestionProps` & `ExtendedCodeEditorProps` to be configurable from `<CodeAutocompleteField />`
--   `<CodeAutocompleteField />`:
-    -    outerDivAttributes parameter: Allows to set parameter of the container div element of the code complete field.
+-   `<EdgeStraight />`
+    -   it's basically `<EdgeDefault />` without any special configs
+-   `<EdgeBezier />`
+    -   only supported for v12, in v9 as straight edge is used
+    -   use `curvature` property in the edge `data` object to define the bezier layout (0..1, default: 0.25)
+-   `<EdgeDefaultV12 />`
+    -   the `data` object provides `markerAppearance` to set and remove the edge arrows
+-   `<EdgeNew />`
+    -   component for React Flow v12, displaying new connection lines
+
+### Removed
+
+-   support for React Flow v10 was completely removed
 
 ### Fixed
 
--   <CodeMirror />:
-    -    Editor is re-created after certain property changes and is reset, i.e. loses it current state.
--   <CodeAutocompleteField />:
-    -    Read-only mode does not work correctly. It is still possible to change the value via pressing Enter (in multiline mode) or clicking the clear button.
-    -    First auto-completion item not marked as active when drop down first shown.
--   `<CodeEditor />`:
-    -    Enter key handling (adding new line) broken when `onKeyDown` is defined.
 -   `<Modal />`:
-    -    Add 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals.
+    -   Add 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals.
+
+### Changed
+
+-   `<EdgeDefault />` and `<EdgeStep />`
+    -   support now v9 and v12 of react flow
+-   `<ReactFlowExtended />`
+    -   use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
+
+### Deprecated
+
+-   support for React Flow v9 will be removed in v26
+-   `<EdgeDefs />`
+    -   use `<ReactFlowMarkers />` or build it on single `<ReactFlowMarker />`
+
+## [24.4.1] - 2025-08-25
+
+### Fixed
+
+-   React flow v12:
+    -   add missing styles from react flow library to ensure proper functionality of new connection lines
+-   `<Tooltip />`
+    -   re-check hover state after swapping the placeholder before triggering the event bubbling
+
+### Changed
+
+-   `<IconButton/>`
+    -   increase the default delay before swapping the tooltip placeholder of the icon, reducing unwanted swaps because of mouseovers that were not intended
+-   `IntentBaseTypes` now available via root export
+    -   some `intent` properties support less or more intent types, in case you need to test supported types before, then you can use it directly from the component interface, e.g. `TextFieldProps["intent"]`
+
+### Added
+
+-   `application-colors` and `data-color` icons, both represented by the Carbon `ColorPalette` icon
+
+## [24.3.1] - 2025-08-21
+
+### Fixed
+
+-   React flow v12:
+    -   add missing styles from react flow library to ensure proper functionality of new connection lines
+
+## [24.4.0] - 2025-08-07
+
+### Added
+
+-   `<ExtendedCodeEditor />`
+    -   `height` and `readOnly` properties to forward them to `<CodeEditor/>`
+-   `<CodeAutocompleteField />`:
+    -   `outerDivAttributes` property: allows to set parameter of the container element
+    -   `height` and `readOnly` properties to forward them to `<ExtendedCodeEditor/>`
+-   `<ActivityControlWidget />`
+    -   `additionalActions` property to include other more complex components between the action buttons and the context menu of the widget
+-   `<Tooltip />`
+    -   `swapPlaceholderDelay` property to allow configuration of the delay time before the placeholder element is replaced by the actual tooltip component
+
+### Fixed
+
+-   `<CodeEditor />`
+    -   Editor is re-created after certain property changes and is reset, i.e. loses it current state.
+    -   Enter key handling (adding new line) was broken when `onKeyDown` is defined.
+-   `<CodeAutocompleteField />`
+    -   First auto-completion item not marked as active when drop down first shown.
+    -   Read-only mode does not work correctly. It is still possible to change the value via pressing Enter (in multiline mode) or clicking the clear button.
+
+### Changed
 
+-   `<NodeContent />`
+    -   prevent start of a react flow drag action of a node when user clicks in the node menu section
+
+### Deprecated
+
+-   `<CodeEditor />`
+    -   `onChange` property: support for `(v: any) => void` type will be exchanged to more specific `(v: string) => void`
 
 ## [24.3.0] - 2025-06-05
 
@@ -111,7 +186,7 @@ If you use Jest then you can use the same aliases for the `moduleNameMapper` con
 
 ### Migration from v24 to v25
 
--   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the v24.* changelogs.
+-   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the v24.\* changelogs.
     -   we changed the integration of the supported react flow versions, formerly names `legacy` and `next` resources were renamed to more precise `v9` and `v10`, please see all info in the section about changes
 
 ## [24.1.0] - 2025-04-16

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.3.0",
+    "version": "24.4.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -79,6 +79,7 @@
         "@codemirror/lang-sql": "^6.8.0",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.2",
+        "@codemirror/lang-html": "^6.4.9",
         "@codemirror/legacy-modes": "^6.5.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "@xyflow/react": "^12.6.0",
@@ -93,7 +94,6 @@
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
-        "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
         "react-markdown": "^10.1.0",
         "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
@@ -149,8 +149,8 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
+        "jest": "^30.0.5",
+        "jest-environment-jsdom": "^30.0.5",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",

src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -1,9 +1,17 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { ActivityControlWidget, Tag, TagList } from "../../../index";
+import {
+    ActivityControlWidget,
+    ActivityControlWidgetAction,
+    IconButton,
+    SimpleDialog,
+    Tag,
+    TagList,
+} from "../../../index";
 
 export default {
     title: "Cmem/ActivityControlWidget",
@@ -19,7 +27,7 @@ const Template: StoryFn<typeof ActivityControlWidget> = (args) => <ActivityContr
 
 export const FullExample = Template.bind({});
 
-const actions = [
+const actions: ActivityControlWidgetAction[] = [
     {
         "data-test-id": "activity-reload-activity",
         icon: "item-reload",
@@ -30,13 +38,15 @@ const actions = [
     {
         "data-test-id": "activity-start-activity",
         icon: "item-start",
+        // eslint-disable-next-line no-console
         action: () => console.log("start"),
         tooltip: "Start Activity",
         disabled: false,
     },
     {
         "data-test-id": "activity-stop-activity",
         icon: "item-stop",
+        // eslint-disable-next-line no-console
         action: () => console.log("cancel"),
         tooltip: "Stop Activity",
         disabled: false,
@@ -57,8 +67,8 @@ const commonWidgetArgs = {
     progressSpinner: {
         intent: "none",
         value: 0.5,
-    },
-};
+    } as const,
+} as const;
 
 FullExample.args = {
     ...commonWidgetArgs,
@@ -80,3 +90,33 @@ WidgetWithTags.args = {
     ...commonWidgetArgs,
     tags: widgetTags,
 };
+
+export const WidgetWithAdditionalActions: StoryFn<typeof ActivityControlWidget> = (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const params = useMemo(
+        () => ({
+            ...commonWidgetArgs,
+            ...args,
+            additionalActions: args.additionalActions ?? [
+                <IconButton name="application-explore" onClick={() => setIsOpen(true)} />,
+            ],
+        }),
+        []
+    );
+
+    return (
+        <OverlaysProvider>
+            <ActivityControlWidget {...params} />
+            <SimpleDialog
+                title="Additional actions dialog"
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                canOutsideClickClose
+                canEscapeKeyClose
+            >
+                Modal content
+            </SimpleDialog>
+        </OverlaysProvider>
+    );
+};

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -81,6 +81,10 @@ export interface ActivityControlWidgetProps extends TestableComponent {
      * execution timer messages for waiting and running times.
      */
     timerExecutionMsg?: JSX.Element | null;
+    /**
+     * additional actions that can serve as a complex component, positioned between the default actions and the context menu
+     */
+    additionalActions?: React.ReactElement<unknown>[];
 }
 
 interface IActivityContextMenu extends TestableComponent {
@@ -110,11 +114,13 @@ interface IActivityMenuAction extends ActivityControlWidgetAction {
 /** Shows the status of activities and supports actions on these activities. */
 export function ActivityControlWidget(props: ActivityControlWidgetProps) {
     const {
-        "data-test-id": dataTestId,
+        "data-test-id": dataTestIdLegacy,
+        "data-testid": dataTestId,
         progressBar,
         progressSpinner,
         activityActions,
         activityContextMenu,
+        additionalActions,
         small,
         border,
         hasSpacing,
@@ -126,10 +132,19 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
     } = props;
     const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`;
     const widget = (
-        <OverviewItem data-test-id={dataTestId} hasSpacing={border || hasSpacing} densityHigh={small}>
+        <OverviewItem
+            data-test-id={dataTestIdLegacy}
+            data-testid={dataTestId}
+            hasSpacing={border || hasSpacing}
+            densityHigh={small}
+        >
             {progressBar && <ProgressBar {...progressBar} />}
             {(progressSpinner || progressSpinnerFinishedIcon) && (
-                <OverviewItemDepiction keepColors>
+                <OverviewItemDepiction
+                    data-testid={dataTestId ? `${dataTestId}-progress-spinner` : undefined}
+                    data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-progress-spinner` : undefined}
+                    keepColors
+                >
                     {progressSpinnerFinishedIcon ? (
                         React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
                     ) : (
@@ -145,13 +160,21 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
             )}
             <OverviewItemDescription>
                 {props.label && (
-                    <OverviewItemLine small={small}>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-label` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-label` : undefined}
+                        small={small}
+                    >
                         {React.cloneElement(labelWrapper, {}, props.label)}
                         {timerExecutionMsg && (props.statusMessage || tags) && <>&nbsp;({timerExecutionMsg})</>}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
-                    <OverviewItemLine small>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-status-message` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-status-message` : undefined}
+                        small
+                    >
                         {tags}
                         {props.statusMessage && (
                             <OverflowText passDown>
@@ -172,28 +195,43 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                     </OverviewItemLine>
                 )}
                 {timerExecutionMsg && !(props.statusMessage || tags) && (
-                    <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-status-message` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-status-message` : undefined}
+                        small
+                    >
+                        {timerExecutionMsg}
+                    </OverviewItemLine>
                 )}
             </OverviewItemDescription>
-            <OverviewItemActions>
+            <OverviewItemActions
+                data-testid={dataTestId ? `${dataTestId}-actions` : undefined}
+                data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
+            >
                 {activityActions &&
                     activityActions.map((action, idx) => {
                         return (
                             <IconButton
-                                key={typeof action.icon === "string" ? action.icon : action["data-test-id"] ?? idx}
+                                key={
+                                    typeof action.icon === "string"
+                                        ? action.icon
+                                        : action["data-test-id"] ?? action["data-testid"] ?? idx
+                                }
                                 data-test-id={action["data-test-id"]}
+                                data-testid={action["data-testid"]}
                                 name={action.icon}
                                 text={action.tooltip}
                                 onClick={action.action}
                                 disabled={action.disabled}
-                                hasStateWarning={action.hasStateWarning}
+                                intent={action.hasStateWarning ? "warning" : undefined}
                                 tooltipProps={{
                                     hoverOpenDelay: 200,
                                     placement: "bottom",
                                 }}
                             />
                         );
                     })}
+                {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
                     <ContextMenu
                         data-test-id={activityContextMenu["data-test-id"]}