@reltio/components 1.4.2189 → 1.4.2191

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

@@ -69,8 +69,11 @@ var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
 var CommentDialogContext_1 = require("../../../../../contexts/CommentDialogContext");
 var DataChangeRequestTaskCard_1 = require("./DataChangeRequestTaskCard");
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getDataChangeRequest: jest.fn(), getEntitiesByUris: jest.fn() })); });
+var WorkflowTasksContext_1 = require("../../../../../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 = {
@@ -180,7 +183,7 @@ describe('DataChangeRequestTaskCard tests', function () {
     var dcrUri = "changeRequests/".concat(dcrId);
     var dueDate = 1731825314640;
     var newStartDate = (0, moment_1.default)('11/15/2024', 'MM/DD/YYYY').valueOf();
-    var task = {
+    var defaultTask = {
         assignee: userName,
         processInstanceId: '60260030',
         processType: 'dataChangeRequestReview',
@@ -260,17 +263,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 = user_event_1.default.setup();
         var Providers = function (_a) {
             var children = _a.children;
-            return (react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
-                react_1.default.createElement(CommentDialogContext_1.CommentDialogProvider, null, children)));
+            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues },
+                react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
+                    react_1.default.createElement(WorkflowTasksContext_1.WorkflowTasksContext.Provider, { value: workflowTaskContextValue },
+                        react_1.default.createElement(CommentDialogContext_1.CommentDialogProvider, null, children)))));
         };
         return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(DataChangeRequestTaskCard_1.DataChangeRequestTaskCard, { task: task }), { wrapper: Providers })), { user: user });
     };
     beforeAll(function () {
         mdm_sdk_1.getEntitiesByUris.mockResolvedValue(entities);
+        mdm_sdk_1.runTaskAction.mockResolvedValue(null);
     });
     beforeEach(function () {
         MdmModuleContext_1.useMdmMetadata.mockReturnValue(metadata);
@@ -517,4 +535,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
+                                }
+                            ] });
+                        mdm_sdk_1.getDataChangeRequest.mockResolvedValue(dcr);
+                        user = setUp({ task: task }).user;
+                        return [4 /*yield*/, user.click(react_2.screen.getByTestId('task-actions'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText(task.possibleActions[0].label))];
+                    case 2:
+                        _a.sent();
+                        expect(mdm_sdk_1.runTaskAction).not.toHaveBeenCalled();
+                        dialog = react_2.screen.getAllByRole('presentation')[1];
+                        expect((0, react_2.within)(dialog).getByText('Please provide a comment for your action')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Type a comment')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Cancel')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Done')).toBeInTheDocument();
+                        comment = 'Some comment';
+                        commentInput = react_2.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((0, react_2.within)(dialog).getByText('Done'))];
+                    case 5:
+                        _a.sent();
+                        expect(react_2.screen.queryByText('Please provide a comment for your action')).not.toBeInTheDocument();
+                        expect(mdm_sdk_1.runTaskAction).toHaveBeenCalledWith({
+                            workflowPath: workflowPath,
+                            environment: workflowEnvironmentUrl,
+                            tenant: tenant.id,
+                            taskId: task.taskId,
+                            action: task.possibleActions[0].action,
+                            processInstanceComment: comment
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/cjs/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/cjs/features/workflow/WorkflowTaskCard/components/GenericWorkflowTaskCard/GenericWorkflowTaskCard.js

@@ -44,14 +44,13 @@ var useWorkflowCheckPermission_1 = require("../../../hooks/useWorkflowCheckPermi
 var CollaborationIcon_1 = __importDefault(require("../../../../../icons/CollaborationIcon"));
 var useWorkflowActions_1 = require("../../../hooks/useWorkflowActions");
 var common_1 = require("../../../helpers/common");
-var styles_1 = require("./styles");
+var GenericWorkflowTaskCard_module_css_1 = __importDefault(require("./GenericWorkflowTaskCard.module.css"));
 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 = (0, common_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');
@@ -61,52 +60,54 @@ var GenericWorkflowTaskCard = function (_a) {
         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 },
-                react_1.default.createElement("div", { className: styles.line }),
-                Icon && react_1.default.createElement(Icon, { className: styles.icon }),
+    return (react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.card },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)((_b = {}, _b[GenericWorkflowTaskCard_module_css_1.default.withBackground] = isExpanded, _b)) },
+            react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.lineWrapper, style: { '--workflow-color': color } },
+                react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.line }),
+                Icon && react_1.default.createElement(Icon, { className: GenericWorkflowTaskCard_module_css_1.default.icon }),
                 react_1.default.createElement(LineDecorator_1.LineDecorator, { plain: true, first: true, transparent: !isExpanded },
-                    react_1.default.createElement("div", { className: styles.mainInfo },
-                        react_1.default.createElement("div", { className: styles.title },
-                            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.caption, styles.flex) }, ui_i18n_1.default.text(processDefinitionDisplayName)),
-                            react_1.default.createElement(Flag_1.default, { className: styles.flag }),
+                    react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.mainInfo },
+                        react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.title },
+                            react_1.default.createElement("div", { className: (0, classnames_1.default)(GenericWorkflowTaskCard_module_css_1.default.caption, GenericWorkflowTaskCard_module_css_1.default.flex) }, ui_i18n_1.default.text(processDefinitionDisplayName)),
+                            react_1.default.createElement(Flag_1.default, { className: GenericWorkflowTaskCard_module_css_1.default.flag }),
                             react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Due date') },
