[WEB-4634]chore: refactor for work items store#7538
[WEB-4634]chore: refactor for work items store#7538sriramveeraghanta merged 2 commits intopreviewfrom
Conversation
WalkthroughThis change introduces a new issue store type, Changes
Sequence Diagram(s)sequenceDiagram
participant UI as UI Component
participant RootStore as IssueRootStore
participant TeamProjectStore as TeamProjectWorkItems
participant Filter as TeamProjectWorkItemsFilter
participant Hook as useIssues
UI->>Hook: useIssues(EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS)
Hook->>RootStore: Access teamProjectWorkItems, teamProjectWorkItemsFilter
RootStore->>TeamProjectStore: teamProjectWorkItems instance
RootStore->>Filter: teamProjectWorkItemsFilter instance
Hook-->>UI: Return { issues: teamProjectWorkItems, issuesFilter: teamProjectWorkItemsFilter }
UI->>UI: Render TeamProjectWorkItemEmptyState if empty
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15–20 minutes Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (3)
✨ Finishing Touches
🧪 Generate unit tests
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. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
vamsikrishnamathala
changed the title
|
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
🔭 Outside diff range comments (1)
apps/web/core/hooks/use-issue-layout-store.ts (1)
30-34: Fix the conditional logic order.The current order of conditions has a critical issue: the check for
teamspaceIdon Line 30 will always returnTEAMwhenteamspaceIdis present, preventing the more specific conditions on Lines 32 and 34 from ever being reached.Apply this diff to fix the condition ordering:
- if (teamspaceId) return EIssuesStoreType.TEAM; - - if (teamspaceId && viewId) return EIssuesStoreType.TEAM_VIEW; - - if (teamspaceId && projectId) return EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS; + if (teamspaceId && viewId) return EIssuesStoreType.TEAM_VIEW; + + if (teamspaceId && projectId) return EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS; + + if (teamspaceId) return EIssuesStoreType.TEAM;More specific conditions (with multiple parameters) should be checked before general ones (with single parameters) to ensure the correct store type is returned.
🧹 Nitpick comments (1)
apps/web/ce/components/issues/issue-layouts/empty-states/team-project.tsx (1)
3-3: Consider implementing the empty state UI or adding a TODO comment.The component currently renders an empty fragment, which provides no user feedback. Consider either:
- Implementing the actual empty state UI with appropriate messaging and styling
- Adding a TODO comment to indicate this is a placeholder awaiting implementation
Also, the
observerwrapper is currently unnecessary since no observable state is being accessed, though it's harmless and shows intent for future development.-export const TeamProjectWorkItemEmptyState: React.FC = observer(() => <></>); +// TODO: Implement team project work items empty state UI +export const TeamProjectWorkItemEmptyState: React.FC = observer(() => <></>);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
apps/web/ce/components/issues/issue-layouts/empty-states/index.ts(1 hunks)apps/web/ce/components/issues/issue-layouts/empty-states/team-project.tsx(1 hunks)apps/web/ce/helpers/issue-action-helper.ts(1 hunks)apps/web/ce/store/issue/team-project/filter.store.ts(1 hunks)apps/web/ce/store/issue/team-project/index.ts(1 hunks)apps/web/ce/store/issue/team-project/issue.store.ts(1 hunks)apps/web/core/components/issues/issue-layouts/empty-states/index.tsx(2 hunks)apps/web/core/hooks/store/use-issues.ts(3 hunks)apps/web/core/hooks/use-group-dragndrop.ts(1 hunks)apps/web/core/hooks/use-issue-layout-store.ts(1 hunks)apps/web/core/hooks/use-issues-actions.tsx(3 hunks)apps/web/core/store/issue/root.store.ts(4 hunks)packages/constants/src/issue/common.ts(1 hunks)packages/types/src/issues/issue.ts(1 hunks)packages/utils/src/work-item/base.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
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.
📚 Learning: in the updateissuedates method of baseissuesstore (web/core/store/issue/helpers/base-issues.store.ts...
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.
Applied to files:
apps/web/core/hooks/use-issue-layout-store.tsapps/web/ce/store/issue/team-project/issue.store.tsapps/web/ce/helpers/issue-action-helper.tsapps/web/core/store/issue/root.store.tspackages/types/src/issues/issue.tspackages/constants/src/issue/common.tsapps/web/core/hooks/use-group-dragndrop.tsapps/web/ce/store/issue/team-project/index.tsapps/web/core/hooks/store/use-issues.tsapps/web/ce/store/issue/team-project/filter.store.tsapps/web/core/components/issues/issue-layouts/empty-states/index.tsxapps/web/core/hooks/use-issues-actions.tsxpackages/utils/src/work-item/base.ts
📚 Learning: the `getprojectlabelids` function in the label store handles undefined projectid internally, so it's...
Learnt from: prateekshourya29
PR: makeplane/plane#7363
File: apps/web/core/components/issues/select/dropdown.tsx:9-11
Timestamp: 2025-07-08T13:41:01.659Z
Learning: The `getProjectLabelIds` function in the label store handles undefined projectId internally, so it's safe to pass undefined values to it without explicit checks in the calling component.
Applied to files:
apps/web/core/hooks/use-issue-layout-store.tsapps/web/core/components/issues/issue-layouts/empty-states/index.tsx
📚 Learning: when reviewing breadcrumb components that accept projectid or similar props, check if empty strings ...
Learnt from: prateekshourya29
PR: makeplane/plane#7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
Applied to files:
apps/web/ce/components/issues/issue-layouts/empty-states/team-project.tsxapps/web/core/components/issues/issue-layouts/empty-states/index.tsx
📚 Learning: in the plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making i...
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/`.
Applied to files:
apps/web/core/components/issues/issue-layouts/empty-states/index.tsx
📚 Learning: in the plane codebase, `issue_display_filters_by_layout` and `issue_display_filters_by_page` are two...
Learnt from: mathalav55
PR: makeplane/plane#6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, `ISSUE_DISPLAY_FILTERS_BY_LAYOUT` and `ISSUE_DISPLAY_FILTERS_BY_PAGE` are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
Applied to files:
packages/utils/src/work-item/base.ts
🧬 Code Graph Analysis (6)
apps/web/ce/store/issue/team-project/issue.store.ts (2)
apps/web/core/store/issue/root.store.ts (1)
IIssueRootStore(57-126)apps/web/ce/store/issue/team-project/filter.store.ts (1)
ITeamProjectWorkItemsFilter(5-5)
apps/web/core/store/issue/root.store.ts (2)
apps/web/ce/store/issue/team-project/filter.store.ts (2)
ITeamProjectWorkItemsFilter(5-5)TeamProjectWorkItemsFilter(8-12)apps/web/ce/store/issue/team-project/issue.store.ts (2)
ITeamProjectWorkItems(6-6)TeamProjectWorkItems(9-13)
apps/web/core/hooks/store/use-issues.ts (2)
apps/web/ce/store/issue/team-project/issue.store.ts (1)
ITeamProjectWorkItems(6-6)apps/web/ce/store/issue/team-project/filter.store.ts (1)
ITeamProjectWorkItemsFilter(5-5)
apps/web/ce/store/issue/team-project/filter.store.ts (1)
apps/web/core/store/issue/root.store.ts (1)
IIssueRootStore(57-126)
apps/web/core/components/issues/issue-layouts/empty-states/index.tsx (1)
apps/web/ce/components/issues/issue-layouts/empty-states/team-project.tsx (1)
TeamProjectWorkItemEmptyState(3-3)
apps/web/core/hooks/use-issues-actions.tsx (1)
apps/web/ce/helpers/issue-action-helper.ts (1)
useTeamProjectWorkItemsActions(17-22)
⏰ 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: Build and lint web apps
🔇 Additional comments (17)
packages/types/src/issues/issue.ts (1)
36-36: LGTM! Well-structured enum addition.The new
TEAM_PROJECT_WORK_ITEMSenum member follows the established naming convention and is placed appropriately at the end of the enum to avoid breaking existing code.apps/web/ce/store/issue/team-project/index.ts (1)
1-2: LGTM! Clean module re-export pattern.This index file follows the established pattern for organizing related store modules and provides a clean interface for importing the team project work items functionality.
apps/web/core/hooks/use-group-dragndrop.ts (1)
23-23: LGTM! Proper type extension for drag-and-drop support.The addition of
EIssuesStoreType.TEAM_PROJECT_WORK_ITEMSto theDNDStoreTypeunion correctly extends drag-and-drop functionality to support the new store type.apps/web/core/components/issues/issue-layouts/empty-states/index.tsx (2)
4-4: LGTM!The import of
TeamProjectWorkItemEmptyStatefollows the established pattern and path structure used for other team-related empty states.
44-45: LGTM!The switch case for
TEAM_PROJECT_WORK_ITEMSis properly integrated and follows the same pattern as other store types. The component currently renders an empty fragment as a placeholder, which is appropriate for initial implementation.packages/constants/src/issue/common.ts (1)
105-105: LGTM!The addition of
TEAM_PROJECT_WORK_ITEMSto theTCreateModalStoreTypesunion is consistent with the broader introduction of this store type across the codebase and maintains type safety for create modal operations.apps/web/ce/helpers/issue-action-helper.ts (1)
17-22: LGTM!The
useTeamProjectWorkItemsActionsfunction maintains consistency with the existing pattern in this CE helper file. All methods properly return resolved promises withundefined, matching the stub implementation approach used for other team-related actions.apps/web/core/hooks/use-issues-actions.tsx (3)
20-20: LGTM!The import of
useTeamProjectWorkItemsActionsis properly added to the existing import statement from the CE helper module.
58-58: LGTM!The initialization of
teamProjectWorkItemsActionsfollows the established naming convention and pattern used for other action hooks.
84-85: LGTM!The switch case for
TEAM_PROJECT_WORK_ITEMSis properly integrated and returns the appropriate actions object, maintaining consistency with the existing switch statement structure.apps/web/core/store/issue/root.store.ts (4)
18-22: LGTM! New imports follow established patterns.The imports for the new team project work items types are consistent with the existing import structure in the file.
109-110: LGTM! Interface properties added consistently.The new properties
teamProjectWorkItemsFilterandteamProjectWorkItemsfollow the established naming convention and type structure used by other issue store pairs in the interface.
183-184: LGTM! Class properties declared consistently.The class property declarations match the interface and follow the same pattern as other issue store properties.
277-278: LGTM! Store initialization follows established pattern.The instantiation correctly creates the filter store first and then passes it to the issues store constructor, consistent with other store pairs like
projectIssuesFilter/projectIssues.apps/web/core/hooks/store/use-issues.ts (3)
9-9: LGTM! Import follows established pattern.The import for the new team project work items types is consistent with other similar imports in the file.
80-83: LGTM! Type definition follows established pattern.The new entry in
TStoreIssuestype correctly includes bothissuesandissuesFilterproperties with the appropriate types, matching the pattern used by other store types.
155-159: LGTM! Switch case implementation is consistent.The new case for
TEAM_PROJECT_WORK_ITEMScorrectly merges the default store with the appropriate team project work items stores from the context, following the exact pattern used by other store types.
| const archivedIssueActions = useArchivedIssueActions(); | ||
| const workspaceDraftIssueActions = useWorkspaceDraftIssueActions(); | ||
| const teamProjectWorkItemsActions = useTeamProjectWorkItemsActions(); | ||
|
|
There was a problem hiding this comment.
We can import a function from plane-web for additional properties for better abstraction
|
We can avoid adding all the placeholder functions and stores and instead implement a issue store which can be extended |
That’s the plan, but it would require quite a few changes at the moment. We can do it if we have sufficient bandwidth. |
4 participants
Description
This update refactors the work items store thus, increasing reusability across various features.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit
New Features
Improvements
Other