ENG-1280: Port Discourse node: Query builder and editor component for block props

[sid597]

https://www.loom.com/share/92b399a36f4d4e3f8e49a95e5c65661b

---

Summary by CodeRabbit

• New Features
  • Added automatic query state synchronization to discourse nodes, preserving query configurations and selections.
  • Introduced a new "custom" field to query settings for extended configuration options.
  • Enhanced query builder to support discourse node type associations.

[linear]

ENG-1280 Port Discourse node: Query builder and editor component for block props

[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-1281: Port discourse node block panel #784 : 2 dependent PRs (#793 , #795 )
• ENG-1290: Port discourse node config panel #769
• ENG-1291: Port discourse node specification #765
• ENG-1280: Port Discourse node: Query builder and editor component for block props #764 👈 (View in Graphite)
• ENG-1225: Discourse node migration simple settings #696 : 1 other dependent PR (#697 )
• ENG-1273: Migrate small personal settings #691
• ENG-1272 Migrate all small global settings components #688 : 1 other dependent PR (#690 )
• ENG-1345: Modify existing RoamJS component onChange to also change props #745 : 1 other dependent PR (#684 )
• ENG-1190 Replace existing roam-js components with blockProp based ones #689
• 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: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 5 additional findings.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes implement synchronization of query builder state to discourse node block properties. A new optional discourseNodeType prop is threaded through QueryBuilder and QueryEditor components. When provided, QueryEditor syncs the query state (conditions, selections, custom) to the discourse node using setDiscourseNodeSetting. The DiscourseNodeIndex initializes index settings on block creation and passes the node type to enable this synchronization behavior.

Changes

Cohort / File(s)	Summary
Query Component Props & Synchronization apps/roam/src/components/QueryBuilder.tsx, apps/roam/src/components/QueryEditor.tsx	Added optional discourseNodeType prop to both components. QueryEditor implements new effect that syncs query state (conditions, selections, custom) to discourse node via setDiscourseNodeSetting with validation and debouncing when discourseNodeType is provided.
Index Initialization apps/roam/src/components/settings/DiscourseNodeIndex.tsx	Initializes index settings with default conditions and empty selections when creating a new block. Passes discourseNodeType to QueryBuilder to enable synchronization.
Schema Extensions apps/roam/src/components/settings/utils/zodSchema.ts, apps/roam/src/components/settings/utils/zodSchema.example.ts	Extended IndexSchema to include new custom field with string type and empty string default.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant QueryEditor
    participant DebounceTimer
    participant IndexSchema
    participant DiscourseNode

    User->>QueryEditor: Update conditions/selections/custom
    QueryEditor->>DebounceTimer: Clear previous timeout
    DebounceTimer->>DebounceTimer: Start new 500ms timer
    
    DebounceTimer->>IndexSchema: Validate query state
    IndexSchema-->>IndexSchema: safeParse(data)
    
    alt Validation succeeds
        IndexSchema-->>QueryEditor: Valid data
        QueryEditor->>DiscourseNode: setDiscourseNodeSetting("index", validatedData)
        DiscourseNode-->>QueryEditor: Updated
    else Validation fails
        IndexSchema-->>QueryEditor: Parse error (silently ignored)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• ENG-1187: Prod: Implement get and set for block prop based settings #669: Implements setDiscourseNodeSetting and IndexSchema that are used by the synchronization logic introduced in this PR.
• Add index to node setting #34: Adds the DiscourseNodeIndex component and related settings infrastructure that this PR extends with index synchronization functionality.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: porting a Discourse node query builder and editor component to support block props synchronization.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

27-68: ⚠️ Potential issue | 🟠 Major

No error handling on the createBlock promise — spinner may hang indefinitely on failure.

If createBlock rejects, setShowQuery(true) is never called, leaving the user stuck on a <Spinner /> with no recovery path. Consider adding a .catch() to handle the failure gracefully.

Proposed fix

       void createBlock({
         parentUid: initialQueryArgs.conditionsNodesUid,
         node: {
           text: "clause",
           children: [
             {
               text: "source",
               children: [{ text: DEFAULT_RETURN_NODE }],
             },
             {
               text: "relation",
               children: [{ text: "is a" }],
             },
             {
               text: "target",
               children: [
                 {
                   text: node.text,
                 },
               ],
             },
           ],
         },
       }).then(() => {
         setDiscourseNodeSetting(node.type, ["index"], {
           conditions: [
             {
               type: "clause",
               source: DEFAULT_RETURN_NODE,
               relation: "is a",
               target: node.text,
             },
           ],
           selections: [],
         });
 
         setShowQuery(true);
-      });
+      }).catch((error) => {
+        console.error("Failed to create initial query block:", error);
+        setShowQuery(true);
+      });

🧹 Nitpick comments (1)

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

53-63: Minor inconsistency: initial index write omits custom field.

The IndexSchema now includes custom: z.string().default(""), and QueryEditor's sync logic serializes custom. This initial write to setDiscourseNodeSetting omits it. It works because Zod fills in the default on read, but adding custom: "" here would be consistent with the schema and the sync logic in QueryEditor.

Proposed fix

         setDiscourseNodeSetting(node.type, ["index"], {
           conditions: [
             {
               type: "clause",
               source: DEFAULT_RETURN_NODE,
               relation: "is a",
               target: node.text,
             },
           ],
           selections: [],
+          custom: "",
         });