@reltio/components 1.4.878 → 1.4.879

package/components/workflow/components/LineDecorator/styles.js

@@ -0,0 +1,59 @@
+import { makeStyles } from '@material-ui/core/styles';
+var pointColor = '#d8d8d8';
+var lineStyle = '2px solid rgba(0,0,0,0.06)';
+var pointSize = 6;
+var blockWidth = 56;
+var linePadding = 10;
+var pointPadding = 10;
+export var useStyles = makeStyles({
+    decorator: {
+        display: 'flex',
+        alignItems: 'stretch'
+    },
+    lineBlock: {
+        width: blockWidth + "px"
+    },
+    withLinePadding: {
+        '& $noLine': {
+            height: linePadding + "px"
+        },
+        '& $line': {
+            height: "calc(100% - " + linePadding + "px)"
+        }
+    },
+    noLine: {
+        height: '0'
+    },
+    line: {
+        height: '100%',
+        position: 'relative',
+        marginLeft: '31px',
+        borderLeft: lineStyle,
+        '&:before': {
+            position: 'absolute',
+            height: pointSize,
+            width: pointSize,
+            borderRadius: '50%',
+            left: -pointSize + 1,
+            top: pointPadding + "px",
+            background: pointColor,
+            content: '""',
+            display: 'block',
+            border: '1px solid white'
+        },
+        '&$plain': {
+            '&:before': {
+                width: 0,
+                border: 'none'
+            }
+        },
+        '&$last': {
+            height: pointPadding + "px"
+        }
+    },
+    content: {
+        flex: 1
+    },
+    plain: {},
+    last: {}
+});

package/components/workflow/components/PrioritySelector/PrioritySelector.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+declare type Props = Pick<WorkflowTaskData, 'taskId' | 'priority'> & {
+    className?: string;
+};
+declare const PrioritySelector: ({ taskId, priority, className }: Props) => JSX.Element;
+export default PrioritySelector;

package/components/workflow/components/PrioritySelector/PrioritySelector.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import { propEq } from 'ramda';
+import DropDownSelector from '../../../DropDownSelector/DropDownSelector';
+import { useWorkflowPriority } from '../../hooks/useWorkflowPriority';
+var PrioritySelector = function (_a) {
+    var taskId = _a.taskId, priority = _a.priority, className = _a.className;
+    var _b = useWorkflowPriority({ taskId: taskId, priority: priority }), priorities = _b.priorities, updatePriority = _b.updatePriority, updateRequestIsInProgress = _b.updateRequestIsInProgress, readOnly = _b.readOnly;
+    var disabled = updateRequestIsInProgress || readOnly;
+    return (React.createElement(DropDownSelector, { className: className, isDisabled: disabled, options: priorities, onChange: updatePriority, hideSelectedOptions: false, label: i18n.text('Priority'), value: priorities.find(propEq('value', priority)), TextFieldProps: { disabled: disabled }, height: 40 }));
+};
+export default PrioritySelector;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+declare type Props = Pick<WorkflowTaskData, 'taskId' | 'possibleActions' | 'assignee'>;
+declare const TaskActions: ({ taskId, possibleActions, assignee }: Props) => JSX.Element;
+export default TaskActions;

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

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

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

@@ -0,0 +1,16 @@
+export function CollapsedComments({ comments, onClick }: {
+    comments: any;
+    onClick: any;
+}): JSX.Element;
+export namespace CollapsedComments {
+    namespace propTypes {
+        const comments: PropTypes.Requireable<PropTypes.InferProps<{
+            author: PropTypes.Requireable<string>;
+            id: PropTypes.Requireable<string>;
+            message: PropTypes.Requireable<string>;
+            time: PropTypes.Requireable<number>;
+        }>[]>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";

package/components/workflow/components/WorkflowComments/CollapsedComments.js

@@ -0,0 +1,34 @@
+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';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import { Comment } from './Comment';
+import { useCollapsedCommentsStyles } from './styles';
+export var CollapsedComments = function (_a) {
+    var comments = _a.comments, onClick = _a.onClick;
+    var styles = useCollapsedCommentsStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Comment, __assign({}, comments[0])),
+        React.createElement("div", { className: styles.delimiter },
+            React.createElement(IconButton, { className: styles.circleButton, onClick: onClick }, comments.length - 2)),
+        React.createElement(Comment, __assign({}, comments[comments.length - 1]))));
+};
+CollapsedComments.propTypes = {
+    comments: PropTypes.arrayOf(PropTypes.shape({
+        author: PropTypes.string,
+        id: PropTypes.string,
+        message: PropTypes.string,
+        time: PropTypes.number
+    })),
+    onClick: PropTypes.func
+};

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

