Request mappers to read invalidated task comments:

- add info svg icon
- add banner request to view task history comments
- conditional render of banner if task was invalidated and has comments

frontend/src/components/svgIcons/index.js

@@ -72,3 +72,4 @@ export { SidebarIcon } from './sidebar';
 export { QuestionCircleIcon } from './questionCircle';
 export { ChartLineIcon } from './chart';
 export { EditIcon } from './edit';
+export { InfoIcon } from './info';

frontend/src/components/svgIcons/info.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export class InfoIcon extends React.PureComponent {
+  render() {
+    return (
+      <svg class="w1" data-icon="info" viewBox="0 0 32 32" {...this.props}>
+        <title>info icon</title>
+        <path
+          fill="currentColor"
+          d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"
+        />
+      </svg>
+    );
+  }
+}

frontend/src/components/taskSelection/action.js

@@ -221,6 +221,7 @@ export function TaskMapAction({ project, projectIsReady, tasks, activeTasks, act
                       <CompletionTabForMapping
                         project={project}
                         tasksIds={tasksIds}
+                        taskHistory={taskHistory}
                         taskInstructions={
                           activeTasks && activeTasks.length === 1
                             ? activeTasks[0].perTaskInstructions

frontend/src/components/taskSelection/actionSidebars.js

@@ -15,16 +15,19 @@ import {
   QuestionCircleIcon,
   ChevronRightIcon,
   ChevronDownIcon,
+  InfoIcon,
 } from '../svgIcons';
 import { getEditors } from '../../utils/editorsList';
 import { htmlFromMarkdown } from '../../utils/htmlFromMarkdown';
 import { pushToLocalJSONAPI, fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import { CommentInputField } from '../comments/commentInput';
 import { useFetchLockedTasks, useClearLockedTasks } from '../../hooks/UseLockedTasks';
+import useReadTaskComments from '../../hooks/useReadTaskComments';
 
 export function CompletionTabForMapping({
   project,
   tasksIds,
+  taskHistory,
   taskInstructions,
   disabled,
   taskComment,
@@ -38,6 +41,7 @@ export function CompletionTabForMapping({
   const radioInput = 'radio-input input-reset pointer v-mid dib h2 w2 mr2 br-100 ba b--blue-light';
   const fetchLockedTasks = useFetchLockedTasks();
   const clearLockedTasks = useClearLockedTasks();
+  const readTaskComments = useReadTaskComments(taskHistory);
 
   const splitTask = () => {
     if (!disabled) {
@@ -104,6 +108,14 @@ export function CompletionTabForMapping({
           {(close) => <UnsavedMapChangesModalContent close={close} action={showMapChangesModal} />}
         </Popup>
       )}
+      {readTaskComments && (
+        <div class="flex items-center justify-center pa1 mb1 bg-grey-light blue-grey">
+          <InfoIcon />
+          <span class="ml2 fw1 pa1">
+            <FormattedMessage {...messages.readTaskComments} />
+          </span>
+        </div>
+      )}
       <div className="cf">
         {taskInstructions && <TaskSpecificInstructions instructions={taskInstructions} />}
         <h4 className="ttu blue-grey f5">

frontend/src/components/taskSelection/messages.js

@@ -303,6 +303,10 @@ export default defineMessages({
     id: 'project.tasks.filter.noTasksFound',
     defaultMessage: 'No tasks were found.',
   },
+  readTaskComments: {
+    id: 'project.tasks.readComments',
+    defaultMessage: 'Please check history for relevant task comments.',
+  },
   completion: {
     id: 'project.tasks.action.completion',
     defaultMessage: 'Completion',

frontend/src/hooks/tests/useReadTaskComments.test.js

@@ -0,0 +1,29 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { invalidatedTaskHistory, history } from '../../network/tests/mockData/taskHistory';
+import useReadTaskComments from '../useReadTaskComments';
+
+describe('test useReadTaskComments hook', () => {
+  it('returns false when there is no task history', () => {
+    const { result } = renderHook(() => useReadTaskComments({}));
+    const readTaskComments = result.current;
+    expect(readTaskComments).toBe(false);
+  });
+
+  it('returns false if task has not been previously invalidated', () => {
+    const { result } = renderHook(() => useReadTaskComments(history));
+    const readTaskComments = result.current;
+    expect(readTaskComments).toBe(false);
+  });
+
+  it('returns false if task history does not have comments', () => {
+    const { result } = renderHook(() => useReadTaskComments(history));
+    const readTaskComments = result.current;
+    expect(readTaskComments).toBe(false);
+  });
+
+  it('returns true if was invalidated and has comments', () => {
+    const { result } = renderHook(() => useReadTaskComments(invalidatedTaskHistory));
+    const readTaskComments = result.current;
+    expect(readTaskComments).toBe(true);
+  });
+});

frontend/src/hooks/useReadTaskComments.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+const useReadTaskComments = (history) => {
+  const [readTaskComments, setReadTaskComments] = useState(false);
+
+  useEffect(() => {
+    if (history && history.taskHistory && history.taskHistory.length > 1) {
+      const invalidatedTaskHistory = history.taskHistory.filter(
+        (task) => task.actionText === 'INVALIDATED',
+      );
+      const taskComments = history.taskHistory.filter((task) => task.action === 'COMMENT');
+
+      if (invalidatedTaskHistory.length > 0 && taskComments.length > 0) {
+        setReadTaskComments(true);
+      }
+    }
+  }, [history]);
+  return readTaskComments;
+};
+
+export default useReadTaskComments;

frontend/src/locales/en.json

@@ -572,6 +572,7 @@
   "project.tasks.filter.readyToValidate": "Ready for validation",
   "project.tasks.filter.readyToMap": "Available for mapping",
   "project.tasks.filter.noTasksFound": "No tasks were found.",
+  "project.tasks.readComments": "Please check history for relevant task comments.",
   "project.tasks.action.completion": "Completion",
   "project.tasks.action.history": "History",
   "project.tasks.action.finish_mapping.title": "Once you have finished mapping",

frontend/src/network/tests/mockData/taskHistory.js

@@ -42,3 +42,28 @@ export const history = {
     },
   ],
 };
+
+export const invalidatedTaskHistory = {
+  taskHistory: [
+    {
+      historyId: 12001,
+      taskId: 1,
+      action: 'COMMENT',
+      actionText: 'More buildings need to be mapped',
+      actionDate: '2020-10-04T14:35:30.174515Z',
+      actionBy: 'test_user',
+      pictureUrl: null,
+      issues: null,
+    },
+    {
+      historyId: 12000,
+      taskId: 1,
+      action: 'STATE_CHANGE',
+      actionText: 'INVALIDATED',
+      actionDate: '2020-10-04T14:35:20.174515Z',
+      actionBy: 'test_user',
+      pictureUrl: null,
+      issues: null,
+    },
+  ],
+};