ENG-1190 Replace existing roam-js components with blockProp based ones

[sid597]

https://www.loom.com/share/8ff86c595970423bbf1ec161baf5efa4

---

Summary by CodeRabbit

• New Features
  • Added configurable settings panels for global and personal preferences, including text, boolean toggles, numeric inputs, dropdown selections, and multi-value options
  • Introduced feature flag configuration panel with validation and change callbacks for enhanced control

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

ENG-1190 Replace existing roam-js components with blockProp based ones

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[sid597]

• ENG-1345: Modify existing RoamJS component onChange to also change props #745 : 2 dependent PRs (#684 , #688 )
• ENG-1190 Replace existing roam-js components with blockProp based ones #689 👈 (View in Graphite)
• ENG-1188: prod: pull watchers for prop based settings #682
• ENG-1187: Prod: Implement get and set for block prop based settings #669
• ENG-1189: Prod: Init block prop based schema #666
• ENG-1330: zod schema for discourse relations #719
• main

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

[sid597]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[devin-ai-integration]

Devin Review found 1 potential issue.

View issue and 4 additional flags in Devin Review.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new file introduces reusable, type-safe React setting panel components for the Roam application. It provides base implementations for text, boolean, number, select, and multi-text inputs with consistent UI layouts, along with higher-level wrappers for global and personal settings, and a specialized FeatureFlagPanel with optional pre/post-change hooks.

Changes

Cohort / File(s)

Summary

Setting Panel Components apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx

New file with base components (BaseTextPanel, BaseFlagPanel, BaseNumberPanel, BaseSelectPanel, BaseMultiTextPanel) implementing core setting UI logic. Global wrappers (GlobalTextPanel, GlobalFlagPanel, GlobalNumberPanel, GlobalSelectPanel, GlobalMultiTextPanel) and personal wrappers (PersonalTextPanel, PersonalFlagPanel, PersonalNumberPanel, PersonalSelectPanel, PersonalMultiTextPanel) provide preset getter/setter bindings. Specialized FeatureFlagPanel supports optional onBeforeEnable pre-change hook and onAfterChange callback. Includes multi-text with add/remove flows and Enter-to-add interaction pattern.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title references replacing roam-js components with blockProp-based ones, which aligns with adding new blockProp setting panel components, but doesn't clearly convey that this PR only introduces new components without actually replacing existing ones.	Clarify whether this PR actually replaces existing components or only introduces new blockProp panels; consider revising to 'Introduce blockProp-based setting panels' if replacement is in a separate PR.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx`:
- Around line 171-174: The handler for NumericInput (handleChange) must guard
against valueAsNumber being NaN to avoid storing NaN in settings: update
handleChange to check Number.isNaN(valueAsNumber) and in that case
setValue(undefined) (or another explicit empty sentinel) and call
setter(settingKeys, undefined) (or skip calling setter), otherwise call
setValue(valueAsNumber) and setter(settingKeys, valueAsNumber); reference the
handleChange function, NumericInput, setValue, setter and settingKeys when
making the change.
- Around line 131-147: The event handler handleChange uses
React.ChangeEvent<HTMLInputElement> but BlueprintJS Checkbox passes a
React.FormEvent<HTMLInputElement>; change the signature of handleChange to (e:
React.FormEvent<HTMLInputElement>) and read the value via
e.currentTarget.checked (or cast e.target to HTMLInputElement), update any
related references (handleChange usage and declaration) so setter(settingKeys,
checked) and onChange?.(checked) receive the correct boolean; keep the async
onBeforeChange flow intact and ensure imports/types reference React.FormEvent
where needed.

🧹 Nitpick comments (1)

apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx (1)

200-202: Consider guarding against empty options array.

If options is an empty array and defaultValue is not provided, options[0] evaluates to undefined, which could cause unexpected behavior in HTMLSelect.

💡 Suggested defensive check

   const [value, setValue] = useState(
-    () => getter(settingKeys) ?? defaultValue ?? options[0],
+    () => getter(settingKeys) ?? defaultValue ?? options[0] ?? "",
   );

[mdroidian]

A few changes to make sure you do before merging.

Also, make sure to format with prettier before merging.

[devin-ai-integration]

Devin Review found 1 new potential issue.

View issue and 9 additional flags in Devin Review.

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 9 additional findings in Devin Review.