-                                react_1.default.createElement("span", { className: styles.date }, ui_i18n_1.default.date(dueDate, 'L'))),
+                                react_1.default.createElement("span", { className: GenericWorkflowTaskCard_module_css_1.default.date }, ui_i18n_1.default.date(dueDate, 'L'))),
                             react_1.default.createElement(CollapseButton_1.CollapseButton, { isOpen: isExpanded, size: "L", onClick: function () {
                                     setExpanded(!isExpanded);
                                 } })),
-                        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 },
+                        react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.infoBlock, "data-reltio-id": "info-block" },
+                            react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.flex },
+                                dcrId && (react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.info },
                                     ui_i18n_1.default.text('DCR ID'),
                                     ': ',
-                                    react_1.default.createElement("span", { className: styles.infoValue }, dcrId))),
-                                react_1.default.createElement("div", { className: styles.info },
+                                    react_1.default.createElement("span", { className: GenericWorkflowTaskCard_module_css_1.default.infoValue }, dcrId))),
+                                react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.info },
                                     ui_i18n_1.default.text('Created by'),
                                     ': ',
-                                    react_1.default.createElement("span", { className: styles.infoValue }, createdBy),
+                                    react_1.default.createElement("span", { className: GenericWorkflowTaskCard_module_css_1.default.infoValue }, createdBy),
                                     " ",
                                     ui_i18n_1.default.text('on'),
                                     ' ',
-                                    react_1.default.createElement("span", { className: styles.infoValue }, ui_i18n_1.default.date(createTime, 'L'))),
-                                react_1.default.createElement("div", { className: styles.info },
+                                    react_1.default.createElement("span", { className: GenericWorkflowTaskCard_module_css_1.default.infoValue }, ui_i18n_1.default.date(createTime, 'L'))),
+                                react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.info },
                                     ui_i18n_1.default.text('Step'),
                                     ': ',
