feat(FR-1866): import custom theme from JSON

[ironAiken2]

resolves #4949 (FR-1866)

Summary

• Add dedicated Branding page accessible from the side menu for theme customization
• Implement Theme JSON Configuration modal with Monaco editor for advanced theme editing
  • Import/Export JSON functionality for theme configuration
  • Real-time JSON schema validation using theme.schema.json and antdThemeConfig.schema.json
  • Prevents saving invalid configurations by checking Monaco markers before apply
• Add i18n translations for new theme-related strings across all 21 supported languages

Changes

New Features

• Branding Page (BrandingPage.tsx): New dedicated page for branding settings, moved from Configurations page
• Theme JSON Config Modal (ThemeJsonConfigModal.tsx):
  • Monaco editor with JSON syntax highlighting and dark/light theme support
  • JSON schema validation with $ref resolution for nested schemas
  • Import JSON file to load theme configuration
  • Export current theme as JSON file
  • Validation error prevention - cannot save if schema validation fails

Technical Details

• Monaco editor schema URIs use inmemory://model/ prefix to match Monaco's internal path resolution for $ref references
• Uses monacoRef to access editor markers at save time for immediate validation feedback

Checklist: (if applicable)

• Documentation
• Minium required manager version
• Specific setting for review (eg., KB link, endpoint or how to setup)
• Minimum requirements to check during review
• Test case(s) to demonstrate the difference of before/after

[ironAiken2]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(FR-1866): import custom theme from JSON #4948 👈 (View in Graphite)
• feat(FR-1849): seperate branding page with theme JSON config #4934
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	4.89% (-0.01% 🔻)	589/12036
🔴	Branches	4.46% (-0.02% 🔻)	377/8460
🔴	Functions	2.74% (-0.01% 🔻)	101/3690
🔴	Lines	4.72% (-0.01% 🔻)	555/11754

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / ThemeColorPicker.tsx	0%	0% (-100% 🔻)	0%	0%

Test suite run success

173 tests passing in 13 suites.

Report generated by 🧪jest coverage report action from adcdc8a

[Copilot]

Pull request overview

This PR implements a comprehensive theme customization feature that allows users to import and export custom themes via JSON configuration. The key addition is a Monaco editor-based modal with real-time JSON schema validation, replacing the previous read-only code editor implementation. The feature includes proper i18n support across all 21 supported languages.

Key Changes:

• Replaced read-only code editor with editable Monaco editor featuring JSON schema validation
• Added Import/Export functionality for theme JSON files
• Refactored theme config API to distinguish between incremental updates and full replacements
• Added comprehensive i18n translations for theme-related messages

Reviewed changes

Copilot reviewed 29 out of 30 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
react/src/components/BrandingSettingItems/ThemeJsonConfigModal.tsx	Complete rewrite: Replaced BAICodeEditor with Monaco editor, added import functionality, JSON schema validation, and proper error handling structure
react/src/components/BrandingSettingList.tsx	Updated to use renamed API methods and wrapped modal with BAIUnmountAfterClose for proper cleanup
react/src/helper/customThemeConfig.ts	Refactored API: Added updateUserCustomThemeConfig for incremental updates while exposing setUserCustomThemeConfig for full replacement
react/src/components/BrandingSettingItems/ThemeColorPicker.tsx	Updated to use renamed updateUserCustomThemeConfig method
react/src/components/BrandingSettingItems/LogoSizeSettingItem.tsx	Updated to use renamed updateUserCustomThemeConfig method
react/src/components/BrandingSettingItems/LogoPreviewer.tsx	Updated to use renamed updateUserCustomThemeConfig method
react/package.json	Added @monaco-editor/react dependency and ESLint rule to enforce custom useThemeMode hook usage
pnpm-lock.yaml	Lock file updates for Monaco editor and its dependencies (monaco-editor, dompurify, marked)
resources/i18n/*.json (21 files)	Added 4 new translation keys for theme JSON configuration messages across all supported languages
.cspell.json	Added "inmemory" to dictionary for Monaco's schema URI prefix

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[Copilot]

The API refactoring introduces both updateUserCustomThemeConfig and setUserCustomThemeConfig with different behaviors, which could confuse API consumers.

updateUserCustomThemeConfig performs incremental updates with merging logic and path-based updates, while setUserCustomThemeConfig directly replaces the entire config. Consider either:

1. Making setUserCustomThemeConfig internal/private (prefix with underscore or keep it unexported for internal use only)
2. Adding clear JSDoc documentation explaining when to use each function
3. Renaming to make the distinction clearer (e.g., replaceThemeConfig vs updateThemeConfig)

[ironAiken2]

A comprehensive revision of useUserCustomThemeConfig appears necessary.

Modifications:
- Revised behaviour where theme.json values were used when userCustomThemeConfig values were absent > Modified to use antd token default values when absent
- Naming revisions

• Revised naming for updateThemeConfig (which modifies specific fields of UserCustomThemeConfig) and setUserCustomThemeConfig (which modifies the entire configuration)

[ironAiken2]

The hook has been modified. To allow another reviewer to verify, I will not resolve this comment. Please resolve it after another reviewer has checked.

Modification details:

1. Does not utilise the repository's theme.json value.
The userCustomThemeConfig stored in localStorage only clones the theme.json settings during initial load and subsequently does not use theme.json values. This is to directly display any side effects that occur when modifying the JSON content manually within the preview window. Instead, it uses the default token value from antd.

2. themeConfig is no longer provided.
themeConfig is no longer provided in this hook. If you require themeConfig, please use useCustomThemeConfig.

[Copilot]

Pull request overview

Copilot reviewed 30 out of 31 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[Copilot]

Pull request overview

Copilot reviewed 30 out of 31 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[Copilot]

Pull request overview

Copilot reviewed 31 out of 32 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[agatha197]

.

[Copilot]

Pull request overview

Copilot reviewed 31 out of 32 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[nowgnuesLee]

Could you resolve copilot review first?

[Copilot]

Pull request overview

Copilot reviewed 31 out of 32 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[agatha197]

Please resolve the copilot's reviews.