@@ -0,0 +1,20 @@
+export function Comment({ author, classes, message, time }: {
+    author: any;
+    classes: any;
+    message: any;
+    time: any;
+}): JSX.Element;
+export namespace Comment {
+    namespace defaultProps {
+        const classes: {};
+    }
+    namespace propTypes {
+        const classes_1: PropTypes.Requireable<object>;
+        export { classes_1 as classes };
+        export const author: PropTypes.Requireable<string>;
+        export const id: PropTypes.Requireable<string>;
+        export const message: PropTypes.Requireable<string>;
+        export const time: PropTypes.Requireable<number>;
+    }
+}
+import PropTypes from "prop-types";

package/components/workflow/components/WorkflowComments/Comment.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@material-ui/core/Avatar';
+import Person from '@material-ui/icons/Person';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import { useCommentStyles } from './styles';
+export var Comment = function (_a) {
+    var author = _a.author, classes = _a.classes, message = _a.message, time = _a.time;
+    var styles = useCommentStyles();
+    return (React.createElement("div", { className: styles.comment },
+        React.createElement(Avatar, { className: styles.avatar },
+            React.createElement(Person, { className: styles.icon })),
+        React.createElement("div", { className: classnames(styles.info, classes.messageContainer) },
+            React.createElement("div", { className: styles.firstLine },
+                React.createElement("div", { className: styles.author }, author),
+                React.createElement("span", { className: styles.date }, i18n.date(time, 'L LT'))),
+            React.createElement("div", { className: styles.text }, message))));
+};
+Comment.defaultProps = {
+    classes: {}
+};
+Comment.propTypes = {
+    classes: PropTypes.object,
+    author: PropTypes.string,
+    id: PropTypes.string,
+    message: PropTypes.string,
+    time: PropTypes.number
+};

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

@@ -0,0 +1,14 @@
+export function ExpandedComments({ comments }: {
+    comments: any;
+}): any;
+export namespace ExpandedComments {
+    namespace propTypes {
+        const comments: PropTypes.Requireable<PropTypes.InferProps<{
+            author: PropTypes.Requireable<string>;
+            id: PropTypes.Requireable<string>;
+            message: PropTypes.Requireable<string>;
+            time: PropTypes.Requireable<number>;
+        }>[]>;
+    }
+}
+import PropTypes from "prop-types";

package/components/workflow/components/WorkflowComments/ExpandedComments.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Comment } from './Comment';
+import { useExpandedComments } from './styles';
+export var ExpandedComments = function (_a) {
+    var comments = _a.comments;
+    var styles = useExpandedComments();
+    return comments.map(function (_a) {
+        var author = _a.author, id = _a.id, message = _a.message, time = _a.time;
+        return (React.createElement(Comment, { classes: { messageContainer: styles.messageContainer }, key: id, author: author, message: message, time: time }));
+    });
+};
+ExpandedComments.propTypes = {
+    comments: PropTypes.arrayOf(PropTypes.shape({
+        author: PropTypes.string,
+        id: PropTypes.string,
+        message: PropTypes.string,
+        time: PropTypes.number
+    }))
+};

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

@@ -0,0 +1,16 @@
+export function WorkflowComments({ processInstanceComments, taskId }: {
+    processInstanceComments: any;
+    taskId: any;
+}): JSX.Element;
+export namespace WorkflowComments {
+    namespace propTypes {
+        const processInstanceComments: PropTypes.Requireable<PropTypes.InferProps<{
+            author: PropTypes.Requireable<string>;
+            id: PropTypes.Requireable<string>;
+            message: PropTypes.Requireable<string>;
+            time: PropTypes.Requireable<number>;
+        }>[]>;
+        const taskId: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,42 @@
+import React, { useCallback, useState } from 'react';
+import { pipe, propEq, when } from 'ramda';
+import Input from '@material-ui/core/Input';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import SendIcon from '@material-ui/icons/Send';
+import PropTypes from 'prop-types';
+import i18n from 'ui-i18n';
+import { CollapsedComments } from './CollapsedComments';
+import { ExpandedComments } from './ExpandedComments';
+import { useWorkflowStyles } from './styles';
+import { useWorkflowComments } from '../../hooks/useWorkflowComments';
+import { SmallIconButton } from '../../../SmallIconButton';
+var getValue = function (e) { return e.target.value; };
+export var WorkflowComments = function (_a) {
+    var processInstanceComments = _a.processInstanceComments, taskId = _a.taskId;
+    var styles = useWorkflowStyles();
+    var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
+    var _c = useState(''), comment = _c[0], setComment = _c[1];
+    var _d = useWorkflowComments({ processInstanceComments: processInstanceComments, taskId: taskId }), comments = _d.comments, writeComment = _d.writeComment, readOnly = _d.readOnly;
+    var sendComment = useCallback(function () {
+        writeComment(comment);
+        setComment('');
+    }, [comment, writeComment]);
+    var onChange = pipe(getValue, setComment);
+    return (React.createElement("div", { className: styles.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 }))),
+        !readOnly && (React.createElement(Input, { endAdornment: React.createElement(InputAdornment, { position: "end" },
+                React.createElement(SmallIconButton, { icon: SendIcon, disabled: comment.length === 0, onClick: sendComment })), classes: { root: styles.filledInputRoot }, placeholder: i18n.text('Write a comment'), value: comment, onKeyPress: when(propEq('key', 'Enter'), sendComment), onChange: onChange, disableUnderline: true }))));
+};
+WorkflowComments.propTypes = {
+    processInstanceComments: PropTypes.arrayOf(PropTypes.shape({
+        author: PropTypes.string,
+        id: PropTypes.string,
+        message: PropTypes.string,
+        time: PropTypes.number
+    })),
+    taskId: PropTypes.string
+};

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