-                                    react_1.default.createElement("span", { className: styles.infoValue }, step)),
-                                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)))),
+                                    react_1.default.createElement("span", { className: GenericWorkflowTaskCard_module_css_1.default.infoValue }, step)),
+                                react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.bottomInfo },
+                                    canViewComments && (processInstanceComments === null || processInstanceComments === void 0 ? void 0 : processInstanceComments.length) > 0 && (react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.commentsInfo },
+                                        react_1.default.createElement(CollaborationIcon_1.default, { className: GenericWorkflowTaskCard_module_css_1.default.commentsIcon }),
+                                        react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.infoValue }, processInstanceComments.length))),
+                                    customActionsSlot && (react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.customActionsSlot }, customActionsSlot)))),
                             actions || (react_1.default.createElement(TaskActions_1.TaskActions, { actions: workflowActions, isInProgress: actionRequestIsInProgress })))))),
             isExpanded && (react_1.default.createElement(LineDecorator_1.LineDecorator, { plain: true },
-                react_1.default.createElement("div", { className: styles.controlsBox },
-                    react_1.default.createElement("div", { className: styles.controlsInRow },
+                react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.controlsBox },
+                    react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.controlsInRow },
                         react_1.default.createElement(DueDateField_1.DueDateField, { taskId: taskId, dueDate: dueDate, isTaskOpen: isTaskOpen }),
-                        react_1.default.createElement(PrioritySelector_1.PrioritySelector, { taskId: taskId, priority: priority, className: styles.priority, isTaskOpen: isTaskOpen })),
+                        react_1.default.createElement(PrioritySelector_1.PrioritySelector, { taskId: taskId, priority: priority, className: GenericWorkflowTaskCard_module_css_1.default.priority, isTaskOpen: isTaskOpen })),
                     react_1.default.createElement(AssigneeSelector_1.AssigneeSelector, { taskId: taskId, assignee: assignee, isTaskOpen: isTaskOpen }))))),
         isExpanded && (react_1.default.createElement(react_1.default.Fragment, null,
             children,
-            canViewComments && (react_1.default.createElement("div", { className: styles.comments },
+            canViewComments && (react_1.default.createElement("div", { className: GenericWorkflowTaskCard_module_css_1.default.comments },
                 react_1.default.createElement(WorkflowComments_1.WorkflowComments, { workflowActions: workflowActions, actionRequestIsInProgress: actionRequestIsInProgress, preferredAction: preferredAction, taskId: taskId, processInstanceComments: processInstanceComments, isTaskOpen: isTaskOpen })))))));
 };
 exports.GenericWorkflowTaskCard = GenericWorkflowTaskCard;

package/cjs/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);
+}
+module.exports = styles;

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

@@ -76,6 +76,7 @@ var CommentDialogContext_1 = require("../../../../../contexts/CommentDialogConte
 var ErrorPopup_1 = require("../../../../../ErrorPopup");
 var task_test_data_1 = require("./task.test-data");
 var GenericWorkflowTaskCard_1 = require("./GenericWorkflowTaskCard");
+var ReviewDCRButton_1 = require("../../../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 };
@@ -107,14 +108,14 @@ var defaultMdmValues = {
 var errorSet = jest.fn();
 var defaultTask = (0, task_test_data_1.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 = user_event_1.default.setup();
     return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: { errorSet: errorSet } },
         react_1.default.createElement(styles_2.ThemeProvider, { theme: (0, styles_1.createTheme)(constants_1.theme) },
             react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
                 react_1.default.createElement(CommentDialogContext_1.CommentDialogProvider, null,
                     react_1.default.createElement(WorkflowTasksContext_1.WorkflowTasksContext.Provider, { value: workflowTaskContextValue },
-                        react_1.default.createElement(GenericWorkflowTaskCard_1.GenericWorkflowTaskCard, { task: task },
+                        react_1.default.createElement(GenericWorkflowTaskCard_1.GenericWorkflowTaskCard, { task: task, customActionsSlot: customActionsSlot },
                             react_1.default.createElement("div", { className: "someChildren" }, "some children")),
                         react_1.default.createElement(ErrorPopup_1.ErrorPopup, { showErrorFromStore: true })))))))), { user: user });
 };
