@eccenca/gui-elements 6.1.0 → 22.0.0-rc.6

package/blueprint/constants.ts

@@ -0,0 +1,7 @@
+import { Classes as B_Classes, Intent as B_Intent, Position as B_Position } from "@blueprintjs/core";
+import { IconNames as B_IconNames } from "@blueprintjs/icons";
+
+export const Position = B_Position;
+export const Intent = B_Intent;
+export const IconNames = B_IconNames;
+export const Classes = B_Classes;

package/blueprint/toaster/index.tsx

@@ -0,0 +1 @@
+export { Toaster as default } from "@blueprintjs/core";

package/dist/cmem/ActivityControl/ActivityControlTypes.d.ts

@@ -0,0 +1,15 @@
+export interface IActivityStatus {
+    project?: string;
+    task?: string;
+    activity: string;
+    isRunning: boolean;
+    failed: boolean;
+    statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
+    progress: number;
+    message: string;
+    cancelled: boolean;
+    concreteStatus: "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling";
+    exceptionMessage?: string | null;
+    runtime?: number;
+    startTime?: string;
+}

package/dist/cmem/ActivityControl/ActivityControlTypes.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { TestableComponent } from "../../components/interfaces";
+import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
+import { SpinnerProps } from "../../components/Spinner/Spinner";
+export interface IActivityControlProps extends TestableComponent {
+    label?: string | JSX.Element;
+    progressBar?: ProgressBarProps;
+    progressSpinner?: SpinnerProps;
+    statusMessage?: string;
+    activityActions?: IActivityAction[];
+    activityContextMenu?: IActivityContextMenu;
+    small?: boolean;
+    border?: boolean;
+    canShrink?: boolean;
+}
+interface IActivityContextMenu extends TestableComponent {
+    tooltip?: string;
+    menuItems: IActivityMenuAction[];
+}
+export interface IActivityAction extends TestableComponent {
+    action: () => any;
+    tooltip?: string;
+    icon: string;
+    disabled?: boolean;
+    hasStateWarning?: boolean;
+}
+export interface IActivityMenuAction extends IActivityAction, TestableComponent {
+    href?: string;
+}
+/** Shows the status of activities and supports actions on these activities. */
+export declare function ActivityControlWidget(props: IActivityControlProps): JSX.Element;
+export {};

package/dist/cmem/ActivityControl/ActivityControlWidget.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActivityControlWidget = ActivityControlWidget;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../../index");
+
+var _constants = require("../../configuration/constants");
+
+/** Shows the status of activities and supports actions on these activities. */
+function ActivityControlWidget(props) {
+  const {
+    "data-test-id": dataTestId,
+    progressBar,
+    progressSpinner,
+    activityActions,
+    activityContextMenu,
+    small,
+    border,
+    canShrink
+  } = props;
+  const spinnerClassNames = ((progressSpinner === null || progressSpinner === void 0 ? void 0 : progressSpinner.className) ?? "") + ` ${_constants.CLASSPREFIX}-spinner--permanent`;
+
+  const widget = /*#__PURE__*/_react.default.createElement(_index.OverviewItem, {
+    "data-test-id": dataTestId,
+    hasSpacing: border,
+    densityHigh: small
+  }, progressBar && /*#__PURE__*/_react.default.createElement(_index.ProgressBar, progressBar), progressSpinner && /*#__PURE__*/_react.default.createElement(_index.OverviewItemDepiction, {
+    keepColors: true
+  }, /*#__PURE__*/_react.default.createElement(_index.Spinner, (0, _extends2.default)({
+    position: "inline",
+    size: small ? "tiny" : "small",
+    stroke: small ? "bold" : "medium"
+  }, progressSpinner, {
+    className: spinnerClassNames
+  }))), /*#__PURE__*/_react.default.createElement(_index.OverviewItemDescription, null, props.label && /*#__PURE__*/_react.default.createElement(_index.OverviewItemLine, {
+    small: small
+  }, /*#__PURE__*/_react.default.createElement(_index.OverflowText, {
+    inline: true
+  }, props.label)), props.statusMessage && /*#__PURE__*/_react.default.createElement(_index.OverviewItemLine, {
+    small: true
+  }, props.statusMessage.length > 50 ? /*#__PURE__*/_react.default.createElement(_index.Tooltip, {
+    content: props.statusMessage,
+    size: "large",
+    tooltipProps: {
+      placement: "top",
+      boundary: "viewport"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.OverflowText, {
+    inline: true
+  }, props.statusMessage)) : /*#__PURE__*/_react.default.createElement(_index.OverflowText, {
+    inline: true
+  }, props.statusMessage))), /*#__PURE__*/_react.default.createElement(_index.OverviewItemActions, null, activityActions && activityActions.map(action => {
+    return /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+      key: action.icon,
+      "data-test-id": action["data-test-id"],
+      name: action.icon,
+      text: action.tooltip,
+      onClick: action.action,
+      tooltipOpenDelay: 200,
+      disabled: action.disabled,
+      hasStateWarning: action.hasStateWarning
+    });
+  }), activityContextMenu && activityContextMenu.menuItems.length > 0 && /*#__PURE__*/_react.default.createElement(_index.ContextMenu, {
+    "data-test-id": activityContextMenu["data-test-id"],
+    togglerText: activityContextMenu.tooltip
+  }, activityContextMenu.menuItems.map(menuAction => {
+    return /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+      icon: menuAction.icon,
+      key: menuAction.icon,
+      onClick: menuAction.action,
+      text: menuAction.tooltip
+    });
+  }))));
+
+  const classname = `${_constants.CLASSPREFIX}-addon-activitycontrol` + (canShrink ? ` ${_constants.CLASSPREFIX}-addon-activitycontrol--shrink` : "");
+  return border ? /*#__PURE__*/_react.default.createElement(_index.Card, {
+    isOnlyLayout: true,
+    elevation: 0,
+    className: classname
+  }, widget) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classname
+  }, widget);
+}

