@reltio/components 1.4.1528 → 1.4.1530

package/cjs/components/CollapseButton/CollapseButton.js

@@ -42,6 +42,6 @@ var CollapseButton = function (_a) {
     var tooltipProps = {
         tooltipTitle: tooltipTitle
     };
-    return react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, tooltipProps, otherProps));
+    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({ "data-reltio-id": "collapse-button" }, buttonProps, tooltipProps, otherProps)));
 };
 exports.default = CollapseButton;

package/cjs/components/ModeSwitcherSelect/ModeSwitcherSelect.d.ts

@@ -2,15 +2,15 @@ import React from 'react';
 declare type Option = {
     label: string;
     value: string;
-    description: string;
-    icon: React.ElementType;
+    description?: string;
+    icon?: React.ElementType;
 };
 declare type Button = Option & {
     onClick: (value: string) => void;
 };
 declare type ModeSwitcherSelectProps = {
-    optionsGroup: Option[];
-    buttonsGroup: Button[];
+    optionsGroup?: Option[];
+    buttonsGroup?: Button[];
     value: string;
     onChange?: (value: string) => void;
     disabled?: boolean;

package/cjs/components/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -35,7 +35,7 @@ var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
 var styles_1 = require("./styles");
 var isButton = function (value) { return 'onClick' in value; };
 var ModeSwitcherSelect = function (_a) {
-    var optionsGroup = _a.optionsGroup, buttonsGroup = _a.buttonsGroup, value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var _b = _a.optionsGroup, optionsGroup = _b === void 0 ? [] : _b, _c = _a.buttonsGroup, buttonsGroup = _c === void 0 ? [] : _c, value = _a.value, onChange = _a.onChange, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
     var styles = (0, styles_1.useStyles)();
     var handleChange = function (e) {
         var value = e.target.value;
@@ -60,7 +60,7 @@ var ModeSwitcherSelect = function (_a) {
             }
             return (react_1.default.createElement(MenuItem_1.default, __assign({ key: value }, menuItemProps, { "data-reltio-id": "reltio-profile-select-mode-".concat(value) }),
                 react_1.default.createElement(Box_1.default, { className: styles.menuItemInner },
-                    react_1.default.createElement(IconComponent, { className: styles.menuItemIcon }),
+                    IconComponent && react_1.default.createElement(IconComponent, { className: styles.menuItemIcon }),
                     react_1.default.createElement(Box_1.default, null,
                         react_1.default.createElement(Typography_1.default, { className: styles.menuItemLabel }, label),
                         react_1.default.createElement(Typography_1.default, { className: styles.menuItemDescription }, description)))));

package/cjs/components/workflow/cards/GenericWorkflowTaskCard/GenericWorkflowTaskCard.js

@@ -43,16 +43,23 @@ var LineDecorator_1 = __importDefault(require("../../components/LineDecorator/Li
 var useWorkflowColor_1 = require("../../hooks/useWorkflowColor");
 var useWorkflowCheckPermission_1 = require("../../hooks/useWorkflowCheckPermission");
 var CollaborationIcon_1 = __importDefault(require("../../../../icons/CollaborationIcon"));
+var useWorkflowActions_1 = require("../../hooks/useWorkflowActions");
 var GenericWorkflowTaskCard = function (_a) {
     var _b;
     var task = _a.task, children = _a.children, actions = _a.actions, Icon = _a.Icon;
-    var taskId = task.taskId, dueDate = task.dueDate, priority = task.priority, assignee = task.assignee, createdBy = task.createdBy, createTime = task.createTime, step = task.displayName, processDefinitionDisplayName = task.processDefinitionDisplayName, objectURIs = task.objectURIs, processInstanceComments = task.processInstanceComments, possibleActions = task.possibleActions, isTaskOpen = task.isOpen;
+    var taskId = task.taskId, dueDate = task.dueDate, priority = task.priority, assignee = task.assignee, createdBy = task.createdBy, createTime = task.createTime, step = task.displayName, processDefinitionDisplayName = task.processDefinitionDisplayName, objectURIs = task.objectURIs, processInstanceComments = task.processInstanceComments, possibleActions = task.possibleActions, isTaskOpen = task.isOpen, preferredAction = task.preferredAction;
     var dcrId = (0, helpers_1.getDCRId)(objectURIs);
     var color = (0, useWorkflowColor_1.useWorkflowColor)({ processDefinitionDisplayName: processDefinitionDisplayName });
     var styles = (0, styles_1.useStyles)({ color: color });
     var _c = (0, react_1.useState)(false), isExpanded = _c[0], setExpanded = _c[1];
     var checkWorkflowPermission = (0, useWorkflowCheckPermission_1.useWorkflowCheckPermission)();
     var canViewComments = checkWorkflowPermission('VIEW_PROCESS_INSTANCE_COMMENTS');
+    var _d = (0, useWorkflowActions_1.useWorkflowActions)({
+        taskId: taskId,
+        possibleActions: possibleActions,
+        assignee: assignee,
+        isOpen: isTaskOpen
+    }), workflowActions = _d.actions, actionRequestIsInProgress = _d.actionRequestIsInProgress;
     return (react_1.default.createElement("div", { className: styles.card },
         react_1.default.createElement("div", { className: (0, classnames_1.default)((_b = {}, _b[styles.withBackground] = isExpanded, _b)) },
             react_1.default.createElement("div", { className: styles.lineWrapper },
@@ -68,7 +75,7 @@ var GenericWorkflowTaskCard = function (_a) {
                             react_1.default.createElement(CollapseButton_1.default, { isOpen: isExpanded, size: "L", onClick: function () {
                                     setExpanded(!isExpanded);
                                 } })),
-                        react_1.default.createElement("div", { className: styles.infoBlock },
+                        react_1.default.createElement("div", { className: styles.infoBlock, "data-reltio-id": "info-block" },
                             react_1.default.createElement("div", { className: styles.flex },
                                 dcrId && (react_1.default.createElement("div", { className: styles.info },
                                     ui_i18n_1.default.text('DCR ID'),
@@ -89,7 +96,7 @@ var GenericWorkflowTaskCard = function (_a) {
                                 canViewComments && (processInstanceComments === null || processInstanceComments === void 0 ? void 0 : processInstanceComments.length) > 0 && (react_1.default.createElement("div", { className: styles.commentsInfo },
                                     react_1.default.createElement(CollaborationIcon_1.default, { className: styles.commentsIcon }),
                                     react_1.default.createElement("div", { className: styles.infoValue }, processInstanceComments.length)))),
-                            actions || (react_1.default.createElement(TaskActions_1.default, { taskId: taskId, possibleActions: possibleActions, assignee: assignee, isTaskOpen: isTaskOpen })))))),
+                            actions || (react_1.default.createElement(TaskActions_1.default, { actions: workflowActions, isInProgress: actionRequestIsInProgress })))))),
             isExpanded && (react_1.default.createElement(LineDecorator_1.default, { plain: true },
                 react_1.default.createElement("div", { className: styles.controlsBox },
                     react_1.default.createElement("div", { className: styles.controlsInRow },
@@ -99,6 +106,6 @@ var GenericWorkflowTaskCard = function (_a) {
         isExpanded && (react_1.default.createElement(react_1.default.Fragment, null,
             children,
             canViewComments && (react_1.default.createElement("div", { className: styles.comments },
-                react_1.default.createElement(WorkflowComments_1.default, { taskId: taskId, processInstanceComments: processInstanceComments, isTaskOpen: isTaskOpen })))))));
+                react_1.default.createElement(WorkflowComments_1.default, { workflowActions: workflowActions, actionRequestIsInProgress: actionRequestIsInProgress, preferredAction: preferredAction, taskId: taskId, processInstanceComments: processInstanceComments, isTaskOpen: isTaskOpen })))))));
 };
 exports.default = GenericWorkflowTaskCard;

package/cjs/components/workflow/components/TaskActions/TaskActions.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { WorkflowTaskData } from '@reltio/mdm-sdk';
-declare type Props = Pick<WorkflowTaskData, 'taskId' | 'possibleActions' | 'assignee'> & {
-    isTaskOpen?: WorkflowTaskData['isOpen'];
+import { TaskAction } from '../../hooks/useWorkflowActions';
+declare type Props = {
+    isInProgress?: boolean;
+    actions: TaskAction[];
 };
-declare const TaskActions: ({ taskId, possibleActions, assignee, isTaskOpen }: Props) => JSX.Element;
+declare const TaskActions: ({ actions, isInProgress: disabled }: Props) => JSX.Element;
 export default TaskActions;

package/cjs/components/workflow/components/TaskActions/TaskActions.js

@@ -5,21 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
-var useWorkflowActions_1 = require("../../hooks/useWorkflowActions");
 var DropDownMenuButton_1 = __importDefault(require("../../../DropDownMenuButton/DropDownMenuButton"));
 var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
 var TaskActions = function (_a) {
-    var taskId = _a.taskId, possibleActions = _a.possibleActions, assignee = _a.assignee, isTaskOpen = _a.isTaskOpen;
-    var _b = (0, useWorkflowActions_1.useWorkflowActions)({
-        taskId: taskId,
-        possibleActions: possibleActions,
-        assignee: assignee,
-        isOpen: isTaskOpen
-    }), actions = _b.actions, disabled = _b.actionRequestIsInProgress;
+    var actions = _a.actions, disabled = _a.isInProgress;
     return actions.length > 0 ? (react_1.default.createElement(DropDownMenuButton_1.default, { buttonComponent: SmallIconButton_1.default, buttonProps: {
             icon: MoreVert_1.default,
             size: 'L',
-            disabled: disabled
+            disabled: disabled,
+            'data-reltio-id': 'task-actions'
         }, menuId: 'workflow-actions', menuItems: actions })) : null;
 };
 exports.default = TaskActions;

package/cjs/components/workflow/components/WorkflowComments/WorkflowComments.d.ts

@@ -1,17 +1,13 @@
-export function WorkflowComments({ processInstanceComments, taskId, isTaskOpen }: {
-    processInstanceComments: any;
-    taskId: any;
-    isTaskOpen: any;
-}): JSX.Element;
-export namespace WorkflowComments {
-    namespace propTypes {
-        const processInstanceComments: PropTypes.Requireable<PropTypes.InferProps<{
-            author: PropTypes.Requireable<string>;
-            id: PropTypes.Requireable<string>;
-            message: PropTypes.Requireable<string>;
-            time: PropTypes.Requireable<number>;
-        }>[]>;
-        const taskId: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";
+/// <reference types="react" />
+import { WorkflowAction, WorkflowComment } from '@reltio/mdm-sdk';
+import { TaskAction } from '../../hooks/useWorkflowActions';
+declare type Props = {
+    actionRequestIsInProgress?: boolean;
+    workflowActions: TaskAction[];
+    processInstanceComments: WorkflowComment[];
+    taskId: string;
+    isTaskOpen: boolean;
+    preferredAction: WorkflowAction;
+};
+export declare const WorkflowComments: ({ workflowActions: actions, actionRequestIsInProgress, processInstanceComments, taskId, isTaskOpen, preferredAction }: Props) => JSX.Element;
+export {};

package/cjs/components/workflow/components/WorkflowComments/WorkflowComments.js

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -32,29 +41,42 @@ var ramda_1 = require("ramda");
 var Input_1 = __importDefault(require("@material-ui/core/Input"));
 var InputAdornment_1 = __importDefault(require("@material-ui/core/InputAdornment"));
 var Send_1 = __importDefault(require("@material-ui/icons/Send"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var CollapsedComments_1 = require("./CollapsedComments");
 var ExpandedComments_1 = require("./ExpandedComments");
 var styles_1 = require("./styles");
 var useWorkflowComments_1 = require("../../hooks/useWorkflowComments");
 var SmallIconButton_1 = require("../../../SmallIconButton");
+var ModeSwitcherSelect_1 = require("../../../ModeSwitcherSelect/ModeSwitcherSelect");
 var getValue = function (e) { return e.target.value; };
 var WorkflowComments = function (_a) {
-    var processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen;
+    var actions = _a.workflowActions, actionRequestIsInProgress = _a.actionRequestIsInProgress, processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen, preferredAction = _a.preferredAction;
     var styles = (0, styles_1.useWorkflowStyles)();
     var _b = (0, react_1.useState)(false), expanded = _b[0], setExpanded = _b[1];
     var _c = (0, react_1.useState)(''), comment = _c[0], setComment = _c[1];
-    var _d = (0, useWorkflowComments_1.useWorkflowComments)({
+    var _d = (0, react_1.useState)(preferredAction.label), currentAction = _d[0], setCurrentAction = _d[1];
+    var _e = (0, useWorkflowComments_1.useWorkflowComments)({
         processInstanceComments: processInstanceComments,
         taskId: taskId,
         isOpen: isTaskOpen
-    }), comments = _d.comments, writeComment = _d.writeComment, readOnly = _d.readOnly;
+    }), comments = _e.comments, writeComment = _e.writeComment, readOnly = _e.readOnly;
     var sendComment = (0, react_1.useCallback)(function () {
         writeComment(comment);
         setComment('');
     }, [comment, writeComment]);
     var onChange = (0, ramda_1.pipe)(getValue, setComment);
+    var BUTTONS_GROUP = (0, react_1.useMemo)(function () { return __spreadArray([], actions.map(function (_a) {
+        var text = _a.text, onClick = _a.onClick;
+        return ({
+            label: text,
+            onClick: function () {
+                setCurrentAction(text);
+                onClick(comment);
+            },
+            value: text
+        });
+    }), true); }, [actions, comment]);
     return (react_1.default.createElement("div", { className: styles.container },
         react_1.default.createElement("div", { className: styles.title },
             " ",
@@ -62,15 +84,9 @@ var WorkflowComments = function (_a) {
             " "),
         react_1.default.createElement("div", { className: styles.commentsContainer }, expanded || comments.length < 3 ? (react_1.default.createElement(ExpandedComments_1.ExpandedComments, { comments: comments })) : (react_1.default.createElement(CollapsedComments_1.CollapsedComments, { onClick: function () { return setExpanded(true); }, comments: comments }))),
         !readOnly && (react_1.default.createElement(Input_1.default, { endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" },
-                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Send_1.default, disabled: comment.length === 0, onClick: sendComment })), classes: { root: styles.filledInputRoot }, placeholder: ui_i18n_1.default.text('Write a comment'), value: comment, onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), sendComment), onChange: onChange, disableUnderline: true }))));
+                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Send_1.default, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: ui_i18n_1.default.text('Write a comment'), value: comment, onKeyPress: (0, ramda_1.when)((0, ramda_1.both)((0, ramda_1.propEq)('key', 'Enter'), (0, ramda_1.always)(comment.length > 0)), sendComment), onChange: onChange, disableUnderline: true })),
+        react_1.default.createElement("div", { className: styles.modeSwitcherWrapper },
+            BUTTONS_GROUP.length === 1 && (react_1.default.createElement(Button_1.default, { variant: "outlined", onClick: BUTTONS_GROUP[0].onClick, disabled: actionRequestIsInProgress }, BUTTONS_GROUP[0].label)),
+            BUTTONS_GROUP.length > 1 && (react_1.default.createElement(ModeSwitcherSelect_1.ModeSwitcherSelect, { buttonsGroup: BUTTONS_GROUP, value: currentAction, disabled: actionRequestIsInProgress })))));
 };
 exports.WorkflowComments = WorkflowComments;
