@reltio/components 1.4.2189 → 1.4.2191

package/features/workflow/WorkflowActionButtons/index.d.ts

@@ -0,0 +1 @@
+export { WorkflowActionButtons } from './WorkflowActionButtons';

package/features/workflow/WorkflowActionButtons/index.js

@@ -0,0 +1 @@
+export { WorkflowActionButtons } from './WorkflowActionButtons';

package/features/workflow/WorkflowComments/WorkflowComments.d.ts

@@ -8,6 +8,12 @@ type Props = {
     taskId: string;
     isTaskOpen: boolean;
     preferredAction?: WorkflowAction;
+    showActionButtons?: boolean;
+    alwaysExpanded?: boolean;
+    classes?: {
+        container?: string;
+        commentsContainer?: string;
+    };
 };
-export declare const WorkflowComments: ({ workflowActions: actions, actionRequestIsInProgress, processInstanceComments, taskId, isTaskOpen, preferredAction }: Props) => React.JSX.Element;
+export declare const WorkflowComments: ({ workflowActions: actions, actionRequestIsInProgress, processInstanceComments, taskId, isTaskOpen, preferredAction, showActionButtons, alwaysExpanded, classes }: Props) => React.JSX.Element;
 export {};

package/features/workflow/WorkflowComments/WorkflowComments.js

@@ -1,26 +1,24 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState } from 'react';
+import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import Input from '@mui/material/Input';
 import InputAdornment from '@mui/material/InputAdornment';
 import SendIcon from '@mui/icons-material/Send';
-import Button from '@mui/material/Button';
 import { CollapsedComments } from './components/CollapsedComments';
 import { ExpandedComments } from './components/ExpandedComments';
 import { useWorkflowComments } from '../hooks/useWorkflowComments';
 import { SmallIconButton } from '../../../SmallIconButton';
-import { ModeSwitcherSelect } from '../../../ModeSwitcherSelect';
-import { useStyles } from './styles';
+import { WorkflowActionButtons } from '../WorkflowActionButtons';
+import styles from './WorkflowComments.module.css';
 export var WorkflowComments = function (_a) {
-    var actions = _a.workflowActions, actionRequestIsInProgress = _a.actionRequestIsInProgress, processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen, preferredAction = _a.preferredAction;
-    var styles = useStyles();
-    var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
-    var _c = useState(''), comment = _c[0], setComment = _c[1];
-    var _d = useState(function () { var _a; return (preferredAction === null || preferredAction === void 0 ? void 0 : preferredAction.label) || ((_a = actions[0]) === null || _a === void 0 ? void 0 : _a.text); }), currentAction = _d[0], setCurrentAction = _d[1];
-    var _e = useWorkflowComments({
+    var actions = _a.workflowActions, actionRequestIsInProgress = _a.actionRequestIsInProgress, processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen, preferredAction = _a.preferredAction, _b = _a.showActionButtons, showActionButtons = _b === void 0 ? true : _b, _c = _a.alwaysExpanded, alwaysExpanded = _c === void 0 ? false : _c, classes = _a.classes;
+    var _d = useState(false), expanded = _d[0], setExpanded = _d[1];
+    var _e = useState(''), comment = _e[0], setComment = _e[1];
+    var _f = useWorkflowComments({
         processInstanceComments: processInstanceComments,
         taskId: taskId,
         isOpen: isTaskOpen
-    }), comments = _e.comments, writeComment = _e.writeComment, readOnly = _e.readOnly;
+    }), comments = _f.comments, writeComment = _f.writeComment, readOnly = _f.readOnly;
     var sendComment = useCallback(function () {
         writeComment(comment);
         setComment('');
@@ -40,28 +38,14 @@ export var WorkflowComments = function (_a) {
             e.preventDefault();
         }
     }, [comment, sendComment]);
-    var buttonsGroup = useMemo(function () {
-        return actions.map(function (_a) {
-            var text = _a.text, onClick = _a.onClick;
-            return ({
-                label: text,
-                onClick: function () {
-                    setCurrentAction(text);
-                    onClick(comment);
-                },
-                value: text
-            });
-        });
-    }, [actions, comment]);
-    return (React.createElement("div", { className: styles.container },
+    return (React.createElement("div", { className: classnames(styles.container, classes === null || classes === void 0 ? void 0 : classes.container) },
         React.createElement("div", { className: styles.title },
             " ",
             i18n.text('Comments'),
             " "),
-        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 }))),
+        React.createElement("div", { className: classnames(styles.commentsContainer, classes === null || classes === void 0 ? void 0 : classes.commentsContainer) }, expanded || alwaysExpanded || 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", className: styles.sendButton },
                 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: handleKeyPress, onChange: handleChange, disableUnderline: true, multiline: true })),
