@eccenca/gui-elements 23.3.1 → 23.4.0

package/dist/types/components/AutoSuggestion/AutoSuggestionList.d.ts

@@ -5,12 +5,14 @@ export interface AutoSuggestionListProps extends Omit<React.HTMLAttributes<HTMLD
     onItemSelectionChange: (item: ISuggestionWithReplacementInfo) => any;
     isOpen: boolean;
     loading?: boolean;
-    registerForHorizontalShift?: (callback: HorizontalShiftCallbackFunction) => any;
     currentlyFocusedIndex: number;
     itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
+    /** horizontal and vertical offset values in relation to the cursor */
+    offsetValues?: {
+        x: number;
+        y: number;
+    };
 }
 export declare type IDropdownProps = AutoSuggestionListProps;
-declare type HorizontalShiftCallbackFunction = (shift: number) => any;
 /** A drop-down-like list that can be used in combination with other components to show and select items. */
-export declare const AutoSuggestionList: ({ isOpen, options, loading, onItemSelectionChange, registerForHorizontalShift, currentlyFocusedIndex, itemToHighlight, style, ...otherDivProps }: AutoSuggestionListProps) => React.JSX.Element | null;
-export {};
+export declare const AutoSuggestionList: ({ isOpen, options, loading, onItemSelectionChange, currentlyFocusedIndex, itemToHighlight, style, offsetValues, ...otherDivProps }: AutoSuggestionListProps) => React.JSX.Element | null;

package/dist/types/components/AutoSuggestion/{SingleLineCodeEditor.d.ts → ExtendedCodeEditor.d.ts}

@@ -6,7 +6,7 @@ export interface IRange {
     from: number;
     to: number;
 }
-export interface SingleLineCodeEditorProps {
+export interface ExtendedCodeEditorProps {
     setEditorInstance: (editor: CodeMirrorEditor) => any;
     onChange: (value: string) => any;
     onCursorChange: (pos: any, coords: any, scrollinfo: any) => any;
@@ -14,13 +14,16 @@ export interface SingleLineCodeEditorProps {
     initialValue: string;
     onFocusChange: (focused: boolean) => any;
     onKeyDown: (event: KeyboardEvent) => any;
+    onMouseDown?: (editor: CodeMirrorEditor) => any;
     onSelection: (ranges: IRange[]) => any;
     enableTab?: boolean;
     /** Placeholder tobe shown when no text has been entered, yet. */
     placeholder?: string;
     showScrollBar?: boolean;
+    /** allow multiline entries when new line characters are entered */
+    multiline?: boolean;
 }
-export declare type IEditorProps = SingleLineCodeEditorProps;
+export declare type IEditorProps = ExtendedCodeEditorProps;
 /** A single-line code editor. */
-export declare const SingleLineCodeEditor: ({ setEditorInstance, onChange, onCursorChange, mode, initialValue, onFocusChange, onKeyDown, onSelection, enableTab, placeholder, showScrollBar }: SingleLineCodeEditorProps) => React.JSX.Element;
-export default SingleLineCodeEditor;
+export declare const ExtendedCodeEditor: ({ setEditorInstance, onChange, onCursorChange, mode, initialValue, onFocusChange, onKeyDown, onSelection, enableTab, placeholder, showScrollBar, multiline, onMouseDown, }: ExtendedCodeEditorProps) => React.JSX.Element;
+export default ExtendedCodeEditor;

package/dist/types/components/AutoSuggestion/index.d.ts

@@ -1,5 +1,5 @@
 import { AutoSuggestion, AutoSuggestionProps } from "./AutoSuggestion";
 import { AutoSuggestionList, AutoSuggestionListProps } from "./AutoSuggestionList";
-import { SingleLineCodeEditor, SingleLineCodeEditorProps } from "./SingleLineCodeEditor";
-export { AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, };
-export type { AutoSuggestionProps, AutoSuggestionListProps, SingleLineCodeEditorProps, };
+import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "./ExtendedCodeEditor";
+export { AutoSuggestion, AutoSuggestionList, ExtendedCodeEditor };
+export type { AutoSuggestionProps, AutoSuggestionListProps, ExtendedCodeEditorProps };

package/dist/types/components/Card/CardHeader.d.ts

@@ -3,11 +3,11 @@ import { OverviewItemProps } from "./../OverviewItem/OverviewItem";
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
     /**
-     * @deprecated
+     * @deprecated use `whitespaceAmount` option of `<Card />`
      */
     densityHigh?: OverviewItemProps["densityHigh"];
     /**
-     * @deprecated
+     * @deprecated use `whitespaceAmount` option of `<Card />`
      */
     hasSpacing?: OverviewItemProps["hasSpacing"];
 }

package/dist/types/components/Grid/GridColumn.d.ts

@@ -21,6 +21,7 @@ export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg"
     carbonSizeConfig?: Pick<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm">;
     /**
      * @deprecated
+     * Grid column always uses full width if it is the only column and does not have any othe size config.
      */
     full?: boolean;
 }

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/dist/types/components/PropertyValuePair/PropertyName.d.ts

