ENG-1014 Add Admin Feature Flag for “Reified Relation Triples” Flow

[maparent]

https://linear.app/discourse-graphs/issue/ENG-1014/add-admin-feature-flag-for-reified-relation-triples-flow

Summary by CodeRabbit

• New Features
  • Reorganized admin settings into a tabbed interface for improved navigation.
  • Added Admin tab with toggle for reified relations setting.
  • Node list functionality now in dedicated tab with schema selection control.

[linear]

ENG-1014 Add Admin Feature Flag for “Reified Relation Triples” Flow

[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 ↗︎.

[maparent]

Did get a local coderabbit review.

[mdroidian]

Let's do the following before a full review:

1. CodeRabbit web is more comprehensive than the local CLI, so let's make sure to run it on this PR as well.
2. Every PR that contains UI is required to have a Loom overview video (see the Project Handbook)
3. While doing 2, please walk through each bullet in the Done When of the Linear task to show that they are complete.

[sid597]

From linear: Done When

• Admin Panel now uses tabs

• Default tab is "Home" or "Admin"

• Default panel shows the “Use Reified Relation Triples” flag

The last 2 are not done, default tab is Node list

[sid597]

use import { getSetting, setSetting } from "~/utils/extensionSettings"; instead of doing it this way

[mdroidian]

CodeRabbit web is more comprehensive than the local CLI, so let's make sure to run it on this PR as well.

[maparent]

@CodeRabbit review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

AdminPanel component was refactored to implement a tabbed interface with an Admin settings tab and a Node list tab. The component now accepts an onloadArgs prop to access extension context. Settings.tsx was updated to pass onloadArgs to AdminPanel. A formatting cleanup was applied.

Changes

Cohort / File(s)	Change Summary
Tabbed AdminPanel UI refactor apps/roam/src/components/settings/AdminPanel.tsx	Restructured from discrete rendering to tabbed interface with Admin and Node list tabs. Added onloadArgs prop to component signature for extension API access. Introduced Checkbox control for use-reified-relations setting and Tab/Tabs components. Preserved node list data fetching and display logic within conditional rendering.
AdminPanel prop propagation apps/roam/src/components/settings/Settings.tsx	Updated AdminPanel rendering in secret panel to pass onloadArgs prop. Removed formatting whitespace.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify tab state management and switching logic are functioning correctly
• Confirm node list data fetching behavior is fully preserved in the Node list tab panel
• Validate that onloadArgs.extensionAPI is properly typed and accessible within the new tab structure
• Check that the Checkbox binding to extension settings (use-reified-relations) works end-to-end

Possibly related PRs

• ENG-593 Change from Dev to Admin Panel #415 — Concurrent modification to AdminPanel.tsx and Settings.tsx involving component signature changes and prop passing for the tabbed UI implementation.

Pre-merge checks

✅ 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 accurately reflects the main change: adding an admin feature flag for reified relation triples by refactoring AdminPanel into a tabbed UI with the new checkbox control.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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: 0

🧹 Nitpick comments (1)

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

106-106: Add explicit return type per coding guidelines.

The component should have an explicit return type as per the project's TypeScript guidelines.

As per coding guidelines

Apply this diff:

-const AdminPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
+const AdminPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }): React.ReactElement => {

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 08113a9 and f893a88.

📒 Files selected for processing (2)

• apps/roam/src/components/settings/AdminPanel.tsx (4 hunks)
• apps/roam/src/components/settings/Settings.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx}: Prefer type over interface
Use explicit return types for functions
Avoid any types when possible

Files:

• apps/roam/src/components/settings/AdminPanel.tsx
• apps/roam/src/components/settings/Settings.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx,js,jsx}: Prefer arrow functions over regular function declarations
Use named parameters (object destructuring) when a function has more than 2 parameters
Use Prettier with the project's configuration
Maintain consistent naming conventions: PascalCase for components and types
Maintain consistent naming conventions: camelCase for variables and functions
Maintain consistent naming conventions: UPPERCASE for constants