-        React.createElement("div", { className: styles.modeSwitcherWrapper },
-            buttonsGroup.length === 1 && (React.createElement(Button, { variant: "outlined", onClick: buttonsGroup[0].onClick, disabled: actionRequestIsInProgress }, buttonsGroup[0].label)),
-            buttonsGroup.length > 1 && (React.createElement(ModeSwitcherSelect, { buttonsGroup: buttonsGroup, value: currentAction, loading: actionRequestIsInProgress, disabled: actionRequestIsInProgress })))));
+        showActionButtons && (React.createElement("div", { className: styles.modeSwitcherWrapper },
+            React.createElement(WorkflowActionButtons, { workflowActions: actions, actionRequestIsInProgress: actionRequestIsInProgress, preferredAction: preferredAction, comment: comment })))));
 };

package/features/workflow/WorkflowComments/WorkflowComments.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"WorkflowComments-container--zu4Un","commentsContainer":"WorkflowComments-commentsContainer--CHV0q","title":"WorkflowComments-title--a0FTZ","filledInputRoot":"WorkflowComments-filledInputRoot--q5WAu","focused":"WorkflowComments-focused--s-NQa","modeSwitcherWrapper":"WorkflowComments-modeSwitcherWrapper--b585U","sendButton":"WorkflowComments-sendButton--NjNcl"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.WorkflowComments-container--zu4Un{display:flex;flex-direction:column;padding:5px 0}.WorkflowComments-commentsContainer--CHV0q{max-height:300px;overflow-y:auto}.WorkflowComments-title--a0FTZ{color:rgba(0,0,0,.87);font-size:14px;margin:0 0 8px 5px}.WorkflowComments-filledInputRoot--q5WAu{background-color:rgba(0,0,0,.03);font-size:14px;margin:10px 17px 0 6px;min-height:40px;padding:10px 6px}.WorkflowComments-filledInputRoot--q5WAu.WorkflowComments-focused--s-NQa,.WorkflowComments-filledInputRoot--q5WAu:hover{background-color:rgba(0,0,0,.03)}.WorkflowComments-modeSwitcherWrapper--b585U{margin-left:auto;margin-right:16px;margin-top:8px}.WorkflowComments-sendButton--NjNcl{align-self:end;margin-bottom:10px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/WorkflowTaskCard/components/DataChangeRequestTaskCard/DataChangeRequestTaskCard.js

@@ -1,16 +1,33 @@
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import DcrTaskIcon from '../../../../../icons/DcrTaskIcon';
+import { useMdmReviewDCREnabled, useMdmUsername } from '../../../../../contexts/MdmModuleContext';
 import { GenericWorkflowTaskCard } from '../GenericWorkflowTaskCard';
 import { AttributesChanges } from '../../../AttributesChanges';
 import { LineDecorator } from '../../../LineDecorator';
 import { useChangeRequest } from '../../../hooks/useChangeRequest';
 import { getDCRUri } from '../../../helpers/common';
+import { ReviewDCRDialog } from '../../../ReviewDCRDialog';
+import { ReviewDCRButton } from '../../../ReviewDCRButton';
 export var DataChangeRequestTaskCard = function (_a) {
     var task = _a.task;
-    var objectURIs = task.objectURIs;
+    var reviewDCREnabled = useMdmReviewDCREnabled();
+    var username = useMdmUsername();
+    var _b = useState(false), isReviewDCRDialogOpen = _b[0], setIsReviewDCRDialogOpen = _b[1];
+    var objectURIs = task.objectURIs, assignee = task.assignee;
     var dcrUri = getDCRUri(objectURIs);
-    var _b = useChangeRequest(dcrUri), dcr = _b.dcr, groupedObjects = _b.groupedObjects;
-    return (React.createElement(GenericWorkflowTaskCard, { task: task, Icon: DcrTaskIcon }, dcr &&
-        groupedObjects.map(function (object, index) { return (React.createElement(LineDecorator, { key: index, last: index === groupedObjects.length - 1, divider: true },
-            React.createElement(AttributesChanges, { entityInfo: object.entity, relationsInfo: object.relations, changes: dcr.changes, objectsInfo: dcr.objectsInfo, dcrUri: dcrUri }))); })));
+    var _c = useChangeRequest(dcrUri), dcr = _c.dcr, groupedObjects = _c.groupedObjects;
+    var handleReviewDCR = useCallback(function () {
+        setIsReviewDCRDialogOpen(true);
+    }, []);
+    var handleCloseReviewDCRDialog = useCallback(function () {
+        setIsReviewDCRDialogOpen(false);
+    }, []);
+    var showReviewDCRButton = reviewDCREnabled && assignee == username;
+    var showReviewDialog = isReviewDCRDialogOpen && (showReviewDCRButton || reviewDCREnabled);
+    var customActionsSlot = useMemo(function () { return showReviewDCRButton && React.createElement(ReviewDCRButton, { onClick: handleReviewDCR }); }, [showReviewDCRButton, handleReviewDCR]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(GenericWorkflowTaskCard, { task: task, Icon: DcrTaskIcon, customActionsSlot: customActionsSlot }, dcr &&
+            groupedObjects.map(function (object, index) { return (React.createElement(LineDecorator, { key: index, last: index === groupedObjects.length - 1, divider: true },
+                React.createElement(AttributesChanges, { entityInfo: object.entity, relationsInfo: object.relations, changes: dcr.changes, objectsInfo: dcr.objectsInfo, dcrUri: dcrUri }))); })),
+        showReviewDialog && (React.createElement(ReviewDCRDialog, { open: isReviewDCRDialogOpen, onClose: handleCloseReviewDCRDialog, dcr: dcr, groupedObjects: groupedObjects, task: task }))));
 };