-exports.WorkflowComments.propTypes = {
-    processInstanceComments: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        author: prop_types_1.default.string,
-        id: prop_types_1.default.string,
-        message: prop_types_1.default.string,
-        time: prop_types_1.default.number
-    })),
-    taskId: prop_types_1.default.string
-};

package/cjs/components/workflow/components/WorkflowComments/styles.d.ts

@@ -1,4 +1,4 @@
-export const useCommentStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
-export const useCollapsedCommentsStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"circleButton" | "delimiter">;
-export const useWorkflowStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot">;
-export const useExpandedComments: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"messageContainer">;
+export declare const useCommentStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"text" | "icon" | "date" | "comment" | "info" | "avatar" | "firstLine" | "author">;
+export declare const useCollapsedCommentsStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"circleButton" | "delimiter">;
+export declare const useWorkflowStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot" | "modeSwitcherWrapper">;
+export declare const useExpandedComments: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"messageContainer">;

package/cjs/components/workflow/components/WorkflowComments/styles.js

@@ -27,7 +27,7 @@ exports.useCommentStyles = (0, styles_1.makeStyles)(function (_theme) { return (
     },
     author: {
         flex: 1,
-        fontWeight: '500',
+        fontWeight: 500,
         color: 'rgba(0,0,0,0.87)',
         fontSize: '13px',
         lineHeight: '15px'
@@ -99,6 +99,11 @@ exports.useWorkflowStyles = (0, styles_1.makeStyles)(function (_theme) { return
         '&.focused': {
             backgroundColor: 'rgba(0, 0, 0, 0.03)'
         }
+    },
+    modeSwitcherWrapper: {
+        marginLeft: 'auto',
+        marginRight: '16px',
+        marginTop: '8px'
     }
 }); });
 exports.useExpandedComments = (0, styles_1.makeStyles)(function (_theme) { return ({

package/cjs/components/workflow/hooks/useWorkflowActions.d.ts

@@ -1,7 +1,7 @@
 import { WorkflowTaskData } from '@reltio/mdm-sdk';
-declare type TaskAction = {
+export declare type TaskAction = {
     text: string;
-    onClick: () => void;
+    onClick: (comment: string) => void;
 };
 declare type Props = Pick<WorkflowTaskData, 'taskId' | 'possibleActions' | 'assignee' | 'isOpen'>;
 export declare const useWorkflowActions: ({ possibleActions, assignee, taskId, isOpen }: Props) => {

package/cjs/components/workflow/hooks/useWorkflowActions.js

@@ -19,15 +19,17 @@ var useWorkflowActions = function (_a) {
     var tenant = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getTenant);
     var username = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getUserName);
     var _b = (0, react_1.useState)(false), actionRequestIsInProgress = _b[0], setActionRequestIsInProgress = _b[1];
-    var performTaskAction = (0, react_1.useCallback)(function (action) { return function () {
+    var performTaskAction = (0, react_1.useCallback)(function (action) { return function (comment) {
         if (workflowPath && taskId) {
             setActionRequestIsInProgress(true);
+            var processInstanceComment = typeof comment === 'string' && comment.length ? comment : undefined;
             (0, mdm_sdk_1.runTaskAction)({
                 taskId: taskId,
                 workflowPath: workflowPath,
                 environment: environment,
                 tenant: tenant,
-                action: action
+                action: action,
+                processInstanceComment: processInstanceComment
             })
                 .then(function () {
                 onActionSuccess === null || onActionSuccess === void 0 ? void 0 : onActionSuccess(action);

package/cjs/components/workflow/hooks/useWorkflowComments.d.ts

@@ -1,7 +1,9 @@
 import { WorkflowTaskData } from '@reltio/mdm-sdk';
-export declare const useWorkflowComments: ({ processInstanceComments, taskId, isOpen }: WorkflowTaskData) => {
+declare type Props = Pick<WorkflowTaskData, 'processInstanceComments' | 'taskId' | 'isOpen'>;
+export declare const useWorkflowComments: ({ processInstanceComments, taskId, isOpen }: Props) => {
     comments: any[];
     requestIsInProgress: boolean;
     writeComment: (comment: any) => void;
     readOnly: boolean;
 };
+export {};

package/cjs/components/workflow/index.d.ts

@@ -5,6 +5,7 @@ export { default as AssigneeSelector } from './components/AssigneeSelector/Assig
 export { default as WorkflowComments } from './components/WorkflowComments';
 export { useWorkflowAssignee } from './hooks/useWorkflowAssignee';
 export { useWorkflowComments } from './hooks/useWorkflowComments';
+export { useWorkflowActions } from './hooks/useWorkflowActions';
 export { useWorkflowCheckPermission } from './hooks/useWorkflowCheckPermission';
 export { useWorkflowTasks } from './hooks/useWorkflowTasks';
 export { TaskActionButtons } from './components/TaskActionButtons/TaskActionButtons';

package/cjs/components/workflow/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWorkflowDefaultActionSuccessHandler = exports.TaskActionButtons = exports.useWorkflowTasks = exports.useWorkflowCheckPermission = exports.useWorkflowComments = exports.useWorkflowAssignee = exports.WorkflowComments = exports.AssigneeSelector = exports.TaskActions = exports.AddWorkflowButton = exports.WorkflowTaskCard = void 0;
+exports.useWorkflowDefaultActionSuccessHandler = exports.TaskActionButtons = exports.useWorkflowTasks = exports.useWorkflowCheckPermission = exports.useWorkflowActions = exports.useWorkflowComments = exports.useWorkflowAssignee = exports.WorkflowComments = exports.AssigneeSelector = exports.TaskActions = exports.AddWorkflowButton = exports.WorkflowTaskCard = void 0;
 var WorkflowTaskCard_1 = require("./cards/WorkflowTaskCard");
 Object.defineProperty(exports, "WorkflowTaskCard", { enumerable: true, get: function () { return WorkflowTaskCard_1.WorkflowTaskCard; } });
 var AddWorkflowButton_1 = require("./components/AddWorkflowButton/AddWorkflowButton");
@@ -18,6 +18,8 @@ var useWorkflowAssignee_1 = require("./hooks/useWorkflowAssignee");
 Object.defineProperty(exports, "useWorkflowAssignee", { enumerable: true, get: function () { return useWorkflowAssignee_1.useWorkflowAssignee; } });
 var useWorkflowComments_1 = require("./hooks/useWorkflowComments");
 Object.defineProperty(exports, "useWorkflowComments", { enumerable: true, get: function () { return useWorkflowComments_1.useWorkflowComments; } });
+var useWorkflowActions_1 = require("./hooks/useWorkflowActions");
+Object.defineProperty(exports, "useWorkflowActions", { enumerable: true, get: function () { return useWorkflowActions_1.useWorkflowActions; } });
 var useWorkflowCheckPermission_1 = require("./hooks/useWorkflowCheckPermission");
 Object.defineProperty(exports, "useWorkflowCheckPermission", { enumerable: true, get: function () { return useWorkflowCheckPermission_1.useWorkflowCheckPermission; } });
 var useWorkflowTasks_1 = require("./hooks/useWorkflowTasks");

package/esm/components/CollapseButton/CollapseButton.js

@@ -37,6 +37,6 @@ var CollapseButton = function (_a) {
     var tooltipProps = {
         tooltipTitle: tooltipTitle
     };
-    return React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, tooltipProps, otherProps));
+    return (React.createElement(SmallIconButtonWithTooltip, __assign({ "data-reltio-id": "collapse-button" }, buttonProps, tooltipProps, otherProps)));
 };
 export default CollapseButton;

package/esm/components/ModeSwitcherSelect/ModeSwitcherSelect.d.ts

@@ -2,15 +2,15 @@ import React from 'react';
 declare type Option = {
     label: string;
     value: string;
-    description: string;
-    icon: React.ElementType;
+    description?: string;
+    icon?: React.ElementType;
 };
 declare type Button = Option & {
     onClick: (value: string) => void;
 };
 declare type ModeSwitcherSelectProps = {
-    optionsGroup: Option[];
-    buttonsGroup: Button[];
+    optionsGroup?: Option[];
+    buttonsGroup?: Button[];
     value: string;
     onChange?: (value: string) => void;
     disabled?: boolean;

package/esm/components/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -29,7 +29,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { useStyles } from './styles';
 var isButton = function (value) { return 'onClick' in value; };
 export var ModeSwitcherSelect = function (_a) {
-    var optionsGroup = _a.optionsGroup, buttonsGroup = _a.buttonsGroup, value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var _b = _a.optionsGroup, optionsGroup = _b === void 0 ? [] : _b, _c = _a.buttonsGroup, buttonsGroup = _c === void 0 ? [] : _c, value = _a.value, onChange = _a.onChange, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
     var styles = useStyles();
     var handleChange = function (e) {
         var value = e.target.value;
@@ -54,7 +54,7 @@ export var ModeSwitcherSelect = function (_a) {
             }
             return (React.createElement(MenuItem, __assign({ key: value }, menuItemProps, { "data-reltio-id": "reltio-profile-select-mode-".concat(value) }),
                 React.createElement(Box, { className: styles.menuItemInner },
-                    React.createElement(IconComponent, { className: styles.menuItemIcon }),
+                    IconComponent && React.createElement(IconComponent, { className: styles.menuItemIcon }),
                     React.createElement(Box, null,
                         React.createElement(Typography, { className: styles.menuItemLabel }, label),
                         React.createElement(Typography, { className: styles.menuItemDescription }, description)))));

package/esm/components/workflow/cards/GenericWorkflowTaskCard/GenericWorkflowTaskCard.js

@@ -15,16 +15,23 @@ import LineDecorator from '../../components/LineDecorator/LineDecorator';
 import { useWorkflowColor } from '../../hooks/useWorkflowColor';
 import { useWorkflowCheckPermission } from '../../hooks/useWorkflowCheckPermission';
 import CollaborationIcon from '../../../../icons/CollaborationIcon';
+import { useWorkflowActions } from '../../hooks/useWorkflowActions';
 var GenericWorkflowTaskCard = function (_a) {
     var _b;
     var task = _a.task, children = _a.children, actions = _a.actions, Icon = _a.Icon;
-    var taskId = task.taskId, dueDate = task.dueDate, priority = task.priority, assignee = task.assignee, createdBy = task.createdBy, createTime = task.createTime, step = task.displayName, processDefinitionDisplayName = task.processDefinitionDisplayName, objectURIs = task.objectURIs, processInstanceComments = task.processInstanceComments, possibleActions = task.possibleActions, isTaskOpen = task.isOpen;
+    var taskId = task.taskId, dueDate = task.dueDate, priority = task.priority, assignee = task.assignee, createdBy = task.createdBy, createTime = task.createTime, step = task.displayName, processDefinitionDisplayName = task.processDefinitionDisplayName, objectURIs = task.objectURIs, processInstanceComments = task.processInstanceComments, possibleActions = task.possibleActions, isTaskOpen = task.isOpen, preferredAction = task.preferredAction;
     var dcrId = getDCRId(objectURIs);
     var color = useWorkflowColor({ processDefinitionDisplayName: processDefinitionDisplayName });
     var styles = useStyles({ color: color });
     var _c = useState(false), isExpanded = _c[0], setExpanded = _c[1];
     var checkWorkflowPermission = useWorkflowCheckPermission();
     var canViewComments = checkWorkflowPermission('VIEW_PROCESS_INSTANCE_COMMENTS');
+    var _d = useWorkflowActions({
+        taskId: taskId,
+        possibleActions: possibleActions,
+        assignee: assignee,
+        isOpen: isTaskOpen
+    }), workflowActions = _d.actions, actionRequestIsInProgress = _d.actionRequestIsInProgress;
     return (React.createElement("div", { className: styles.card },
         React.createElement("div", { className: classnames((_b = {}, _b[styles.withBackground] = isExpanded, _b)) },
             React.createElement("div", { className: styles.lineWrapper },
@@ -40,7 +47,7 @@ var GenericWorkflowTaskCard = function (_a) {
                             React.createElement(CollapseButton, { isOpen: isExpanded, size: "L", onClick: function () {
                                     setExpanded(!isExpanded);
                                 } })),
-                        React.createElement("div", { className: styles.infoBlock },
+                        React.createElement("div", { className: styles.infoBlock, "data-reltio-id": "info-block" },
                             React.createElement("div", { className: styles.flex },
                                 dcrId && (React.createElement("div", { className: styles.info },
                                     i18n.text('DCR ID'),
@@ -61,7 +68,7 @@ var GenericWorkflowTaskCard = function (_a) {
                                 canViewComments && (processInstanceComments === null || processInstanceComments === void 0 ? void 0 : processInstanceComments.length) > 0 && (React.createElement("div", { className: styles.commentsInfo },
                                     React.createElement(CollaborationIcon, { className: styles.commentsIcon }),
                                     React.createElement("div", { className: styles.infoValue }, processInstanceComments.length)))),
-                            actions || (React.createElement(TaskActions, { taskId: taskId, possibleActions: possibleActions, assignee: assignee, isTaskOpen: isTaskOpen })))))),
+                            actions || (React.createElement(TaskActions, { actions: workflowActions, isInProgress: actionRequestIsInProgress })))))),
             isExpanded && (React.createElement(LineDecorator, { plain: true },
                 React.createElement("div", { className: styles.controlsBox },
                     React.createElement("div", { className: styles.controlsInRow },
@@ -71,6 +78,6 @@ var GenericWorkflowTaskCard = function (_a) {
         isExpanded && (React.createElement(React.Fragment, null,
             children,
             canViewComments && (React.createElement("div", { className: styles.comments },
-                React.createElement(WorkflowComments, { taskId: taskId, processInstanceComments: processInstanceComments, isTaskOpen: isTaskOpen })))))));
+                React.createElement(WorkflowComments, { workflowActions: workflowActions, actionRequestIsInProgress: actionRequestIsInProgress, preferredAction: preferredAction, taskId: taskId, processInstanceComments: processInstanceComments, isTaskOpen: isTaskOpen })))))));
 };
 export default GenericWorkflowTaskCard;

package/esm/components/workflow/components/TaskActions/TaskActions.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { WorkflowTaskData } from '@reltio/mdm-sdk';
-declare type Props = Pick<WorkflowTaskData, 'taskId' | 'possibleActions' | 'assignee'> & {
-    isTaskOpen?: WorkflowTaskData['isOpen'];
+import { TaskAction } from '../../hooks/useWorkflowActions';
+declare type Props = {
+    isInProgress?: boolean;
+    actions: TaskAction[];
 };
-declare const TaskActions: ({ taskId, possibleActions, assignee, isTaskOpen }: Props) => JSX.Element;
+declare const TaskActions: ({ actions, isInProgress: disabled }: Props) => JSX.Element;
 export default TaskActions;

package/esm/components/workflow/components/TaskActions/TaskActions.js

@@ -1,20 +1,14 @@
 import React from 'react';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { useWorkflowActions } from '../../hooks/useWorkflowActions';
 import DropDownMenuButton from '../../../DropDownMenuButton/DropDownMenuButton';
 import SmallIconButton from '../../../SmallIconButton/SmallIconButton';
 var TaskActions = function (_a) {
-    var taskId = _a.taskId, possibleActions = _a.possibleActions, assignee = _a.assignee, isTaskOpen = _a.isTaskOpen;
-    var _b = useWorkflowActions({
-        taskId: taskId,
-        possibleActions: possibleActions,
-        assignee: assignee,
-        isOpen: isTaskOpen
-    }), actions = _b.actions, disabled = _b.actionRequestIsInProgress;
+    var actions = _a.actions, disabled = _a.isInProgress;
     return actions.length > 0 ? (React.createElement(DropDownMenuButton, { buttonComponent: SmallIconButton, buttonProps: {
             icon: MoreVertIcon,
             size: 'L',
-            disabled: disabled
+            disabled: disabled,
+            'data-reltio-id': 'task-actions'
         }, menuId: 'workflow-actions', menuItems: actions })) : null;
 };
 export default TaskActions;

package/esm/components/workflow/components/WorkflowComments/WorkflowComments.d.ts

@@ -1,17 +1,13 @@
-export function WorkflowComments({ processInstanceComments, taskId, isTaskOpen }: {
-    processInstanceComments: any;
-    taskId: any;
-    isTaskOpen: any;
-}): JSX.Element;
-export namespace WorkflowComments {
-    namespace propTypes {
-        const processInstanceComments: PropTypes.Requireable<PropTypes.InferProps<{
-            author: PropTypes.Requireable<string>;
-            id: PropTypes.Requireable<string>;
-            message: PropTypes.Requireable<string>;
-            time: PropTypes.Requireable<number>;
-        }>[]>;
-        const taskId: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";
+/// <reference types="react" />
+import { WorkflowAction, WorkflowComment } from '@reltio/mdm-sdk';
+import { TaskAction } from '../../hooks/useWorkflowActions';
+declare type Props = {
+    actionRequestIsInProgress?: boolean;
+    workflowActions: TaskAction[];
+    processInstanceComments: WorkflowComment[];
+    taskId: string;
+    isTaskOpen: boolean;
+    preferredAction: WorkflowAction;
+};
+export declare const WorkflowComments: ({ workflowActions: actions, actionRequestIsInProgress, processInstanceComments, taskId, isTaskOpen, preferredAction }: Props) => JSX.Element;
+export {};

package/esm/components/workflow/components/WorkflowComments/WorkflowComments.js

@@ -1,31 +1,53 @@
-import React, { useCallback, useState } from 'react';
-import { pipe, propEq, when } from 'ramda';
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useCallback, useState, useMemo } from 'react';
+import { pipe, propEq, when, both, always } from 'ramda';
 import Input from '@material-ui/core/Input';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import SendIcon from '@material-ui/icons/Send';
-import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
+import Button from '@material-ui/core/Button';
 import { CollapsedComments } from './CollapsedComments';
 import { ExpandedComments } from './ExpandedComments';
 import { useWorkflowStyles } from './styles';
 import { useWorkflowComments } from '../../hooks/useWorkflowComments';
 import { SmallIconButton } from '../../../SmallIconButton';
+import { ModeSwitcherSelect } from '../../../ModeSwitcherSelect/ModeSwitcherSelect';
 var getValue = function (e) { return e.target.value; };
 export var WorkflowComments = function (_a) {
-    var processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen;
+    var actions = _a.workflowActions, actionRequestIsInProgress = _a.actionRequestIsInProgress, processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen, preferredAction = _a.preferredAction;
     var styles = useWorkflowStyles();
     var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
     var _c = useState(''), comment = _c[0], setComment = _c[1];
-    var _d = useWorkflowComments({
+    var _d = useState(preferredAction.label), currentAction = _d[0], setCurrentAction = _d[1];
+    var _e = useWorkflowComments({
         processInstanceComments: processInstanceComments,
         taskId: taskId,
         isOpen: isTaskOpen
-    }), comments = _d.comments, writeComment = _d.writeComment, readOnly = _d.readOnly;
+    }), comments = _e.comments, writeComment = _e.writeComment, readOnly = _e.readOnly;
     var sendComment = useCallback(function () {
         writeComment(comment);
         setComment('');
     }, [comment, writeComment]);
     var onChange = pipe(getValue, setComment);
+    var BUTTONS_GROUP = useMemo(function () { return __spreadArray([], actions.map(function (_a) {
+        var text = _a.text, onClick = _a.onClick;
+        return ({
+            label: text,
+            onClick: function () {
+                setCurrentAction(text);
+                onClick(comment);
+            },
+            value: text
+        });
+    }), true); }, [actions, comment]);
     return (React.createElement("div", { className: styles.container },
         React.createElement("div", { className: styles.title },
             " ",
@@ -33,14 +55,8 @@ export var WorkflowComments = function (_a) {
             " "),
         React.createElement("div", { className: styles.commentsContainer }, expanded || comments.length < 3 ? (React.createElement(ExpandedComments, { comments: comments })) : (React.createElement(CollapsedComments, { onClick: function () { return setExpanded(true); }, comments: comments }))),
         !readOnly && (React.createElement(Input, { endAdornment: React.createElement(InputAdornment, { position: "end" },
-                React.createElement(SmallIconButton, { icon: SendIcon, disabled: comment.length === 0, onClick: sendComment })), classes: { root: styles.filledInputRoot }, placeholder: i18n.text('Write a comment'), value: comment, onKeyPress: when(propEq('key', 'Enter'), sendComment), onChange: onChange, disableUnderline: true }))));
-};
-WorkflowComments.propTypes = {
-    processInstanceComments: PropTypes.arrayOf(PropTypes.shape({
-        author: PropTypes.string,
-        id: PropTypes.string,
-        message: PropTypes.string,
-        time: PropTypes.number
-    })),
-    taskId: PropTypes.string
+                React.createElement(SmallIconButton, { icon: SendIcon, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: i18n.text('Write a comment'), value: comment, onKeyPress: when(both(propEq('key', 'Enter'), always(comment.length > 0)), sendComment), onChange: onChange, disableUnderline: true })),
+        React.createElement("div", { className: styles.modeSwitcherWrapper },
+            BUTTONS_GROUP.length === 1 && (React.createElement(Button, { variant: "outlined", onClick: BUTTONS_GROUP[0].onClick, disabled: actionRequestIsInProgress }, BUTTONS_GROUP[0].label)),
+            BUTTONS_GROUP.length > 1 && (React.createElement(ModeSwitcherSelect, { buttonsGroup: BUTTONS_GROUP, value: currentAction, disabled: actionRequestIsInProgress })))));
 };

package/esm/components/workflow/components/WorkflowComments/styles.d.ts

@@ -1,4 +1,4 @@
-export const useCommentStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
-export const useCollapsedCommentsStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"circleButton" | "delimiter">;
-export const useWorkflowStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot">;
-export const useExpandedComments: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"messageContainer">;
+export declare const useCommentStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"text" | "icon" | "date" | "comment" | "info" | "avatar" | "firstLine" | "author">;
+export declare const useCollapsedCommentsStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"circleButton" | "delimiter">;
+export declare const useWorkflowStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot" | "modeSwitcherWrapper">;
+export declare const useExpandedComments: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"messageContainer">;

package/esm/components/workflow/components/WorkflowComments/styles.js

@@ -24,7 +24,7 @@ export var useCommentStyles = makeStyles(function (_theme) { return ({
     },
     author: {
         flex: 1,
-        fontWeight: '500',
+        fontWeight: 500,
         color: 'rgba(0,0,0,0.87)',
         fontSize: '13px',
         lineHeight: '15px'
@@ -96,6 +96,11 @@ export var useWorkflowStyles = makeStyles(function (_theme) { return ({
         '&.focused': {
             backgroundColor: 'rgba(0, 0, 0, 0.03)'
         }
+    },
+    modeSwitcherWrapper: {
+        marginLeft: 'auto',
+        marginRight: '16px',
+        marginTop: '8px'
     }
 }); });
 export var useExpandedComments = makeStyles(function (_theme) { return ({

package/esm/components/workflow/hooks/useWorkflowActions.d.ts

@@ -1,7 +1,7 @@
 import { WorkflowTaskData } from '@reltio/mdm-sdk';
-declare type TaskAction = {
+export declare type TaskAction = {
     text: string;
-    onClick: () => void;
+    onClick: (comment: string) => void;
 };
 declare type Props = Pick<WorkflowTaskData, 'taskId' | 'possibleActions' | 'assignee' | 'isOpen'>;
 export declare const useWorkflowActions: ({ possibleActions, assignee, taskId, isOpen }: Props) => {

package/esm/components/workflow/hooks/useWorkflowActions.js

@@ -13,15 +13,17 @@ export var useWorkflowActions = function (_a) {
     var tenant = useSelector(mdmModule.selectors.getTenant);
     var username = useSelector(mdmModule.selectors.getUserName);
     var _b = useState(false), actionRequestIsInProgress = _b[0], setActionRequestIsInProgress = _b[1];
-    var performTaskAction = useCallback(function (action) { return function () {
+    var performTaskAction = useCallback(function (action) { return function (comment) {
         if (workflowPath && taskId) {
             setActionRequestIsInProgress(true);
+            var processInstanceComment = typeof comment === 'string' && comment.length ? comment : undefined;
             runTaskAction({
                 taskId: taskId,
                 workflowPath: workflowPath,
                 environment: environment,
                 tenant: tenant,
-                action: action
+                action: action,
+                processInstanceComment: processInstanceComment
             })
                 .then(function () {
                 onActionSuccess === null || onActionSuccess === void 0 ? void 0 : onActionSuccess(action);

package/esm/components/workflow/hooks/useWorkflowComments.d.ts

@@ -1,7 +1,9 @@
 import { WorkflowTaskData } from '@reltio/mdm-sdk';
-export declare const useWorkflowComments: ({ processInstanceComments, taskId, isOpen }: WorkflowTaskData) => {
+declare type Props = Pick<WorkflowTaskData, 'processInstanceComments' | 'taskId' | 'isOpen'>;
+export declare const useWorkflowComments: ({ processInstanceComments, taskId, isOpen }: Props) => {
     comments: any[];
     requestIsInProgress: boolean;
     writeComment: (comment: any) => void;
     readOnly: boolean;
 };
+export {};

package/esm/components/workflow/index.d.ts

@@ -5,6 +5,7 @@ export { default as AssigneeSelector } from './components/AssigneeSelector/Assig
 export { default as WorkflowComments } from './components/WorkflowComments';
 export { useWorkflowAssignee } from './hooks/useWorkflowAssignee';
 export { useWorkflowComments } from './hooks/useWorkflowComments';
+export { useWorkflowActions } from './hooks/useWorkflowActions';
 export { useWorkflowCheckPermission } from './hooks/useWorkflowCheckPermission';
 export { useWorkflowTasks } from './hooks/useWorkflowTasks';
 export { TaskActionButtons } from './components/TaskActionButtons/TaskActionButtons';

package/esm/components/workflow/index.js

@@ -5,6 +5,7 @@ export { default as AssigneeSelector } from './components/AssigneeSelector/Assig
 export { default as WorkflowComments } from './components/WorkflowComments';
 export { useWorkflowAssignee } from './hooks/useWorkflowAssignee';
 export { useWorkflowComments } from './hooks/useWorkflowComments';
+export { useWorkflowActions } from './hooks/useWorkflowActions';
 export { useWorkflowCheckPermission } from './hooks/useWorkflowCheckPermission';
 export { useWorkflowTasks } from './hooks/useWorkflowTasks';
 export { TaskActionButtons } from './components/TaskActionButtons/TaskActionButtons';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1528",
+  "version": "1.4.1530",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1528",
-    "@reltio/mdm-sdk": "^1.4.1528",
+    "@reltio/mdm-module": "^1.4.1530",
+    "@reltio/mdm-sdk": "^1.4.1530",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",