@eccenca/gui-elements 22.1.0-rc.0 → 22.1.0-rc.1

package/dist/types/components/MultiSelect/MultiSelect.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { MultiSelectProps } from "@blueprintjs/select";
+import { HTMLInputProps } from "@blueprintjs/core/src/common/props";
 interface SelectedParamsType<T> {
     newlySelected: T;
     selectedItems: T[];
@@ -7,18 +8,14 @@ interface SelectedParamsType<T> {
 }
 interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
-     * field in an item, that differentiates on item from the other.
+     * Returns the unique ID of an item. This will be used for equality of items.
      */
-    equalityProp: string;
+    itemId: (item: T) => string;
     /**
-     * field in the item object that would be used to describe the item.
+     * Returns the label of an item.
      * this would be used in the item selection list as well as the multi-select input
      */
-    labelProp: string;
-    /**
-     * if new items that are not in the original item list can be created and appended
-     */
-    canCreateNewItem?: boolean;
+    itemLabel: (item: T) => string;
     /**
      * When set to true will set the multi-select value with all the items provided
      */
@@ -35,6 +32,8 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
      * Props to spread to `TagInput`. Use `query` and `onQueryChange` to control the input.
      */
     tagInputProps?: MultiSelectProps<T>["tagInputProps"];
+    /** Additional properties for the (query) input field of the multi-selection. */
+    inputProps?: HTMLInputProps;
     /**
      * prop to listen for query changes, when text is entered in the multi-select input
      */
@@ -54,6 +53,14 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
      * If omitted, "No results." will be rendered in this case.
      */
     newItemCreationText?: string;
+    /**
+     * Allows to creates new item from a given query. If this is not provided then no new items can be created.
+     */
+    createNewItemFromQuery?: (query: string) => T;
+    /**
+     * Items that were newly created and not taken from the list will be post-fixed with this string.
+     */
+    newItemPostfix?: string;
     /**
      * The input element is displayed with primary color scheme.
      */
@@ -75,5 +82,5 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
      */
     disabled?: boolean;
 }
-declare function MultiSelect<T>({ items, prePopulateWithItems, equalityProp, labelProp, onSelection, canCreateNewItem, popoverProps, tagInputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, ...otherProps }: IProps<T>): JSX.Element;
+declare function MultiSelect<T>({ items, prePopulateWithItems, itemId, itemLabel, onSelection, popoverProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, ...otherProps }: IProps<T>): JSX.Element;
 export default MultiSelect;

package/dist/types/components/Notification/Notification.d.ts

@@ -1,3 +1,56 @@
-/// <reference types="react" />
-declare function Notification({ actions, children, className, message, success, warning, danger, neutral, fullWidth, iconName, timeout, ...otherProps }: any): JSX.Element;
+import React from "react";
+import { ToastProps as BlueprintToastProps } from "@blueprintjs/core";
+import { ValidIconName } from "./../Icon/canonicalIconNames";
+export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Extra user action elements
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * Notification message that can be used as alternative to children elements.
+     */
+    message?: JSX.Element | string;
+    /**
+     * Notification has a neutral color scheme.
+     */
+    neutral?: boolean;
+    /**
+     * Notification is a success info.
+     * This defines the colorization and the icon symbol.
+     */
+    success?: boolean;
+    /**
+     * Notification is a warning alert.
+     * This defines the colorization and the icon symbol.
+     */
+    warning?: boolean;
+    /**
+     * Notification is a danger alert.
+     * This defines the colorization and the icon symbol.
+     */
+    danger?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Depracation notice: Property name will removed in futire versions.
+     * Please use `flexWidth`.
+     * @depracted
+     */
+    fullWidth?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Default notifcation is displayed in min and max limits.
+     * Those limits are removed by setting this property to `true`.
+     */
+    flexWidth?: boolean;
+    /**
+     * Icon used as depiction that is displayed with the notification.
+     */
+    iconName?: ValidIconName;
+}
+/**
+ * Displays a notification message, optionally combined with depiction and further action buttons.
+ * By default it uses colorization of an blueish info alert.
+ */
+declare function Notification({ actions, children, className, message, success, warning, danger, neutral, fullWidth, // deprecated
+flexWidth, iconName, timeout, ...otherProps }: NotificationProps): JSX.Element;
 export default Notification;

package/dist/types/components/OverviewItem/OverviewItemList.d.ts