package/features/workflow/WorkflowTaskCard/components/DataChangeRequestTaskCard/DataChangeRequestTaskCard.spec.js

@@ -60,12 +60,15 @@ import userEvent from '@testing-library/user-event';
 import moment from 'moment';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
-import { DCROperationTypes, DCRTypes, getDataChangeRequest, getEntitiesByUris } from '@reltio/mdm-sdk';
-import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
+import { DCROperationTypes, DCRTypes, getDataChangeRequest, getEntitiesByUris, runTaskAction } from '@reltio/mdm-sdk';
+import { MdmModuleProvider, useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
 import { CommentDialogProvider } from '../../../../../contexts/CommentDialogContext';
 import { DataChangeRequestTaskCard } from './DataChangeRequestTaskCard';
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getDataChangeRequest: jest.fn(), getEntitiesByUris: jest.fn() })); });
+import { WorkflowTasksContext } from '../../../../../contexts/WorkflowTasksContext';
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getDataChangeRequest: jest.fn(), getEntitiesByUris: jest.fn(), runTaskAction: jest.fn() })); });
 jest.mock('../../../../../contexts/MdmModuleContext', function () { return (__assign(__assign({}, jest.requireActual('../../../../../contexts/MdmModuleContext')), { useMdmMetadata: jest.fn() })); });