@@ -456,4 +457,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_1.default.createElement(ReviewDCRButton_1.ReviewDCRButton, { onClick: openReviewDialog }) }).user;
+                    reviewDCRButton = react_2.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(react_2.screen.getByTestId('task-actions'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText(task.possibleActions[0].label))];
+                    case 2:
+                        _a.sent();
+                        expect(mdm_sdk_1.runTaskAction).not.toHaveBeenCalled();
+                        dialog = react_2.screen.getAllByRole('presentation')[1];
+                        expect((0, react_2.within)(dialog).getByText('Please provide a comment for your action')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Type a comment')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Cancel')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Done')).toBeInTheDocument();
+                        comment = 'comment';
+                        commentInput = react_2.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((0, react_2.within)(react_2.screen.getAllByRole('presentation')[1]).getByText('Done'))];
+                    case 5:
+                        _a.sent();
+                        expect(mdm_sdk_1.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(react_2.screen.getByTestId('collapse-button'))];
+                    case 1:
+                        _b.sent();
+                        comment = 'comment';
+                        commentInput = react_2.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(react_2.screen.getByRole('button', { name: (_a = task.preferredAction) === null || _a === void 0 ? void 0 : _a.label }))];
+                    case 4:
+                        _b.sent();
+                        return [4 /*yield*/, user.click(react_2.screen.getByTestId("reltio-profile-select-mode-".concat(task.possibleActions[0].label)))];
+                    case 5:
+                        _b.sent();
+                        expect(react_2.screen.queryByText('Please provide a comment for your action')).not.toBeInTheDocument();
+                        expect(mdm_sdk_1.runTaskAction).toHaveBeenCalledWith({
+                            workflowPath: workflowPath,
+                            environment: workflowEnvironmentUrl,
+                            tenant: tenant.id,
+                            taskId: defaultTask.taskId,
+                            action: defaultTask.possibleActions[0].action,
+                            processInstanceComment: comment
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

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

@@ -59,17 +59,24 @@ var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
 var CommentDialogContext_1 = require("../../../../../contexts/CommentDialogContext");
 var PotentialMatchTaskCard_1 = require("./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: mdm_sdk_1.ActivityFilter.ACTIVE_ONLY
     };
     var relatedEntityUri = 'entities/6hj8baQ';
-    var task = {
+    var defaultTask = {
         assignee: 'egorshkov',
         objectURIs: [relatedEntityUri, 'entities/1RdgehCi'],
         createdBy: 'egorshkov',
@@ -103,7 +110,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 = user_event_1.default.setup();
@@ -115,6 +122,9 @@ describe('PotentialMatchTaskCard tests', function () {
         };
         return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(PotentialMatchTaskCard_1.PotentialMatchTaskCard, __assign({}, defaultProps, props)), { wrapper: Providers }));
     };
+    beforeAll(function () {
+        mdm_sdk_1.runTaskAction.mockResolvedValue(null);
+    });
     afterEach(function () {
         jest.clearAllMocks();
     });
@@ -163,4 +173,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(react_2.screen.getByTestId('task-actions'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText(task.possibleActions[0].label))];
+                    case 2:
+                        _a.sent();
+                        expect(mdm_sdk_1.runTaskAction).not.toHaveBeenCalled();
+                        dialog = react_2.screen.getAllByRole('presentation')[1];
+                        expect((0, react_2.within)(dialog).getByText('Please provide a comment for your action')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Type a comment')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Cancel')).toBeInTheDocument();
+                        expect((0, react_2.within)(dialog).getByText('Done')).toBeInTheDocument();
+                        comment = 'Some comment';
+                        commentInput = react_2.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((0, react_2.within)(dialog).getByText('Done'))];
+                    case 5:
+                        _a.sent();
+                        expect(react_2.screen.queryByText('Please provide a comment for your action')).not.toBeInTheDocument();
+                        expect(mdm_sdk_1.runTaskAction).toHaveBeenCalledWith({
+                            workflowPath: workflowPath,
+                            environment: workflowEnvironmentUrl,
+                            tenant: tenant.id,
+                            taskId: task.taskId,
+                            action: task.possibleActions[0].action,
+                            processInstanceComment: comment
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/cjs/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';

package/cjs/features/workflow/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findWorkflowDefinitionByType = exports.useWorkflowDefaultActionSuccessHandler = exports.useWorkflowTasks = exports.useWorkflowCheckPermission = exports.useWorkflowActions = exports.useWorkflowComments = exports.useWorkflowAssignee = exports.TaskActionButtons = exports.WorkflowComments = exports.ReassignButton = exports.AssigneeSelector = exports.TaskActions = exports.AddWorkflowButton = exports.WorkflowTaskCard = void 0;
+exports.findWorkflowDefinitionByType = exports.useWorkflowDefaultActionSuccessHandler = exports.useWorkflowTasks = exports.useWorkflowCheckPermission = exports.useWorkflowActions = exports.useWorkflowComments = exports.useWorkflowAssignee = exports.ReviewDCRDialog = exports.ReviewDCRButton = exports.TaskActionButtons = exports.WorkflowComments = exports.ReassignButton = exports.AssigneeSelector = exports.TaskActions = exports.AddWorkflowButton = exports.WorkflowTaskCard = void 0;
 // components
 var WorkflowTaskCard_1 = require("./WorkflowTaskCard");
 Object.defineProperty(exports, "WorkflowTaskCard", { enumerable: true, get: function () { return WorkflowTaskCard_1.WorkflowTaskCard; } });
@@ -16,6 +16,10 @@ var WorkflowComments_1 = require("./WorkflowComments");
 Object.defineProperty(exports, "WorkflowComments", { enumerable: true, get: function () { return WorkflowComments_1.WorkflowComments; } });
 var TaskActionButtons_1 = require("./TaskActionButtons");
 Object.defineProperty(exports, "TaskActionButtons", { enumerable: true, get: function () { return TaskActionButtons_1.TaskActionButtons; } });
+var ReviewDCRButton_1 = require("./ReviewDCRButton");
+Object.defineProperty(exports, "ReviewDCRButton", { enumerable: true, get: function () { return ReviewDCRButton_1.ReviewDCRButton; } });
+var ReviewDCRDialog_1 = require("./ReviewDCRDialog");
+Object.defineProperty(exports, "ReviewDCRDialog", { enumerable: true, get: function () { return ReviewDCRDialog_1.ReviewDCRDialog; } });
 // hooks
 var useWorkflowAssignee_1 = require("./hooks/useWorkflowAssignee");
 Object.defineProperty(exports, "useWorkflowAssignee", { enumerable: true, get: function () { return useWorkflowAssignee_1.useWorkflowAssignee; } });

package/cjs/icons/RequestSummary.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgRequestSummary: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgRequestSummary;

package/cjs/icons/RequestSummary.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SvgRequestSummary = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-reltio-id": "SvgRequestSummary" }, props),
+        react_1.default.createElement("ellipse", { cx: "15.972", cy: "16", rx: "15.972", ry: "16", fill: "#1D4E99" }),
+        react_1.default.createElement("path", { opacity: "0.54", d: "M24.4771 14.7002C23.972 14.3772 23.4183 14.1244 22.8286 13.9561V8.42871H8.50342V19.415H14.8589C14.8411 19.6077 14.8316 19.8027 14.8315 20C14.8315 20.3358 14.8581 20.6657 14.9087 20.9873H6.84521V6.85742H24.4771V14.7002ZM11.8091 17.8428H10.1519V16.2803H11.8091V17.8428ZM16.0483 16.2803C15.7 16.7547 15.4168 17.2799 15.2114 17.8428H13.4575V16.2803H16.0483ZM11.8091 14.708H10.1519V13.1357H11.8091V14.708ZM21.1714 13.7158C21.1496 13.7156 21.1278 13.7148 21.106 13.7148C19.8597 13.7148 18.6995 14.0804 17.7231 14.708H13.4575V13.1357H21.1714V13.7158ZM11.8091 11.5645H10.1519V10.001H11.8091V11.5645ZM21.1714 11.5645H13.4575V10.001H21.1714V11.5645Z", fill: "white" }),
+        react_1.default.createElement("path", { opacity: "0.87", d: "M21.106 14.8574C22.2479 14.8575 23.3031 15.2315 24.1558 15.8633L23.2349 16.7861C22.6252 16.3801 21.8929 16.1426 21.106 16.1426C18.9797 16.1428 17.2565 17.87 17.2563 20C17.2563 22.1301 18.9796 23.8572 21.106 23.8574C23.0435 23.8572 24.6461 22.4229 24.9155 20.5566L26.189 19.2822C26.2217 19.5168 26.2407 19.7564 26.2407 20C26.2407 22.8402 23.9412 25.1424 21.106 25.1426C18.2708 25.1423 15.9722 22.8402 15.9722 20C15.9723 17.16 18.2709 14.8577 21.106 14.8574ZM26.7075 17.208L21.2622 22.6631L20.354 21.7539V21.7529L18.5396 19.9355L19.4468 19.0264L21.2612 20.8438L25.7993 16.2988L26.7075 17.208Z", fill: "white" })));
+};
+exports.default = SvgRequestSummary;

