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

package/src/_shame.scss

@@ -0,0 +1,111 @@
+// Add stuff to test fast and dirty.
+// This file should not contain any styles because we do not work dirty!
+
+.#{$ns}-portal {
+    z-index: 8001; // higher than carbon ui shell header
+}
+
+html {
+    // TODO: move to application or workspace element
+    background-color: $eccgui-color-workspace-background;
+    color: $eccgui-color-workspace-text;
+}
+
+.#{$prefix}--assistive-text,
+.#{$prefix}--visually-hidden {
+    /*
+        TODO: move to better place, originally from ~carbon-components/scss/globals/scss/css--helpers
+        but we cannot use it directly because of other included rules there.
+    */
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    visibility: inherit;
+    white-space: nowrap;
+}
+
+.uppy-DragDrop-container {
+    // TODO: create own file upload elements
+
+    border-width: 1px;
+    //border-style: dotted;
+    border-radius: 3px;
+
+    color: inherit;
+    background-color: $data-table-zebra-color;
+
+    .uppy-DragDrop-inner {
+        line-height: inherit;
+        padding: 1rem;
+    }
+
+    .uppy-DragDrop-arrow {
+        height: 2rem;
+        width: 2rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .uppy-DragDrop-label {
+        font-size: inherit;
+        margin-bottom: 0.5rem;
+    }
+}
+
+/*
+    TODO: create own auto complete input in new hui elements
+*/
+.app_di-autocomplete__options {
+    max-width: 90vw;
+    min-width: 40rem;
+    max-height: 60vh;
+    overflow: auto;
+}
+
+/*
+    WORKAROUND: markdown footnotes rendered without (empty) local anchors
+*/
+
+.#{$eccgui}-typography__contentblock {
+    a[href=""] {
+        font-size: $eccgui-size-typo-caption;
+        line-height: $eccgui-size-typo-caption-lineheight;
+        pointer-events: none;
+        cursor: text;
+        color: currentColor;
+        text-decoration: none;
+        vertical-align: super;
+
+        &:before {
+            content: "[";
+        }
+        &:after {
+            content: "]";
+        }
+    }
+}
+
+/*
+    WORKAROUND: thinner scrollbars
+*/
+
+* {
+scrollbar-width: thin;
+scrollbar-color: #bbb transparent;
+
+    &::-webkit-scrollbar {
+        width: 0.25rem;
+        height: 0.25rem;
+        background-color: #fefefe;
+    }
+
+    &::-webkit-scrollbar-thumb
+    {
+        border-radius: 0.125rem;
+        background-color: #bbb;
+    }
+}

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -0,0 +1,28 @@
+export interface IActivityStatus {
+    // Optional project ID
+    project?: string;
+    // Optional task ID
+    task?: string;
+    // The activity name
+    activity: string;
+    // If the activity is currently running
+    isRunning: boolean;
+    // If the activity has failed
+    failed: boolean;
+    // The name of the status class
+    statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
+    // A number between 0 and 100
+    progress: number;
+    // More information corresponding to the status
+    message: string;
+    // If the activity has been cancelled
+    cancelled: boolean;
+    // The concrete status ID
+    concreteStatus: "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling";
+    // If there was an error, this contains the exception message
+    exceptionMessage?: string | null;
+    // The runtime in ms
+    runtime?: number;
+    // The start time as date time, e.g. "2021-09-07T09:34:53.153Z"
+    startTime?: string;
+}

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -0,0 +1,165 @@
+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";
+import {TestableComponent} from "../../components/interfaces";
+import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
+import { SpinnerProps } from "../../components/Spinner/Spinner";
+
+export interface IActivityControlProps extends TestableComponent {
+    // The label to be shown
+    label?: string | JSX.Element
+    // The progress bar parameters if it should be show by a progres bar
+    progressBar?: ProgressBarProps
+    // The spinner parameters if it should be show by a spinner
+    progressSpinner?: SpinnerProps
+    // Status message
+    statusMessage?: string
+    // The action buttons
+    activityActions?: IActivityAction[]
+    // Context menu items
+    activityContextMenu?: IActivityContextMenu
+    // show small version of the widget
+    small?: boolean;
+    // display widget inside rectange
+    border?: boolean;
+    // only use necessary width, not always the available 100% of parent element
+    canShrink?: boolean;
+}
+
+interface IActivityContextMenu extends TestableComponent {
+    // Tooltip for the context menu
+    tooltip?: string
+    // The entries of the context menu
+    menuItems: IActivityMenuAction[]
+}
+
+export interface IActivityAction extends TestableComponent {
+    // The action that should be triggered
+    action: () => any
+    // The tooltip that should be shown over the action icon
+    tooltip?: string
+    // The icon of the action button
+    icon: string
+    // Action is currently disabled (but shown)
+    disabled?: boolean
+    // Warning state
+    hasStateWarning?: boolean
+}
+
+export interface IActivityMenuAction extends IActivityAction, TestableComponent {
+    // Optional link
+    href?: string
+}
+
+/** Shows the status of activities and supports actions on these activities. */
+export function ActivityControlWidget(props: IActivityControlProps) {
+    const {
+        "data-test-id": dataTestId,
+        progressBar,
+        progressSpinner,
+        activityActions,
+        activityContextMenu,
+        small,
+        border,
+        canShrink
+    } = props
+
+    const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`
+
+    const 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((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((menuAction) => {
+                        return <MenuItem
+                            icon={menuAction.icon}
+                            key={menuAction.icon}
+                            onClick={menuAction.action}
+                            text={menuAction.tooltip}
+                        />
+                    })}
+                </ContextMenu>
+                }
+            </OverviewItemActions>
+        </OverviewItem>
+    );
+
+    const 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/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -0,0 +1,55 @@
+import {Button, HtmlContentBlock, SimpleDialog} from "../../index";
+import React from "react";
+
+interface IProps {
+    // Title of the modal
+    title?: string
+    // Called when the close button is clicked
+    onDiscard: () => any
+    // The error report
+    report: JSX.Element
+    // Value of the download button
+    downloadButtonValue: string
+    // Value of the close button
+    closeButtonValue: string
+    // Function that fetches the Markdown error report
+    fetchErrorReport: () => Promise<string | undefined>
+}
+
+/** Shows the execution error report to the user and offers to download the report. */
+export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, downloadButtonValue, closeButtonValue, fetchErrorReport}: IProps) => {
+    const 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 (
+        <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/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -0,0 +1,303 @@
+import {TestableComponent} from "../../components/interfaces";
+import {
+    ActivityControlWidget,
+    IActivityAction
+} from "./ActivityControlWidget";
+import React, {useEffect, useState} from "react";
+import {IActivityStatus} from "./ActivityControlTypes";
+import {Intent} from "@blueprintjs/core/src/common/intent";
+import {ActivityExecutionErrorReportModal} from "./ActivityExecutionErrorReportModal";
+import {Spacing} from "../../index";
+import {
+    ElapsedDateTimeDisplay,
+    TimeUnits
+} from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+
+const progressBreakpointIndetermination = 10;
+const progressBreakpointAnimation = 99;
+
+interface SilkActivityControlProps extends TestableComponent {
+    // The label of this activity
+    label: string;
+    // Initial state
+    initialStatus?: IActivityStatus;
+    // Register a function in order to receive callbacks
+    registerForUpdates: (callback: (status: IActivityStatus) => any) => any;
+    // Un-register this component from any updates
+    unregisterFromUpdates: () => any;
+    // If the start action should be available
+    showStartAction: boolean;
+    // If the stop action should be available. Else actions can only be started, but not stopped.
+    showStopAction: boolean;
+    // Allow display and download of activity execution failure reports
+    failureReportAction?: IErrorReportAction;
+    // Show reload action, e.g. to refresh caches from scratch
+    showReloadAction: boolean;
+    // If defined, shows the 'View value' action, e.g. to check cache values
+    viewValueAction?: {
+        // Tooltip to show on icon button
+        tooltip?: string;
+        // The action, either a URL that will be opened in a new tab or a callback function
+        action: string | (() => any);
+    };
+    // DI activity actions
+    executeActivityAction: (action: ActivityAction) => void;
+    // Get the translation for a specific key
+    translate: (key: ActivityControlTranslationKeys) => string;
+    // When defined the elapsed time since the last start is displayed next to the label
+    elapsedTimeOfLastStart?: {
+        // Prefix before the elapsed time
+        prefix?: string;
+        // Suffix after the elapsed time
+        suffix?: string;
+        // The translation of the time units
+        translate: (unit: TimeUnits) => string;
+    };
+    // configure how the widget is displayed
+    layoutConfig?: IActivityControlLayoutProps;
+}
+
+export interface IActivityControlLayoutProps {
+    // show small version of the widget
+    small?: boolean;
+    // display widget inside rectange
+    border?: boolean;
+    // only use necessary width, not always the available 100% of parent element
+    canShrink?: boolean;
+    // what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that
+    visualization?: "none" | "progressbar" | "spinner";
+}
+
+const defaultLayout: IActivityControlLayoutProps = { small: false, border: false, canShrink: false, visualization: "spinner"};
+
+interface IErrorReportAction {
+    // The title of the error report modal
+    title?: string;
+    // The element that will be rendered in the modal, either as Markdown or object
+    renderReport: (report: string | IActivityExecutionReport) => JSX.Element;
+    // What version of the report should be handed to the renderReport function, if false IActivityExecutionReport, if true the Markdown string
+    renderMarkdown: boolean;
+    // The function to fetch the error report. It returns undefined if something went wrong.
+    fetchErrorReport: (markdown: boolean) => Promise<string | IActivityExecutionReport | undefined>;
+    // If besides showing the error report, there should also be an option to download it.
+    allowDownload?: boolean;
+    // The text of the download button in the modal
+    downloadButtonValue: string;
+    // The text of the close button in the modal
+    closeButtonValue: string;
+}
+
+export interface IActivityExecutionReport {
+    // Summary of the activity execution error
+    errorSummary: string;
+    // If the activity was running in a project context, the project ID
+    projectId?: string;
+    // If the activity was running in a task context, the task ID
+    taskId?: string;
+    // The activity ID
+    activityId: string;
+    // If the activity was running in a project context, the project label
+    projectLabel?: string;
+    // If the activity was running in a task context, the task label
+    taskLabel?: string;
+    // If the activity was running in a task context, the optional task description
+    taskDescription?: string;
+    // The error message of the error/exception that has occurred
+    errorMessage?: string;
+    // The stacktrace leading to the error
+    stackTrace?: IStacktrace;
+}
+
+interface IStacktrace {
+    // The final error message of the stacktrace
+    errorMessage?: String;
+    // The individual elements of the stack trace
+    lines: string[];
+    // In case of nested stacktraces this may contain the cause of the failure
+    cause?: IStacktrace;
+}
+
+export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport"
+
+export type ActivityAction = "start" | "cancel" | "restart"
+
+/** Silk activity control. */
+export function SilkActivityControl({
+                                        label,
+                                        initialStatus,
+                                        registerForUpdates,
+                                        executeActivityAction,
+                                        showReloadAction,
+                                        showStartAction,
+                                        viewValueAction,
+                                        showStopAction,
+                                        failureReportAction,
+                                        unregisterFromUpdates,
+                                        translate,
+                                        elapsedTimeOfLastStart,
+                                        layoutConfig = defaultLayout,
+                                        ...props
+                                    }: SilkActivityControlProps) {
+    const [activityStatus, setActivityStatus] = useState<IActivityStatus | undefined>(initialStatus)
+    const [errorReport, setErrorReport] = useState<string | IActivityExecutionReport | undefined>(undefined)
+
+    // Register update function
+    useEffect(() => {
+        const updateActivityStatus = (status: any) => {
+            setActivityStatus(status)
+        }
+        registerForUpdates(updateActivityStatus)
+        return unregisterFromUpdates
+    },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    )
+
+    // Create activity actions
+    const actions: IActivityAction[] = []
+
+    if(failureReportAction && 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?.isRunning === true
+        })
+    }
+
+    if(showReloadAction) {
+        actions.push({
+            "data-test-id": "activity-reload-activity",
+            icon: "item-reload",
+            action: () => executeActivityAction("restart"),
+            tooltip: translate("reloadActivity"),
+            disabled: activityStatus?.isRunning === true
+        })
+    }
+
+    if(showStopAction) {
+        actions.push({
+            "data-test-id": "activity-stop-activity",
+            icon: "item-stop",
+            action: () => executeActivityAction("cancel"),
+            tooltip: translate("stopActivity"),
+            disabled: activityStatus?.isRunning === false
+        })
+    }
+
+    if(viewValueAction && activityStatus?.concreteStatus !== "Not executed") {
+        const action: () => any = typeof viewValueAction.action === "string" ? () => {
+            window.open(viewValueAction.action as string, "_blank")
+        } : viewValueAction.action
+        actions.push({
+            "data-test-id": "activity-view-data",
+            icon: "artefact-rawdata",
+            action,
+            tooltip: viewValueAction.tooltip
+        })
+    }
+
+    const showErrorReport = async (action: IErrorReportAction) => {
+        const errorReport = await action.fetchErrorReport(action.renderMarkdown)
+        setErrorReport(errorReport)
+    }
+
+    const closeErrorReport = () => {
+        setErrorReport(undefined)
+    }
+
+    const activityControlLabel = activityStatus?.startTime && elapsedTimeOfLastStart ? <>
+        {label}
+        <Spacing vertical={true} size={"tiny"} />
+        <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 <>
+        <ActivityControlWidget
+            key={"activity-control"}
+            data-test-id={props["data-test-id"]}
+            label={activityControlLabel}
+            activityActions={actions}
+            statusMessage={activityStatus?.message}
+            {...visualizationProps}
+            {...otherLayoutConfig}
+        />
+        {errorReport && failureReportAction && <ActivityExecutionErrorReportModal
+            title={failureReportAction.title}
+            key={"error-report-modal"}
+            closeButtonValue={failureReportAction.closeButtonValue}
+            downloadButtonValue={failureReportAction.downloadButtonValue}
+            fetchErrorReport={async () => {
+                return await failureReportAction.fetchErrorReport(true) as (string | undefined)
+            }}
+            report={failureReportAction.renderReport(errorReport)}
+            onDiscard={closeErrorReport}
+        />}
+    </>
+}
+
+const calcIntent = (activityStatus: IActivityStatus): Intent => {
+    const concreteStatus = activityStatus.concreteStatus
+    let intent: 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
+}

package/src/cmem/ActivityControl/activitycontrol.scss

@@ -0,0 +1,27 @@
+.#{$eccgui}-addon-activitycontrol {
+    .#{$eccgui}-overviewitem__item {
+        position: relative;
+    }
+
+    .#{$ns}-progress-bar {
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: $tab-indicator-width;
+    }
+}
+
+.#{$eccgui}-addon-activitycontrol--shrink {
+    max-width: 100%;
+    display: inline-flex;
+
+    &:not(.#{$eccgui}-card) {
+        display: inline-block;
+    }
+
+    .#{$eccgui}-overviewitem__depiction + .#{$eccgui}-overviewitem__description {
+        margin-left: 0;
+    }
+}