package/dist/cmem/ActivityControl/ActivityControlWidget.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Card, ContextMenu, IconButton, MenuItem, OverflowText, OverviewItem, OverviewItemActions, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, ProgressBar, Spinner, Tooltip, } from "../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+/** Shows the status of activities and supports actions on these activities. */
+export function ActivityControlWidget(props) {
+    var _a;
+    var dataTestId = props["data-test-id"], progressBar = props.progressBar, progressSpinner = props.progressSpinner, activityActions = props.activityActions, activityContextMenu = props.activityContextMenu, small = props.small, border = props.border, canShrink = props.canShrink;
+    var spinnerClassNames = ((_a = progressSpinner === null || progressSpinner === void 0 ? void 0 : progressSpinner.className) !== null && _a !== void 0 ? _a : "") + (" " + eccgui + "-spinner--permanent");
+    var widget = (<OverviewItem data-test-id={dataTestId} hasSpacing={border} densityHigh={small}>
+            {progressBar && (<ProgressBar {...progressBar}/>)}
+            {progressSpinner && (<OverviewItemDepiction keepColors>
+                    <Spinner position="inline" size={small ? "tiny" : "small"} stroke={small ? "bold" : "medium"} {...progressSpinner} className={spinnerClassNames}/>
+                </OverviewItemDepiction>)}
+            <OverviewItemDescription>
+                {props.label && <OverviewItemLine small={small}>
+                    <OverflowText inline={true}>{props.label}</OverflowText>
+                </OverviewItemLine>}
+                {props.statusMessage && (<OverviewItemLine small>
+                        {props.statusMessage.length > 50 ? (<Tooltip content={props.statusMessage} size="large" tooltipProps={{ placement: "top", boundary: "viewport" }}>
+                                    <OverflowText inline={true}>
+                                        {props.statusMessage}
+                                    </OverflowText>
+                                </Tooltip>) : (<OverflowText inline={true}>
+                                    {props.statusMessage}
+                                </OverflowText>)}
+                    </OverviewItemLine>)}
+            </OverviewItemDescription>
+            <OverviewItemActions>
+                {activityActions && activityActions.map(function (action) {
+            return <IconButton key={action.icon} data-test-id={action["data-test-id"]} name={action.icon} text={action.tooltip} onClick={action.action} tooltipOpenDelay={200} disabled={action.disabled} hasStateWarning={action.hasStateWarning}/>;
+        })}
+                {activityContextMenu && activityContextMenu.menuItems.length > 0 && <ContextMenu data-test-id={activityContextMenu["data-test-id"]} togglerText={activityContextMenu.tooltip}>
+                    {activityContextMenu.menuItems.map(function (menuAction) {
+                return <MenuItem icon={menuAction.icon} key={menuAction.icon} onClick={menuAction.action} text={menuAction.tooltip}/>;
+            })}
+                </ContextMenu>}
+            </OverviewItemActions>
+        </OverviewItem>);
+    var classname = eccgui + "-addon-activitycontrol" + (canShrink ? " " + eccgui + "-addon-activitycontrol--shrink" : "");
+    return border ? (<Card isOnlyLayout elevation={0} className={classname}>
+            {widget}
+        </Card>) : (<div className={classname}>
+            {widget}
+        </div>);
+}

