@reltio/components 1.4.2190 → 1.4.2191

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TaskAction } from '../types';
+type Props = {
+    workflowActions: TaskAction[];
+    actionRequestIsInProgress?: boolean;
+    preferredAction?: {
+        label: string;
+    };
+    comment?: string;
+};
+export declare const WorkflowActionButtons: ({ workflowActions: actions, actionRequestIsInProgress, preferredAction, comment }: Props) => React.JSX.Element;
+export {};

package/features/workflow/WorkflowActionButtons/WorkflowActionButtons.js

@@ -0,0 +1,27 @@
+import React, { useMemo, useState } from 'react';
+import Button from '@mui/material/Button';
+import { ModeSwitcherSelect } from '../../../ModeSwitcherSelect';
+export var WorkflowActionButtons = function (_a) {
+    var actions = _a.workflowActions, actionRequestIsInProgress = _a.actionRequestIsInProgress, preferredAction = _a.preferredAction, _b = _a.comment, comment = _b === void 0 ? '' : _b;
+    var _c = 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 = _c[0], setCurrentAction = _c[1];
+    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]);
+    if (buttonsGroup.length === 0) {
+        return null;
+    }
+    if (buttonsGroup.length === 1) {
+        return (React.createElement(Button, { variant: "outlined", onClick: buttonsGroup[0].onClick, disabled: actionRequestIsInProgress, size: "small" }, buttonsGroup[0].label));
+    }
+    return (React.createElement(ModeSwitcherSelect, { buttonsGroup: buttonsGroup, value: currentAction, loading: actionRequestIsInProgress, disabled: actionRequestIsInProgress }));
+};

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/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

@@ -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,6 +452,23 @@ 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;

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';

package/features/workflow/index.js

@@ -6,6 +6,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';
 // hooks
 export { useWorkflowAssignee } from './hooks/useWorkflowAssignee';
 export { useWorkflowComments } from './hooks/useWorkflowComments';

package/icons/RequestSummary.d.ts

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

package/icons/RequestSummary.js

@@ -0,0 +1,19 @@
+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);
+};
+import React from 'react';
+var SvgRequestSummary = function (props) {
+    return (React.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.createElement("ellipse", { cx: "15.972", cy: "16", rx: "15.972", ry: "16", fill: "#1D4E99" }),
+        React.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.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" })));
+};
+export default SvgRequestSummary;

package/icons/ReviewDCR.d.ts

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

package/icons/ReviewDCR.js

@@ -0,0 +1,17 @@
+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);
+};
+import React from 'react';
+var SvgReviewDCR = function (props) {
+    return (React.createElement("svg", __assign({ width: "16", height: "15", viewBox: "0 0 16 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.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" })));
+};
+export default SvgReviewDCR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2190",
+  "version": "1.4.2191",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -11,7 +11,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1995",
+    "@reltio/mdm-sdk": "^1.4.1996",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",

package/ProfileBand/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inactive" | "label" | "secondaryLabel" | "profileBand" | "entityType" | "entityId" | "profileIcon" | "profileBandWrapper" | "imageProfileIcon" | "profileInfo" | "badge" | "businessCard" | "specialInfo">;

package/ProfileBand/styles.js

@@ -1,87 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function (theme) { return ({
-    profileBandWrapper: {
-        // especially for IE (overflow fix)
-        flexShrink: 0
-    },
-    profileBand: {
-        display: 'flex',
-        padding: '16px 12px 16px 16px',
-        alignItems: 'flex-start',
-        backgroundColor: '#fff',
-        boxShadow: '0px 1px 0px rgba(0, 0, 0, 0.12)',
-        marginBottom: '1px',
-        '&:after': {
-            // IE workaround for minHeight and centering items
-            content: '""',
-            minHeight: 'inherit',
-            fontSize: 0
-        }
-    },
-    inactive: {
-        background: theme.inactiveBackground
-    },
-    profileIcon: {
-        marginRight: '12px'
-    },
-    imageProfileIcon: {
-        width: '48px',
-        height: '48px'
-    },
-    profileInfo: {
-        display: 'flex',
-        flexDirection: 'column',
-        flex: '1 1 50%'
-    },
-    badge: {},
-    label: {
-        lineHeight: '1.2',
-        letterSpacing: '0.25px',
-        color: theme.palette.text.primary,
-        wordBreak: 'break-word',
-        whiteSpace: 'break-spaces',
-        '&+ $specialInfo': {
-            marginTop: '4px'
-        }
-    },
-    secondaryLabel: {
-        display: 'inline-flex',
-        color: theme.palette.text.primary,
-        marginTop: '2px',
-        lineHeight: '16px',
-        fontSize: '14px',
-        fontWeight: 400,
-        whiteSpace: 'break-spaces',
-        '&+ $businessCard': {
-            marginLeft: '12px'
-        }
-    },
-    businessCard: {
-        color: theme.palette.text.secondary,
-        display: 'inline-flex',
-        fontSize: '14px',
-        marginTop: '4px',
-        lineHeight: '1.2',
-        whiteSpace: 'break-spaces'
-    },
-    specialInfo: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        flexWrap: 'wrap',
-        width: '100%',
-        marginTop: '8px'
-    },
-    entityType: {
-        display: 'flex',
-        flexWrap: 'wrap'
-    },
-    entityId: {
-        fontSize: '13px',
-        color: theme.palette.text.secondary,
-        whiteSpace: 'nowrap',
-        cursor: 'pointer',
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}); });