+var onActionSuccess = jest.fn();
+var workflowTaskContextValue = { onActionSuccess: onActionSuccess };
 describe('DataChangeRequestTaskCard tests', function () {
     var _a, _b;
     var metadata = {
@@ -175,7 +178,7 @@ describe('DataChangeRequestTaskCard tests', function () {
     var dcrUri = "changeRequests/".concat(dcrId);
     var dueDate = 1731825314640;
     var newStartDate = moment('11/15/2024', 'MM/DD/YYYY').valueOf();
-    var task = {
+    var defaultTask = {
         assignee: userName,
         processInstanceId: '60260030',
         processType: 'dataChangeRequestReview',
@@ -255,17 +258,32 @@ describe('DataChangeRequestTaskCard tests', function () {
             label: relationEntityLabel
         }
     ];
-    var setUp = function () {
+    var tenant = { id: 't1', name: 't1' };
+    var workflowPath = 'workflowPath';
+    var workflowEnvironmentUrl = 'workflowEnvironmentUrl';
+    var mdmValues = {
+        user: {
+            username: userName
+        },
+        tenant: tenant,
+        workflowPath: workflowPath,
+        workflowEnvironmentUrl: workflowEnvironmentUrl
+    };
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.task, task = _c === void 0 ? defaultTask : _c;
         var user = userEvent.setup();
         var Providers = function (_a) {
             var children = _a.children;
-            return (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
-                React.createElement(CommentDialogProvider, null, children)));
+            return (React.createElement(MdmModuleProvider, { values: mdmValues },
+                React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
+                    React.createElement(WorkflowTasksContext.Provider, { value: workflowTaskContextValue },
+                        React.createElement(CommentDialogProvider, null, children)))));
         };
         return __assign(__assign({}, render(React.createElement(DataChangeRequestTaskCard, { task: task }), { wrapper: Providers })), { user: user });
     };
     beforeAll(function () {
         getEntitiesByUris.mockResolvedValue(entities);
+        runTaskAction.mockResolvedValue(null);
     });
     beforeEach(function () {
         useMdmMetadata.mockReturnValue(metadata);
@@ -512,4 +530,61 @@ describe('DataChangeRequestTaskCard tests', function () {
             }
         });
     }); });
+    describe('Required comments', function () {
+        it('should show comment dialog when user runs action and comment is required', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var task, user, dialog, comment, commentInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        task = __assign(__assign({}, defaultTask), { possibleActions: [
+                                {
+                                    action: 'Approve',
+                                    label: 'Approve',
+                                    commentRequired: true
+                                },
+                                {
+                                    action: 'Reject',
+                                    label: 'Reject',
+                                    commentRequired: false
+                                }
+                            ] });
+                        getDataChangeRequest.mockResolvedValue(dcr);
+                        user = setUp({ task: task }).user;
+                        return [4 /*yield*/, user.click(screen.getByTestId('task-actions'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText(task.possibleActions[0].label))];
+                    case 2:
+                        _a.sent();
+                        expect(runTaskAction).not.toHaveBeenCalled();
+                        dialog = screen.getAllByRole('presentation')[1];
+                        expect(within(dialog).getByText('Please provide a comment for your action')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Type a comment')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Cancel')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Done')).toBeInTheDocument();
+                        comment = 'Some comment';
+                        commentInput = screen.getAllByRole('textbox')[0];
+                        return [4 /*yield*/, user.click(commentInput)];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste(comment)];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(within(dialog).getByText('Done'))];
+                    case 5:
+                        _a.sent();
+                        expect(screen.queryByText('Please provide a comment for your action')).not.toBeInTheDocument();
+                        expect(runTaskAction).toHaveBeenCalledWith({
+                            workflowPath: workflowPath,
+                            environment: workflowEnvironmentUrl,
+                            tenant: tenant.id,
+                            taskId: task.taskId,
+                            action: task.possibleActions[0].action,
+                            processInstanceComment: comment
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/features/workflow/WorkflowTaskCard/components/GenericWorkflowTaskCard/GenericWorkflowTaskCard.d.ts

@@ -5,6 +5,7 @@ type Props = {
     children?: React.ReactNode;
     actions?: React.ReactNode;
     Icon?: React.ElementType;
+    customActionsSlot?: React.ReactNode;
 };
-export declare const GenericWorkflowTaskCard: ({ task, children, actions, Icon }: Props) => React.JSX.Element;
+export declare const GenericWorkflowTaskCard: ({ task, children, actions, Icon, customActionsSlot }: Props) => React.JSX.Element;
 export {};

package/features/workflow/WorkflowTaskCard/components/GenericWorkflowTaskCard/GenericWorkflowTaskCard.js

@@ -15,14 +15,13 @@ import { useWorkflowCheckPermission } from '../../../hooks/useWorkflowCheckPermi
 import CollaborationIcon from '../../../../../icons/CollaborationIcon';
 import { useWorkflowActions } from '../../../hooks/useWorkflowActions';
 import { getDCRId } from '../../../helpers/common';
-import { useStyles } from './styles';
+import styles from './GenericWorkflowTaskCard.module.css';
 export var GenericWorkflowTaskCard = function (_a) {
     var _b;
-    var task = _a.task, children = _a.children, actions = _a.actions, Icon = _a.Icon;
+    var task = _a.task, children = _a.children, actions = _a.actions, Icon = _a.Icon, customActionsSlot = _a.customActionsSlot;
     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');
@@ -34,7 +33,7 @@ export var GenericWorkflowTaskCard = function (_a) {
     }), 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 },
+            React.createElement("div", { className: styles.lineWrapper, style: { '--workflow-color': color } },
                 React.createElement("div", { className: styles.line }),
                 Icon && React.createElement(Icon, { className: styles.icon }),
                 React.createElement(LineDecorator, { plain: true, first: true, transparent: !isExpanded },
@@ -65,9 +64,11 @@ export var GenericWorkflowTaskCard = function (_a) {
                                     i18n.text('Step'),
                                     ': ',
                                     React.createElement("span", { className: styles.infoValue }, step)),
-                                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)))),
+                                React.createElement("div", { className: styles.bottomInfo },
+                                    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))),
+                                    customActionsSlot && (React.createElement("div", { className: styles.customActionsSlot }, customActionsSlot)))),
                             actions || (React.createElement(TaskActions, { actions: workflowActions, isInProgress: actionRequestIsInProgress })))))),
             isExpanded && (React.createElement(LineDecorator, { plain: true },
                 React.createElement("div", { className: styles.controlsBox },

package/features/workflow/WorkflowTaskCard/components/GenericWorkflowTaskCard/GenericWorkflowTaskCard.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"card":"GenericWorkflowTaskCard-card--EMo-i","withBackground":"GenericWorkflowTaskCard-withBackground--Y--db","lineWrapper":"GenericWorkflowTaskCard-lineWrapper--15MN6","icon":"GenericWorkflowTaskCard-icon--eoHOp","line":"GenericWorkflowTaskCard-line--Z1Emv","info":"GenericWorkflowTaskCard-info--2OyKu","bottomInfo":"GenericWorkflowTaskCard-bottomInfo--4bsc4","commentsInfo":"GenericWorkflowTaskCard-commentsInfo--Q6M07","commentsIcon":"GenericWorkflowTaskCard-commentsIcon--crUiN","infoValue":"GenericWorkflowTaskCard-infoValue---gkaX","infoBlock":"GenericWorkflowTaskCard-infoBlock--VyI2O","header":"GenericWorkflowTaskCard-header--bN0nh","flex":"GenericWorkflowTaskCard-flex--5oWde","caption":"GenericWorkflowTaskCard-caption--vxnNJ","title":"GenericWorkflowTaskCard-title--zyCft","flag":"GenericWorkflowTaskCard-flag--dfydb","date":"GenericWorkflowTaskCard-date--MHd-G","mainInfo":"GenericWorkflowTaskCard-mainInfo--l5b9R","controlsBox":"GenericWorkflowTaskCard-controlsBox--ZHDhQ","controlsInRow":"GenericWorkflowTaskCard-controlsInRow--c48Nv","priority":"GenericWorkflowTaskCard-priority--xnnl9","comments":"GenericWorkflowTaskCard-comments--OG-db","customActionsSlot":"GenericWorkflowTaskCard-customActionsSlot--J-mXk"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.GenericWorkflowTaskCard-card--EMo-i{border-bottom:1px solid rgba(0,0,0,.06)}.GenericWorkflowTaskCard-withBackground--Y--db{background-color:rgba(0,0,0,.03)}.GenericWorkflowTaskCard-lineWrapper--15MN6{position:relative}.GenericWorkflowTaskCard-icon--eoHOp{height:32px;left:16px;position:absolute;top:8px;width:32px;z-index:1}.GenericWorkflowTaskCard-line--Z1Emv{border-left:3px solid var(--workflow-color);bottom:0;left:0;position:absolute;top:0}.GenericWorkflowTaskCard-info--2OyKu{color:rgba(0,0,0,.54);font-size:13px;word-wrap:break-word;line-height:15px}.GenericWorkflowTaskCard-bottomInfo--4bsc4{align-items:flex-start;display:flex}.GenericWorkflowTaskCard-commentsInfo--Q6M07{align-items:center;display:flex;margin-bottom:-4px;margin-top:7px}.GenericWorkflowTaskCard-commentsIcon--crUiN{height:11px;margin-left:2px;margin-right:6px;margin-top:-2px;width:11px}.GenericWorkflowTaskCard-infoValue---gkaX{color:rgba(0,0,0,.87)}.GenericWorkflowTaskCard-infoBlock--VyI2O{display:flex;flex-direction:row;margin-bottom:5px}.GenericWorkflowTaskCard-header--bN0nh{display:flex;flex-direction:row;padding-bottom:12px}.GenericWorkflowTaskCard-flex--5oWde{flex:1}.GenericWorkflowTaskCard-caption--vxnNJ{color:rgba(0,0,0,.87);font-size:16px}.GenericWorkflowTaskCard-title--zyCft{align-items:center;display:flex;flex-direction:row;margin-bottom:-4px}.GenericWorkflowTaskCard-flag--dfydb{height:13px;width:13px;stroke:#000;fill:none;margin:2px 5px 0}.GenericWorkflowTaskCard-date--MHd-G{color:rgba(0,0,0,.87);font-size:13px}.GenericWorkflowTaskCard-mainInfo--l5b9R{display:flex;flex:1;flex-direction:column}.GenericWorkflowTaskCard-controlsBox--ZHDhQ{margin-bottom:12px;margin-right:16px;margin-top:13px}.GenericWorkflowTaskCard-controlsInRow--c48Nv{align-items:center;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px}.GenericWorkflowTaskCard-priority--xnnl9{width:162px}.GenericWorkflowTaskCard-comments--OG-db{margin-left:11px}.GenericWorkflowTaskCard-customActionsSlot--J-mXk{display:flex;flex-grow:1;justify-content:flex-end;margin-right:-30px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/WorkflowTaskCard/components/GenericWorkflowTaskCard/GenericWorkflowTaskCard.spec.js

@@ -57,7 +57,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import React from 'react';
 import i18n from 'ui-i18n';
 import { identity } from 'ramda';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createTheme } from '@mui/material/styles';
 import { ThemeProvider } from '@mui/styles';
@@ -71,6 +71,7 @@ import { CommentDialogProvider } from '../../../../../contexts/CommentDialogCont
 import { ErrorPopup } from '../../../../../ErrorPopup';
 import { getDefaultTask } from './task.test-data';
 import { GenericWorkflowTaskCard } from './GenericWorkflowTaskCard';
+import { ReviewDCRButton } from '../../../ReviewDCRButton';
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { runTaskAction: jest.fn().mockReturnValue(Promise.resolve()), getAssigneeForTask: jest.fn().mockResolvedValue({ data: ['assignee1', 'assignee2'] }), addCommentForTask: jest.fn().mockResolvedValue({ status: 'success' }), getTaskById: jest.fn() })); });
 var onActionSuccess = jest.fn();
 var workflowTaskContextValue = { onActionSuccess: onActionSuccess };