@@ -16,7 +16,7 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
      * Use multiple columns.
      * Currently only lists using 1 and 2 columns are supported.
      */
-    columns?: number;
+    columns?: 1 | 2;
 }
 /**
  * This element can include all basic information and actions to give an overview about the item.

package/dist/types/components/Spinner/Spinner.d.ts

@@ -14,6 +14,6 @@ export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<Bluep
     stroke?: SpinnerStroke;
     delay?: number;
 }
-declare function Spinner({ className, color, description, // currently unsupported (TODO)
+declare function Spinner({ className, color, description, // currently unsupported (FIXME)
 position, size, stroke, delay, ...otherProps }: SpinnerProps): JSX.Element | null;
 export default Spinner;

package/dist/types/components/Typography/HtmlContentBlock.d.ts

@@ -1,6 +1,16 @@
-/// <reference types="react" />
-declare function HtmlContentBlock({ className, children, small, large, // currently unsupported
-muted, // currently unsupported
-disabled, // currently unsupported
-...otherProps }: any): JSX.Element;
+import React from "react";
+export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    small?: boolean;
+    /** currently not supported */
+    large?: boolean;
+    /** currently not supported */
+    muted?: boolean;
+    /** currently not supported */
+    disabled?: boolean;
+    linebreakForced?: boolean;
+    linebreakPrevented?: boolean;
+    noScrollbarsOnChildren?: boolean;
+}
+declare function HtmlContentBlock({ className, children, small, large, muted, disabled, linebreakForced, linebreakPrevented, noScrollbarsOnChildren, ...otherProps }: HtmlContentBlockProps): JSX.Element;
 export default HtmlContentBlock;

package/dist/types/components/Typography/classnames.d.ts

@@ -1,6 +1,7 @@
 export declare const NOOVERFLOW: string;
 export declare const FORCELINEBREAK: string;
 export declare const PREVENTLINEBREAK: string;
+export declare const NOSCROLLBARSONCHILDREN: string;
 export declare const LARGE: string;
 export declare const SMALL: string;
 export declare const MUTED: string;

package/dist/types/extensions/react-flow/edges/getSmoothStepPath.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copied from `react-flow` because we need to change there routing.
+ * We use the 10.2.0cversion minus commit 87d518f8b5540a91a3f9c163a2315c2de47abc31
+ * @see https://github.com/wbkd/react-flow/commit/87d518f8b5540a91a3f9c163a2315c2de47abc31
+ */
+import { Position } from "react-flow-renderer";
+export interface GetSmoothStepPathParams {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition?: Position;
+    targetX: number;
+    targetY: number;
+    targetPosition?: Position;
+    borderRadius?: number;
+    centerX?: number;
+    centerY?: number;
+}
+export declare function getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: GetSmoothStepPathParams): string;

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -3,6 +3,7 @@ import { Position } from "react-flow-renderer";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { HandleProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
+import { NodeContentExtensionProps } from "./NodeContentExtension";
 export declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
@@ -28,7 +29,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Content extension, displayed at the bottom side of a node.
      */
-    contentExtension?: React.ReactNode;
+    contentExtension?: React.ReactElement<NodeContentExtensionProps>;
 }
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -111,11 +112,16 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * If set then it will be always overwritten internally.
      */
     selected?: boolean;
+    /**
+     * Allow react flow wheel events, e.g. for zooming using the mouse wheel over a node.
+     * If this is allowed scrolling inside a node is not possible.
+     */
+    letPassWheelEvents?: boolean;
 }
 export declare const gethighlightedStateClasses: (state: any, baseClassName: any) => any;
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare function NodeContent<CONTENT_PROPS = any>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
 export {};

package/dist/types/extensions/react-flow/nodes/NodeContentExtension.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
 export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When enabled the element is displayed in a way that it does not count into the node size calculation.
+     */
+    slideOutOfNode?: boolean;
     /**
      * Element is displayed in expanded state.
      * If it has no `onToggle` handler property set then it is always expanded.
@@ -27,4 +31,4 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
 /**
  * Displays an content area that can be attached to `NodeContent` elements.
  */