package/cjs/icons/ReviewDCR.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgReviewDCR: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgReviewDCR;

package/cjs/icons/ReviewDCR.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SvgReviewDCR = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: "16", height: "15", viewBox: "0 0 16 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.5 9H5.51415C5.53356 8.74392 5.57268 8.49341 5.63 8.25H2.5V6.75H6.26449C6.43659 6.48075 6.63444 6.2296 6.85458 6H2.5V4.5H10V4.51415C10.1238 4.50477 10.2488 4.5 10.375 4.5C11.0397 4.5 11.673 4.63248 12.25 4.87252V1.5C12.25 0.675 11.575 0 10.75 0H1.75C0.925 0 0.25 0.675 0.25 1.5V11.25C0.25 12.075 0.925 12.75 1.75 12.75H6.85373C6.26293 12.1331 5.8327 11.3608 5.63001 10.5H2.5V9ZM10 3.75H2.5V2.25H10V3.75ZM13.225 11.1675L15.565 13.5L14.5 14.565L12.16 12.225C11.6425 12.555 11.0275 12.75 10.3675 12.75C8.5075 12.75 7 11.2425 7 9.375C7 7.5075 8.5075 6 10.375 6C12.2425 6 13.75 7.5075 13.75 9.375C13.75 10.035 13.555 10.6425 13.225 11.1675ZM10.375 11.25C11.41 11.25 12.25 10.41 12.25 9.375C12.25 8.34 11.41 7.5 10.375 7.5C9.34 7.5 8.5 8.34 8.5 9.375C8.5 10.41 9.34 11.25 10.375 11.25Z", fill: "#0072CE" })));
+};
+exports.default = SvgReviewDCR;