@@ -0,0 +1 @@
+export { WorkflowComments as default } from "./WorkflowComments";

package/components/workflow/components/WorkflowComments/index.js

@@ -0,0 +1 @@
+export { WorkflowComments as default } from './WorkflowComments';

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

@@ -0,0 +1,4 @@
+export const useCommentStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
+export const useCollapsedCommentsStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"delimiter" | "circleButton">;
+export const useWorkflowStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot">;
+export const useExpandedComments: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"messageContainer">;

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

@@ -0,0 +1,105 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useCommentStyles = makeStyles(function (_theme) { return ({
+    comment: {
+        display: 'flex',
+        flexDirection: 'row',
+        flex: 1,
+        marginLeft: '6px'
+    },
+    avatar: {
+        height: '24px',
+        width: '24px',
+        margin: '3px 13px 0 0'
+    },
+    icon: {
+        fill: '#537280',
+        backgroundColor: '#EAEDEE'
+    },
+    firstLine: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
+    info: {
+        flex: 1
+    },
+    author: {
+        flex: 1,
+        fontWeight: '500',
+        color: 'rgba(0,0,0,0.87)',
+        fontSize: '13px',
+        lineHeight: '15px'
+    },
+    date: {
+        color: 'rgba(0, 0, 0, 0.54)',
+        fontSize: '11px',
+        marginRight: '17px',
+        lineHeight: '15px'
+    },
+    text: {
+        color: 'rgba(0, 0, 0, 0.6)',
+        fontSize: '13px',
+        wordWrap: 'break-word'
+    }
+}); });
+export var useCollapsedCommentsStyles = makeStyles(function (_theme) { return ({
+    circleButton: {
+        maxWidth: '14px',
+        maxHeight: '14px',
+        border: '1px solid rgba(0, 0, 0, 0.3)',
+        fontSize: '13px',
+        color: 'rgba(0, 0, 0, 0.6)',
+        position: 'absolute',
+        top: '-11px',
+        left: '5px',
+        backgroundColor: '#ffffff',
+        '&:hover': {
+            backgroundColor: '#f7f7f7'
+        },
+        '&.focused': {
+            backgroundColor: '#f7f7f7'
+        }
+    },
+    delimiter: {
+        position: 'relative',
+        height: '4px',
+        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+        margin: '15px 0 24px 0'
+    }
+}); });
+export var useWorkflowStyles = 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: '0 6px',
+        height: '40px',
+        margin: '10px 17px 0 6px',
+        fontSize: '14px',
+        '&:hover': {
+            backgroundColor: 'rgba(0, 0, 0, 0.03)'
+        },
+        '&.focused': {
+            backgroundColor: 'rgba(0, 0, 0, 0.03)'
+        }
+    }
+}); });
+export var useExpandedComments = makeStyles(function (_theme) { return ({
+    messageContainer: {
+        borderBottom: '1px solid rgba(0,0,0,0.3)',
+        paddingBottom: '7px',
+        marginBottom: '7px'
+    }
+}); });

package/components/workflow/helpers/errors.d.ts

@@ -0,0 +1,2 @@
+import { ApiError } from '@reltio/mdm-sdk';
+export declare const showWorkflowError: (error?: ApiError) => void;

package/components/workflow/helpers/errors.js