Files:

• apps/roam/src/components/settings/AdminPanel.tsx
• apps/roam/src/components/settings/Settings.tsx

apps/roam/**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

apps/roam/**/*.{js,jsx,ts,tsx}: Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension
Use the roamAlphaApi documentation from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when working with the Roam API
Use Roam Depot/Extension API documentation from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when working with the Roam Extension API

Files:

• apps/roam/src/components/settings/AdminPanel.tsx
• apps/roam/src/components/settings/Settings.tsx

🧠 Learnings (4)

📚 Learning: 2025-07-19T22:34:23.619Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.619Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Applied to files:

• apps/roam/src/components/settings/AdminPanel.tsx

📚 Learning: 2025-07-19T22:34:23.619Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.619Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use Roam Depot/Extension API documentation from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when working with the Roam Extension API

Applied to files:

• apps/roam/src/components/settings/AdminPanel.tsx
• apps/roam/src/components/settings/Settings.tsx

📚 Learning: 2025-07-19T22:34:23.619Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.619Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use the roamAlphaApi documentation from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when working with the Roam API

Applied to files:

• apps/roam/src/components/settings/AdminPanel.tsx

📚 Learning: 2025-08-11T19:09:58.252Z

Learnt from: maparent
Repo: DiscourseGraphs/discourse-graph PR: 337
File: apps/roam/src/components/DiscourseFloatingMenu.tsx:43-43
Timestamp: 2025-08-11T19:09:58.252Z
Learning: The roam subdirectory (apps/roam) is constrained to React 17 and cannot use React 18+ features like createRoot API. ReactDOM.render should be used instead of createRoot in this subdirectory.

Applied to files:

• apps/roam/src/components/settings/AdminPanel.tsx

🔇 Additional comments (4)

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

232-232: LGTM! Props correctly passed to AdminPanel.

The onloadArgs prop is now passed to AdminPanel, correctly matching the updated component signature and enabling access to extensionAPI within the admin panel.

apps/roam/src/components/settings/AdminPanel.tsx (3)

2-14: LGTM! Imports properly added for tabbed UI.

The new imports (Checkbox, Tab, TabId, Tabs, OnloadArgs, Description) are correctly added to support the tabbed interface and settings management functionality.

---

224-232: Consider using utility functions for settings access.

A previous review comment suggested using getSetting and setSetting from ~/utils/extensionSettings instead of accessing extensionAPI.settings directly. This approach may provide better consistency across the codebase.

Additionally, consider whether defaultChecked (uncontrolled component) is appropriate here. If the setting can change externally while the panel is open, the checkbox won't reflect those changes. A controlled component with state may be more robust:

const [useReifiedRelations, setUseReifiedRelations] = useState(
  extensionAPI.settings.get("use-reified-relations") as boolean
);

// In Checkbox:
checked={useReifiedRelations}
onChange={(e) => {
  const target = e.target as HTMLInputElement;
  setUseReifiedRelations(target.checked);
  void extensionAPI.settings.set("use-reified-relations", target.checked);
}}

Based on learnings

---

213-293: LGTM! Tabbed interface well-structured.

The tabbed UI is properly implemented with:

• Clean separation of Admin settings and Node list functionality
• Appropriate use of BlueprintJS 3 Tabs component
• renderActiveTabPanelOnly for performance optimization
• Preserved existing node list functionality with schema selector and loading states

[mdroidian]

Remove the unused onloadArgs from the AdminPanel params (and import, etc).
Let's also separate node-list into it's own component, so we don't prematurely call supabase and load the nodes each time the Admin panel is opened.

[maparent]

That separation got done in ENG-1018.

[sid597]

I think instead of sourceUid:relationBlockUid:destinationUid maybe simpler wording would be better maybe the suggested text in linear?

“When ON, relations are read/written as reifiedRelationUid in [[roam/js/discourse-graph/relations]].”

This is what it looks like in ui and requires effort to read it