enhance: context menu on custom reports page #3776
Conversation
actual-github-bot
bot
changed the title
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller No assets were smaller Unchanged
|
Bundle Stats — loot-coreHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
UnderKoen
changed the title
WalkthroughThe pull request introduces modifications to the Additionally, the return statement of the Possibly related PRs
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/desktop-client/src/components/reports/ReportCard.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-eslint-plugin". (The package "eslint-plugin-eslint-plugin" was not found when loaded as a Node module from the directory "/packages/eslint-plugin-actual".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-eslint-plugin" was referenced from the config file in "packages/eslint-plugin-actual/.eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
upcoming-release-notes/3776.mdis excluded by!**/*.md
📒 Files selected for processing (1)
packages/desktop-client/src/components/reports/ReportCard.tsx(3 hunks)
🔇 Additional comments (6)
packages/desktop-client/src/components/reports/ReportCard.tsx (6)
11-11: Importing useFeatureFlag is correctly added
The import statement is necessary for the feature flag usage in the component.
129-134: State variables initialized for context menu functionality
The addition of viewRef, menuOpen, crossOffset, offset, and contextMenusEnabled sets up the necessary state and references for managing the context menu.
135-135: isContextMenu derived state implemented correctly
The isContextMenu variable accurately determines when the context menu is active.
139-147: Context menu event handler correctly implemented
The onContextMenu handler appropriately activates the context menu when the feature flag is enabled and calculates the positioning offsets based on the mouse event.
176-181: Resetting offsets and updating menu state on button press
The MenuButton correctly resets crossOffset and offset and updates menuOpen to 'button' when pressed.
187-193: Popover component configured appropriately for different menu triggers
The Popover component uses the correct triggerRef, placement, and offsets based on whether the context menu or button menu is active.
|
This will probably need gated by the reports dashboard feature flag since it is using the dashboard features in the menu. |
…_menus/reports_page # Conflicts: # packages/desktop-client/src/components/reports/ReportCard.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (1)
packages/desktop-client/src/components/reports/ReportCard.tsx (1)
171-179: Reconsider offset reset in MenuButton handler.The MenuButton handler resets both offsets to 0, which might cause the menu to appear in an unexpected position when toggling between context menu and button menu states. Consider preserving the last known good position or calculating appropriate offsets based on the button's position.
<MenuButton ref={triggerRef} onPress={() => { - setCrossOffset(0); - setOffset(0); + const rect = triggerRef.current?.getBoundingClientRect(); + if (rect) { + setCrossOffset(rect.width); + setOffset(0); + } setMenuOpen('button'); }} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
packages/desktop-client/src/components/reports/ReportCard.tsx(3 hunks)
🧰 Additional context used
📓 Learnings (1)
packages/desktop-client/src/components/reports/ReportCard.tsx (1)
Learnt from: UnderKoen
PR: actualbudget/actual#3776
File: packages/desktop-client/src/components/reports/ReportCard.tsx:165-167
Timestamp: 2024-11-10T16:45:31.225Z
Learning: In `ReportCard.tsx`, the usage of `className=[menuOpen ? undefined : 'hover-visible', NON_DRAGGABLE_AREA_CLASS_NAME].join(' ')` in the `Layout` function is intentional and does not cause styling issues in the codebase.
🔇 Additional comments (1)
packages/desktop-client/src/components/reports/ReportCard.tsx (1)
123-126: LGTM! Well-structured state management.
The state management is well-implemented with:
- Proper TypeScript union type for menu states
- Clear separation of positioning states
- Appropriate use of refs for DOM references
| onContextMenu={e => { | ||
| if (!contextMenusEnabled) return; | ||
| e.preventDefault(); | ||
| setMenuOpen('context'); | ||
| const rect = e.currentTarget.getBoundingClientRect(); | ||
| setCrossOffset(e.clientX - rect.left); | ||
| setOffset(e.clientY - rect.bottom); | ||
| }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance context menu handling robustness.
Consider these improvements to the context menu implementation:
- Add a check for
menuItemsexistence before showing the context menu - Prevent context menu during editing mode to avoid conflicts
- Add viewport boundary checks for menu positioning
onContextMenu={e => {
- if (!contextMenusEnabled) return;
+ if (!contextMenusEnabled || !menuItems || isEditing) return;
e.preventDefault();
setMenuOpen('context');
const rect = e.currentTarget.getBoundingClientRect();
- setCrossOffset(e.clientX - rect.left);
- setOffset(e.clientY - rect.bottom);
+ // Ensure menu stays within viewport
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+ const crossOff = e.clientX - rect.left;
+ const off = e.clientY - rect.bottom;
+ setCrossOffset(Math.min(crossOff, viewportWidth - 200)); // 200 is approximate menu width
+ setOffset(Math.min(off, viewportHeight - 300)); // 300 is approximate menu height
}}Committable suggestion skipped: line range outside the PR's diff.
| const [menuOpen, setMenuOpen] = useState<null | 'context' | 'button'>(null); | ||
| const [crossOffset, setCrossOffset] = useState(0); | ||
| const [offset, setOffset] = useState(0); | ||
| const reportBudgetEnabled = useFeatureFlag('reportBudget'); |
There was a problem hiding this comment.
I don't think report budget is needed here, did you mean the dashboards feature flag?
| authors: [UnderKoen] | ||
| --- | ||
|
|
||
| Add context menu's to custom reports dashboard |
There was a problem hiding this comment.
| Add context menu's to custom reports dashboard | |
| Add context menus to custom reports dashboard |
No description provided.