@reltio/components 1.4.2181 → 1.4.2183

package/ActionButton/ActionButton.js

@@ -51,7 +51,7 @@ export var ActionButton = forwardRef(function (_a, ref) {
                     onClick();
                 };
                 var isComplexItem = !!description;
-                return (React.createElement(MenuItem, __assign({ classes: { root: classnames(styles.menuItem, (_a = {}, _a[styles.complexItem] = isComplexItem, _a)) }, onClick: handleClick, ref: ref }, otherProps),
+                return (React.createElement(MenuItem, __assign({ classes: { root: classnames(styles.menuItem, (_a = {}, _a[styles.complexItem] = isComplexItem, _a)) }, disabled: disabled, onClick: handleClick, ref: ref }, otherProps),
                     Icon && (React.createElement(ListItemIcon, null,
                         React.createElement(Icon, null))),
                     React.createElement(ListItemText, { primary: label, secondary: description, classes: {

package/CommentDialog/CommentDialog.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type Props = {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    defaultComment?: string;
+    required?: boolean;
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+};
+export declare const CommentDialog: ({ open, title, confirmLabel, cancelLabel, defaultComment, required, onConfirm, onCancel }: Props) => React.JSX.Element;
+export {};

package/CommentDialog/CommentDialog.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useState } from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import i18n from 'ui-i18n';
+import styles from './CommentDialog.module.css';
+export var CommentDialog = function (_a) {
+    var _b = _a.open, open = _b === void 0 ? true : _b, title = _a.title, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, _c = _a.defaultComment, defaultComment = _c === void 0 ? '' : _c, _d = _a.required, required = _d === void 0 ? true : _d, onConfirm = _a.onConfirm, onCancel = _a.onCancel;
+    var _e = useState(defaultComment || ''), comment = _e[0], setComment = _e[1];
+    var handleChangeComment = useCallback(function (e) {
+        setComment(e.target.value);
+    }, []);
+    var handleConfirm = useCallback(function () {
+        if (required && !comment.trim())
+            return;
+        onConfirm(comment);
+        setComment('');
+    }, [comment, required, onConfirm]);
+    var handleCancel = useCallback(function () {
+        onCancel();
+    }, [onCancel]);
+    var isConfirmDisabled = required && !comment.trim();
+    return (React.createElement(Dialog, { open: open, onClose: handleCancel, fullWidth: true, classes: { paper: styles.dialog } },
+        React.createElement(DialogTitle, { classes: { root: styles.dialogTitle } }, title || i18n.text('Please provide a comment for your action')),
+        React.createElement(DialogContent, { classes: { root: styles.dialogContent } },
+            React.createElement(TextField, { autoFocus: true, multiline: true, minRows: 5, fullWidth: true, variant: "filled", value: comment, size: "small", onChange: handleChangeComment, required: required, InputLabelProps: {
+                    classes: {
+                        root: styles.inputLabelRoot,
+                        asterisk: styles.asterisk
+                    }
+                }, InputProps: {
+                    classes: {
+                        input: styles.input,
+                        formControl: styles.formControl
+                    }
+                }, label: i18n.text('Type a comment') })),
+        React.createElement(DialogActions, { classes: { root: styles.dialogActions } },
+            React.createElement(Button, { onClick: handleCancel }, cancelLabel || i18n.text('Cancel')),
+            React.createElement(Button, { onClick: handleConfirm, disabled: isConfirmDisabled, color: "primary" }, confirmLabel || i18n.text('Done')))));
+};

package/CommentDialog/CommentDialog.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"dialog":"CommentDialog-dialog--28OuU","dialogTitle":"CommentDialog-dialogTitle--mtuLI","dialogContent":"CommentDialog-dialogContent--bx8o1","input":"CommentDialog-input--v9ZO3","formControl":"CommentDialog-formControl--vptF6","inputLabelRoot":"CommentDialog-inputLabelRoot--VGQ5g","dialogActions":"CommentDialog-dialogActions--4669K","asterisk":"CommentDialog-asterisk--8ondZ"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.CommentDialog-dialog--28OuU{width:465px}.CommentDialog-dialogTitle--mtuLI{padding:16px 16px 4px}.CommentDialog-dialogContent--bx8o1{padding:20px 16px}.CommentDialog-input--v9ZO3{font-size:14px;line-height:16px}.CommentDialog-formControl--vptF6{padding-bottom:6px}.CommentDialog-inputLabelRoot--VGQ5g{font-size:14px}.CommentDialog-dialogActions--4669K{border-top:1px solid rgba(0,0,0,.12);padding:4px 2px}.CommentDialog-asterisk--8ondZ{color:red}`;
+    head.appendChild(style);
+}
+export default styles;

package/cjs/ActionButton/ActionButton.js

@@ -80,7 +80,7 @@ exports.ActionButton = (0, react_1.forwardRef)(function (_a, ref) {
                     onClick();
                 };
                 var isComplexItem = !!description;
-                return (react_1.default.createElement(MenuItem_1.default, __assign({ classes: { root: (0, classnames_1.default)(styles.menuItem, (_a = {}, _a[styles.complexItem] = isComplexItem, _a)) }, onClick: handleClick, ref: ref }, otherProps),
+                return (react_1.default.createElement(MenuItem_1.default, __assign({ classes: { root: (0, classnames_1.default)(styles.menuItem, (_a = {}, _a[styles.complexItem] = isComplexItem, _a)) }, disabled: disabled, onClick: handleClick, ref: ref }, otherProps),
                     Icon && (react_1.default.createElement(ListItemIcon_1.default, null,
                         react_1.default.createElement(Icon, null))),
                     react_1.default.createElement(ListItemText_1.default, { primary: label, secondary: description, classes: {

package/cjs/CommentDialog/CommentDialog.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type Props = {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    defaultComment?: string;
+    required?: boolean;
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+};
+export declare const CommentDialog: ({ open, title, confirmLabel, cancelLabel, defaultComment, required, onConfirm, onCancel }: Props) => React.JSX.Element;
+export {};

package/cjs/CommentDialog/CommentDialog.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentDialog = void 0;
+var react_1 = __importStar(require("react"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var CommentDialog_module_css_1 = __importDefault(require("./CommentDialog.module.css"));
+var CommentDialog = function (_a) {
+    var _b = _a.open, open = _b === void 0 ? true : _b, title = _a.title, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, _c = _a.defaultComment, defaultComment = _c === void 0 ? '' : _c, _d = _a.required, required = _d === void 0 ? true : _d, onConfirm = _a.onConfirm, onCancel = _a.onCancel;
+    var _e = (0, react_1.useState)(defaultComment || ''), comment = _e[0], setComment = _e[1];
+    var handleChangeComment = (0, react_1.useCallback)(function (e) {
+        setComment(e.target.value);
+    }, []);
+    var handleConfirm = (0, react_1.useCallback)(function () {
+        if (required && !comment.trim())
+            return;
+        onConfirm(comment);
+        setComment('');
+    }, [comment, required, onConfirm]);
+    var handleCancel = (0, react_1.useCallback)(function () {
+        onCancel();
+    }, [onCancel]);
+    var isConfirmDisabled = required && !comment.trim();
+    return (react_1.default.createElement(Dialog_1.default, { open: open, onClose: handleCancel, fullWidth: true, classes: { paper: CommentDialog_module_css_1.default.dialog } },
+        react_1.default.createElement(DialogTitle_1.default, { classes: { root: CommentDialog_module_css_1.default.dialogTitle } }, title || ui_i18n_1.default.text('Please provide a comment for your action')),
+        react_1.default.createElement(DialogContent_1.default, { classes: { root: CommentDialog_module_css_1.default.dialogContent } },
+            react_1.default.createElement(TextField_1.default, { autoFocus: true, multiline: true, minRows: 5, fullWidth: true, variant: "filled", value: comment, size: "small", onChange: handleChangeComment, required: required, InputLabelProps: {
+                    classes: {
+                        root: CommentDialog_module_css_1.default.inputLabelRoot,
+                        asterisk: CommentDialog_module_css_1.default.asterisk
+                    }
+                }, InputProps: {
+                    classes: {
+                        input: CommentDialog_module_css_1.default.input,
+                        formControl: CommentDialog_module_css_1.default.formControl
+                    }
+                }, label: ui_i18n_1.default.text('Type a comment') })),
+        react_1.default.createElement(DialogActions_1.default, { classes: { root: CommentDialog_module_css_1.default.dialogActions } },
+            react_1.default.createElement(Button_1.default, { onClick: handleCancel }, cancelLabel || ui_i18n_1.default.text('Cancel')),
+            react_1.default.createElement(Button_1.default, { onClick: handleConfirm, disabled: isConfirmDisabled, color: "primary" }, confirmLabel || ui_i18n_1.default.text('Done')))));
+};
+exports.CommentDialog = CommentDialog;

package/cjs/CommentDialog/CommentDialog.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"dialog":"CommentDialog-dialog--28OuU","dialogTitle":"CommentDialog-dialogTitle--mtuLI","dialogContent":"CommentDialog-dialogContent--bx8o1","input":"CommentDialog-input--v9ZO3","formControl":"CommentDialog-formControl--vptF6","inputLabelRoot":"CommentDialog-inputLabelRoot--VGQ5g","dialogActions":"CommentDialog-dialogActions--4669K","asterisk":"CommentDialog-asterisk--8ondZ"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.CommentDialog-dialog--28OuU{width:465px}.CommentDialog-dialogTitle--mtuLI{padding:16px 16px 4px}.CommentDialog-dialogContent--bx8o1{padding:20px 16px}.CommentDialog-input--v9ZO3{font-size:14px;line-height:16px}.CommentDialog-formControl--vptF6{padding-bottom:6px}.CommentDialog-inputLabelRoot--VGQ5g{font-size:14px}.CommentDialog-dialogActions--4669K{border-top:1px solid rgba(0,0,0,.12);padding:4px 2px}.CommentDialog-asterisk--8ondZ{color:red}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/contexts/CommentDialogContext/index.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+type DialogOptions = {
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    defaultComment?: string;
+    required?: boolean;
+};
+type DialogResult = string | null;
+type CommentDialogContextType = (options?: DialogOptions) => Promise<DialogResult>;
+export declare const useCommentDialog: () => CommentDialogContextType;
+export declare const CommentDialogProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export {};

package/cjs/contexts/CommentDialogContext/index.js

@@ -0,0 +1,68 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentDialogProvider = exports.useCommentDialog = void 0;
+var CommentDialog_1 = require("../../CommentDialog/CommentDialog");
+var react_1 = __importStar(require("react"));
+var CommentDialogContext = (0, react_1.createContext)(undefined);
+var useCommentDialog = function () {
+    var context = (0, react_1.useContext)(CommentDialogContext);
+    if (!context)
+        throw new Error('useCommentDialog must be used within CommentDialogProvider');
+    return context;
+};
+exports.useCommentDialog = useCommentDialog;
+var CommentDialogProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(null), options = _b[0], setOptions = _b[1];
+    var commentResolverRef = (0, react_1.useRef)(null);
+    var showCommentDialog = (0, react_1.useCallback)(function (options) {
+        setOptions(options || {});
+        return new Promise(function (resolve) {
+            commentResolverRef.current = resolve;
+        });
+    }, []);
+    var handleClose = function (result) {
+        var _a;
+        setOptions(null);
+        (_a = commentResolverRef.current) === null || _a === void 0 ? void 0 : _a.call(commentResolverRef, result);
+        commentResolverRef.current = null;
+    };
+    return (react_1.default.createElement(CommentDialogContext.Provider, { value: showCommentDialog },
+        children,
+        options && react_1.default.createElement(CommentDialog_1.CommentDialog, __assign({}, options, { onConfirm: handleClose, onCancel: function () { return handleClose(null); } }))));
+};
+exports.CommentDialogProvider = CommentDialogProvider;

package/cjs/contexts/WorkflowDefinitionsContext/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WorkflowDefinition } from '@reltio/mdm-sdk';
+type WorkflowDefinitionsContextType = {
+    definitions: WorkflowDefinition[];
+    loading: boolean;
+};
+export declare const WorkflowDefinitionsContext: React.Context<WorkflowDefinitionsContextType>;
+export declare const WorkflowDefinitionsProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export {};

package/cjs/contexts/WorkflowDefinitionsContext/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkflowDefinitionsProvider = exports.WorkflowDefinitionsContext = void 0;
+var react_1 = __importDefault(require("react"));
+var useWorkflowDefinitions_1 = require("../../features/workflow/hooks/useWorkflowDefinitions");
+var useWorkflowCheckPermission_1 = require("../../features/workflow/hooks/useWorkflowCheckPermission");
+var MdmModuleContext_1 = require("../MdmModuleContext");
+exports.WorkflowDefinitionsContext = react_1.default.createContext({
+    definitions: [],
+    loading: false
+});
+exports.WorkflowDefinitionsContext.displayName = 'WorkflowDefinitionsContext';
+var WorkflowDefinitionsProvider = function (_a) {
+    var children = _a.children;
+    var isWorkflowEnabled = (0, MdmModuleContext_1.useMdmIsWorkflowEnabled)();
+    var checkWorkflowPermission = (0, useWorkflowCheckPermission_1.useWorkflowCheckPermission)();
+    var canViewProcessDefinitions = checkWorkflowPermission('VIEW_PROCESS_DEFINITIONS');
+    var canViewDefinitions = isWorkflowEnabled && canViewProcessDefinitions;
+    var workflowDefinitions = (0, useWorkflowDefinitions_1.useWorkflowDefinitions)({ all: true, canViewDefinitions: canViewDefinitions });
+    return (react_1.default.createElement(exports.WorkflowDefinitionsContext.Provider, { value: workflowDefinitions }, children));
+};
+exports.WorkflowDefinitionsProvider = WorkflowDefinitionsProvider;

package/cjs/features/workflow/AddWorkflowDialog/AddWorkflowDialog.js

@@ -35,9 +35,10 @@ var Snackbar_1 = __importDefault(require("@mui/material/Snackbar"));
 var Popover_1 = __importDefault(require("@mui/material/Popover"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var Button_1 = __importDefault(require("@mui/material/Button"));
-var SimpleDropDownSelector_1 = require("../../../SimpleDropDownSelector");
+var DropDownSelector_1 = require("../../../DropDownSelector");
 var useWorkflowDefinitions_1 = require("../hooks/useWorkflowDefinitions");
 var useWorkflowProcessInstance_1 = require("../hooks/useWorkflowProcessInstance");
+var common_1 = require("../helpers/common");
 var styles_1 = require("./styles");
 var AddWorkflowDialog = function (_a) {
     var anchorEl = _a.anchorEl, onClose = _a.onClose;
@@ -45,8 +46,8 @@ var AddWorkflowDialog = function (_a) {
     var _b = (0, react_1.useState)(''), comment = _b[0], setComment = _b[1];
     var _c = (0, react_1.useState)(null), taskType = _c[0], setTaskType = _c[1];
     var _d = (0, react_1.useState)(false), isOpenSnackbar = _d[0], setIsOpenSnackbar = _d[1];
-    var definitions = (0, useWorkflowDefinitions_1.useWorkflowDefinitions)().definitions;
-    var _e = (0, useWorkflowProcessInstance_1.useWorkflowProcessInstance)(), processInstance = _e.processInstance, loading = _e.loading;
+    var _e = (0, useWorkflowDefinitions_1.useWorkflowDefinitions)(), definitions = _e.definitions, loadingDefinitions = _e.loading;
+    var _f = (0, useWorkflowProcessInstance_1.useWorkflowProcessInstance)(), processInstance = _f.processInstance, loading = _f.loading;
     var handleChangeComment = function (e) {
         setComment(e.target.value);
     };
@@ -67,6 +68,9 @@ var AddWorkflowDialog = function (_a) {
         setIsOpenSnackbar(false);
     };
     var open = Boolean(anchorEl);
+    var currentDefinition = (0, common_1.findWorkflowDefinitionByType)(definitions, taskType === null || taskType === void 0 ? void 0 : taskType.value);
+    var isCommentRequired = (currentDefinition === null || currentDefinition === void 0 ? void 0 : currentDefinition.requiresCommentOnStart) || false;
+    var isStartButtonDisabled = loading || taskType === null || loadingDefinitions || (isCommentRequired && !comment);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Popover_1.default, { open: open, anchorEl: anchorEl, onClose: onClose, anchorOrigin: {
                 vertical: 'bottom',
@@ -79,26 +83,26 @@ var AddWorkflowDialog = function (_a) {
             } },
             react_1.default.createElement("div", { className: styles.content },
                 react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Add new workflow')),
-                react_1.default.createElement(SimpleDropDownSelector_1.SimpleDropDownSelector, { className: styles.simpleDropDownSelector, variant: "filled", height: 40, TextFieldProps: {
-                        InputProps: {
-                            disableUnderline: true
-                        }
-                    }, placeholder: ui_i18n_1.default.text('Select task type'), value: taskType, onChange: handleChangeTaskType, label: '', options: definitions.map(function (definition) {
+                react_1.default.createElement(DropDownSelector_1.DropDownSelector, { className: styles.simpleDropDownSelector, height: 44, value: taskType, onChange: handleChangeTaskType, label: ui_i18n_1.default.text('Select task type'), options: definitions.map(function (definition) {
                         return {
                             value: definition.type,
                             label: definition.displayName
                         };
                     }) }),
-                react_1.default.createElement(TextField_1.default, { variant: "filled", hiddenLabel: true, size: "small", placeholder: "Type a comment", InputProps: {
-                        disableUnderline: true,
+                react_1.default.createElement(TextField_1.default, { variant: "filled", hiddenLabel: true, size: "small", minRows: 1, required: isCommentRequired, label: ui_i18n_1.default.text('Type a comment'), InputProps: {
                         classes: {
                             input: styles.input,
                             root: styles.inputRoot
                         }
+                    }, InputLabelProps: {
+                        classes: {
+                            root: styles.inputLabelRoot,
+                            asterisk: styles.asterisk
+                        }
                     }, value: comment, onChange: handleChangeComment, multiline: true })),
             react_1.default.createElement("div", { className: styles.footer },
                 react_1.default.createElement(Button_1.default, { disabled: loading, className: styles.cancelButton, onClick: onClose }, ui_i18n_1.default.text('Cancel')),
-                react_1.default.createElement(Button_1.default, { disabled: loading, color: "primary", onClick: handleStart }, ui_i18n_1.default.text('Start')))),
+                react_1.default.createElement(Button_1.default, { disabled: isStartButtonDisabled, color: "primary", onClick: handleStart }, ui_i18n_1.default.text('Start')))),
         react_1.default.createElement(Portal_1.default, { container: document.body },
             react_1.default.createElement(Snackbar_1.default, { open: isOpenSnackbar, autoHideDuration: 5000, onClose: handleCloseSnackbar, message: ui_i18n_1.default.text('A new workflow has started'), anchorOrigin: { vertical: 'bottom', horizontal: 'center' } }))));
 };

package/cjs/features/workflow/AddWorkflowDialog/AddWorkflowDialog.spec.js

@@ -61,7 +61,7 @@ var constants_1 = require("../../../constants");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 var WorkflowTasksContext_1 = require("../../../contexts/WorkflowTasksContext");
 var AddWorkflowDialog_1 = require("./AddWorkflowDialog");
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { processDefinitions: jest.fn(), startProcessInstance: jest.fn() })); });
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { processDefinitions: jest.fn(), startProcessInstance: jest.fn(), memoizeWith: jest.fn(function (keyFn, fn) { return fn; }) })); });
 var tenant = { id: 'alenat', name: 'alenat' };
 var workflowEnvironmentUrl = 'https://tst-01.reltio.com';
 var workflowPath = 'https://tst-01-workflow.reltio.com/workflow-adapter';
@@ -136,7 +136,7 @@ describe('AddWorkflowDialog tests', function () {
         });
     }); });
     it('should render Popover and selector correctly if anchorEl exists', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var mockAnchorEl, props, user;
+        var mockAnchorEl, props, user, dropdown;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -147,10 +147,10 @@ describe('AddWorkflowDialog tests', function () {
                     };
                     user = setUp(props).user;
                     expect(react_2.screen.getByText('Add new workflow')).toBeInTheDocument();
-                    return [4 /*yield*/, user.click(react_2.screen.getByText('Select task type'))];
+                    dropdown = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(dropdown)];
                 case 1:
                     _a.sent();
-                    expect(react_2.screen.getByText('RDM Data Change Request Review')).toBeInTheDocument();
                     expect(react_2.screen.getByText('Data Verification With Loop')).toBeInTheDocument();
                     expect(react_2.screen.getByText('Account onboarding')).toBeInTheDocument();
                     return [2 /*return*/];
@@ -170,13 +170,14 @@ describe('AddWorkflowDialog tests', function () {
                     };
                     user = setUp(props).user;
                     expect(react_2.screen.getByText('Add new workflow')).toBeInTheDocument();
-                    return [4 /*yield*/, user.click(react_2.screen.getByText('Select task type'))];
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
                     _a.sent();
+                    expect(react_2.screen.getByText('RDM Data Change Request Review')).toBeInTheDocument();
                     return [4 /*yield*/, user.click(react_2.screen.getByText('RDM Data Change Request Review'))];
                 case 2:
                     _a.sent();
-                    comment = react_2.screen.getByPlaceholderText('Type a comment');
+                    comment = react_2.screen.getByLabelText('Type a comment');
                     return [4 /*yield*/, user.type(comment, 'comment')];
                 case 3:
                     _a.sent();
@@ -215,13 +216,13 @@ describe('AddWorkflowDialog tests', function () {
                     };
                     user = setUp(props).user;
                     expect(react_2.screen.getByText('Add new workflow')).toBeInTheDocument();
-                    return [4 /*yield*/, user.click(react_2.screen.getByText('Select task type'))];
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, user.click(react_2.screen.getByText('RDM Data Change Request Review'))];
                 case 2:
                     _a.sent();
-                    comment = react_2.screen.getByPlaceholderText('Type a comment');
+                    comment = react_2.screen.getByLabelText('Type a comment');
                     return [4 /*yield*/, user.type(comment, 'comment')];
                 case 3:
                     _a.sent();
@@ -256,7 +257,7 @@ describe('AddWorkflowDialog tests', function () {
                         anchorEl: mockAnchorEl
                     };
                     user = setUp(props).user;
-                    return [4 /*yield*/, user.click(react_2.screen.getByText('Select task type'))];
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
                 case 1:
                     _a.sent();
                     expect(consoleSpy).toHaveBeenCalledWith('Workflow error', 'Some error');

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "title" | "footer" | "input" | "select" | "inputRoot" | "cancelButton" | "popoverPaper" | "simpleDropDownSelector">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "title" | "footer" | "input" | "select" | "inputRoot" | "asterisk" | "cancelButton" | "inputLabelRoot" | "popoverPaper" | "simpleDropDownSelector">;

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

@@ -12,20 +12,26 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         letterSpacing: '0.25px',
         lineHeight: '24px',
         color: theme.palette.text.primary,
-        marginBottom: '17px'
+        marginBottom: '20px'
     },
     content: {
         display: 'flex',
         flexDirection: 'column',
-        padding: '23px 24px 14px 24px'
+        padding: '18px 16px 20px 16px'
     },
     simpleDropDownSelector: {
         marginBottom: '20px'
     },
     inputRoot: {
-        paddingTop: '0 !important',
+        paddingTop: '12px !important',
         paddingBottom: '0 !important'
     },
+    inputLabelRoot: {
+        fontSize: '14px'
+    },
+    asterisk: {
+        color: 'red'
+    },
     select: {
         fontSize: '14px'
     },
@@ -39,6 +45,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         marginRight: '8px'
     },
     input: {
-        fontSize: '14px'
+        fontSize: '14px',
+        paddingBottom: '5px'
     }
 }); });

package/cjs/features/workflow/ReassignButton/components/ReassignDialog/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"caption" | "disabled" | "title" | "currentAssignee" | "dialogText" | "dialogContent">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"caption" | "disabled" | "title" | "currentAssignee" | "dialogContent" | "dialogText">;

package/cjs/features/workflow/TaskActionButtons/TaskActionButtons.spec.js

@@ -57,6 +57,7 @@ var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var TaskActionButtons_1 = require("../TaskActionButtons");
 var WorkflowTasksContext_1 = require("../../../contexts/WorkflowTasksContext");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var CommentDialogContext_1 = require("../../../contexts/CommentDialogContext");
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { runTaskAction: jest.fn() })); });
 var task = {
     assignee: 'somebody',
@@ -97,7 +98,8 @@ var setUp = function (props) {
     var Providers = function (_a) {
         var children = _a.children;
         return (react_1.default.createElement(WorkflowTasksContext_1.WorkflowTasksContext.Provider, { value: workflowTaskContextValue },
-            react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues }, children)));
+            react_1.default.createElement(CommentDialogContext_1.CommentDialogProvider, null,
+                react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues }, children))));
     };
     return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(TaskActionButtons_1.TaskActionButtons, __assign({}, props)), { wrapper: Providers })), { user: user });
 };
@@ -137,4 +139,55 @@ describe('TaskActionButtons tests', function () {
             }
         });
     }); });
+    describe('required comments', function () {
+        it('should show comment dialog if commentRequired is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var task, user, dialog, textfield;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        task = __assign(__assign({}, defaultProps.task), { possibleActions: [
+                                { action: 'Approve', label: 'Approve', commentRequired: false },
+                                { action: 'Reject', label: 'Reject', commentRequired: true }
+                            ] });
+                        user = setUp({ task: task }).user;
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Reject'))];
+                    case 1:
+                        _a.sent();
+                        expect(onActionSuccess).not.toHaveBeenCalledWith('Reject');
+                        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();
+                        return [4 /*yield*/, user.click((0, react_2.within)(dialog).getByText('Cancel'))];
+                    case 2:
+                        _a.sent();
+                        expect(onActionSuccess).not.toHaveBeenCalled();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Reject'))];
+                    case 3:
+                        _a.sent();
+                        textfield = react_2.screen.getAllByRole('textbox')[0];
+                        return [4 /*yield*/, user.click(textfield)];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste('test comment')];
+                    case 5:
+                        _a.sent();
+                        return [4 /*yield*/, user.click((0, react_2.within)(react_2.screen.getAllByRole('presentation')[1]).getByText('Done'))];
+                    case 6:
+                        _a.sent();
+                        expect(onActionSuccess).toHaveBeenCalledWith('Reject');
+                        expect(mdm_sdk_1.runTaskAction).toHaveBeenCalledWith({
+                            taskId: '38453993',
+                            workflowPath: 'workflowPath',
+                            environment: 'workflowEnvironmentURL',
+                            tenant: 't1',
+                            action: 'Reject',
+                            processInstanceComment: 'test comment'
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/cjs/features/workflow/WorkflowTaskCard/WorkflowTaskCard.test.js

@@ -67,6 +67,7 @@ var WorkflowTaskCard_1 = require("./WorkflowTaskCard");
 var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
 var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var CommentDialogContext_1 = require("../../../contexts/CommentDialogContext");
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getDataChangeRequest: jest.fn(), getEntitiesByUris: jest.fn() })); });
 jest.mock('../../../icons/DefaultTaskIcon', function () {
     var MockDefaultTaskIcon = function () { return react_1.default.createElement("div", { "data-reltio-id": "default-task-icon" }); };
@@ -102,7 +103,8 @@ describe('WorkflowTaskCard tests', function () {
         var Providers = function (_a) {
             var children = _a.children;
             return (react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
-                react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues }, children)));
+                react_1.default.createElement(CommentDialogContext_1.CommentDialogProvider, null,
+                    react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues }, children))));
         };
         return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(WorkflowTaskCard_1.WorkflowTaskCard, { task: __assign(__assign({}, defaultTask), task) }), { wrapper: Providers }));
     };

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

@@ -67,6 +67,7 @@ var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider")
 var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 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() })); });
 jest.mock('../../../../../contexts/MdmModuleContext', function () { return (__assign(__assign({}, jest.requireActual('../../../../../contexts/MdmModuleContext')), { useMdmMetadata: jest.fn() })); });
@@ -263,7 +264,8 @@ describe('DataChangeRequestTaskCard tests', function () {
         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 }, children));
+            return (react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
+                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 });
     };