Fix crashes on reports page with translations enabled

[jfdoming]

As it says on the tin.

Steps to repro (in the latest release):

1. Pick a language other than English.
2. Reload the page.
3. Navigate to the Reports page.
4. Add a custom report.
5. Observe crashes.

Testing this PR involves all of the above, but fixing the original crash uncovered many other crashes of the same shape. It's worth just clicking around the custom reports UI to verify the issue is eliminated (I did as much as I could, but it's possible I missed something).

Note to reviewers: Most of the options I added a "key" to have another value we could have already used as a "key"; for example, intervalOptions has .name. However, there are a ton of places in the reports code that hard-code string checks, and in most of these places, the interval (or other attribute) is passed as a plain string rather than a union of possible values. Fixing this is a huge pain—we'd need to add strict string types throughout the entire codebase, then fix all errors, and then add a migration to the new key attribute—so after trying that approach it seemed easier in the short term to just add a 'key' attribute instead with the exact same value as the previously-used description.

Also worth noting: mode, despite having a description attribute, doesn't use that attribute anywhere that's displayed/translated—hence I didn't add a key.

[netlify]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	f8b97f8
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/67a41d3f06f0690008b96825
😎 Deploy Preview	https://deploy-preview-4303.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Bundle Stats — desktop-client

Hey 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

Files count	Total bundle size	% Changed
16	6.79 MB → 6.79 MB (+650 B)	+0.01%

Changeset

File	Δ	Size
src/components/reports/ReportOptions.ts	📈 +598 B (+8.27%)	7.07 kB → 7.65 kB
src/components/reports/disabledList.ts	📈 +68 B (+1.61%)	4.12 kB → 4.19 kB
src/components/reports/ReportSidebar.tsx	📉 -16 B (-0.08%)	18.97 kB → 18.95 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/ReportRouter.js	1.59 MB → 1.59 MB (+650 B)	+0.04%

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
static/js/de.js	78.37 kB	0%
static/js/uk.js	111.11 kB	0%
static/js/workbox-window.prod.es5.js	5.69 kB	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/wide.js	102.8 kB	0%
static/js/nl.js	83.87 kB	0%
static/js/en-GB.js	99.33 kB	0%
static/js/en.js	99.34 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/useAccountPreviewTransactions.js	1.69 kB	0%
static/js/pt-BR.js	103.29 kB	0%
static/js/narrow.js	84.94 kB	0%
static/js/AppliedFilters.js	10.52 kB	0%
static/js/index.js	4.29 MB	0%

[github-actions]

Bundle Stats — loot-core

Hey 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

Files count	Total bundle size	% Changed
1	1.33 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	1.33 MB	0%

[coderabbitai]

Walkthrough

This pull request introduces changes that enhance the structure of report option objects across multiple components. The modifications add a new key property to the data objects representing report options in the ReportOptions file, which includes arrays like balance type, group by, sort by, date range, and interval. The update replaces references to the description property with the new key for mapping purposes in both the ReportOptions and ReportSidebar components. Additionally, type definitions for related option properties have been updated for consistency. A similar change is made in the disabled list for interval options, and a logical condition in the CustomReport component was updated to reference a different collection of options. These changes are aimed at improving the explicit identification and mapping of report options across the codebase.

Possibly related PRs

• ✨ (dashboards) ability to quick-edit widget names from inner report pages #3587: Updates the mapping of options in the ReportSidebar using the key property, directly aligning with these changes.
• SpendingReport: Fixing some display issues #3451: Involves adding a key property to various options arrays in ReportOptions, matching the structure enhancements in this PR.
• report sorting on dashboard #4276: Focuses on modifications to the sortByOptions using the key property, paralleling the structural adjustments made here.

Suggested labels

:sparkles: Merged

Suggested reviewers

• youngcw

Tip

🌐 Web search-backed reviews and chat

• We have enabled web search-based reviews and chat for all users. This feature allows CodeRabbit to access the latest documentation and information on the web.
• You can disable this feature by setting web_search: false in the knowledge_base settings.
• Please share any feedback in the Discord discussion.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a23a285 and f8b97f8.

⛔ Files ignored due to path filters (1)

• upcoming-release-notes/4303.md is excluded by !**/*.md

📒 Files selected for processing (4)

• packages/desktop-client/src/components/reports/ReportOptions.ts (13 hunks)
• packages/desktop-client/src/components/reports/ReportSidebar.tsx (4 hunks)
• packages/desktop-client/src/components/reports/disabledList.ts (2 hunks)
• packages/desktop-client/src/components/reports/reports/CustomReport.tsx (1 hunks)

🔇 Additional comments (15)

packages/desktop-client/src/components/reports/disabledList.ts (2)

8-9: LGTM! The addition of non-translatable keys improves stability.

The changes correctly separate the translatable descriptions from the mapping keys, which prevents crashes when translations are enabled.

Also applies to: 13-14, 18-19, 23-24

---

222-222: LGTM! Updated mapping to use non-translatable keys.

The intervalRange map now correctly uses the stable key property instead of the translatable description.

packages/desktop-client/src/components/reports/ReportOptions.ts (8)

39-51: LGTM! Added non-translatable keys to balance type options.

The changes correctly separate the translatable descriptions from the mapping keys for balance type options.

---

55-60: LGTM! Added non-translatable keys to group by options.

The changes correctly separate the translatable descriptions from the mapping keys for group by options.

---

67-70: LGTM! Added non-translatable keys to sort by options.

The changes correctly separate the translatable descriptions from the mapping keys for sort by options.

---

73-82: LGTM! Updated type definition to include key property.

The dateRangeProps type now correctly includes the required key property.

---

87-88: LGTM! Added non-translatable keys to date range options.

The changes correctly separate the translatable descriptions from the mapping keys for date range options.

Also applies to: 97-98, 107-108, 117-118, 127-128, 137-138, 147-148, 157-158, 167-168, 177-178

---

187-197: LGTM! Updated type definition to include key property.

The intervalOptionsProps type now correctly includes the required key property.

---

202-203: LGTM! Added non-translatable keys to interval options.

The changes correctly separate the translatable descriptions from the mapping keys for interval options.

Also applies to: 209-210, 217-218, 225-226

---

234-235: LGTM! Updated mappings to use non-translatable keys.

All mappings in ReportOptions now correctly use the stable key property instead of the translatable description.

Also applies to: 237-238, 240-243, 246-248, 255-255

packages/desktop-client/src/components/reports/ReportSidebar.tsx (4)

159-159: LGTM! Updated date range options to use non-translatable keys.

The date range options mapping now correctly uses the stable key property instead of the translatable description.

---

233-236: LGTM! Updated group by options to use non-translatable keys.

The group by options mapping now correctly uses the stable key property instead of the translatable description.

---

255-256: LGTM! Updated balance type options to use non-translatable keys.

The balance type options mapping now correctly uses the stable key property instead of the translatable description.

---

287-288: LGTM! Updated interval options to use non-translatable keys.

The interval options mapping now correctly uses the stable key property instead of the translatable description.

packages/desktop-client/src/components/reports/reports/CustomReport.tsx (1)

527-527: LGTM! Updated graph type check to use non-translatable keys.

The condition now correctly checks against the groupByItems Set that contains stable keys instead of translatable descriptions.

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[matt-fidd]

LGTM! I imported my pretty large dashboard, and clicked through, changing all the settings on multiple languages, all worked well.

I think there's a bigger refactor to be done here, as you've mentioned, moving away from plain english values stored in the DB but (again, as you said!) it's a lot of work so best done another time.