[WEB-4451] chore: work item header quick action enhancements#7414
Conversation
WalkthroughThis update refactors quick action handling for issues by introducing a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant IssueView
participant IssuePeekOverviewHeader
participant WorkItemDetailQuickActions
participant Modal
User->>IssueView: Opens issue peek
IssueView->>IssuePeekOverviewHeader: Renders header with quick action props
IssuePeekOverviewHeader->>WorkItemDetailQuickActions: Renders quick actions menu
User->>WorkItemDetailQuickActions: Clicks quick action (e.g., Delete)
WorkItemDetailQuickActions->>Modal: Opens corresponding modal
User->>Modal: Confirms action
Modal->>WorkItemDetailQuickActions: Calls handler (e.g., handleDeleteIssue)
WorkItemDetailQuickActions->>IssuePeekOverviewHeader: Triggers post-action logic
IssuePeekOverviewHeader->>IssueView: Updates view or closes peek
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx (1)
151-152: Remove commented code.- // const MENU_ITEMS = useWorkItemDetailMenuItems(menuItemProps); const baseMenuItems = useWorkItemDetailMenuItems(menuItemProps);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx(4 hunks)apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts(1 hunks)apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx(1 hunks)apps/web/core/components/issues/peek-overview/header.tsx(6 hunks)apps/web/core/components/issues/peek-overview/view.tsx(5 hunks)
🧰 Additional context used
🧠 Learnings (2)
apps/web/core/components/issues/peek-overview/header.tsx (1)
Learnt from: vamsikrishnamathala
PR: makeplane/plane#7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making imports like `@/plane-web/hooks/use-notification-preview` correctly resolve to files in `web/ce/hooks/`.
apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx (1)
Learnt from: vamsikrishnamathala
PR: makeplane/plane#7214
File: web/core/store/issue/helpers/base-issues.store.ts:117-117
Timestamp: 2025-06-16T07:23:39.497Z
Learning: In the updateIssueDates method of BaseIssuesStore (web/core/store/issue/helpers/base-issues.store.ts), the projectId parameter is intentionally made optional to support override implementations in subclasses. The base implementation requires projectId and includes an early return check, but making it optional allows derived classes to override the method with different parameter requirements.
🧬 Code Graph Analysis (2)
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx (1)
packages/ui/src/dropdowns/context-menu/root.tsx (1)
TContextMenuItem(12-25)
apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx (1)
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx (1)
WorkItemDetailQuickActions(36-353)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx (1)
277-291: LGTM! Clean implementation following established patterns.The new
useWorkItemDetailMenuItemshook is well-structured and follows the existing factory pattern used by other menu item hooks in this file. The memoization with correct dependencies ensures optimal performance.apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts (1)
9-9: Export addition looks good.The new export for the
issue-detailmodule is correctly placed and follows the established pattern.apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx (1)
1-176: Excellent refactoring to delegate quick actions.The component has been successfully simplified by delegating quick action UI and permission logic to
WorkItemDetailQuickActions. This improves modularity and reduces code duplication while maintaining the same external API.apps/web/core/components/issues/peek-overview/view.tsx (1)
55-84: Good implementation of local modal state management.The shift from store-managed to locally-managed modal states improves component encapsulation. The
isAnyLocalModalOpenflag properly coordinates with existing modal detection logic.apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx (1)
36-353: Well-architected component that centralizes quick action logic.This component successfully consolidates quick action dropdown functionality with:
- Comprehensive permission checks
- Proper modal state management
- Clean separation between local and parent state coordination
- Flexible menu item customization
- Event tracking integration
Great job on the modular design!
apps/web/core/components/issues/peek-overview/header.tsx (1)
234-248: LGTM! Good refactoring to use the centralized quick actions component.The integration of
WorkItemDetailQuickActionsproperly centralizes the quick action controls and maintains all the necessary functionality with improved error handling and event tracking.
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/web/core/components/issues/peek-overview/header.tsx (1)
88-88: Verify parentRef assignment to DOM element.The
parentRefis declared but I don't see it being assigned to a DOM element in the current code. This could cause positioning issues for theWorkItemDetailQuickActionscomponent.#!/bin/bash # Check if parentRef is properly assigned to DOM elements in the header component rg -A 5 -B 5 "ref.*parentRef" --type ts --type tsx
🧹 Nitpick comments (2)
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx (1)
149-149: Remove commented code.The commented line should be removed to keep the codebase clean.
- // const MENU_ITEMS = useWorkItemDetailMenuItems(menuItemProps);apps/web/core/components/issues/peek-overview/header.tsx (1)
156-172: Good archive handler implementation.The
handleArchiveIssuefunction properly handles the archive operation with navigation and event tracking, though it could benefit from error toast notification like the delete handler.Consider adding error toast notification for consistency:
} catch (error) { + setToast({ + title: t("toast.error"), + type: TOAST_TYPE.ERROR, + message: t("entity.archive.failed", { entity: t("issue.label", { count: 1 }) }), + }); captureError({ eventName: WORK_ITEM_TRACKER_EVENTS.archive, payload: { id: issueId }, error: error as Error, }); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx(1 hunks)apps/web/core/components/issues/peek-overview/header.tsx(6 hunks)
🧰 Additional context used
🧠 Learnings (1)
apps/web/core/components/issues/peek-overview/header.tsx (1)
Learnt from: vamsikrishnamathala
PR: makeplane/plane#7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making imports like `@/plane-web/hooks/use-notification-preview` correctly resolve to files in `web/ce/hooks/`.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx (3)
73-79: Good permission checking implementation.The permission checking logic is well-implemented with proper use of the
allowPermissionshook and considers both user permissions and read-only state.
186-232: Excellent modal management with dual state handling.The modal components are well-implemented with proper state management that handles both local state and optional external toggle callbacks, providing flexibility for different use cases.
244-347: Robust menu rendering with submenu support.The menu rendering logic properly handles both regular menu items and nested submenus, with consistent styling and event handling. The analytics tracking on menu item clicks is a good practice.
apps/web/core/components/issues/peek-overview/header.tsx (2)
131-154: Excellent error handling in delete handler.The
handleDeleteIssuefunction implements proper error handling with try/catch, appropriate success/error tracking, and user feedback via toast notifications.
234-247: Excellent refactoring to use centralized quick actions.The integration with
WorkItemDetailQuickActionsis well-implemented, passing all necessary props and handlers while maintaining the component's flexibility with theisPeekModeflag.
sriramveeraghanta
deleted the
chore-work-item-header-quick-action-enhancements
branch
* chore: work item header quick action enhancements * chore: code refactor
4 participants
Description
This PR includes enhancements for work item quick menu for peek view header and detail page header.
Type of Change
Media
References
Work-item: [WEB-4451]
Summary by CodeRabbit
New Features
Refactor
Bug Fixes