package/contexts/MdmModuleContext/context.d.ts

@@ -56,6 +56,7 @@ export type MdmModuleValuesContextProps = Partial<{
     uiConfigLayout: Layout;
     uiConfigProfile: Profile;
     showMasking: boolean;
+    reviewDCREnabled: boolean;
 }>;
 export type MdmModuleActionsContextProps = Partial<{
     openSearch: (payload: SearchState) => void;
@@ -260,6 +261,7 @@ export declare const MdmModuleValuesContext: import("@fluentui/react-context-sel
     uiConfigLayout: Layout;
     uiConfigProfile: Profile;
     showMasking: boolean;
+    reviewDCREnabled: boolean;
 }>>;
 export declare const MdmModuleListenersContext: import("@fluentui/react-context-selector").Context<Partial<{
     expandInvalidRelatonsListener: (callback: () => void) => (action: any) => void;

package/contexts/MdmModuleContext/hooks.d.ts

@@ -151,3 +151,4 @@ export declare const useMdmListener: <T extends keyof MdmModuleListenersContextP
 export declare const useMdmHiddenAttributes: () => Record<string, string[]>;
 export declare const useMdmControlAttributes: () => string[];
 export declare const useMdmShowMasking: () => boolean;
+export declare const useMdmReviewDCREnabled: () => boolean;