@@ -102,14 +103,14 @@ var defaultMdmValues = {
 var errorSet = jest.fn();
 var defaultTask = getDefaultTask();
 var setUp = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.mdmValues, mdmValues = _c === void 0 ? defaultMdmValues : _c, _d = _b.task, task = _d === void 0 ? defaultTask : _d;
+    var _b = _a === void 0 ? {} : _a, _c = _b.mdmValues, mdmValues = _c === void 0 ? defaultMdmValues : _c, _d = _b.task, task = _d === void 0 ? defaultTask : _d, customActionsSlot = _b.customActionsSlot;
     var user = userEvent.setup();
     return __assign(__assign({}, render(React.createElement(MdmModuleProvider, { values: mdmValues, actions: { errorSet: errorSet } },
         React.createElement(ThemeProvider, { theme: createTheme(theme) },
             React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
                 React.createElement(CommentDialogProvider, null,
                     React.createElement(WorkflowTasksContext.Provider, { value: workflowTaskContextValue },
-                        React.createElement(GenericWorkflowTaskCard, { task: task },
+                        React.createElement(GenericWorkflowTaskCard, { task: task, customActionsSlot: customActionsSlot },
                             React.createElement("div", { className: "someChildren" }, "some children")),
                         React.createElement(ErrorPopup, { showErrorFromStore: true })))))))), { user: user });
 };
