feat(tasks): show completion timestamp for task assignees (#1158)

* feat(tasks): show completion timestamp for task assignees

* refactor(tasks): date/tooltips

Author: alexkrolick

flow-typed/box-ui-elements.js

@@ -654,6 +654,7 @@ type TaskMini = {|
 type TaskCollabRole = 'CREATOR' | 'ASSIGNEE';
 
 type TaskCollab<R> = {|
+    completed_at?: ?ISODate,
     id: ID,
     role: R,
     status: TaskCollabStatus,

i18n/en-US.properties

@@ -432,16 +432,16 @@ be.tasks.feed.moreAssigneesLabel = See all assignees
 be.tasks.feed.rejectAction = Reject
 # Label for a rejected task
 be.tasks.feed.rejectedLabel = Task Rejected
-# accepted task status
-be.tasks.status.accepted = Accepted
-# Completed task status
-be.tasks.status.completed = Completed
+# Accepted task status, where dateTime is a readable time like "Today at 2pm"
+be.tasks.status.accepted = Accepted {dateTime}
+# Completed task status, where dateTime is a readable time like "Today at 2pm"
+be.tasks.status.completed = Completed {dateTime}
 # Task status when in progress
 be.tasks.status.inProgress = Awaiting
 # Task status when not started
 be.tasks.status.notStarted = Awaiting
-# Rejected task status
-be.tasks.status.rejected = Rejected
+# Rejected task status, where dateTime is a readable time like "Today at 2pm"
+be.tasks.status.rejected = Rejected {dateTime}
 # Label and date for task due date
 be.tasks.taskDueDate = Due: {date}
 # Tasks for approval

src/elements/common/messages.js

@@ -1015,18 +1015,18 @@ const messages = defineMessages({
     },
     tasksFeedStatusRejected: {
         id: 'be.tasks.status.rejected',
-        defaultMessage: 'Rejected',
-        description: 'Rejected task status',
+        defaultMessage: 'Rejected {dateTime}',
+        description: 'Rejected task status, where dateTime is a readable time like "Today at 2pm"',
     },
     tasksFeedStatusAccepted: {
         id: 'be.tasks.status.accepted',
-        defaultMessage: 'Accepted',
-        description: 'accepted task status',
+        defaultMessage: 'Accepted {dateTime}',
+        description: 'Accepted task status, where dateTime is a readable time like "Today at 2pm"',
     },
     tasksFeedStatusCompleted: {
         id: 'be.tasks.status.completed',
-        defaultMessage: 'Completed',
-        description: 'Completed task status',
+        defaultMessage: 'Completed {dateTime}',
+        description: 'Completed task status, where dateTime is a readable time like "Today at 2pm"',
     },
     tasksFeedStatusNotStarted: {
         id: 'be.tasks.status.notStarted',

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

@@ -166,7 +166,7 @@ class Comment extends React.Component<Props, State> {
                                 }
                             >
                                 <small className="bcs-comment-created-at">
-                                    <ReadableTime alwaysShowTime timestamp={createdAtTimestamp} />
+                                    <ReadableTime relativeThreshold={0} alwaysShowTime timestamp={createdAtTimestamp} />
                                 </small>
                             </Tooltip>
                         </div>

src/elements/content-sidebar/activity-feed/comment/__tests__/__snapshots__/Comment-test.js.snap

@@ -55,6 +55,7 @@ exports[`elements/content-sidebar/ActivityFeed/comment/Comment should correctly
           >
             <ReadableTime
               alwaysShowTime={true}
+              relativeThreshold={0}
               timestamp={1506534041000}
             />
           </small>
@@ -126,6 +127,7 @@ exports[`elements/content-sidebar/ActivityFeed/comment/Comment should correctly
           >
             <ReadableTime
               alwaysShowTime={true}
+              relativeThreshold={0}
               timestamp={1506534041000}
             />
           </small>
@@ -198,6 +200,7 @@ exports[`elements/content-sidebar/ActivityFeed/comment/Comment should render an
           >
             <ReadableTime
               alwaysShowTime={true}
+              relativeThreshold={0}
               timestamp={1506534041000}
             />
           </small>
@@ -273,6 +276,7 @@ exports[`elements/content-sidebar/ActivityFeed/comment/Comment should render com
           >
             <ReadableTime
               alwaysShowTime={true}
+              relativeThreshold={0}
               timestamp={1506534041000}
             />
           </small>

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

@@ -6,6 +6,7 @@ import uniqueId from 'lodash/uniqueId';
 import { Flyout, Overlay } from '../../../../components/flyout';
 import Tooltip from '../../../../components/tooltip';
 import PlainButton from '../../../../components/plain-button';
+import ReadableTime from '../../../../components/time/ReadableTime';
 import messages from '../../../common/messages';
 import AssigneeStatus from './AssigneeStatus';
 import { TASK_NEW_APPROVED, TASK_NEW_REJECTED, TASK_NEW_COMPLETED, TASK_NEW_NOT_STARTED } from '../../../../constants';
@@ -19,20 +20,26 @@ type Props = {|
 |} & InjectIntlProvidedProps;
 
 const statusMessages = {
-    [TASK_NEW_APPROVED]: <FormattedMessage {...messages.tasksFeedStatusAccepted} />,
-    [TASK_NEW_REJECTED]: <FormattedMessage {...messages.tasksFeedStatusRejected} />,
-    [TASK_NEW_COMPLETED]: <FormattedMessage {...messages.tasksFeedStatusCompleted} />,
-    [TASK_NEW_NOT_STARTED]: <FormattedMessage {...messages.tasksFeedStatusNotStarted} />,
+    [TASK_NEW_APPROVED]: messages.tasksFeedStatusAccepted,
+    [TASK_NEW_REJECTED]: messages.tasksFeedStatusRejected,
+    [TASK_NEW_COMPLETED]: messages.tasksFeedStatusCompleted,
+    [TASK_NEW_NOT_STARTED]: null,
 };
 
-const AssigneeTooltipLabel = React.memo(({ user, status }) => {
+const Datestamp = ({ date }: { date: ISODate | Date }) => {
+    return <ReadableTime timestamp={new Date(date).getTime()} alwaysShowTime relativeThreshold={0} />;
+};
+
+const AssignmentDetails = React.memo(({ user, status, completedAt, className }) => {
     const statusMessage = statusMessages[status] || null;
     return (
-        <div className="bcs-task-assignment-tooltip-text">
-            <div>
-                <strong>{user.name}</strong>
-            </div>
-            {statusMessage && <div>{statusMessage}</div>}
+        <div className={className}>
+            <div className="bcs-task-assignment-details-name">{user.name}</div>
+            {statusMessage && completedAt && (
+                <div className="bcs-task-assignment-details-status">
+                    <FormattedMessage {...statusMessage} values={{ dateTime: <Datestamp date={completedAt} /> }} />
+                </div>
+            )}
         </div>
     );
 });
@@ -53,34 +60,44 @@ class Assignees extends React.Component<Props> {
         const areThereMoreEntries = !!next_marker; // there are more assignees in another page of results
         const visibleAssignees = entries
             .slice(0, maxAvatars)
-            .map(({ id: assignmentId, target, status: assigneeStatus }) => {
+            .map(({ id, target, status, completed_at: completedAt }) => {
                 return (
-                    <Tooltip key={assignmentId} text={<AssigneeTooltipLabel user={target} status={assigneeStatus} />}>
+                    <Tooltip
+                        key={id}
+                        text={
+                            <AssignmentDetails
+                                className="bcs-task-assignment-tooltip"
+                                user={target}
+                                status={status}
+                                completedAt={completedAt}
+                            />
+                        }
+                    >
                         <AssigneeStatus
-                            key={assignmentId}
-                            status={assigneeStatus}
+                            status={status}
                             user={target}
                             getAvatarUrl={getAvatarUrl}
                             data-testid="task-assignment-status"
                         />
                     </Tooltip>
                 );
             });
-        const allAssignees = entries.map(({ id: assignmentId, target, status: assigneeStatus }) => {
-            const statusMessage = statusMessages[assigneeStatus] || null;
+        const allAssignees = entries.map(({ id, target, status, completed_at: completedAt }) => {
             return (
-                <li key={assignmentId} className="bcs-task-assignment-list-item">
+                <li key={id} className="bcs-task-assignment-list-item">
                     <AssigneeStatus
-                        status={assigneeStatus}
+                        status={status}
                         className="bcs-task-assignment-list-item-avatar"
                         user={target}
                         getAvatarUrl={getAvatarUrl}
                         data-testid="task-assignment-status"
                     />
-                    <div className="bcs-task-assignment-list-item-details">
-                        <div>{target.name}</div>
-                        <div className="bcs-task-assignment-list-item-status">{statusMessage}</div>
-                    </div>
+                    <AssignmentDetails
+                        className="bcs-task-assignment-list-item-details"
+                        user={target}
+                        status={status}
+                        completedAt={completedAt}
+                    />
                 </li>
             );
         });

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

@@ -114,7 +114,7 @@ $card-left-offset: 40px;
 
     .bcs-comment {
         .bcs-comment-user-name {
-            margin-right: 0;
+            margin-right: 3px;
 
             &.link {
                 white-space: normal;
@@ -127,10 +127,6 @@ $card-left-offset: 40px;
     }
 }
 
-.bcs-task-assignment-tooltip-text {
-    text-align: center;
-}
-
 .bcs-task-assignment-status {
     display: inline-block;
     height: 32px;
@@ -170,10 +166,14 @@ $card-left-offset: 40px;
 }
 
 .bcs-task-assignment-list-item {
-    align-items: flex-start;
+    align-items: center;
     display: flex;
     margin: 6px 0 0 0;
     padding: 3px 0;
+
+    .bcs-task-assignment-details-status {
+        color: $bdl-neutral-02;
+    }
 }
 
 .bcs-task-assignment-list-item-avatar {
@@ -187,3 +187,11 @@ $card-left-offset: 40px;
 .bcs-task-assignment-list-item-status {
     color: $bdl-neutral-02;
 }
+
+.bcs-task-assignment-tooltip {
+    text-align: center;
+
+    .bcs-task-assignment-details-name {
+        font-weight: bold;
+    }
+}