-export declare const NodeContentExtension: ({ children, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;
+export declare const NodeContentExtension: ({ children, slideOutOfNode, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;

package/dist/types/extensions/react-flow/nodes/NodeTools.d.ts

@@ -6,5 +6,11 @@ export interface NodeToolsProps extends IBlueprintPopoverProps {
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string;
+    /** If defined this function will be called with the menu API object to be used externally. */
+    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any;
 }
-export declare const NodeTools: React.MemoExoticComponent<({ children, togglerElement, togglerText, menuButtonDataTestId, ...otherOverlayProps }: NodeToolsProps) => JSX.Element>;
+export interface NodeToolsMenuFunctions {
+    /** Closes the menu if its open. */
+    closeMenu: () => void;
+}
+export declare const NodeTools: React.MemoExoticComponent<({ children, togglerElement, togglerText, menuButtonDataTestId, menuFunctionsCallback, ...otherOverlayProps }: NodeToolsProps) => JSX.Element>;

package/dist/types/index.d.ts

@@ -91,9 +91,7 @@ declare const HelperClasses: {
 declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
 };
-export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TextField, TextArea, SearchField, Switch, // TODO: scss styles
-NumericInput, // TODO: scss styles
-FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // TODO: include as own element
+export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // FIXME: CMEM-3742: include as own element
 MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
 export * from "./cmem";
 export * from "./extensions/react-flow";

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "22.1.0-rc.0",
+  "version": "22.1.0-rc.1",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
+  "bugs": "https://github.com/eccenca/gui-elements/issues",
   "keywords": [
     "GUI",
     "React",
-    "Blueprint JS",
-    "Carbon Components",
-    "Typescript"
+    "Blueprint",
+    "Carbon Design System",
+    "Typescript",
+    "SCSS"
   ],
   "maintainers": [
     {
@@ -18,15 +20,16 @@
       "web": "https://eccence.com/"
     }
   ],
-  "repository": [
-    {
-      "type": "git",
-      "url": "git://github.com/eccenca/gui-elements.git"
-    }
-  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/eccenca/gui-elements.git"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
+  "engines": {
+    "node": ">=14.x"
+  },
   "style": "src/index.scss",
   "main": "dist/cjs/index.js",
   "module": "dist/es5/index.js",
@@ -53,7 +56,8 @@
     "test": "jest",
     "test:ci": "jest --ci --reporters='default'",
     "test:coverage": "jest --collectCoverage",
-    "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
+    "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
+    "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
     "@blueprintjs/core": "3.49.1",
@@ -97,7 +101,7 @@
     "@storybook/react": "^6.4.9",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/carbon-components-react": "^7.49.0",
+    "@types/carbon-components-react": "7.49.0",
     "@types/codemirror": "^5.60.5",
     "@types/color": "^3.0.2",
     "@types/jest": "^24.9.1",
@@ -116,6 +120,7 @@
     "jest-pnp-resolver": "^1.2.1",
     "node-sass": "4.14.1",
     "node-sass-tilde-importer": "^1.0.2",
+    "package-json-validator": "^0.6.3",
     "react-app-polyfill": "^1.0.6",
     "react-lorem-ipsum": "^1.4.9",
     "regenerator-runtime": "^0.13.9",
@@ -133,7 +138,11 @@
     "**/carbon-components": "10.44.0",
     "**/carbon-components-react": "7.44.1",
     "**/carbon-icons": "7.0.7",
-    "**/@types/react": "^17.0.0"
+    "**/@types/react": "^17.0.0",
+    "**/node-gyp": "^7.0.0",
+    "**/glob-parent": "^5.1.2",
+    "**/trim": "^0.0.3",
+    "**/trim-newlines": "^3.0.1"
   },
   "eslintConfig": {
     "extends": [

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { ActivityControlWidget } from "./ActivityControlWidget";
-import { loremIpsum, name } from "react-lorem-ipsum";
+import { loremIpsum } from "react-lorem-ipsum";
 import Tag from "../../components/Tag/Tag";
 import TagList from "../../components/Tag/TagList";
 
@@ -66,10 +66,10 @@ const actions = [
 ];
 
 const commonWidgetArgs = {
-    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4 }),
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }),
     border: true,
     activityActions: actions,
-    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false }),
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }),
     progressSpinner: {
         intent: "none",
         value: 0.5,
@@ -86,9 +86,9 @@ export const WidgetWithTags = TemplateWithTags.bind({});
 
 const widgetTags = (
     <TagList>
-        <Tag small>{name()}</Tag>
-        <Tag small>{name()}</Tag>
-        <Tag small>{name()}</Tag>
+        <Tag small>Tag one</Tag>
+        <Tag small>Other tag</Tag>
+        <Tag small>Third keyword</Tag>
     </TagList>
 );
 

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -11,7 +11,6 @@ import {
     OverviewItemDescription,
     OverviewItemLine,
     ProgressBar,
-    Spacing,
     Spinner,
     Tooltip,
 } from "../../index";
@@ -27,6 +26,11 @@ export interface IActivityControlProps extends TestableComponent {
      * The label to be shown
      */
     label?: string | JSX.Element;
+    /**
+     * Element that wraps around the label.
+     * Default: `<OverflowText inline={true} />`
+     */
+    labelWrapper?: JSX.Element;
     /**
      * To add tags in addition to the widget status description
      */
@@ -59,6 +63,10 @@ export interface IActivityControlProps extends TestableComponent {
      * display widget inside rectangle
      */
     border?: boolean;
+    /**
+     * display a bit whitespace around widget, even without border
+     */
+    hasSpacing?: boolean;
     /**
      * only use necessary width, not always the available 100% of parent element
      */
@@ -103,13 +111,15 @@ export function ActivityControlWidget(props: IActivityControlProps) {
         activityContextMenu,
         small,
         border,
+        hasSpacing,
         canShrink,
         tags,
         progressSpinnerFinishedIcon,
+        labelWrapper = <OverflowText inline={true} />,
     } = props;
     const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`;
     const widget = (
-        <OverviewItem data-test-id={dataTestId} hasSpacing={border} densityHigh={small}>
+        <OverviewItem data-test-id={dataTestId} hasSpacing={border || hasSpacing} densityHigh={small}>
             {progressBar && <ProgressBar {...progressBar} />}
             {(progressSpinner || progressSpinnerFinishedIcon) && (
                 <OverviewItemDepiction keepColors>
@@ -129,31 +139,34 @@ export function ActivityControlWidget(props: IActivityControlProps) {
             <OverviewItemDescription>
                 {props.label && (
                     <OverviewItemLine small={small}>
-                        <OverflowText inline={true}>{props.label}</OverflowText>
+                        { React.cloneElement(labelWrapper, {}, props.label) }
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
                     <OverviewItemLine small>
-                        {tags && (
-                            <>
-                                { tags }
-                                <Spacing vertical size="tiny" />
-                            </>
-                        )}
+                        { tags }
                         {props.statusMessage && (
-                            <>
+                            <OverflowText passDown>
                                 {props.statusMessage.length > 50 ? (
                                     <Tooltip
                                         content={props.statusMessage}
                                         size="large"
-                                        tooltipProps={{ placement: "top", boundary: "viewport" }}
+                                        tooltipProps={{
+                                            position: "top-right",
+                                            boundary: "viewport",
+                                            modifiers: {
+                                                flip: {
+                                                    enabled: false
+                                                }
+                                            }
+                                        }}
                                     >
-                                        <OverflowText inline={true}>{props.statusMessage}</OverflowText>
+                                        {props.statusMessage}
                                     </Tooltip>
                                 ) : (
-                                    <OverflowText inline={true}>{props.statusMessage}</OverflowText>
+                                    props.statusMessage
                                 )}
-                            </>
+                            </OverflowText>
                         )}
                     </OverviewItemLine>
                 )}

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,5 +1,5 @@
-import {Button, HtmlContentBlock, SimpleDialog} from "../../index";
-import React from "react";
+import {Button, HtmlContentBlock, IconButton, SimpleDialog} from "../../index";
+import React, { useState } from "react";
 
 interface IProps {
     // Title of the modal
@@ -18,6 +18,7 @@ interface IProps {
 
 /** Shows the execution error report to the user and offers to download the report. */
 export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, downloadButtonValue, closeButtonValue, fetchErrorReport}: IProps) => {
+    const [displayFullscreen, setDisplayFullscreen] = useState<boolean>(false);
     const fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md"
     const handleDownload = async () => {
         const markdown = await fetchErrorReport()
@@ -37,7 +38,14 @@ export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, dow
         <SimpleDialog
             title={title}
             isOpen={true}
+            size={displayFullscreen ? "fullscreen" : "large"}
             onClose={onDiscard}
+            headerOptions={(
+                <IconButton
+                    name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
+                    onClick={() => setDisplayFullscreen(!displayFullscreen)}
+                />
+            )}
             actions={[
                 <Button data-test-id={"error-report-download-btn"} affirmative onClick={handleDownload} key="download">
                     {downloadButtonValue}
@@ -47,7 +55,7 @@ export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, dow
                 </Button>,
             ]}
         >
-            <HtmlContentBlock>
+            <HtmlContentBlock noScrollbarsOnChildren>
                 {report}
             </HtmlContentBlock>
         </SimpleDialog>

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -63,10 +63,14 @@ export interface IActivityControlLayoutProps {
     small?: boolean;
     // display widget inside rectange
     border?: boolean;
+    // add a bit spacing
+    hasSpacing?: boolean;
     // only use necessary width, not always the available 100% of parent element
     canShrink?: boolean;
     // what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that
     visualization?: "none" | "progressbar" | "spinner";
+    // wrapper around label
+    labelWrapper?: JSX.Element;
 }
 
 const defaultLayout: IActivityControlLayoutProps = {
@@ -352,7 +356,7 @@ export const calcIntent = (activityStatus: IActivityStatus): Intent => {
             intent = "danger";
             break;
         case "Waiting":
-            intent = "none"; // TODO: This is 100% yellow in the old activity control
+            intent = "none";
             break;
         default:
             intent = "none";

package/src/cmem/react-flow/_nodes.scss

@@ -10,7 +10,9 @@
         background-color: mix($color, #fff, 24%);
     }
     .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: $color;
+        &.#{$eccgui}-graphviz__node__extension--slideout {
+            border-color: $color;
+        }
     }
 }
 
@@ -23,10 +25,12 @@
         border-width: 3 * $reactflow-node-border-width;
     }
     .#{$eccgui}-graphviz__node__extension--expanded {
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
+        &.#{$eccgui}-graphviz__node__extension--slideout {
+            border-style: double;
+            border-width: 3 * $reactflow-node-border-width;
+            left: -3 * $reactflow-node-border-width;
+            right: -3 * $reactflow-node-border-width;
+        }
     }
 }
 
@@ -39,7 +43,9 @@
         border-style: dashed;
     }
     .#{$eccgui}-graphviz__node__extension--expanded {
-        border-style: dashed;
+        &.#{$eccgui}-graphviz__node__extension--slideout {
+            border-style: dashed;
+        }
     }
 }
 

package/src/cmem/react-flow/configuration/_colors-linking.module.scss

@@ -1,6 +1,6 @@
 $reactflow-color-sourcepath-node: #745a85 !default;
 $reactflow-color-targetpath-node: #3a7896 !default;
-$reactflow-color-transformation-node: #c1c1c1 !default;
+$reactflow-color-transformation-node: #ae3c74 !default;
 $reactflow-color-comparator-node: #40a691 !default;
 $reactflow-color-aggregator-node: #0097a7 !default;
 

package/src/common/utils/stringUtils.ts

@@ -0,0 +1,2 @@
+/** Removes leading and trailing spaces. In addition converts multiple subsequent spaces to a single space. */
+export const removeExtraSpaces = (text: string) => text.replace(/\s+/g, " ").trim();

package/src/components/Application/ApplicationContent.tsx

@@ -30,11 +30,6 @@ function ApplicationContent({
     isApplicationSidebarExpanded = false,
     isApplicationSidebarRail = false,
     htmlMainProps,
-    /*
-        TODO: type definitions do not include data attributes because of their infinite number of possible names, so we
-        need to solve this by filtering out all other props, or create a stack of allowed data attributes or using
-        a combined process of dynamic keys and template mappings in typescript
-    */
     ...otherPropsShouldOnlyBeUsedForDataAttributes
 }: IApplicationContentProps) {
 

package/src/components/Application/ApplicationTitle.tsx

@@ -54,11 +54,6 @@ function ApplicationTitle({
     isAlignedWithSidebar=false,
     isApplicationSidebarExpanded,
     htmlAProps,
-    /*
-        TODO: type definitions do not include data attributes because of their infinite number of possible names, so we
-        need to solve this by filtering out all other props, or create a stack of allowed data attributes or using
-        a combined process of dynamic keys and template mappings in typescript
-    */
     ...otherPropsShouldOnlyBeUsedForDataAttributes
 }: IApplicationTitleProps) {
 

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -189,7 +189,6 @@ const AutoSuggestion = ({
         const parseError = validationResponse?.parseError;
         if (parseError && editorInstance) {
             const { message, start, end } = parseError;
-            // TODO: Display error message
             editorInstance.getDoc().getEditor()
             const marker = editorInstance.markText(
                 { line: 0, ch: start },