@@ -451,4 +452,125 @@ describe('GenericWorkflowTaskCard tests', function () {
             }
         });
     }); });
+    it('should render custom actions slot if it is provided', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var openReviewDialog, user, reviewDCRButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    openReviewDialog = jest.fn();
+                    user = setUp({ customActionsSlot: React.createElement(ReviewDCRButton, { onClick: openReviewDialog }) }).user;
+                    reviewDCRButton = screen.getByRole('button', { name: 'Review DCR' });
+                    expect(reviewDCRButton).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(reviewDCRButton)];
+                case 1:
+                    _a.sent();
+                    expect(openReviewDialog).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('Required comments', function () {
+        it('should show comment dialog when user runs action and comment is required', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var task, user, dialog, comment, commentInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        task = __assign(__assign({}, defaultTask), { possibleActions: [
+                                {
+                                    action: 'Delete',
+                                    label: 'Delete',
+                                    commentRequired: true
+                                },
+                                {
+                                    action: 'Cancel',
+                                    label: 'Cancel',
+                                    commentRequired: false
+                                }
+                            ] });
+                        user = setUp({ task: task }).user;
+                        return [4 /*yield*/, user.click(screen.getByTestId('task-actions'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText(task.possibleActions[0].label))];
+                    case 2:
+                        _a.sent();
+                        expect(runTaskAction).not.toHaveBeenCalled();
+                        dialog = screen.getAllByRole('presentation')[1];
+                        expect(within(dialog).getByText('Please provide a comment for your action')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Type a comment')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Cancel')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Done')).toBeInTheDocument();
+                        comment = 'comment';
+                        commentInput = screen.getAllByRole('textbox')[0];
+                        return [4 /*yield*/, user.click(commentInput)];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste(comment)];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(within(screen.getAllByRole('presentation')[1]).getByText('Done'))];
+                    case 5:
+                        _a.sent();
+                        expect(runTaskAction).toHaveBeenCalledWith({
+                            workflowPath: workflowPath,
+                            environment: workflowEnvironmentUrl,
+                            tenant: tenant.id,
+                            taskId: defaultTask.taskId,
+                            action: defaultTask.possibleActions[0].action,
+                            processInstanceComment: comment
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not show comment dialog when user types comment and run action', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var task, user, comment, commentInput;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        task = __assign(__assign({}, defaultTask), { possibleActions: [
+                                {
+                                    action: 'Delete',
+                                    label: 'Delete',
+                                    commentRequired: true
+                                },
+                                {
+                                    action: 'Cancel',
+                                    label: 'Cancel',
+                                    commentRequired: false
+                                }
+                            ] });
+                        user = setUp({ task: task }).user;
+                        return [4 /*yield*/, user.click(screen.getByTestId('collapse-button'))];
+                    case 1:
+                        _b.sent();
+                        comment = 'comment';
+                        commentInput = screen.getByPlaceholderText('Write a comment');
+                        return [4 /*yield*/, user.click(commentInput)];
+                    case 2:
+                        _b.sent();
+                        return [4 /*yield*/, user.paste(comment)];
+                    case 3:
+                        _b.sent();
+                        return [4 /*yield*/, user.click(screen.getByRole('button', { name: (_a = task.preferredAction) === null || _a === void 0 ? void 0 : _a.label }))];
+                    case 4:
+                        _b.sent();
+                        return [4 /*yield*/, user.click(screen.getByTestId("reltio-profile-select-mode-".concat(task.possibleActions[0].label)))];
+                    case 5:
+                        _b.sent();
+                        expect(screen.queryByText('Please provide a comment for your action')).not.toBeInTheDocument();
+                        expect(runTaskAction).toHaveBeenCalledWith({
+                            workflowPath: workflowPath,
+                            environment: workflowEnvironmentUrl,
+                            tenant: tenant.id,
+                            taskId: defaultTask.taskId,
+                            action: defaultTask.possibleActions[0].action,
+                            processInstanceComment: comment
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/features/workflow/WorkflowTaskCard/components/PotentialMatchTaskCard/PotentialMatchTaskCard.spec.js

@@ -46,25 +46,32 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ActivityFilter } from '@reltio/mdm-sdk';
+import { ActivityFilter, runTaskAction } from '@reltio/mdm-sdk';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { MdmModuleProvider } from '../../../../../contexts/MdmModuleContext';
 import { CommentDialogProvider } from '../../../../../contexts/CommentDialogContext';
 import { PotentialMatchTaskCard } from './PotentialMatchTaskCard';
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { runTaskAction: jest.fn() })); });
 describe('PotentialMatchTaskCard tests', function () {
+    var tenant = { id: 't1', name: 't1' };
+    var workflowPath = 'workflowPath';
+    var workflowEnvironmentUrl = 'workflowEnvironmentUrl';
     var mdmValues = {
         metadata: { entityTypes: [], relationTypes: [] },
         entity: { uri: 'entities/uri1', type: 'configuration/entityTypes/HCO' },
-        tenant: { id: 't1', name: 't1' },
+        tenant: tenant,
+        workflowPath: workflowPath,
+        workflowEnvironmentUrl: workflowEnvironmentUrl,
+        user: { username: 'egorshkov' },
         dtssPath: 'path',
         dataTenants: [],
         activityFilter: ActivityFilter.ACTIVE_ONLY
     };
     var relatedEntityUri = 'entities/6hj8baQ';
-    var task = {
+    var defaultTask = {
         assignee: 'egorshkov',
         objectURIs: [relatedEntityUri, 'entities/1RdgehCi'],
         createdBy: 'egorshkov',
@@ -98,7 +105,7 @@ describe('PotentialMatchTaskCard tests', function () {
             uri: 'entities/6hj8baQ'
         }
     };
-    var defaultProps = { task: task, match: match, entitiesMap: entitiesMap };
+    var defaultProps = { task: defaultTask, match: match, entitiesMap: entitiesMap };
     var setUp = function (props) {
         if (props === void 0) { props = {}; }
         var user = userEvent.setup();
@@ -110,6 +117,9 @@ describe('PotentialMatchTaskCard tests', function () {
         };
         return __assign({ user: user }, render(React.createElement(PotentialMatchTaskCard, __assign({}, defaultProps, props)), { wrapper: Providers }));
     };
+    beforeAll(function () {
+        runTaskAction.mockResolvedValue(null);
+    });
     afterEach(function () {
         jest.clearAllMocks();
     });
@@ -158,4 +168,60 @@ describe('PotentialMatchTaskCard tests', function () {
             }
         });
     }); });
