@eccenca/gui-elements 22.0.1 → 22.1.0

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -14,57 +14,93 @@ import {
     Spinner,
     Tooltip,
 } from "../../index";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import {TestableComponent} from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../../components/interfaces";
 import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
 import { SpinnerProps } from "../../components/Spinner/Spinner";
+import { ValidIconName } from "../../components/Icon/canonicalIconNames";
+import { IconProps } from "../../components/Icon/Icon";
 
 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
+    /**
+     * The label to be shown
+     */
+    label?: string | JSX.Element;
+    /**
+     * Element that wraps around the label.
+     * Default: `<OverflowText inline={true} />`
+     */
+    labelWrapper?: JSX.Element;
+    /**
+     * To add tags in addition to the widget status description
+     */
+    tags?: 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
+    /**
+     * display widget inside rectangle
+     */
     border?: boolean;
-    // only use necessary width, not always the available 100% of parent element
+    /**
+     * display a bit whitespace around widget, even without border
+     */
+    hasSpacing?: boolean;
+    /**
+     * only use necessary width, not always the available 100% of parent element
+     */
     canShrink?: boolean;
+    /**
+     * if this is set the spinner is replaced when the progress has finished from 0 - 1
+     */
+    progressSpinnerFinishedIcon?: React.ReactElement<IconProps>;
 }
 
 interface IActivityContextMenu extends TestableComponent {
     // Tooltip for the context menu
-    tooltip?: string
+    tooltip?: string;
     // The entries of the context menu
-    menuItems: IActivityMenuAction[]
+    menuItems: IActivityMenuAction[];
 }
 
 export interface IActivityAction extends TestableComponent {
     // The action that should be triggered
-    action: () => any
+    action: () => any;
     // The tooltip that should be shown over the action icon
-    tooltip?: string
+    tooltip?: string;
     // The icon of the action button
-    icon: string
+    icon: ValidIconName
     // Action is currently disabled (but shown)
-    disabled?: boolean
+    disabled?: boolean;
     // Warning state
-    hasStateWarning?: boolean
+    hasStateWarning?: boolean;
 }
 
 export interface IActivityMenuAction extends IActivityAction, TestableComponent {
     // Optional link
-    href?: string
+    href?: string;
 }
-
 /** Shows the status of activities and supports actions on these activities. */
 export function ActivityControlWidget(props: IActivityControlProps) {
     const {
@@ -75,78 +111,99 @@ export function ActivityControlWidget(props: IActivityControlProps) {
         activityContextMenu,
         small,
         border,
-        canShrink
-    } = props
-
-    const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`
-
+        hasSpacing,
+        canShrink,
+        tags,
+        progressSpinnerFinishedIcon,
+        labelWrapper = <OverflowText inline={true} />,
+    } = props;
+    const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`;
     const widget = (
-        <OverviewItem data-test-id={dataTestId} hasSpacing={border} densityHigh={small}>
-            {progressBar && (
-                <ProgressBar
-                    {...progressBar}
-                />
-            )}
-            {progressSpinner && (
+        <OverviewItem data-test-id={dataTestId} hasSpacing={border || hasSpacing} densityHigh={small}>
+            {progressBar && <ProgressBar {...progressBar} />}
+            {(progressSpinner || progressSpinnerFinishedIcon) && (
                 <OverviewItemDepiction keepColors>
-                    <Spinner
-                        position="inline"
-                        size={small ? "tiny" : "small"}
-                        stroke={small ? "bold" : "medium"}
-                        {...progressSpinner}
-                        className={spinnerClassNames}
-                    />
+                    {progressSpinnerFinishedIcon ? (
+                        React.cloneElement(progressSpinnerFinishedIcon, { small, large: !small })
+                    ) : (
+                        <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 && (
+                {props.label && (
+                    <OverviewItemLine small={small}>
+                        { React.cloneElement(labelWrapper, {}, props.label) }
+                    </OverviewItemLine>
+                )}
+                {(props.statusMessage || tags) && (
                     <OverviewItemLine small>
-                        {
-                            props.statusMessage.length > 50 ? (
-                                <Tooltip content={props.statusMessage} size="large" tooltipProps={{placement: "top", boundary: "viewport"}}>
-                                    <OverflowText inline={true}>
+                        { tags }
+                        {props.statusMessage && (
+                            <OverflowText passDown>
+                                {props.statusMessage.length > 50 ? (
+                                    <Tooltip
+                                        content={props.statusMessage}
+                                        size="large"
+                                        tooltipProps={{
+                                            position: "top-right",
+                                            boundary: "viewport",
+                                            modifiers: {
+                                                flip: {
+                                                    enabled: false
+                                                }
+                                            }
+                                        }}
+                                    >
                                         {props.statusMessage}
-                                    </OverflowText>
-                                </Tooltip>
-                            ) : (
-                                <OverflowText inline={true}>
-                                    {props.statusMessage}
-                                </OverflowText>
-                            )
-                        }
+                                    </Tooltip>
+                                ) : (
+                                    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}
-                        />
+                {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}
+                            />
+                        );
                     })}
-                </ContextMenu>
-                }
+                {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>
     );
@@ -158,8 +215,6 @@ export function ActivityControlWidget(props: IActivityControlProps) {
             {widget}
         </Card>
     ) : (
-        <div className={classname}>
-            {widget}
-        </div>
+        <div className={classname}>{widget}</div>
     );
 }

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

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