[WEB-2630] chore: double click action added to draft issue and code refactor #5821
Conversation
WalkthroughThe pull request introduces significant enhancements to the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (2)
web/core/components/issues/workspace-draft/quick-action.tsx (2)
9-11: Consider using a more descriptive interface name.The interface
Propscould be more specific to enhance code readability and maintainability. For example, renaming it toWorkspaceDraftIssueQuickActionsPropswould clearly indicate its association with theWorkspaceDraftIssueQuickActionscomponent.
22-22: Ensure consistent menu placement across the application.The
placementprop is set to"bottom-end". Please verify that this placement aligns with the design specifications and is consistent with other menus in the application to maintain a uniform user experience.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- web/core/components/issues/workspace-draft/draft-issue-block.tsx (4 hunks)
- web/core/components/issues/workspace-draft/quick-action.tsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (1)
web/core/components/issues/workspace-draft/quick-action.tsx (1)
14-15: 🛠️ Refactor suggestionVerify the necessity of the
observerwrapper.The component
WorkspaceDraftIssueQuickActionsis wrapped with theobserverfrommobx-react, but there are no observable properties or MobX reactions within this component. If the component doesn't rely on MobX observables, removing theobserverwrapper can improve performance.To confirm whether
observeris needed, run the following script to check for MobX observable usage within the component:✅ Verification successful
Remove the unnecessary
observerwrapper.The component
WorkspaceDraftIssueQuickActionsdoes not utilize any MobX observables or reactions. Removing theobserverwrapper can improve performance.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Search for MobX observable usage in the component. # Test: Search for MobX observable patterns. Expect: No occurrences found. rg --type js --type ts 'observable|computed|action|useLocalObservable|useAsObservableSource|makeObservable|makeAutoObservable' web/core/components/issues/workspace-draft/quick-action.tsxLength of output: 217
Script:
#!/bin/bash # Description: Extract import statements from the component to verify the source of `action`. rg '^import' web/core/components/issues/workspace-draft/quick-action.tsxLength of output: 230
| // hooks | ||
| const { getIssueById, updateIssue, deleteIssue, moveIssue } = useWorkspaceDraftIssues(); | ||
| const { getIssueById, updateIssue, deleteIssue } = useWorkspaceDraftIssues(); |
There was a problem hiding this comment.
Include createIssue in the imports from useWorkspaceDraftIssues
To enable creating new issues when issueToEdit is undefined, import createIssue from useWorkspaceDraftIssues.
Apply this diff:
- const { getIssueById, updateIssue, deleteIssue } = useWorkspaceDraftIssues();
+ const { getIssueById, updateIssue, deleteIssue, createIssue } = useWorkspaceDraftIssues();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { getIssueById, updateIssue, deleteIssue } = useWorkspaceDraftIssues(); | |
| const { getIssueById, updateIssue, deleteIssue, createIssue } = useWorkspaceDraftIssues(); |
| onSubmit={async (data) => { | ||
| if (issueToEdit) await updateIssue(workspaceSlug, issueId, data); | ||
| }} | ||
| storeType={EIssuesStoreType.WORKSPACE_DRAFT} |
There was a problem hiding this comment.
Add logic to handle creation of new issues in the onSubmit handler
Currently, the onSubmit handler only updates an issue when issueToEdit is defined. When making a copy or creating a new issue, issueToEdit is undefined, and no action is taken. Add logic to create a new issue when issueToEdit is undefined.
Apply this diff:
onSubmit={async (data) => {
if (issueToEdit) {
await updateIssue(workspaceSlug, issueId, data);
}
+ else {
+ await createIssue(workspaceSlug, data);
+ }
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onSubmit={async (data) => { | |
| if (issueToEdit) await updateIssue(workspaceSlug, issueId, data); | |
| }} | |
| storeType={EIssuesStoreType.WORKSPACE_DRAFT} | |
| onSubmit={async (data) => { | |
| if (issueToEdit) { | |
| await updateIssue(workspaceSlug, issueId, data); | |
| } | |
| else { | |
| await createIssue(workspaceSlug, data); | |
| } | |
| }} | |
| storeType={EIssuesStoreType.WORKSPACE_DRAFT} |
| setIssueToEdit(issue); | ||
| setCreateUpdateIssueModal(true); | ||
| }} | ||
| > |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Reuse the extracted function for handling issue editing
After extracting the common logic, use the new handleEditIssue function here to maintain consistency and reduce duplication.
Apply this diff:
onDoubleClick={() => {
- setIssueToEdit(issue);
- setCreateUpdateIssueModal(true);
+ handleEditIssue();
}}Committable suggestion was skipped due to low confidence.
| setIssueToEdit(issue); | ||
| setCreateUpdateIssueModal(true); | ||
| }, | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract repeated code into a separate function for reusability
The action logic here is duplicated in the onDoubleClick handler. Consider extracting this logic into a separate function to promote reusability and reduce code duplication.
Apply this diff:
+ const handleEditIssue = () => {
+ setIssueToEdit(issue);
+ setCreateUpdateIssueModal(true);
+ };
...
{
key: "edit",
title: "Edit",
icon: Pencil,
action: () => {
- setIssueToEdit(issue);
- setCreateUpdateIssueModal(true);
+ handleEditIssue();
},
},Committable suggestion was skipped due to low confidence.
Changes:
This PR includes following changes:
Reference:
[WEB-2630]
Summary by CodeRabbit
New Features
Bug Fixes
Documentation