@@ -5,11 +5,17 @@ export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Force label to get displayed without line breaks.
+     * This works best if you use a simple string as content.
+     * Otherwise you may need to take care yourself about it.
+     */
+    nowrap?: boolean;
     /**
      * Additional label properties, e.g. `tooltip`.
      * It is only used if the `PropertyName` has simple text input.
      */
     labelProps?: LabelProps;
 }
-export declare const PropertyName: ({ className, size, children, labelProps, ...otherDtProps }: PropertyNameProps) => React.JSX.Element;
+export declare const PropertyName: ({ children, className, size, nowrap, labelProps, ...otherDtProps }: PropertyNameProps) => React.JSX.Element;
 export default PropertyName;

package/dist/types/components/PropertyValuePair/PropertyValue.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Force value to get displayed without line breaks.
+     * This works best if you use a string or inline element as content.
+     * Otherwise you may need to take care yourself about it.
+     */
+    nowrap?: boolean;
 }
-export declare const PropertyValue: ({ className, children, ...otherProps }: PropertyValueProps) => React.JSX.Element;
+export declare const PropertyValue: ({ children, className, nowrap, ...otherDdProps }: PropertyValueProps) => React.JSX.Element;
 export default PropertyValue;

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

@@ -8,6 +8,10 @@ export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElem
      * Add a horizontal rule to the bottom of the element.
      */
     hasDivider?: boolean;
+    /**
+     * Forward the `nowrap` option to it `PropertyName` and `PropertyValue` children.
+     */
+    nowrap?: boolean;
 }
-export declare const PropertyValuePair: ({ className, children, hasSpacing, hasDivider, ...otherProps }: PropertyValuePairProps) => React.JSX.Element;
+export declare const PropertyValuePair: ({ children, className, nowrap, hasSpacing, hasDivider, ...otherProps }: PropertyValuePairProps) => React.JSX.Element;
 export default PropertyValuePair;

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

@@ -0,0 +1,13 @@
+import React from "react";
+export interface SkeletonProps {
+    /**
+     * Element that need to displayed using the skeleton styles.
+     */
+    children: JSX.Element | JSX.Element[];
+}
+/**
+ * `<Skeleton />` provides a loading state display of its children elements.
+ * It does not provide its own content.
+ */
+export declare function Skeleton({ children }: SkeletonProps): React.JSX.Element;
+export default Skeleton;

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

@@ -0,0 +1 @@
+export declare const SKELETON: string;

package/dist/types/components/Table/TableCell.d.ts

@@ -1,11 +1,16 @@
 import React from "react";
 import { TableCellProps as CarbonTableCellProps } from "carbon-components-react";
 export interface TableCellProps extends CarbonTableCellProps, React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * By default all table cell content is aligned to the left of the cell.
+     * Use this property to change the horizontal alignment.
+     */
+    alignHorizontal?: "left" | "center";
     /**
      * By default all table cell content is aligned to the top of the cell.
      * Use this property to change the vertical alignment.
      */
-    alignVertical?: "middle";
+    alignVertical?: "top" | "middle";
 }
-export declare function TableCell({ className, children, alignVertical, ...otherTableCellProps }: TableCellProps): React.JSX.Element;
+export declare function TableCell({ className, children, alignHorizontal, alignVertical, ...otherTableCellProps }: TableCellProps): React.JSX.Element;
 export default TableCell;

package/dist/types/components/TextField/useTextValidation.d.ts

@@ -2,6 +2,7 @@ import React, { ChangeEventHandler } from "react";
 export interface InvisibleCharacterWarningProps {
     /**
      * If set, the function is called after every value change what invisible characters have been detected.
+     * The input component must be controlled for this callback to be triggered.
      */
     callback: (detectedCodePoints: Set<number>) => any;
     /**

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

@@ -34,6 +34,7 @@ export * from "./RadioButton/RadioButton";
 export * from "./Select/Select";
 export * from "./Separation/Divider";
 export * from "./Separation/Spacing";
+export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
 export * from "./Structure";
 export * from "./Switch/Switch";

package/dist/types/index.d.ts

@@ -1,12 +1,15 @@
+import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
 import * as LegacyReplacements from "./legacy-replacements";
 declare const ClassNames: {
+    Skeleton: typeof Skeleton;
     Typography: typeof TypographyClassNames;
     Intent: {
         [key: string]: string;
     };
 };
 declare const HelperClasses: {
+    Skeleton: typeof Skeleton;
     Typography: typeof TypographyClassNames;
     Intent: {
         [key: string]: string;

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.3.1",
+    "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>
 }