@@ -0,0 +1,14 @@
+import i18n from 'ui-i18n';
+import { ApiErrorCode } from '@reltio/mdm-sdk';
+import ErrorPopup from '../../ErrorPopup/ErrorPopup';
+export var showWorkflowError = function (error) {
+    if (error === void 0) { error = {}; }
+    var errorMessage = error.errorMessage, errorCode = error.errorCode;
+    if (errorCode !== ApiErrorCode.WORKFLOW_IS_NOT_REGISTERED_ERROR) {
+        console.error(error); // eslint-disable-line
+        ErrorPopup.addError({
+            title: i18n.text('Error'),
+            message: errorMessage || i18n.text('Something went wrong...')
+        });
+    }
+};

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

@@ -0,0 +1,3 @@
+declare const getDCRUri: (objectUris?: string[]) => string;
+declare const getDCRId: (objectUris?: string[]) => string;
+export { getDCRUri, getDCRId };

package/components/workflow/helpers/index.js

@@ -0,0 +1,10 @@
+import { pipe, startsWith, isNil, unless, split, nth } from 'ramda';
+var getDCRUri = function (objectUris) {
+    if (objectUris === void 0) { objectUris = []; }
+    return objectUris.find(startsWith('changeRequests/'));
+};
+var getDCRId = function (objectUris) {
+    if (objectUris === void 0) { objectUris = []; }
+    return pipe(getDCRUri, unless(isNil, pipe(split('/'), nth(1))))(objectUris);
+};
+export { getDCRUri, getDCRId };

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

@@ -0,0 +1,10 @@
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+declare type TaskAction = {
+    text: string;
+    onClick: () => void;
+};
+export declare const useWorkflowActions: ({ possibleActions, assignee, taskId }: Pick<WorkflowTaskData, 'taskId' | 'possibleActions' | 'assignee'>) => {
+    actions: TaskAction[];
+    actionRequestIsInProgress: boolean;
+};
+export {};

package/components/workflow/hooks/useWorkflowActions.js

