feat(editor): Allow front-end modules to register modals (no-changelog)

[MiloradFilipovic]

Summary

1. Adding support for custom modals in module descriptior + modal registry and dynamic modal component that handles them:

export type ModalDefinition = {
	key: string;
	component: Component | (() => Promise<Component>);
	initialState?: ModalState;
};

export type ResourceMetadata = {
	key: string;
	displayName: string;
	i18nKeys?: Record<string, string>;
};

export type FrontendModuleDescription = {
	id: string;
	name: string;
	description: string;
	icon: string;
	routes?: RouteRecordRaw[];
	projectTabs?: {
		overview?: DynamicTabOptions[];
		project?: DynamicTabOptions[];
		shared?: DynamicTabOptions[];
	};
	resources?: ResourceMetadata[];
	modals?: ModalDefinition[];
};

2. Implemented Add Data Store modal as an example

Screen.Recording.2025-08-01.at.09.48.30.mov

How to test

1. Make sure to add data-store to activeModules here
2. Go to any project (not overview) -> Data Stores tab -> Click the callout button

Related Linear tickets, Github issues, and Community forum posts

Closes ADO-3843

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

[cubic-dev-ai]

cubic analysis

4 issues found across 12 files • Review in cubic

_{React with 👍 or 👎 to teach cubic. You can also tag @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[bundlemon]

BundleMon

Files added (2)

Status	Path	Size	Limits
✅	WASM Dependencies tree-sitter-bash.wasm	+181.26KB	-
✅	WASM Dependencies tree-sitter.wasm	+74.47KB	-

Total files change +255.73KB

Groups added (2)

Status	Path	Size	Limits
✅	**/*.js	+5.34MB	-
✅	**/*.css	+188.37KB	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history

[MiloradFilipovic]

@claude can you review this?

[claude]

Claude finished @MiloradFilipovic's task —— View job

---

PR Review: Dynamic Modal Registration ✅

Review Checklist:

• Analyze modal registry system architecture
• Review DynamicModalLoader implementation
• Check data store modal integration
• Review test coverage and quality
• Assess type definitions and API design
• Check for security and performance concerns
• Address cubic-dev-ai review comments

---

Overall Assessment: Looks Great! 🎉

This is a well-architected implementation that follows Vue.js and n8n conventions. The modal registration system is clean, type-safe, and extensible.

✅ Strengths

1. Clean Architecture: The modal registry pattern is well-designed with proper separation of concerns
2. Type Safety: Excellent TypeScript definitions with proper union types for sync/async components
3. Memory Management: Proper subscription cleanup in both DynamicModalLoader.vue:50-52 and UI store
4. Test Coverage: Comprehensive test suite covering edge cases and error scenarios
5. Vue Integration: Proper use of defineAsyncComponent for lazy loading
6. Extensibility: Module system allows easy addition of new modals

🔧 Issues to Address (aligning with cubic-dev-ai feedback)

1. Type Guard Implementation (DynamicModalLoader.vue:15-20)

✅ Good: You added a proper type guard instead of using as casting - this addresses cubic-dev-ai's concern about preferring type guards over type casting.

2. AddDataStoreModal Issues (components/AddDataStoreModal.vue)

• Line 62: ❌ data-test-id="data-store-name-input" - This should be "add-data-store-name-input" to be more descriptive
• Missing functionality: ✅ I see you acknowledged this will be added in following commits

3. Memory Leak Prevention

✅ Fixed: The unsubscribe function from modalRegistry.subscribe is properly captured and called in DynamicModalLoader.vue:41,45,51

🚀 Performance Considerations

• Lazy Loading: ✅ Async component support enables code splitting
• Registration Timing: ✅ Modals are registered during app initialization, not on every render
• Event Handling: ✅ Proper cleanup prevents memory leaks

🔒 Security

• No XSS risks: Template usage is safe with proper Vue bindings
• Component isolation: Each modal is properly sandboxed
• Input validation: Basic validation present in form handling

📝 Minor Suggestions

1. AddDataStoreModal.vue:62: Update test ID to be more specific:

   - data-test-id="data-store-name-input"
   + data-test-id="add-data-store-name-input"

2. Consider adding JSDoc to the modal registry functions for better developer experience

3. UI Store: The memory management is correctly implemented - the unsubscribe function is properly captured and will be called via the cleanup() method

🎯 Architecture Highlights

1. Registry Pattern: Clean, extensible design for modal management
2. Module System Integration: Seamless integration with existing module architecture
3. Reactive Updates: Proper Vue reactivity with subscription model
4. Type Safety: Excellent TypeScript support throughout

This PR demonstrates excellent software engineering practices and will be a solid foundation for dynamic modal functionality. The issues raised by cubic-dev-ai have been properly addressed or acknowledged for future commits.

---

[alexgrozav]

Awesome work! While this is likely to change when we extract modules, it's a great starting point for managing our modals.

[currents-bot]

✅

E2E Tests: n8n tests passed after 4m 34.4s

🟢 500 · 🔴 0 · ⚪️ 0

View Run Details

Run Details

• Project: n8n

• Groups: 1

• Framework: Currents

• Run Status: Passed

• Commit: 324fb03

• Spec files: 105

• Overall tests: 500

• Duration: 4m 34.4s

• Parallelization: 1

---

This message was posted automatically by currents.dev | Integration Settings