+    describe('Required comments', function () {
+        it('should show comment dialog when user runs action and comment is required', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var task, user, dialog, comment, commentInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        task = __assign(__assign({}, defaultTask), { isOpen: true, possibleActions: [
+                                {
+                                    action: 'Approve',
+                                    label: 'Approve',
+                                    commentRequired: true
+                                },
+                                {
+                                    action: 'Reject',
+                                    label: 'Reject',
+                                    commentRequired: false
+                                }
+                            ] });
+                        user = setUp({ task: task }).user;
+                        return [4 /*yield*/, user.click(screen.getByTestId('task-actions'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText(task.possibleActions[0].label))];
+                    case 2:
+                        _a.sent();
+                        expect(runTaskAction).not.toHaveBeenCalled();
+                        dialog = screen.getAllByRole('presentation')[1];
+                        expect(within(dialog).getByText('Please provide a comment for your action')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Type a comment')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Cancel')).toBeInTheDocument();
+                        expect(within(dialog).getByText('Done')).toBeInTheDocument();
+                        comment = 'Some comment';
+                        commentInput = screen.getAllByRole('textbox')[0];
+                        return [4 /*yield*/, user.click(commentInput)];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste(comment)];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(within(dialog).getByText('Done'))];
+                    case 5:
+                        _a.sent();
+                        expect(screen.queryByText('Please provide a comment for your action')).not.toBeInTheDocument();
+                        expect(runTaskAction).toHaveBeenCalledWith({
+                            workflowPath: workflowPath,
+                            environment: workflowEnvironmentUrl,
+                            tenant: tenant.id,
+                            taskId: task.taskId,
+                            action: task.possibleActions[0].action,
+                            processInstanceComment: comment
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/features/workflow/index.d.ts

@@ -5,6 +5,8 @@ export { AssigneeSelector } from './AssigneeSelector';
 export { ReassignButton } from './ReassignButton';
 export { WorkflowComments } from './WorkflowComments';
 export { TaskActionButtons } from './TaskActionButtons';
+export { ReviewDCRButton } from './ReviewDCRButton';
+export { ReviewDCRDialog } from './ReviewDCRDialog';
 export { useWorkflowAssignee } from './hooks/useWorkflowAssignee';
 export { useWorkflowComments } from './hooks/useWorkflowComments';
 export { useWorkflowActions } from './hooks/useWorkflowActions';