@eccenca/gui-elements 22.0.0-rc.7 → 22.1.0-rc.1

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "22.0.0-rc.7",
+  "version": "22.1.0-rc.1",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
+  "bugs": "https://github.com/eccenca/gui-elements/issues",
   "keywords": [
     "GUI",
     "React",
-    "Blueprint JS",
-    "Carbon Components",
-    "Typescript"
+    "Blueprint",
+    "Carbon Design System",
+    "Typescript",
+    "SCSS"
   ],
   "maintainers": [
     {
@@ -18,15 +20,16 @@
       "web": "https://eccence.com/"
     }
   ],
-  "repositories": [
-    {
-      "type": "git",
-      "url": "git://github.com/eccenca/gui-elements.git"
-    }
-  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/eccenca/gui-elements.git"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
+  "engines": {
+    "node": ">=14.x"
+  },
   "style": "src/index.scss",
   "main": "dist/cjs/index.js",
   "module": "dist/es5/index.js",
@@ -42,7 +45,7 @@
     "src"
   ],
   "scripts": {
-    "build:clean": "rm -rf dist/",
+    "build:clean": "rimraf dist/",
     "build:es5": "tsc --build .typescript/tsbuild-es5.json && ./scripts/fix-es5-dist",
     "build:cjs": "tsc --build .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
     "build:all": "yarn build:clean && yarn build:es5 && yarn build:cjs",
@@ -53,23 +56,26 @@
     "test": "jest",
     "test:ci": "jest --ci --reporters='default'",
     "test:coverage": "jest --collectCoverage",
-    "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
+    "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
+    "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
     "@blueprintjs/core": "3.49.1",
-    "@blueprintjs/select": "^3.18.1",
+    "@blueprintjs/select": "3.18.1",
     "@carbon/icons": "10.44.0",
     "@carbon/icons-react": "10.44.0",
     "@mavrin/remark-typograf": "^2.2.0",
     "carbon-components": "10.44.0",
     "carbon-components-react": "7.44.1",
-    "carbon-icons": "^7.0.7",
-    "codemirror": "^5.52.2",
+    "carbon-icons": "7.0.7",
+    "codemirror": "^5.61.0",
     "color": "3.2.1",
+    "lodash": "^4.17.21",
     "micromark": "^3.0.10",
     "react": "^16.13.1",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
-    "react-flow-renderer": "^9.6.1",
+    "react-flow-renderer": "9.7.4",
     "react-markdown": "^7.0.1",
     "rehype-raw": "^6.1.0",
     "remark-definition-list": "^1.1.0",
@@ -95,30 +101,49 @@
     "@storybook/react": "^6.4.9",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/carbon-components-react": "^7.49.0",
-    "@types/carbon__icons-react": "^10.31.2",
+    "@types/carbon-components-react": "7.49.0",
+    "@types/codemirror": "^5.60.5",
     "@types/color": "^3.0.2",
     "@types/jest": "^24.9.1",
+    "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^27.5.1",
     "chromatic": "^6.5.1",
+    "copyfiles": "^2.4.1",
     "css-loader": "3.4.2",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-pnp-resolver": "^1.2.1",
-    "node-sass": "4.12.0",
+    "node-sass": "4.14.1",
     "node-sass-tilde-importer": "^1.0.2",
+    "package-json-validator": "^0.6.3",
     "react-app-polyfill": "^1.0.6",
     "react-lorem-ipsum": "^1.4.9",
     "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
     "sass-loader": "8.0.2",
     "style-loader": "0.23.1",
     "typescript": "4.4.4",
     "webpack": "^4.46.0"
   },
+  "resolutions": {
+    "**/@blueprintjs/core": "3.49.1",
+    "**/@blueprintjs/select": "3.18.1",
+    "**/@carbon/icons": "10.44.0",
+    "**/@carbon/icons-react": "10.44.0",
+    "**/carbon-components": "10.44.0",
+    "**/carbon-components-react": "7.44.1",
+    "**/carbon-icons": "7.0.7",
+    "**/@types/react": "^17.0.0",
+    "**/node-gyp": "^7.0.0",
+    "**/glob-parent": "^5.1.2",
+    "**/trim": "^0.0.3",
+    "**/trim-newlines": "^3.0.1"
+  },
   "eslintConfig": {
     "extends": [
       "react-app"
@@ -161,6 +186,9 @@
       "web.jsx",
       "jsx",
       "node"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
   }
 }

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -18,7 +18,7 @@ export interface IActivityStatus {
     // If the activity has been cancelled
     cancelled: boolean;
     // The concrete status ID
-    concreteStatus: "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling";
+    concreteStatus: ConcreteActivityStatus;
     // If there was an error, this contains the exception message
     exceptionMessage?: string | null;
     // The runtime in ms
@@ -26,3 +26,5 @@ export interface IActivityStatus {
     // The start time as date time, e.g. "2021-09-07T09:34:53.153Z"
     startTime?: string;
 }
+
+export type ConcreteActivityStatus = "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling"

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { ActivityControlWidget } from "./ActivityControlWidget";
+import { loremIpsum } from "react-lorem-ipsum";
+import Tag from "../../components/Tag/Tag";
+import TagList from "../../components/Tag/TagList";
+
+export default {
+    title: "Cmem/ActivityControlWidget",
+    component: ActivityControlWidget,
+    argTypes: {
+        border: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+        small: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+        canShrink: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+    },
+} as ComponentMeta<typeof ActivityControlWidget>;
+
+const Template: ComponentStory<typeof ActivityControlWidget> = (args) => <ActivityControlWidget {...args} />;
+
+export const FullExample = Template.bind({});
+
+const actions = [
+    {
+        "data-test-id": "activity-reload-activity",
+        icon: "item-reload",
+        action: () => {},
+        tooltip: "Reload Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-start-activity",
+        icon: "item-start",
+        action: () => console.log("start"),
+        tooltip: "Start Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-stop-activity",
+        icon: "item-stop",
+        action: () => console.log("cancel"),
+        tooltip: "Stop Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-view-data",
+        icon: "artefact-rawdata",
+        action: () => {},
+        tooltip: "preview report",
+    },
+];
+
+const commonWidgetArgs = {
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }),
+    border: true,
+    activityActions: actions,
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }),
+    progressSpinner: {
+        intent: "none",
+        value: 0.5,
+    },
+};
+
+FullExample.args = {
+    ...commonWidgetArgs,
+};
+
+const TemplateWithTags: ComponentStory<typeof ActivityControlWidget> = (args) => <ActivityControlWidget {...args} />;
+
+export const WidgetWithTags = TemplateWithTags.bind({});
+
+const widgetTags = (
+    <TagList>
+        <Tag small>Tag one</Tag>
+        <Tag small>Other tag</Tag>
+        <Tag small>Third keyword</Tag>
+    </TagList>
+);
+
+WidgetWithTags.args = {
+    ...commonWidgetArgs,
+    tags: widgetTags,
+};

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>