feat(#230): add view task modal #231

Hariom01010 · 2025-12-27T23:48:15Z

Date: 28 Dec 2025

Issue Ticket Number

Closes #230

Description

This PR adds support for a view task modal which shows a task's detail in read-only mode with close button both on user and team dashboard.
If a user has edit access for the task, the modal is opened in edit mode
If a user doesn't have edit acesss for the task, the modal is opened in view mode.
The update task mutation has been moved to a separate hook.
This will allow user to see essentials details for any task like Title, Description, Assignee, Status, Priority, Labels and Due Date

Documentation Updated?

Yes
No

Under Feature Flag

Yes
No

Database Changes

Yes
No

Breaking Changes

Yes
No

Development Tested?

Yes
No

Screenshots

Screenshot 1

proof.of.working.mp4

Test Coverage

Screenshot 1

Additional Notes

- add component to show todo details in read only mode with edit and close button. - move updateTask mutation to a separate hook - renamed create-edit-todo-dialog to todo-dialog

coderabbitai · 2025-12-27T23:48:27Z

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The PR introduces a modal dialog system for viewing and editing todos across the application. A new TodoDialog component supporting create, edit, and view modes replaces CreateEditTodoDialog, while a new ViewTodoModal displays read-only todo details. The useUpdateTask hook encapsulates update logic. Todo list tables now open view modals when clicked, allowing users to transition to edit mode or dismiss the modal.

Changes

Cohort / File(s)	Summary
Modal & Dialog Components `src/components/todos/create-edit-todo-dialog.tsx`	Entire component removed; previously provided create/edit dialog functionality.
Modal & Dialog Components `src/components/todos/todo-dialog.tsx`	New component introduced; discriminated union props support create, edit, and view modes; renders `CreateEditTodoForm` or `ViewTodoModal` based on mode; manages dialog state and mode transitions.
Modal & Dialog Components `src/components/todos/view-todo-modal.tsx`	New component introduced; displays read-only todo details (title, description, assignee, due date, priority, status, labels); includes optional Edit and Close action buttons; fetches labels via `useQuery`.
Button Components `src/components/todos/create-todo-button.tsx`	Replaced `CreateEditTodoDialog` import and usage with `TodoDialog`; maintains same props and behavior.
Button Components `src/components/todos/edit-task-button.tsx`	Replaced `CreateEditTodoDialog` with `TodoDialog`; replaced direct `useMutation` and manual query invalidations with new `useUpdateTask` hook; adjusted submission wiring to delegate to `handleSubmission` and close dialog on completion.
Table & List Components `src/components/todos/todo-list-table.tsx`	Added `TodoDialog` wrapper with view/edit mode support and local state for modal visibility and current mode; integrated `useUpdateTask` hook for submission handling; moved table row content inside dialog structure.
Table & List Components `src/modules/teams/team-tasks.tsx`	Introduced `TodoDialog` modal wrapping each todo row; added local state for modal visibility and current mode; integrated `useUpdateTask` hook with `handleSubmit` wrapper; preserved table row content as dialog children.
Hooks `src/hooks/useUpdateTask.ts`	New hook introduced; encapsulates mutation for updating tasks via `TasksApi.updateTask`; handles query invalidation (getTasks, getWatchListTasks, team-scoped queries), success/error toasts; exposes `mutation` and `handleSubmission` helper function.

Sequence Diagram

sequenceDiagram
    actor User
    participant UI as Table/List View
    participant Dialog as TodoDialog
    participant ViewModal as ViewTodoModal
    participant Form as CreateEditTodoForm
    participant Hook as useUpdateTask
    participant API as TasksApi
    participant Cache as Query Cache

    User->>UI: Click on todo row
    UI->>Dialog: Open dialog (mode: view)
    Dialog->>ViewModal: Render view modal
    ViewModal-->>Dialog: Display todo details (read-only)
    Dialog-->>UI: Show modal with details

    User->>Dialog: Click Edit button
    Dialog->>Dialog: Switch mode to edit
    Dialog->>Form: Render form with todo data
    Form-->>Dialog: Show editable form

    User->>Form: Edit fields & click Save
    Form->>Dialog: Trigger onSubmit with new data
    Dialog->>Hook: Call handleSubmission(todoDetails)
    
    rect rgb(200, 220, 240)
    Note over Hook,Cache: Update & Invalidate
    Hook->>API: updateTask(id, updateDetails)
    API-->>Hook: Success response
    Hook->>Cache: Invalidate getTasks
    Hook->>Cache: Invalidate getWatchListTasks
    Hook->>Cache: Invalidate team-scoped queries
    end

    Hook-->>Dialog: handleSubmission completes
    Dialog->>Dialog: Switch mode to view
    Dialog->>ViewModal: Render updated details
    ViewModal-->>Dialog: Display refreshed data
    Dialog-->>UI: Modal shows updated view

    User->>Dialog: Click Close
    Dialog->>UI: Close modal
    UI-->>User: Return to list view

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A click upon a todo fair,
Now opens modals rich and rare!
View thy tasks in splendid grace,
Edit them in perfect place—
Save thy changes, close the show,
And back to work you swiftly go! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main feature being added - a view task modal component with read-only task details display.
Linked Issues check	✅ Passed	The PR fully implements all coding requirements from issue #230: view modal opens on todo click, displays task details in read-only mode, includes Edit/Close buttons, transitions to edit mode with Save/Cancel buttons, and reuses existing edit functionality.
Out of Scope Changes check	✅ Passed	All code changes are directly scoped to implementing the view task modal feature and supporting refactors (hook extraction, component replacement) as outlined in issue #230; no unrelated changes present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly outlines the feature: adding a view task modal for read-only task details with edit capability, moving mutation logic to a separate hook, and supporting both user and team dashboards.

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

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

coderabbitai

Actionable comments posted: 3

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6ac9a31 and fa35eea.

📒 Files selected for processing (8)

src/components/todos/create-edit-todo-dialog.tsx
src/components/todos/create-todo-button.tsx
src/components/todos/edit-task-button.tsx
src/components/todos/todo-dialog.tsx
src/components/todos/todo-list-table.tsx
src/components/todos/view-todo-modal.tsx
src/hooks/useUpdateTask.ts
src/modules/teams/team-tasks.tsx

💤 Files with no reviewable changes (1)

src/components/todos/create-edit-todo-dialog.tsx

🧰 Additional context used

🧬 Code graph analysis (7)

src/components/todos/todo-dialog.tsx (3)

src/components/todos/create-edit-todo-form.tsx (2)

TTodoFormData (45-45)

CreateEditTodoForm (114-350)

src/components/ui/alert-dialog.tsx (5)

AlertDialog (122-122)

AlertDialogTrigger (132-132)

AlertDialogContent (125-125)

AlertDialogHeader (128-128)

AlertDialogTitle (131-131)

src/components/todos/view-todo-modal.tsx (1)

ViewTodoModal (43-108)

src/components/todos/view-todo-modal.tsx (8)

src/lib/utils.ts (1)

cn (5-7)

src/components/todos/create-edit-todo-form.tsx (1)

TTodoFormData (45-45)

src/api/labels/labels.api.ts (1)

LablesApi (4-12)

src/lib/date-util.ts (1)

DateUtil (11-21)

src/components/todos/task-priority-label.tsx (1)

TaskPriorityLabel (14-29)

src/components/todos/todo-status-table.tsx (1)

TodoStatusTable (15-32)

src/components/ui/badge.tsx (1)

Badge (37-37)

src/components/ui/button.tsx (1)

Button (59-59)

src/modules/teams/team-tasks.tsx (10)

src/hooks/useUpdateTask.ts (1)

useUpdateTask (14-67)

src/components/todos/create-edit-todo-form.tsx (1)

TTodoFormData (45-45)

src/components/todos/todo-dialog.tsx (1)

TodoDialog (39-100)

src/lib/todo-util.ts (1)

TodoUtil (4-67)

src/components/todos/todo-status-table.tsx (1)

TodoStatusTable (15-32)

src/components/todos/todo-labels-list.tsx (1)

TodoLabelsList (92-109)

src/components/todos/task-priority-label.tsx (1)

TaskPriorityLabel (14-29)

src/lib/date-util.ts (1)

DateUtil (11-21)

src/components/users/reassign-user.tsx (1)

ReassignUser (97-117)

src/components/todos/edit-task-button.tsx (1)

EditTodoButton (16-54)

src/components/todos/edit-task-button.tsx (4)

src/api/tasks/tasks.types.ts (1)

TTask (11-24)

src/hooks/useUpdateTask.ts (1)

useUpdateTask (14-67)

src/components/todos/create-edit-todo-form.tsx (1)

TTodoFormData (45-45)

src/components/todos/todo-dialog.tsx (1)

TodoDialog (39-100)

src/components/todos/create-todo-button.tsx (1)

src/components/todos/todo-dialog.tsx (1)

TodoDialog (39-100)

src/hooks/useUpdateTask.ts (3)

src/api/tasks/tasks.types.ts (1)

TTask (11-24)

src/api/tasks/tasks.api.ts (1)

TasksApi (17-77)

src/components/todos/create-edit-todo-form.tsx (1)

TTodoFormData (45-45)

src/components/todos/todo-list-table.tsx (7)

src/hooks/useUpdateTask.ts (1)

useUpdateTask (14-67)

src/components/todos/create-edit-todo-form.tsx (1)

TTodoFormData (45-45)

src/components/todos/todo-dialog.tsx (1)

TodoDialog (39-100)

src/lib/todo-util.ts (1)

TodoUtil (4-67)

src/components/todos/todo-status-table.tsx (1)

TodoStatusTable (15-32)

src/components/todos/todo-labels-list.tsx (1)

TodoLabelsList (92-109)

src/components/todos/task-priority-label.tsx (1)

TaskPriorityLabel (14-29)

🪛 Biome (2.1.2)

src/components/todos/todo-list-table.tsx

[error] 122-122: Static Elements should not be interactive.

To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.

(lint/a11y/noStaticElementInteractions)

[error] 122-122: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

🔇 Additional comments (13)

src/components/todos/create-todo-button.tsx (1)

4-4: LGTM!

The migration from CreateEditTodoDialog to TodoDialog is a clean drop-in replacement with no functional changes.

Also applies to: 50-75

src/components/todos/view-todo-modal.tsx (2)

43-49: LGTM!

The label fetching logic with useQuery and filtering is implemented correctly, with appropriate staleTime caching.

53-92: LGTM!

The read-only field display is well-structured with proper fallbacks and formatting. The use of the internal ViewField component provides good consistency.

src/components/todos/todo-dialog.tsx (2)

12-37: LGTM!

Excellent use of discriminated union types to ensure type safety across different dialog modes.

52-70: LGTM!

The mode transition logic correctly handles switching between view and edit modes, with proper cleanup when the dialog closes.

src/components/todos/edit-task-button.tsx (2)

19-28: LGTM!

The refactor to use useUpdateTask hook properly centralizes the update logic and cleanly handles dialog closure on success.

31-52: LGTM!

The migration to TodoDialog is clean with all props correctly wired, including mutation pending state.

src/hooks/useUpdateTask.ts (2)

17-42: LGTM!

The mutation setup includes comprehensive query invalidations covering all relevant cache keys (getTasks, watchlist, deferred, team-scoped) with proper success/error handling.

44-61: LGTM!

The handleSubmission implementation correctly:

Detects changes using TodoUtil.getUpdateTodoDetails

Only mutates when there are actual changes (optimization)

Properly chains the custom onSuccess callback

src/modules/teams/team-tasks.tsx (2)

37-49: LGTM!

The integration of useUpdateTask and modal state management correctly handles the view/edit mode transitions with proper callback chaining.

51-93: LGTM!

The TodoDialog wrapping pattern correctly makes the entire row clickable to open the view modal, while stopPropagation on the actions cell prevents unintended dialog opening when interacting with action buttons.

src/components/todos/todo-list-table.tsx (2)

65-76: LGTM!

The modal state and update flow integration mirrors the team-tasks implementation and correctly handles mode transitions.

78-131: LGTM with accessibility concern noted below.

The TodoDialog wrapping pattern correctly implements the clickable row behavior.

src/components/todos/todo-dialog.tsx

src/components/todos/todo-list-table.tsx

src/components/todos/view-todo-modal.tsx

src/components/todos/todo-dialog.tsx

src/hooks/useUpdateTask.ts

src/components/todos/todo-dialog.tsx

…support in createEditTodoForm

src/components/todos/todo-form.tsx

src/components/todos/create-edit-todo-form.tsx

src/components/todos/todo-dialog.tsx

src/components/todos/todo-list-table.tsx

src/modules/teams/team-tasks.tsx

- update filename from create-todo-form to todo-form

…o-dialog.tsx

src/components/todos/todo-form.tsx

…o.constants.ts file

feat(view-todo-modal):

fa35eea

- add component to show todo details in read only mode with edit and close button. - move updateTask mutation to a separate hook - renamed create-edit-todo-dialog to todo-dialog

Hariom01010 self-assigned this Dec 27, 2025

Hariom01010 added the feature task A big ticket item that needs to come up as a feature label Dec 27, 2025

coderabbitai bot reviewed Dec 27, 2025

View reviewed changes

src/components/todos/todo-dialog.tsx Outdated Show resolved Hide resolved

src/components/todos/todo-list-table.tsx Outdated Show resolved Hide resolved

src/components/todos/view-todo-modal.tsx Outdated Show resolved Hide resolved

MayankBansal12 reviewed Dec 28, 2025

View reviewed changes

Hariom01010 added 2 commits December 29, 2025 19:51

feat(view-modal):add type for modal state

3745d22

feat(view-todo-modal): fix ESLint warning in TodoDialog useEffect hook

3a6bb55

Hariom01010 commented Dec 30, 2025

View reviewed changes

src/components/todos/todo-dialog.tsx Outdated Show resolved Hide resolved

Hariom01010 added 2 commits December 31, 2025 18:57

feat(view-todo-modal): remove view modal component and add view mode …

65f9721

…support in createEditTodoForm

feat(view-todo-modal): fix build issues

b44d065

yesyash requested changes Dec 31, 2025

View reviewed changes

Hariom01010 added 3 commits January 1, 2026 00:21

feat(view-todo-modal): add constant file for todo constants

4bc9044

- update filename from create-todo-form to todo-form

feat(view-todo-modal): update constant file name and move type to tod…

1fef236

…o-dialog.tsx

feat(view-todo-modal): update imports

6253b2d

Hariom01010 requested a review from yesyash December 31, 2025 19:05

MayankBansal12 reviewed Jan 1, 2026

View reviewed changes

src/components/todos/todo-form.tsx Outdated Show resolved Hide resolved

Hariom01010 added 2 commits January 1, 2026 18:17

feat(view-todo-modal): remove unnecessary check for form submit

caf64b9

feat(view-todo-modal): declare constant in todo-dialog and remove tod…

821b7b6

…o.constants.ts file

yesyash approved these changes Jan 1, 2026

View reviewed changes

iamitprakash approved these changes Jan 1, 2026

View reviewed changes

yesyash merged commit eeda972 into RealDevSquad:develop Jan 1, 2026
2 checks passed

This was referenced Jan 1, 2026

enhancement(todos): change pointer to cursor and underline title when hover on todo #232

Merged

Dev to Main Sync #233

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(#230): add view task modal #231

feat(#230): add view task modal #231

Uh oh!

Hariom01010 commented Dec 27, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Dec 27, 2025 •

edited

Loading

Review skipped

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(#230): add view task modal #231

feat(#230): add view task modal #231

Uh oh!

Conversation

Hariom01010 commented Dec 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue Ticket Number

Description

Documentation Updated?

Under Feature Flag

Database Changes

Breaking Changes

Development Tested?

Screenshots

Test Coverage

Additional Notes

Uh oh!

coderabbitai bot commented Dec 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Hariom01010 commented Dec 27, 2025 •

edited

Loading

coderabbitai bot commented Dec 27, 2025 •

edited

Loading