feat: add title attribute for timestamp value (PT-188673526)

[#188673526](https://www.pivotaltracker.com/story/show/188673526)
concord-consortium · Jan 16, 2025 · e386c5a · e386c5a
1 parent e3a9a21
commit e386c5a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/js/components/portal-dashboard/feedback/activity-feedback-textarea.tsx b/js/components/portal-dashboard/feedback/activity-feedback-textarea.tsx
@@ -12,10 +12,12 @@ interface IProps {
   updateActivityFeedback?: (activityId: string, activityIndex: number, platformStudentId: string, feedback: any) => void;
   trackEvent: TrackEventFunction;
   isResearcher: boolean;
+  feedbackTimestamp?: string;
 }
 
 export const ActivityFeedbackTextarea: React.FC<IProps> = (props) => {
-  const { activityId, activityIndex, activityStarted, feedback, studentId, updateActivityFeedback, trackEvent, isResearcher } = props;
+  const { activityId, activityIndex, activityStarted, feedback, studentId, updateActivityFeedback, trackEvent,
+          isResearcher, feedbackTimestamp } = props;
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [ height, setHeight ] = useState(0);
@@ -61,6 +63,7 @@ export const ActivityFeedbackTextarea: React.FC<IProps> = (props) => {
         placeholder={isResearcher ? "" : "Enter feedback"}
         ref={textareaRef}
         style={{ height: height + "px" }}
+        title={feedbackTimestamp && `Feedback updated ${feedbackTimestamp}`}
         disabled={isResearcher}
       />
     );

diff --git a/js/components/portal-dashboard/feedback/activity-level-feedback-student-rows.tsx b/js/components/portal-dashboard/feedback/activity-level-feedback-student-rows.tsx
@@ -59,6 +59,7 @@ export const ActivityLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
     const formattedName = getFormattedStudentName(isAnonymous, student);
     const activityStarted = feedbackData.get("activityStarted");
     const feedback = feedbackData.get("feedback");
+    const feedbackTimestamp = feedbackData?.get("updatedAt")?.toDate().toLocaleString() || undefined;
     const score = feedbackData.get("score");
     const hasRubric = rubric;
     const { rubricFeedback } = feedbackData.toJS();
@@ -108,6 +109,7 @@ export const ActivityLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
               updateActivityFeedback={updateActivityFeedback}
               trackEvent={trackEvent}
               isResearcher={isResearcher}
+              feedbackTimestamp={feedbackTimestamp}
             />
             <ActivityFeedbackScore
               activityId={activityId}

diff --git a/js/components/portal-dashboard/feedback/question-feedback-textarea.tsx b/js/components/portal-dashboard/feedback/question-feedback-textarea.tsx
@@ -15,10 +15,12 @@ interface IProps {
   updateQuestionFeedback: (answerId: string, feedback: any) => void;
   trackEvent: TrackEventFunction;
   isResearcher: boolean;
+  feedbackTimestamp?: string;
 }
 
 export const QuestionFeedbackTextarea: React.FC<IProps> = (props) => {
-  const { answer, answerId, feedback, studentId, questionId, activityId, updateQuestionFeedback, trackEvent, isResearcher } = props;
+  const { answer, answerId, feedback, studentId, questionId, activityId, updateQuestionFeedback, trackEvent,
+          isResearcher, feedbackTimestamp } = props;
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [ height, setHeight ] = useState(0);
@@ -68,6 +70,7 @@ export const QuestionFeedbackTextarea: React.FC<IProps> = (props) => {
       data-cy="feedback-textarea"
       onBlur={feedbackChanged ? updateFeedbackLogged : undefined}
       disabled={isResearcher}
+      title={feedbackTimestamp && `Feedback updated ${feedbackTimestamp}`}
     />
   );
 };
diff --git a/js/components/portal-dashboard/feedback/question-level-feedback-student-rows.tsx b/js/components/portal-dashboard/feedback/question-level-feedback-student-rows.tsx
@@ -49,6 +49,7 @@ export const QuestionLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
     const feedbackData = feedbacks.get(answerId);
     const feedback = feedbackData ? feedbackData.get("feedback") : "";
     const feedbackBadge = getFeedbackIcon(feedback, feedbackData, answer);
+    const feedbackTimestamp = feedbackData?.get("updatedAt")?.toDate().toLocaleString() || undefined;
 
     return (
       <div key={currentQuestionId + studentId} className={css.feedbackRowsRow} data-cy="feedbackRow">
@@ -77,6 +78,7 @@ export const QuestionLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
               updateQuestionFeedback={updateQuestionFeedback}
               trackEvent={trackEvent}
               isResearcher={isResearcher}
+              feedbackTimestamp={feedbackTimestamp}
             />
           }
         </div>