@eccenca/gui-elements 23.4.0-rc.0 → 23.4.0

package/dist/types/cmem/ActivityControl/ActivityControlWidget.d.ts

@@ -59,6 +59,10 @@ export interface ActivityControlWidgetProps extends TestableComponent {
      * if this is set the spinner is replaced when the progress has finished from 0 - 1
      */
     progressSpinnerFinishedIcon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
+    /**
+     * execution timer messages for waiting and running times.
+     */
+    timerExecutionMsg?: JSX.Element | null;
 }
 export declare type IActivityControlProps = ActivityControlWidgetProps;
 interface IActivityContextMenu extends TestableComponent {

package/dist/types/cmem/ActivityControl/SilkActivityControl.d.ts

@@ -1,8 +1,8 @@
-import { TestableComponent } from "../../components/interfaces";
 import React from "react";
-import { SilkActivityStatusConcrete, SilkActivityStatusProps } from "./ActivityControlTypes";
 import { Intent } from "@blueprintjs/core/src/common/intent";
+import { TestableComponent } from "../../components/interfaces";
 import { TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+import { SilkActivityStatusConcrete, SilkActivityStatusProps } from "./ActivityControlTypes";
 export interface SilkActivityControlProps extends TestableComponent {
     label: string | JSX.Element;
     /**
@@ -34,6 +34,10 @@ export interface SilkActivityControlProps extends TestableComponent {
     layoutConfig?: SilkActivityControlLayoutProps;
     /** Configures when the status message should be hidden, e.g. because it is uninteresting. */
     hideMessageOnStatus?: (concreteStatus: SilkActivityStatusConcrete | undefined) => boolean;
+    /**
+     * The translation of the time units
+     */
+    translateUnits?: (unit: TimeUnits) => string;
 }
 export interface SilkActivityControlLayoutProps {
     small?: boolean;
@@ -66,7 +70,7 @@ export interface SilkActivityExecutionReportProps {
 }
 export declare type IActivityExecutionReport = SilkActivityExecutionReportProps;
 interface IStacktrace {
-    errorMessage?: String;
+    errorMessage?: string;
     lines: string[];
     cause?: IStacktrace;
 }
@@ -76,7 +80,7 @@ export declare type ActivityAction = "start" | "cancel" | "restart";
 export declare type SilkActivityControlAction = ActivityAction;
 /** Silk activity control. */
 export declare function SilkActivityControl(props: SilkActivityControlProps): React.JSX.Element;
-export declare function useSilkActivityControl({ label, initialStatus, registerForUpdates, executeActivityAction, showReloadAction, showStartAction, viewValueAction, showStopAction, failureReportAction, unregisterFromUpdates, translate, elapsedTimeOfLastStart, tags, layoutConfig, hideMessageOnStatus, executePrioritized, ...props }: SilkActivityControlProps): {
+export declare function useSilkActivityControl({ label, initialStatus, registerForUpdates, executeActivityAction, showReloadAction, showStartAction, viewValueAction, showStopAction, failureReportAction, unregisterFromUpdates, translate, elapsedTimeOfLastStart, tags, layoutConfig, hideMessageOnStatus, executePrioritized, translateUnits, ...props }: SilkActivityControlProps): {
     readonly elapsedDateTime: React.JSX.Element;
     readonly intent: Intent;
     readonly widget: React.JSX.Element;

package/dist/types/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TestableComponent } from "../../components/interfaces";
-export declare type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days";
+export declare type TimeUnits = "second" | "seconds" | "minute" | "minutes" | "hour" | "hours" | "day" | "days";
 export declare type ElapsedDateTimeDisplayUnits = TimeUnits;
 export interface ElapsedDateTimeDisplayProps extends TestableComponent {
     dateTime: string | number;
@@ -8,6 +8,7 @@ export interface ElapsedDateTimeDisplayProps extends TestableComponent {
     suffix?: string;
     showDateTimeTooltip?: boolean;
     translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string;
+    includeSeconds?: boolean;
 }
 /**
  * Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
@@ -18,12 +19,12 @@ export declare const elapsedTimeSegmented: (elapsedTimeInMs: number) => number[]
  * Returns the simplified elapsed time
  * @deprecated moved to `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
  */
-export declare const simplifiedElapsedTime: (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string) => string;
+export declare const simplifiedElapsedTime: (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string, includeSeconds?: boolean) => string;
 /**
  * Displays the elapsed time in a human readable way.
  */
-export declare const ElapsedDateTimeDisplay: ({ dateTime, prefix, suffix, showDateTimeTooltip, translateUnits, ...otherProps }: ElapsedDateTimeDisplayProps) => React.JSX.Element;
+export declare const ElapsedDateTimeDisplay: ({ dateTime, prefix, suffix, showDateTimeTooltip, translateUnits, includeSeconds, ...otherProps }: ElapsedDateTimeDisplayProps) => React.JSX.Element;
 export declare const elapsedDateTimeDisplayUtils: {
     elapsedTimeSegmented: (elapsedTimeInMs: number) => number[];
-    simplifiedElapsedTime: (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string) => string;
+    simplifiedElapsedTime: (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string, includeSeconds?: boolean) => string;
 };

package/dist/types/components/Icon/TestIcon.d.ts

@@ -13,7 +13,8 @@ export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
  * Example usage:
  * ```
  * import { LogoReact } from "@carbon/icons-react";
- * const testIcon = <TestIcon tryout={LogoReact} />
+ * import { TestIcon } from "@eccenca/gui-elements";
+ * const testIcon = <TestIcon tryout={LogoReact} />;
  * ```
  */
 export declare const TestIcon: ({ className, tryout, ...otherBaseIconProps }: TestIconProps) => React.JSX.Element;

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IconProps as CarbonIconProps } from "carbon-components-react";
 /** Valid icon names. */
-export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "application-hotkeys" | "artefact-chatlog" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "entity-human" | "entity-robot" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-skip-forward" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "item-hidedetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-down" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-left" | "navigation-next" | "navigation-previous" | "navigation-right" | "navigation-up" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-erase" | "operation-filter" | "operation-filteredit" | "operation-filterremove" | "operation-fix" | "operation-link" | "operation-logout" | "operation-magic" | "operation-merge" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-translate" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-caretright" | "toggler-caretdown" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-rowexpand" | "toggler-rowcollapse" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "form-template" | "undefined";
+export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "application-hotkeys" | "artefact-chatlog" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "data-string" | "data-date" | "data-time" | "data-datetime" | "data-number" | "entity-human" | "entity-robot" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-skip-forward" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "item-hidedetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-down" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-left" | "navigation-next" | "navigation-previous" | "navigation-right" | "navigation-up" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-erase" | "operation-filter" | "operation-filteredit" | "operation-filterremove" | "operation-fix" | "operation-link" | "operation-logout" | "operation-magic" | "operation-merge" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-translate" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-caretright" | "toggler-caretdown" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-rowexpand" | "toggler-rowcollapse" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "form-template" | "undefined";
 export declare type CarbonIconType = React.ComponentType<CarbonIconProps>;
 /**
  * @deprecated

package/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": "23.4.0-rc.0",
+    "version": "23.4.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -66,7 +66,7 @@
         "@blueprintjs/popover2": "^1.14.1",
         "@blueprintjs/select": "^4.9.14",
         "@carbon/icons": "^11.19.0",
-        "@carbon/icons-react": "^11.19.0",
+        "@carbon/icons-react": "^11.34.1",
         "@carbon/styles": "1.32.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "carbon-components-react": "^8.28.0",
@@ -120,6 +120,7 @@
         "chromatic": "^6.17.4",
         "eslint": "^8.49.0",
         "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
@@ -146,6 +147,7 @@
         "yargs": "^17.7.2"
     },
     "peerDependencies": {
+        "@carbon/icons-react": ">=11.34.1",
         "@carbon/styles": "<1.33.0",
         "@types/carbon-components-react": ">=7",
         "react": ">=16",
@@ -155,7 +157,8 @@
         "**/@babel/traverse": "^7.23.2",
         "**/@types/react": "^17.0.59",
         "**/postcss": "^8.4.31",
-        "**/parse5": "^6.0.1"
+        "**/parse5": "^6.0.1",
+        "**/@carbon/icons-react": "^11.34.1"
     },
     "husky": {
         "hooks": {

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -28,6 +28,8 @@ export interface IActivityStatus {
     runtime?: number;
     // The start time as date time, e.g. "2021-09-07T09:34:53.153Z"
     startTime?: string;
+    // The queue time spent waiting before workflow is executed as date time, e.g. "2021-09-07T09:34:53.153Z"
+    queueTime?: string;
 }
 export type SilkActivityStatusProps = IActivityStatus;
 

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -76,6 +76,10 @@ export interface ActivityControlWidgetProps extends TestableComponent {
      * if this is set the spinner is replaced when the progress has finished from 0 - 1
      */
     progressSpinnerFinishedIcon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
+    /**
+     * execution timer messages for waiting and running times.
+     */
+    timerExecutionMsg?: JSX.Element | null
 }
 
 // @deprecated use `ActivityControlWidgetProps`
@@ -122,6 +126,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
         canShrink,
         tags,
         progressSpinnerFinishedIcon,
+        timerExecutionMsg = "",
         labelWrapper = <OverflowText inline={true} />,
     } = props;
     const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`;
@@ -170,6 +175,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                         )}
                     </OverviewItemLine>
                 )}
+             {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -1,12 +1,14 @@
-import {TestableComponent} from "../../components/interfaces";
-import {ActivityControlWidget, ActivityControlWidgetProps } from "./ActivityControlWidget";
-import React, {useEffect, useRef, useState} from "react";
-import {SilkActivityStatusConcrete, SilkActivityStatusProps} from "./ActivityControlTypes";
-import {Intent} from "@blueprintjs/core/src/common/intent";
-import {ActivityExecutionErrorReportModal} from "./ActivityExecutionErrorReportModal";
-import {Icon, Spacing} from "../../";
-import {ElapsedDateTimeDisplay, TimeUnits} from "../DateTimeDisplay/ElapsedDateTimeDisplay";
-import {IntentTypes} from "../../common/Intent";
+import React, { useEffect, useRef, useState } from "react";
+import { Intent } from "@blueprintjs/core/src/common/intent";
+
+import { Icon, Spacing } from "../../";
+import { IntentTypes } from "../../common/Intent";
+import { TestableComponent } from "../../components/interfaces";
+import { ElapsedDateTimeDisplay, TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+
+import { SilkActivityStatusConcrete, SilkActivityStatusProps } from "./ActivityControlTypes";
+import { ActivityControlWidget, ActivityControlWidgetProps } from "./ActivityControlWidget";
+import { ActivityExecutionErrorReportModal } from "./ActivityExecutionErrorReportModal";
 
 const progressBreakpointIndetermination = 10;
 const progressBreakpointAnimation = 99;
@@ -59,7 +61,11 @@ export interface SilkActivityControlProps extends TestableComponent {
     // configure how the widget is displayed
     layoutConfig?: SilkActivityControlLayoutProps;
     /** Configures when the status message should be hidden, e.g. because it is uninteresting. */
-    hideMessageOnStatus?: (concreteStatus: SilkActivityStatusConcrete | undefined) => boolean
+    hideMessageOnStatus?: (concreteStatus: SilkActivityStatusConcrete | undefined) => boolean;
+    /**
+     * The translation of the time units
+     */
+    translateUnits?: (unit: TimeUnits) => string;
 }
 
 export interface SilkActivityControlLayoutProps {
@@ -130,7 +136,7 @@ export type IActivityExecutionReport = SilkActivityExecutionReportProps;
 
 interface IStacktrace {
     // The final error message of the stacktrace
-    errorMessage?: String;
+    errorMessage?: string;
     // The individual elements of the stack trace
     lines: string[];
     // In case of nested stacktraces this may contain the cause of the failure
@@ -138,7 +144,12 @@ interface IStacktrace {
 }
 
 // @deprecated use `SilkActivityControlTranslationKeys`
-export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport" | "startPrioritized";
+export type ActivityControlTranslationKeys =
+    | "startActivity"
+    | "stopActivity"
+    | "reloadActivity"
+    | "showErrorReport"
+    | "startPrioritized";
 export type SilkActivityControlTranslationKeys = ActivityControlTranslationKeys;
 // @deprecated use `SilkActivityControlAction`
 export type ActivityAction = "start" | "cancel" | "restart";
@@ -167,38 +178,40 @@ export function useSilkActivityControl({
     layoutConfig = defaultLayout,
     hideMessageOnStatus = () => false,
     executePrioritized,
+    translateUnits = (unit: TimeUnits) => unit.toString(),
     ...props
 }: SilkActivityControlProps) {
     const [activityStatus, setActivityStatus] = useState<SilkActivityStatusProps | undefined>(initialStatus);
-    const currentStatus = useRef<SilkActivityStatusProps | undefined>(initialStatus)
-    const [showStartPrioritized, setShowStartPrioritized] = useState(false)
+    const currentStatus = useRef<SilkActivityStatusProps | undefined>(initialStatus);
+    const [showStartPrioritized, setShowStartPrioritized] = useState(false);
     const [errorReport, setErrorReport] = useState<string | SilkActivityExecutionReportProps | undefined>(undefined);
 
     // Register update function
-    useEffect(() => {
-        const updateActivityStatus = (status: SilkActivityStatusProps | undefined) => {
-            if(status?.concreteStatus !== "Waiting") {
-                setShowStartPrioritized(false)
-            } else if(executePrioritized) {
-                // Show start prioritized button only-if the activity is still in Waiting status after 2s
-                setTimeout(() => {
-                    if(currentStatus.current?.concreteStatus === "Waiting") {
-                        setShowStartPrioritized(true)
-                    }
-                }, 2000)
-            }
-            currentStatus.current = status
-            setActivityStatus(status)
-        }
-        registerForUpdates(updateActivityStatus)
-        return unregisterFromUpdates
-    },
+    useEffect(
+        () => {
+            const updateActivityStatus = (status: SilkActivityStatusProps | undefined) => {
+                if (status?.concreteStatus !== "Waiting") {
+                    setShowStartPrioritized(false);
+                } else if (executePrioritized) {
+                    // Show start prioritized button only-if the activity is still in Waiting status after 2s
+                    setTimeout(() => {
+                        if (currentStatus.current?.concreteStatus === "Waiting") {
+                            setShowStartPrioritized(true);
+                        }
+                    }, 2000);
+                }
+                currentStatus.current = status;
+                setActivityStatus(status);
+            };
+            registerForUpdates(updateActivityStatus);
+            return unregisterFromUpdates;
+        },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         []
     );
 
     // Create activity actions
-    const actions: ActivityControlWidgetProps['activityActions'] = [];
+    const actions: ActivityControlWidgetProps["activityActions"] = [];
 
     if (failureReportAction && activityStatus?.failed && activityStatus.concreteStatus !== "Cancelled") {
         actions.push({
@@ -211,13 +224,13 @@ export function useSilkActivityControl({
     }
 
     if (showStartAction) {
-        if(showStartPrioritized && executePrioritized) {
+        if (showStartPrioritized && executePrioritized) {
             actions.push({
                 "data-test-id": "activity-start-prioritized-activity",
                 icon: "item-skip-forward",
                 action: executePrioritized,
                 tooltip: translate("startPrioritized"),
-            })
+            });
         } else {
             actions.push({
                 "data-test-id": "activity-start-activity",
@@ -286,9 +299,24 @@ export function useSilkActivityControl({
                 />
             </>
         ) : (
-            <>{label}</>
+            label
         );
 
+    const timerExecutionMessage =
+        (activityStatus?.startTime || activityStatus?.queueTime) && activityStatus.statusName !== "Finished" ? (
+            <ElapsedDateTimeDisplay
+                includeSeconds
+                dateTime={
+                    (activityStatus.statusName === "Running"
+                        ? activityStatus?.startTime
+                        : activityStatus.statusName === "Waiting"
+                        ? activityStatus.queueTime
+                        : activityStatus?.startTime)!
+                }
+                translateUnits={translateUnits}
+            />
+        ) : null;
+
     const { visualization, ...otherLayoutConfig } = layoutConfig;
     let visualizationProps = {}; // visualization==="none" or undefined
     const runningProgress = activityStatus && activityStatus.isRunning;
@@ -342,7 +370,10 @@ export function useSilkActivityControl({
                 data-test-id={props["data-test-id"]}
                 label={activityControlLabel}
                 activityActions={actions}
-                statusMessage={hideMessageOnStatus(activityStatus?.concreteStatus) ? undefined : activityStatus?.message}
+                timerExecutionMsg={timerExecutionMessage}
+                statusMessage={
+                    hideMessageOnStatus(activityStatus?.concreteStatus) ? undefined : activityStatus?.message
+                }
                 {...visualizationProps}
                 {...otherLayoutConfig}
             />
@@ -363,16 +394,17 @@ export function useSilkActivityControl({
     );
 
     return {
-        elapsedDateTime: activityStatus?.startTime && elapsedTimeOfLastStart ? (
-            <ElapsedDateTimeDisplay
-                dateTime={activityStatus.startTime}
-                translateUnits={elapsedTimeOfLastStart.translate}
-            />
-        ) : (
-            <></>
-        ),
+        elapsedDateTime:
+            activityStatus?.startTime && elapsedTimeOfLastStart ? (
+                <ElapsedDateTimeDisplay
+                    dateTime={activityStatus.startTime}
+                    translateUnits={elapsedTimeOfLastStart.translate}
+                />
+            ) : (
+                <></>
+            ),
         intent,
-        widget
+        widget,
     } as const;
 }
 

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from "react";
 import {TestableComponent} from "../../components/interfaces";
 
 // @deprecated use `ElapsedDateTimeDisplayUnits`
-export type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days"
+export type TimeUnits = "second"| "seconds" | "minute" | "minutes" | "hour" | "hours" | "day" | "days"
 export type ElapsedDateTimeDisplayUnits = TimeUnits;
 
 export interface ElapsedDateTimeDisplayProps extends TestableComponent {
@@ -16,6 +16,7 @@ export interface ElapsedDateTimeDisplayProps extends TestableComponent {
     showDateTimeTooltip?: boolean
     // Translate time related vocabulary
     translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string
+    includeSeconds?:boolean
 }
 
 const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
@@ -46,14 +47,20 @@ export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
  * Returns the simplified elapsed time
  * @deprecated moved to `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
  */
-export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string) => {
+export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string, includeSeconds = false) => {
     const units: ElapsedDateTimeDisplayUnits[] = ["day", "hour", "minute"]
+
+    if(includeSeconds){
+        units.push("second")
+    }
+
     // Find first non-null value
     let idx = 0
     while(idx < 3 && timeSegments[idx] === 0) {
         idx++
     }
-    if(idx === 3) {
+
+    if(idx === 3 && !includeSeconds) {
         // Do not show exact seconds
         return `< 1 ${translateUnits("minute")}`
     } else {
@@ -70,6 +77,7 @@ export const ElapsedDateTimeDisplay = ({
     suffix = "",
     showDateTimeTooltip = true,
     translateUnits,
+    includeSeconds, 
     ...otherProps
 }: ElapsedDateTimeDisplayProps) => {
     const [elapsedTime, setElapsedTime] = useState<number>(dateTimeToElapsedTimeInMs(dateTime))
@@ -82,7 +90,7 @@ export const ElapsedDateTimeDisplay = ({
     }, [dateTime])
 
     return <span data-test-id={otherProps["data-test-id"]} title={showDateTimeTooltip ? new Date(dateTime).toString() : ""}>
-        {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits) + suffix}
+        {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits, includeSeconds) + suffix}
     </span>
 }
 

package/src/components/Icon/TestIcon.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import BaseIcon, { BaseIconProps } from "./BaseIcon";
-import { CarbonIconType } from "./canonicalIconNames"
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import BaseIcon, { BaseIconProps } from "./BaseIcon";
+import { CarbonIconType } from "./canonicalIconNames";
+
 export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
     /**
      * Carbon icon that is used instead of the via `name` defined canonical named icon.
@@ -16,24 +18,18 @@ export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
  * Example usage:
  * ```
  * import { LogoReact } from "@carbon/icons-react";
- * const testIcon = <TestIcon tryout={LogoReact} />
+ * import { TestIcon } from "@eccenca/gui-elements";
+ * const testIcon = <TestIcon tryout={LogoReact} />;
  * ```
  */
-export const TestIcon = ({
-    className = "",
-    tryout,
-    ...otherBaseIconProps
-}: TestIconProps) => {
+export const TestIcon = ({ className = "", tryout, ...otherBaseIconProps }: TestIconProps) => {
     return (
         <BaseIcon
             iconComponent={tryout}
-            className={
-                `${eccgui}-icon--test` +
-                (className ? ` ${className}` : "")
-            }
+            className={`${eccgui}-icon--test` + (className ? ` ${className}` : "")}
             {...otherBaseIconProps}
         />
     );
-}
+};
 
 export default TestIcon;

package/src/components/Icon/canonicalIconNames.tsx

@@ -45,6 +45,11 @@ export type ValidIconName =
     | "artefact-workflow"
     | "data-sourcepath"
     | "data-targetpath"
+    | "data-string"
+    | "data-date"
+    | "data-time"
+    | "data-datetime"
+    | "data-number"
     | "entity-human"
     | "entity-robot"
     | "item-add-artefact"
@@ -201,6 +206,11 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
 
     "data-sourcepath": icons.Data_2,
     "data-targetpath": icons.Data_1,
+    "data-string": icons.StringText,
+    "data-date": icons.Calendar,
+    "data-time": icons.Time,
+    "data-datetime": icons.EventSchedule,
+    "data-number": icons.StringInteger,
 
     "entity-human": icons.User,
     "entity-robot": icons.Bot,

package/src/components/Icon/stories/Icon.stories.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
-import {
-    Icon,
-    Button,
-} from "../../../index";
-import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
 import { Definitions } from "../../../common/Intent";
+import { Button, Icon } from "../../../index";
+
+import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
 
 export default {
     title: "Components/Icon",
@@ -14,25 +12,23 @@ export default {
     argTypes: {
         name: {
             control: "select",
-            options: [...(Object.keys(canonicalIcons))],
+            options: [...Object.keys(canonicalIcons)],
         },
         intent: {
             control: "select",
-            options: {...Definitions},
+            options: { ...Definitions },
         },
     },
-} as ComponentMeta<typeof Icon>;
+} as Meta<typeof Icon>;
 
-const Template: ComponentStory<typeof Icon> = (args) => (
-    <Icon {...args} tooltipText={args.name?.toString()}/>
-);
+const Template: StoryFn<typeof Icon> = (args) => <Icon {...args} tooltipText={args.name?.toString()} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    name: "undefined"
-}
+    name: "undefined",
+};
 
-const TemplateSizes: ComponentStory<typeof Icon> = (args) => (
+const TemplateSizes: StoryFn<typeof Icon> = (args) => (
     <>
         <Icon {...args} small />
         <Icon {...args} />
@@ -42,24 +38,15 @@ const TemplateSizes: ComponentStory<typeof Icon> = (args) => (
 
 export const IconSizes = TemplateSizes.bind({});
 IconSizes.args = {
-    name: "undefined"
-}
+    name: "undefined",
+};
 
 export const IconsOverview = () => {
     return (
         <>
-            {
-                Object.keys(canonicalIcons).map((iconName) => {
-                    return (
-                        <Button
-                            icon={iconName as ValidIconName}
-                            outlined
-                            large
-                            tooltip={iconName}
-                        />
-                    )
-                })
-            }
+            {Object.keys(canonicalIcons).map((iconName) => {
+                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} />;
+            })}
         </>
     );
-}
+};

package/src/components/Icon/stories/TestIcon.stories.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LogoReact } from "@carbon/icons-react";
-import { TestIcon } from "../../../index";
+import { Meta, StoryFn } from "@storybook/react";
+
 import { Definitions } from "../../../common/Intent";
+import { TestIcon } from "../../../index";
 
 export default {
-    title: "Components/Icon",
+    title: "Components/Icon/TestIcon",
     component: TestIcon,
     argTypes: {
         tryout: {
@@ -13,16 +14,14 @@ export default {
         },
         intent: {
             control: "select",
-            options: {...Definitions},
+            options: { ...Definitions },
         },
     },
-} as ComponentMeta<typeof TestIcon>;
+} as Meta<typeof TestIcon>;
 
-const Template: ComponentStory<typeof TestIcon> = (args) => (
-    <TestIcon {...args} />
-);
+const Template: StoryFn<typeof TestIcon> = (args) => <TestIcon {...args} />;
 
 export const TestingAnIcon = Template.bind({});
 TestingAnIcon.args = {
     tryout: LogoReact,
-}
+};