@@ -0,0 +1,57 @@
+import { useCallback, useContext, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { runTaskAction } from '@reltio/mdm-sdk';
+import mdmModule, { profile, ui } from '@reltio/mdm-module';
+import { ViewIdContext } from '../../../contexts/ViewIdContext';
+import { showWorkflowError } from '../helpers/errors';
+import { WorkflowTasksContext } from '../../../contexts/WorkflowTasksContext';
+export var useWorkflowActions = function (_a) {
+    var possibleActions = _a.possibleActions, assignee = _a.assignee, taskId = _a.taskId;
+    var loadWorkflowTasks = (useContext(WorkflowTasksContext) || {}).loadWorkflowTasks;
+    var workflowPath = useSelector(mdmModule.selectors.getWorkflowPath);
+    var environment = useSelector(mdmModule.selectors.getWorkflowEnvironmentUrl);
+    var tenant = useSelector(mdmModule.selectors.getTenant);
+    var username = useSelector(mdmModule.selectors.getUserName);
+    var entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    var _b = useState(false), actionRequestIsInProgress = _b[0], setActionRequestIsInProgress = _b[1];
+    var viewId = useContext(ViewIdContext);
+    var dispatch = useDispatch();
+    var performTaskAction = useCallback(function (action) { return function () {
+        if (workflowPath && taskId) {
+            setActionRequestIsInProgress(true);
+            runTaskAction({
+                taskId: taskId,
+                workflowPath: workflowPath,
+                environment: environment,
+                tenant: tenant,
+                action: action
+            })
+                .then(function () {
+                if (action === 'Delete') {
+                    dispatch(ui.actions.entityDeletionFinished());
+                }
+                else {
+                    // entity refreshing
+                    dispatch(profile.entity.actions.loadEntity({ viewId: viewId, uri: entityUri }));
+                    loadWorkflowTasks === null || loadWorkflowTasks === void 0 ? void 0 : loadWorkflowTasks();
+                }
+            })
+                .catch(showWorkflowError)
+                .finally(function () {
+                setActionRequestIsInProgress(false);
+            });
+        }
+    }; }, [workflowPath, taskId, environment, tenant, dispatch, entityUri, viewId, loadWorkflowTasks]);
+    var actions = useMemo(function () {
+        return username === assignee
+            ? (possibleActions || []).map(function (_a) {
+                var action = _a.action, label = _a.label;
+                return ({
+                    text: label,
+                    onClick: performTaskAction(action)
+                });
+            })
+            : [];
+    }, [possibleActions, performTaskAction, username, assignee]);
+    return { actions: actions, actionRequestIsInProgress: actionRequestIsInProgress };
+};

package/components/workflow/hooks/useWorkflowAssignee.d.ts

@@ -0,0 +1,13 @@
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+declare type AssigneeOption = {
+    label: string;
+    value: string;
+};
+export declare const useWorkflowAssignee: ({ assignee, taskId }: Pick<WorkflowTaskData, 'taskId' | 'assignee'>) => {
+    assignee: AssigneeOption;
+    getAssignees: (text: any) => Promise<void | unknown[]>;
+    updateAssignee: (newValue: AssigneeOption) => void;
+    updateRequestIsInProgress: boolean;
+    readOnly: boolean;
+};
+export {};

package/components/workflow/hooks/useWorkflowAssignee.js

@@ -0,0 +1,83 @@
+import { useState, useEffect, useCallback, useContext } from 'react';
+import { filter } from 'ramda';
+import { useSelector } from 'react-redux';
+import { getAssigneeForTask, updateAssigneeForTask } from '@reltio/mdm-sdk';
+import mdmModule from '@reltio/mdm-module';
+import { useSafePromise } from '../../../hooks';
+import { WorkflowTasksContext } from '../../../contexts/WorkflowTasksContext';
+import { showWorkflowError } from '../helpers/errors';
+import { useWorkflowCheckPermission } from './useWorkflowCheckPermission';
+var assigneeToValue = function (assignee) { return ({
+    label: assignee,
+    value: assignee
+}); };
+export var useWorkflowAssignee = function (_a) {
+    var assignee = _a.assignee, taskId = _a.taskId;
+    var updateTaskState = (useContext(WorkflowTasksContext) || {}).updateTaskState;
+    var workflowPath = useSelector(mdmModule.selectors.getWorkflowPath);
+    var environment = useSelector(mdmModule.selectors.getWorkflowEnvironmentUrl);
+    var tenant = useSelector(mdmModule.selectors.getTenant);
+    var updateSafePromise = useSafePromise();
+    var getSafePromise = useSafePromise();
+    var _b = useState(null), currentAssignee = _b[0], setCurrentAssignee = _b[1];
+    var _c = useState(), assignees = _c[0], setAssignees = _c[1];
+    var _d = useState(false), updateRequestIsInProgress = _d[0], setUpdateRequestIsInProgress = _d[1];
+    var checkWorkflowPermission = useWorkflowCheckPermission();
+    var canUpdateTask = checkWorkflowPermission('UPDATE_TASK');
+    useEffect(function () {
+        setCurrentAssignee(assigneeToValue(assignee));
+    }, [assignee]);
+    var getAssignees = useCallback(function (text) {
+        if (workflowPath && canUpdateTask && taskId) {
+            var filterOutRest_1 = filter(function (item) { return item.value.toLowerCase().includes(text); });
+            if (assignees) {
+                return Promise.resolve(filterOutRest_1(assignees));
+            }
+            return getSafePromise(getAssigneeForTask({
+                taskId: taskId,
+                workflowPath: workflowPath,
+                environment: environment,
+                tenant: tenant
+            }))
+                .then(function (result) {
+                var data = result.data;
+                var assignees = data.map(assigneeToValue);
+                setAssignees(assignees);
+                return filterOutRest_1(assignees);
+            })
+                .catch(showWorkflowError);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [workflowPath, taskId, environment, tenant, assignees, setAssignees, canUpdateTask]);
+    var updateAssignee = useCallback(function (newValue) {
+        if (workflowPath && canUpdateTask && taskId) {
+            var assignee_1 = newValue.value;
+            setUpdateRequestIsInProgress(true);
+            updateSafePromise(updateAssigneeForTask({
+                taskId: taskId,
+                workflowPath: workflowPath,
+                environment: environment,
+                tenant: tenant,
+                assignee: assignee_1
+            }))
+                .then(function () {
+                setCurrentAssignee(assigneeToValue(assignee_1));
+                updateTaskState === null || updateTaskState === void 0 ? void 0 : updateTaskState(taskId, { assignee: assignee_1 });
+            })
+                .catch(showWorkflowError)
+                .finally(function () {
+                setUpdateRequestIsInProgress(false);
+            });
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [workflowPath, taskId, environment, tenant, canUpdateTask]);
+    return {
+        assignee: currentAssignee,
+        getAssignees: getAssignees,
+        updateAssignee: updateAssignee,
+        updateRequestIsInProgress: updateRequestIsInProgress,
+        readOnly: !canUpdateTask
+    };
+};

package/components/workflow/hooks/useWorkflowCheckPermission.d.ts

@@ -0,0 +1 @@
+export declare const useWorkflowCheckPermission: () => (permission: string) => boolean;