feat(new-tasks): Fetch task collaborators (#1286)

* fix: Fetch task collaborators

* fix: Fetch task collaborators on modal open

* fix: fetch collaborator promise

* fix: getTaskCollaborator test

* fix: add tests

* fix: return if there is no fileID

Author: shahzadaziz

i18n/en-US.properties

@@ -366,6 +366,8 @@ be.taskActionErrorTitle = Error
 be.taskApprove = Complete
 # Error message when approving a task fails
 be.taskApproveErrorMessage = An error has occurred while approving this task. Please refresh the page and try again.
+# Error message when we failed to load the collaborators when user tries to edit a task
+be.taskCollaboratorLoadErrorMessage = An error has occurred while loading collaborators for this task. Please try again.
 # Error message when completing a task fails
 be.taskCompleteErrorMessage = An error has occurred while completing this task. Please refresh the page and try again.
 # Error message when a task creation fails

src/api/tasks/TaskCollaborators.js

@@ -16,7 +16,7 @@ import {
 
 class TaskCollaborators extends TasksBase {
     getUrlForTaskCollaborators(taskId: string): string {
-        return `${this.getBaseApiUrl()}/undoc/tasks/${taskId}/task_collaborators?limit=${API_PAGE_LIMIT}`;
+        return `${this.getBaseApiUrl()}/undoc/tasks/${taskId}/task_collaborators?role=ASSIGNEE&limit=${API_PAGE_LIMIT}`;
     }
 
     getUrlForTaskCollaboratorCreate(): string {

src/api/tasks/__tests__/TaskCollaborators-test.js

@@ -129,7 +129,7 @@ describe('api/TaskCollaborators', () => {
 
                 expect(taskCollaborators.get).toBeCalledWith({
                     id: FILE_ID,
-                    url: `${BASE_URL}/undoc/tasks/${taskId}/task_collaborators?limit=${API_PAGE_LIMIT}`,
+                    url: `${BASE_URL}/undoc/tasks/${taskId}/task_collaborators?role=ASSIGNEE&limit=${API_PAGE_LIMIT}`,
                     successCallback,
                     errorCallback,
                 });

src/elements/common/messages.js

@@ -818,6 +818,11 @@ const messages = defineMessages({
         description: 'Error message when a task deletion fails',
         defaultMessage: 'There was an error while deleting this task. Please refresh the page and try again.',
     },
+    taskCollaboratorLoadErrorMessage: {
+        id: 'be.taskCollaboratorLoadErrorMessage',
+        description: 'Error message when we failed to load the collaborators when user tries to edit a task',
+        defaultMessage: 'An error has occurred while loading collaborators for this task. Please try again.',
+    },
     completedAssignment: {
         id: 'be.completedAssignment',
         defaultMessage: 'Completed',

src/elements/content-sidebar/TaskModal.js

@@ -16,7 +16,7 @@ type TaskModalProps = {
     isTaskFormOpen: boolean,
     onModalClose: () => void,
     onSubmitError: (e: ElementsXhrError) => void,
-    onSubmitSuccess: () => void,
+    onSubmitSuccess: () => any,
     taskFormProps: TaskFormProps,
     taskType: TaskType,
 };

src/elements/content-sidebar/activity-feed/comment/Comment.js

@@ -46,7 +46,7 @@ type Props = {
     modified_at?: string | number,
     onDelete?: Function,
     onEdit?: Function,
-    onEditClick?: () => void,
+    onEditClick?: () => any,
     permissions?: BoxItemPermission,
     tagged_message: string,
     translatedTaggedMessage?: string,

src/elements/content-sidebar/activity-feed/task-new/Task.js

@@ -8,6 +8,9 @@ import messages from '../../../common/messages';
 import CommentInlineError from '../comment/CommentInlineError';
 import IconTaskApproval from '../../../../icons/two-toned/IconTaskApproval';
 import IconTaskGeneral from '../../../../icons/two-toned/IconTaskGeneral';
+import { withAPIContext } from '../../../common/api-context';
+
+import API from '../../../../api/APIFactory';
 import {
     TASK_NEW_APPROVED,
     TASK_NEW_REJECTED,
@@ -30,6 +33,7 @@ import './Task.scss';
 
 type Props = {|
     ...TaskNew,
+    api: API,
     currentUser: User,
     error?: ActionItemError,
     features?: FeatureConfig,
@@ -47,7 +51,10 @@ type Props = {|
 |};
 
 type State = {
+    assigned_to: TaskAssigneeCollection,
     isEditing: boolean,
+    isLoading: boolean,
+    loadCollabError: ?ActionItemError,
     modalError: ?ElementsXhrError,
 };
 
@@ -67,12 +74,23 @@ const getMessageForTask = (isCurrentUser: boolean, taskType: TaskType) => {
 
 class Task extends React.Component<Props, State> {
     state = {
+        loadCollabError: undefined,
+        assigned_to: this.props.assigned_to,
         modalError: undefined,
         isEditing: false,
+        isLoading: false,
     };
 
-    handleEditClick = (): void => {
-        this.setState({ isEditing: true });
+    handleEditClick = async () => {
+        const { assigned_to } = this.state;
+
+        if (assigned_to.next_marker) {
+            this.fetchTaskCollaborators().then(() => {
+                this.setState({ isEditing: true });
+            });
+        } else {
+            this.setState({ isEditing: true });
+        }
     };
 
     handleModalClose = () => {
@@ -88,7 +106,7 @@ class Task extends React.Component<Props, State> {
     };
 
     getUsersFromTask = (): SelectorItems => {
-        const { assigned_to } = this.props;
+        const { assigned_to } = this.state;
 
         return (
             assigned_to &&
@@ -105,9 +123,48 @@ class Task extends React.Component<Props, State> {
         );
     };
 
+    fetchTaskCollaborators = (): Promise<any> => {
+        const { id, api, task_links } = this.props;
+        const { entries } = task_links;
+        let fileId = '';
+
+        if (entries[0] && entries[0].target) {
+            fileId = entries[0].target.id;
+        }
+
+        if (!fileId) {
+            return Promise.reject();
+        }
+
+        this.setState({ isLoading: true });
+
+        return new Promise((resolve, reject) => {
+            api.getTaskCollaboratorsAPI(false).getTaskCollaborators({
+                task: { id },
+                file: { id: fileId },
+                errorCallback: () => {
+                    const { errorOccured, taskCollaboratorLoadErrorMessage } = messages;
+
+                    this.setState(
+                        {
+                            isLoading: false,
+                            loadCollabError: {
+                                message: taskCollaboratorLoadErrorMessage,
+                                title: errorOccured,
+                            },
+                        },
+                        reject,
+                    );
+                },
+                successCallback: assigned_to => {
+                    this.setState({ assigned_to, isLoading: false }, resolve);
+                },
+            });
+        });
+    };
+
     render() {
         const {
-            assigned_to,
             created_at,
             created_by,
             currentUser,
@@ -131,7 +188,7 @@ class Task extends React.Component<Props, State> {
             translations,
         } = this.props;
 
-        const { modalError, isEditing } = this.state;
+        const { assigned_to, modalError, isEditing, isLoading, loadCollabError } = this.state;
 
         const taskPermissions = {
             ...permissions,
@@ -151,13 +208,14 @@ class Task extends React.Component<Props, State> {
             (status === TASK_NEW_NOT_STARTED || status === TASK_NEW_IN_PROGRESS);
 
         const TaskTypeIcon = task_type === TASK_TYPE_APPROVAL ? IconTaskApproval : IconTaskGeneral;
+        const inlineError = loadCollabError || error;
 
         return (
             <div className="bcs-task-container">
-                {error ? <CommentInlineError {...error} /> : null}
+                {inlineError ? <CommentInlineError {...inlineError} /> : null}
                 <div
                     className={classNames('bcs-task', {
-                        'bcs-is-pending': isPending || error,
+                        'bcs-is-pending': isPending || isLoading,
                     })}
                     data-testid="task-card"
                 >
@@ -249,4 +307,4 @@ class Task extends React.Component<Props, State> {
 }
 
 export { Task as TaskComponent };
-export default flow([withFeatureConsumer])(Task);
+export default flow([withFeatureConsumer, withAPIContext])(Task);

src/elements/content-sidebar/activity-feed/task-new/__tests__/Task-test.js

@@ -74,6 +74,11 @@ describe('elements/content-sidebar/ActivityFeed/task-new/Task', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    test('should set assigned_to state when component mounts', () => {
+        const wrapper = shallow(<Task currentUser={currentUser} {...task} />);
+        expect(wrapper.state('assigned_to')).toEqual(task.assigned_to);
+    });
+
     test('should show assignment status badges for each assignee', () => {
         const wrapper = mount(<Task currentUser={currentUser} onEdit={jest.fn()} onDelete={jest.fn()} {...task} />);
         expect(wrapper.find('[data-testid="avatar-group-avatar-container"]')).toHaveLength(2);
@@ -251,4 +256,33 @@ describe('elements/content-sidebar/ActivityFeed/task-new/Task', () => {
 
         expect(wrapper.find('CommentInlineError')).toHaveLength(1);
     });
+
+    test('should call fetchTaskCollaborators on modal open if there is a next_marker', async () => {
+        const taskWithMarker = {
+            ...task,
+            assigned_to: {
+                next_marker: 'foo',
+                entries: [],
+            },
+        };
+
+        const wrapper = mount(
+            <Task
+                {...taskWithMarker}
+                currentUser={currentUser}
+                error={{ title: 'blah', message: 'blah' }}
+                onEdit={jest.fn()}
+                onDelete={jest.fn()}
+            />,
+        );
+        const instance = wrapper.instance();
+        instance.fetchTaskCollaborators = jest
+            .fn()
+            .mockRejectedValueOnce()
+            .mockResolvedValueOnce({});
+
+        await instance.handleEditClick();
+
+        expect(instance.fetchTaskCollaborators).toBeCalled();
+    });
 });