Task 4133 : Add task feedback panel

[shweta2101]

DevBoard Task

https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4133/

Changes implemented

• Added a new Feedback tab to the task editor sidebar.

• Added a feedback-count badge when feedback exists.

  • Feedback category
  • Feedback notes
  • Reviewer name and initials
  • Relative submission time
  • Empty-feedback state

• Added API and frontend types for task feedback.

• Normalized API feedback fields and converted created_at into a Date.

• Defaulted missing API feedback to an empty array.

• Made the sidebar header more compact while keeping “Go back” and the project name on separate rows.

• Prevented task labels from wrapping unnecessarily.

• Moved the sidebar toggle down so it does not cover Rapid’s upload control.

• Updated the three tabs to use equal widths with responsive sizing.

• Added component and service tests for feedback rendering and normalization.

Impacted areas and testing

1. Task feedback data

• Open a task containing one and multiple feedback entries.
• Verify category, notes, reviewer, initials, and timestamp.
• Verify all categories: incomplete mapping, data quality issue, wrong area, and other.
• Verify tasks without a feedback field still load correctly.
• Verify the empty-feedback message appears when feedback is empty.

2. Task editor tabs

• Switch between Completion, Instructions, and Feedback.
• Verify the selected-tab underline and keyboard navigation.
• Confirm the count badge matches the number of feedback entries.
• Confirm no badge appears when the count is zero.

3. Sidebar layout

• Verify “Go back” and project name appear on separate rows.
• Test short and long project names.
• Verify task label, status, and lock timer do not overlap.
• Confirm load-error messages fit without excessive spacing.

4. Rapid map integration

• Confirm the sidebar toggle no longer overlaps the upload button.
• Open and close the sidebar and verify map controls remain usable.
• Test direct page load, browser refresh, and navigation into another task.

Screenshot:

Summary

• Added a Feedback tab to the task editor sidebar.
• Displayed feedback count badges, categories, comments, authors, initials, and submission times.
• Added an empty state when a task has no feedback.
• Added API and domain feedback types.
• Normalized feedback fields and timestamps in task detail responses.
• Defaulted missing feedback to an empty array.
• Updated sidebar layout, tab sizing, label wrapping, and toggle positioning.
• Added component and service tests for feedback rendering and API normalization.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f39cd622-8853-4ece-b04d-612f25a6170d

📥 Commits

Reviewing files that changed from the base of the PR and between edabd64 and 2bb5700.

📒 Files selected for processing (7)

• components/task-editor/FeedbackPanel.vue
• components/task-editor/Sidebar.vue
• pages/workspace/[id]/projects/[projectId]/tasks/[taskId]/editor.vue
• services/projects.ts
• test/unit/components/TaskEditorFeedbackPanel.test.ts
• test/unit/services/projects.test.ts
• types/projects.ts

---

📝 Walkthrough

Walkthrough

Task feedback now flows from the task detail API through normalization and editor wiring into a sidebar feedback tab. The new panel displays categorized entries, author details, timestamps, counts, and an empty state.

Changes

Task feedback

Layer / File(s)	Summary
Feedback data contract and normalization types/projects.ts, services/projects.ts, test/unit/services/projects.test.ts	Added API and domain feedback types. Task detail normalization maps feedback fields to camelCase and converts timestamps to Date values.
Feedback tab integration and layout components/task-editor/Sidebar.vue, pages/workspace/.../editor.vue	Passed feedback into the sidebar. Added the Feedback tab, count badge, panel integration, responsive styles, and related layout updates.
Feedback panel presentation and validation components/task-editor/FeedbackPanel.vue, test/unit/components/TaskEditorFeedbackPanel.test.ts	Added categorized feedback cards, author metadata, initials, timestamps, category styling, and empty-state rendering. Added component tests.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant TaskDetailAPI
  participant WorkspaceProjectsClient
  participant TaskEditorSidebar
  participant FeedbackPanel
  TaskDetailAPI->>WorkspaceProjectsClient: Return task feedback
  WorkspaceProjectsClient->>WorkspaceProjectsClient: Normalize fields and timestamp
  WorkspaceProjectsClient->>TaskEditorSidebar: Pass normalized feedback
  TaskEditorSidebar->>FeedbackPanel: Render feedback entries

Loading

Possibly related PRs

• TaskarCenterAtUW/workspaces-frontend#98: Introduced related task-editor feedback functionality extended by this change.

Suggested reviewers: susrisha

Poem

A rabbit hops through feedback bright,
With notes and badges set just right.
The task tabs bloom, the cards appear,
With names and timestamps crystal clear.
Empty paws still show the way. 🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a task feedback panel.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}