package/cjs/ProfileBand/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inactive" | "label" | "secondaryLabel" | "profileBand" | "entityType" | "entityId" | "profileIcon" | "profileBandWrapper" | "imageProfileIcon" | "profileInfo" | "badge" | "businessCard" | "specialInfo">;

package/cjs/ProfileBand/styles.js

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
-    profileBandWrapper: {
-        // especially for IE (overflow fix)
-        flexShrink: 0
-    },
-    profileBand: {
-        display: 'flex',
-        padding: '16px 12px 16px 16px',
-        alignItems: 'flex-start',
-        backgroundColor: '#fff',
-        boxShadow: '0px 1px 0px rgba(0, 0, 0, 0.12)',
-        marginBottom: '1px',
-        '&:after': {
-            // IE workaround for minHeight and centering items
-            content: '""',
-            minHeight: 'inherit',
-            fontSize: 0
-        }
-    },
-    inactive: {
-        background: theme.inactiveBackground
-    },
-    profileIcon: {
-        marginRight: '12px'
-    },
-    imageProfileIcon: {
-        width: '48px',
-        height: '48px'
-    },
-    profileInfo: {
-        display: 'flex',
-        flexDirection: 'column',
-        flex: '1 1 50%'
-    },
-    badge: {},
-    label: {
-        lineHeight: '1.2',
-        letterSpacing: '0.25px',
-        color: theme.palette.text.primary,
-        wordBreak: 'break-word',
-        whiteSpace: 'break-spaces',
-        '&+ $specialInfo': {
-            marginTop: '4px'
-        }
-    },
-    secondaryLabel: {
-        display: 'inline-flex',
-        color: theme.palette.text.primary,
-        marginTop: '2px',
-        lineHeight: '16px',
-        fontSize: '14px',
-        fontWeight: 400,
-        whiteSpace: 'break-spaces',
-        '&+ $businessCard': {
-            marginLeft: '12px'
-        }
-    },
-    businessCard: {
-        color: theme.palette.text.secondary,
-        display: 'inline-flex',
-        fontSize: '14px',
-        marginTop: '4px',
-        lineHeight: '1.2',
-        whiteSpace: 'break-spaces'
-    },
-    specialInfo: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        flexWrap: 'wrap',
-        width: '100%',
-        marginTop: '8px'
-    },
-    entityType: {
-        display: 'flex',
-        flexWrap: 'wrap'
-    },
-    entityId: {
-        fontSize: '13px',
-        color: theme.palette.text.secondary,
-        whiteSpace: 'nowrap',
-        cursor: 'pointer',
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}); });

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

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "title" | "filledInputRoot" | "commentsContainer" | "modeSwitcherWrapper" | "sendButton">;

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

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function (_theme) { return ({
-    container: {
-        padding: '5px 0',
-        display: 'flex',
-        flexDirection: 'column'
-    },
-    commentsContainer: {
-        maxHeight: '300px',
-        overflowY: 'auto'
-    },
-    title: {
-        margin: '0 0 8px 5px',
-        fontSize: '14px',
-        color: 'rgba(0, 0, 0, 0.87)'
-    },
-    filledInputRoot: {
-        backgroundColor: 'rgba(0, 0, 0, 0.03)',
-        padding: '10px 6px',
-        minHeight: '40px',
-        margin: '10px 17px 0 6px',
-        fontSize: '14px',
-        '&:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0.03)'
-        },
-        '&.focused': {
-            backgroundColor: 'rgba(0, 0, 0, 0.03)'
-        }
-    },
-    modeSwitcherWrapper: {
-        marginLeft: 'auto',
-        marginRight: '16px',
-        marginTop: '8px'
-    },
-    sendButton: {
-        alignSelf: 'end',
-        marginBottom: '10px'
-    }
-}); });