[WEB-3262]fix: incomplete activity render for activity in notifications#6777
[WEB-3262]fix: incomplete activity render for activity in notifications#6777sriramveeraghanta merged 2 commits intopreviewfrom
Conversation
|
Pull Request Linked with Plane Issues References
Comment Automatically Generated by Plane |
4 similar comments
|
Pull Request Linked with Plane Issues References
Comment Automatically Generated by Plane |
|
Pull Request Linked with Plane Issues References
Comment Automatically Generated by Plane |
|
Pull Request Linked with Plane Issues References
Comment Automatically Generated by Plane |
|
Pull Request Linked with Plane Issues References
Comment Automatically Generated by Plane |
WalkthroughA new React functional component named Changes
Sequence Diagram(s)sequenceDiagram
participant NI as NotificationItem
participant WS as useWorkspace
participant NC as NotificationContent
participant UI as Renderer
NI ->> WS: Retrieve workspace using workspaceSlug
WS -->> NI: Return workspace.id
NI ->> NC: Pass notification data and workspace information
NC ->> UI: Render trigger, action, and value details
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ 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:
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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
web/core/components/workspace-notifications/sidebar/notification-card/content.tsx (3)
23-27: Add optional chaining for nested properties.In the
renderTriggerNamefunction, you're safely using optional chaining fortriggeredBy?.is_botandtriggeredBy?.display_name, but not fortriggeredBy.first_name. IftriggeredByis undefined, accessingfirst_namedirectly would cause a runtime error.const renderTriggerName = () => ( <span className="text-custom-text-100 font-medium"> - {triggeredBy?.is_bot ? triggeredBy.first_name : triggeredBy?.display_name}{" "} + {triggeredBy?.is_bot ? triggeredBy?.first_name : triggeredBy?.display_name}{" "} </span> );
29-59: Consider refactoring conditional logic for better maintainability.The
renderActionfunction has multiple conditionals for different notification fields. While the current implementation works, consider using a map/object approach for better maintainability as the number of fields grows.const renderAction = () => { if (!notificationField) return ""; + + const actionMap = { + duplicate: () => verb === "created" + ? "marked that this work item is a duplicate of" + : "marked that this work item is not a duplicate", + assignees: () => newValue !== "" ? "added assignee" : "removed assignee", + start_date: () => newValue !== "" ? "set start date" : "removed the start date", + target_date: () => newValue !== "" ? "set due date" : "removed the due date", + labels: () => newValue !== "" ? "added label" : "removed label", + parent: () => newValue !== "" ? "added parent" : "removed parent", + relates_to: () => "marked that this work item is related to", + comment: () => "commented", + archived_at: () => newValue === "restore" ? "restored the work item" : "archived the work item", + None: () => null, + }; + + if (actionMap[notificationField]) { + return actionMap[notificationField](); + } + + const baseAction = !["comment", "archived_at"].includes(notificationField) ? verb : ""; + return `${baseAction} ${replaceUnderscoreIfSnakeCase(notificationField)}`; - if (notificationField === "duplicate") - return verb === "created" - ? "marked that this work item is a duplicate of" - : "marked that this work item is not a duplicate"; - if (notificationField === "assignees") { - return newValue !== "" ? "added assignee" : "removed assignee"; - } - if (notificationField === "start_date") { - return newValue !== "" ? "set start date" : "removed the start date"; - } - if (notificationField === "target_date") { - return newValue !== "" ? "set due date" : "removed the due date"; - } - if (notificationField === "labels") { - return newValue !== "" ? "added label" : "removed label"; - } - if (notificationField === "parent") { - return newValue !== "" ? "added parent" : "removed parent"; - } - if (notificationField === "relates_to") return "marked that this work item is related to"; - if (notificationField === "comment") return "commented"; - if (notificationField === "archived_at") { - return newValue === "restore" ? "restored the work item" : "archived the work item"; - } - if (notificationField === "None") return null; - - const baseAction = !["comment", "archived_at"].includes(notificationField) ? verb : ""; - return `${baseAction} ${replaceUnderscoreIfSnakeCase(notificationField)}`; };A similar approach could be applied to the
renderValuefunction.
95-101: Provide a meaningful ID for the LiteTextReadOnlyEditor.The
idprop for theLiteTextReadOnlyEditorcomponent is set to an empty string. For better accessibility and debugging, provide a meaningful ID such as a combination of notification ID and field type.<LiteTextReadOnlyEditor - id="" + id={`notification-comment-${notification.id}`} initialValue={newValue ?? ""} workspaceId={workspaceId} workspaceSlug={workspaceSlug} projectId={projectId} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/core/components/workspace-notifications/sidebar/notification-card/content.tsx(1 hunks)web/core/components/workspace-notifications/sidebar/notification-card/index.ts(1 hunks)web/core/components/workspace-notifications/sidebar/notification-card/item.tsx(4 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
web/core/components/workspace-notifications/sidebar/notification-card/item.tsx (1)
web/core/components/workspace-notifications/sidebar/notification-card/content.tsx (1) (1)
NotificationContent(10-109)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (5)
web/core/components/workspace-notifications/sidebar/notification-card/index.ts (1)
3-3: LGTM! Added export for the new component.The additional export for the new
NotificationContentcomponent is correctly added.web/core/components/workspace-notifications/sidebar/notification-card/item.tsx (4)
14-15: Added necessary imports.The imports have been correctly updated to include the new
useWorkspacehook and theNotificationContentcomponent.
28-36: Added workspace retrieval.Good addition of the workspace retrieval using the
getWorkspaceBySlugfunction.
61-62: Improved safety checks before rendering.The conditional check has been properly enhanced to include checks for
workspace?.idandprojectId, which improves the robustness of the component.
93-98: Well-implemented refactoring to use the new component.The notification content rendering has been effectively refactored to use the new
NotificationContentcomponent, which improves code organization and maintainability.
…ns (#6777) * fix: incomplete activity render for activity in notifications * fix: handled content overflow for long notification messages
Description
This update handles the incomoplete activity render in notifications.
Refactored notification content for better code readability.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
WEB-3262
Summary by CodeRabbit
New Features
Refactor