package/dist/cmem/ActivityControl/ActivityExecutionErrorReportModal.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface IProps {
+    title?: string;
+    onDiscard: () => any;
+    report: JSX.Element;
+    downloadButtonValue: string;
+    closeButtonValue: string;
+    fetchErrorReport: () => Promise<string | undefined>;
+}
+/** Shows the execution error report to the user and offers to download the report. */
+export declare const ActivityExecutionErrorReportModal: ({ title, onDiscard, report, downloadButtonValue, closeButtonValue, fetchErrorReport }: IProps) => JSX.Element;
+export {};

package/dist/cmem/ActivityControl/ActivityExecutionErrorReportModal.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActivityExecutionErrorReportModal = void 0;
+
+var _index = require("../../index");
+
+var _react = _interopRequireDefault(require("react"));
+
+/** Shows the execution error report to the user and offers to download the report. */
+const ActivityExecutionErrorReportModal = ({
+  title,
+  onDiscard,
+  report,
+  downloadButtonValue,
+  closeButtonValue,
+  fetchErrorReport
+}) => {
+  const fileName = "Activity execution report from " + new Date().toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md";
+
+  const handleDownload = async () => {
+    const markdown = await fetchErrorReport();
+
+    if (markdown) {
+      const element = document.createElement("a");
+      element.href = window.URL.createObjectURL(new Blob([markdown], {
+        type: "text/markdown"
+      }));
+      element.download = fileName; //the above code is equivalent to
+
+      document.body.appendChild(element); //onClick property
+
+      element.click();
+      document.body.removeChild(element);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_index.SimpleDialog, {
+    title: title,
+    isOpen: true,
+    onClose: onDiscard,
+    actions: [/*#__PURE__*/_react.default.createElement(_index.Button, {
+      "data-test-id": "error-report-download-btn",
+      affirmative: true,
+      onClick: handleDownload,
+      key: "download"
+    }, downloadButtonValue), /*#__PURE__*/_react.default.createElement(_index.Button, {
+      "data-test-id": "error-report-close-btn",
+      key: "close",
+      onClick: onDiscard
+    }, closeButtonValue)]
+  }, /*#__PURE__*/_react.default.createElement(_index.HtmlContentBlock, null, report));
+};
+
+exports.ActivityExecutionErrorReportModal = ActivityExecutionErrorReportModal;

package/dist/cmem/ActivityControl/ActivityExecutionErrorReportModal.jsx

@@ -0,0 +1,76 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { Button, HtmlContentBlock, SimpleDialog } from "../../index";
+import React from "react";
+/** Shows the execution error report to the user and offers to download the report. */
+export var ActivityExecutionErrorReportModal = function (_a) {
+    var title = _a.title, onDiscard = _a.onDiscard, report = _a.report, downloadButtonValue = _a.downloadButtonValue, closeButtonValue = _a.closeButtonValue, fetchErrorReport = _a.fetchErrorReport;
+    var fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md";
+    var handleDownload = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var markdown, element;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fetchErrorReport()];
+                case 1:
+                    markdown = _a.sent();
+                    if (markdown) {
+                        element = document.createElement("a");
+                        element.href = window.URL.createObjectURL(new Blob([markdown], { type: "text/markdown" }));
+                        element.download = fileName;
+                        //the above code is equivalent to
+                        document.body.appendChild(element);
+                        //onClick property
+                        element.click();
+                        document.body.removeChild(element);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (<SimpleDialog title={title} isOpen={true} onClose={onDiscard} actions={[
+            <Button data-test-id={"error-report-download-btn"} affirmative onClick={handleDownload} key="download">
+                    {downloadButtonValue}
+                </Button>,
+            <Button data-test-id={"error-report-close-btn"} key="close" onClick={onDiscard}>
+                    {closeButtonValue}
+                </Button>,
+        ]}>
+            <HtmlContentBlock>
+                {report}
+            </HtmlContentBlock>
+        </SimpleDialog>);
+};

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

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { TestableComponent } from "../../components/interfaces";
+import { IActivityStatus } from "./ActivityControlTypes";
+import { TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+interface SilkActivityControlProps extends TestableComponent {
+    label: string;
+    initialStatus?: IActivityStatus;
+    registerForUpdates: (callback: (status: IActivityStatus) => any) => any;
+    unregisterFromUpdates: () => any;
+    showStartAction: boolean;
+    showStopAction: boolean;
+    failureReportAction?: IErrorReportAction;
+    showReloadAction: boolean;
+    viewValueAction?: {
+        tooltip?: string;
+        action: string | (() => any);
+    };
+    executeActivityAction: (action: ActivityAction) => void;
+    translate: (key: ActivityControlTranslationKeys) => string;
+    elapsedTimeOfLastStart?: {
+        prefix?: string;
+        suffix?: string;
+        translate: (unit: TimeUnits) => string;
+    };
+    layoutConfig?: IActivityControlLayoutProps;
+}
+export interface IActivityControlLayoutProps {
+    small?: boolean;
+    border?: boolean;
+    canShrink?: boolean;
+    visualization?: "none" | "progressbar" | "spinner";
+}
+interface IErrorReportAction {
+    title?: string;
+    renderReport: (report: string | IActivityExecutionReport) => JSX.Element;
+    renderMarkdown: boolean;
+    fetchErrorReport: (markdown: boolean) => Promise<string | IActivityExecutionReport | undefined>;
+    allowDownload?: boolean;
+    downloadButtonValue: string;
+    closeButtonValue: string;
+}
+export interface IActivityExecutionReport {
+    errorSummary: string;
+    projectId?: string;
+    taskId?: string;
+    activityId: string;
+    projectLabel?: string;
+    taskLabel?: string;
+    taskDescription?: string;
+    errorMessage?: string;
+    stackTrace?: IStacktrace;
+}
+interface IStacktrace {
+    errorMessage?: String;
+    lines: string[];
+    cause?: IStacktrace;
+}
+export declare type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport";
+export declare type ActivityAction = "start" | "cancel" | "restart";
+/** Silk activity control. */
+export declare function SilkActivityControl({ label, initialStatus, registerForUpdates, executeActivityAction, showReloadAction, showStartAction, viewValueAction, showStopAction, failureReportAction, unregisterFromUpdates, translate, elapsedTimeOfLastStart, layoutConfig, ...props }: SilkActivityControlProps): JSX.Element;
+export {};

package/dist/cmem/ActivityControl/SilkActivityControl.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SilkActivityControl = SilkActivityControl;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _ActivityControlWidget = require("./ActivityControlWidget");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ActivityExecutionErrorReportModal = require("./ActivityExecutionErrorReportModal");
+
+var _index = require("../../index");
+
+var _ElapsedDateTimeDisplay = require("../DateTimeDisplay/ElapsedDateTimeDisplay");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const progressBreakpointIndetermination = 10;
+const progressBreakpointAnimation = 99;
+const defaultLayout = {
+  small: false,
+  border: false,
+  canShrink: false,
+  visualization: "spinner"
+};
+
+/** Silk activity control. */
+function SilkActivityControl({
+  label,
+  initialStatus,
+  registerForUpdates,
+  executeActivityAction,
+  showReloadAction,
+  showStartAction,
+  viewValueAction,
+  showStopAction,
+  failureReportAction,
+  unregisterFromUpdates,
+  translate,
+  elapsedTimeOfLastStart,
+  layoutConfig = defaultLayout,
+  ...props
+}) {
+  const [activityStatus, setActivityStatus] = (0, _react.useState)(initialStatus);
+  const [errorReport, setErrorReport] = (0, _react.useState)(undefined); // Register update function
+
+  (0, _react.useEffect)(() => {
+    const updateActivityStatus = status => {
+      setActivityStatus(status);
+    };
+
+    registerForUpdates(updateActivityStatus);
+    return unregisterFromUpdates;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []); // Create activity actions
+
+  const actions = [];
+
+  if (failureReportAction && activityStatus !== null && activityStatus !== void 0 && activityStatus.failed && activityStatus.concreteStatus !== "Cancelled") {
+    actions.push({
+      "data-test-id": "activity-show-error-report",
+      icon: "artefact-report",
+      action: () => showErrorReport(failureReportAction),
+      tooltip: translate("showErrorReport"),
+      hasStateWarning: true
+    });
+  }
+
+  if (showStartAction) {
+    actions.push({
+      "data-test-id": "activity-start-activity",
+      icon: "item-start",
+      action: () => executeActivityAction("start"),
+      tooltip: translate("startActivity"),
+      disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === true
+    });
+  }
+
+  if (showReloadAction) {
+    actions.push({
+      "data-test-id": "activity-reload-activity",
+      icon: "item-reload",
+      action: () => executeActivityAction("restart"),
+      tooltip: translate("reloadActivity"),
+      disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === true
+    });
+  }
+
+  if (showStopAction) {
+    actions.push({
+      "data-test-id": "activity-stop-activity",
+      icon: "item-stop",
+      action: () => executeActivityAction("cancel"),
+      tooltip: translate("stopActivity"),
+      disabled: (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.isRunning) === false
+    });
+  }
+
+  if (viewValueAction && (activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.concreteStatus) !== "Not executed") {
+    const action = typeof viewValueAction.action === "string" ? () => {
+      window.open(viewValueAction.action, "_blank");
+    } : viewValueAction.action;
+    actions.push({
+      "data-test-id": "activity-view-data",
+      icon: "artefact-rawdata",
+      action,
+      tooltip: viewValueAction.tooltip
+    });
+  }
+
+  const showErrorReport = async action => {
+    const errorReport = await action.fetchErrorReport(action.renderMarkdown);
+    setErrorReport(errorReport);
+  };
+
+  const closeErrorReport = () => {
+    setErrorReport(undefined);
+  };
+
+  const activityControlLabel = activityStatus !== null && activityStatus !== void 0 && activityStatus.startTime && elapsedTimeOfLastStart ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label, /*#__PURE__*/_react.default.createElement(_index.Spacing, {
+    vertical: true,
+    size: "tiny"
+  }), /*#__PURE__*/_react.default.createElement(_ElapsedDateTimeDisplay.ElapsedDateTimeDisplay, {
+    dateTime: activityStatus.startTime,
+    prefix: elapsedTimeOfLastStart.prefix,
+    suffix: elapsedTimeOfLastStart.suffix,
+    translateUnits: elapsedTimeOfLastStart.translate
+  })) : label;
+  const {
+    visualization,
+    ...otherLayoutConfig
+  } = layoutConfig;
+  let visualizationProps = {}; // visualization==="none" or undefined
+
+  const runningProgress = activityStatus && activityStatus.isRunning;
+  const waitingProgress = activityStatus && activityStatus.concreteStatus === "Waiting";
+  const animateProgress = activityStatus && activityStatus.progress > 0 && activityStatus.progress < progressBreakpointAnimation;
+  const indeterminateProgress = activityStatus && activityStatus.progress < progressBreakpointIndetermination;
+
+  if (visualization === "progressbar") {
+    visualizationProps = {
+      progressBar: {
+        animate: waitingProgress || runningProgress && animateProgress,
+        stripes: waitingProgress || runningProgress && animateProgress,
+        value: waitingProgress || runningProgress && indeterminateProgress ? undefined : activityStatus && activityStatus.progress > 0 ? activityStatus.progress / 100 : 0,
+        intent: activityStatus ? calcIntent(activityStatus) : "none"
+      }
+    };
+  }
+
+  ;
+
+  if (visualization === "spinner") {
+    visualizationProps = {
+      progressSpinner: {
+        value: waitingProgress || runningProgress && indeterminateProgress ? undefined : activityStatus && activityStatus.progress > 0 ? activityStatus.progress / 100 : 0,
+        intent: activityStatus ? calcIntent(activityStatus) : "none"
+      }
+    };
+  }
+
+  ;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ActivityControlWidget.ActivityControlWidget, (0, _extends2.default)({
+    key: "activity-control",
+    "data-test-id": props["data-test-id"],
+    label: activityControlLabel,
+    activityActions: actions,
+    statusMessage: activityStatus === null || activityStatus === void 0 ? void 0 : activityStatus.message
+  }, visualizationProps, otherLayoutConfig)), errorReport && failureReportAction && /*#__PURE__*/_react.default.createElement(_ActivityExecutionErrorReportModal.ActivityExecutionErrorReportModal, {
+    title: failureReportAction.title,
+    key: "error-report-modal",
+    closeButtonValue: failureReportAction.closeButtonValue,
+    downloadButtonValue: failureReportAction.downloadButtonValue,
+    fetchErrorReport: async () => {
+      return await failureReportAction.fetchErrorReport(true);
+    },
+    report: failureReportAction.renderReport(errorReport),
+    onDiscard: closeErrorReport
+  }));
+}
+
+const calcIntent = activityStatus => {
+  const concreteStatus = activityStatus.concreteStatus;
+  let intent;
+
+  switch (concreteStatus) {
+    case "Running":
+    case "Successful":
+      intent = "success";
+      break;
+
+    case "Cancelled":
+    case "Canceling":
+      intent = "warning";
+      break;
+
+    case "Failed":
+      intent = "danger";
+      break;
+
+    case "Waiting":
+      intent = "none"; // TODO: This is 100% yellow in the old activity control
+
+      break;
+
+    default:
+      intent = "none";
+  }
+
+  return intent;
+};