mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-13 07:42:55 +01:00
192 lines
4.0 KiB
Markdown
192 lines
4.0 KiB
Markdown
# Solutions: Project Creation Bugs
|
|
|
|
**Date**: January 12, 2026
|
|
**Status**: Ready for Implementation
|
|
|
|
---
|
|
|
|
## 🎯 Priority Order
|
|
|
|
1. **CRITICAL** - BUG-002 & BUG-003 (Same fix)
|
|
2. **Medium** - BUG-001 (UI improvement)
|
|
3. **Low** - BUG-004 (CSS fix)
|
|
|
|
---
|
|
|
|
## 🔴 CRITICAL FIX: Add `allowAsExportRoot` to Router
|
|
|
|
**Fixes**: BUG-002 (App not Home) + BUG-003 ("Make Home" fails)
|
|
|
|
### File to Edit
|
|
|
|
`packages/noodl-viewer-react/src/nodes/navigation/router.tsx`
|
|
|
|
### The Fix (ONE LINE!)
|
|
|
|
```typescript
|
|
const RouterNode = {
|
|
name: 'Router',
|
|
displayNodeName: 'Page Router',
|
|
allowAsExportRoot: true, // ✅ ADD THIS LINE
|
|
category: 'Visuals',
|
|
docs: 'https://docs.noodl.net/nodes/navigation/page-router',
|
|
useVariants: false
|
|
// ... rest of the definition
|
|
};
|
|
```
|
|
|
|
### Why This Works
|
|
|
|
- `ProjectModel.setRootComponent()` searches for nodes with `allowAsExportRoot: true`
|
|
- Router node currently doesn't have this property
|
|
- Adding it allows Router to be set as the root of a component
|
|
- This fixes both project creation AND "Make Home" functionality
|
|
|
|
### Testing
|
|
|
|
```bash
|
|
# 1. Apply the fix
|
|
# 2. Restart dev server: npm run dev
|
|
# 3. Create new project
|
|
# 4. Preview should show "Hello World!"
|
|
# 5. "Make Home" should work on any component
|
|
```
|
|
|
|
---
|
|
|
|
## 🟡 BUG-001: Fix Home Component Display
|
|
|
|
**Severity**: Medium (Cosmetic)
|
|
|
|
### Investigation Needed
|
|
|
|
The template correctly creates `'/#__page__/Home'` with the page prefix.
|
|
|
|
**Check**: `useComponentsPanel.ts` line where it builds tree data.
|
|
|
|
### Potential Fix
|
|
|
|
Ensure `isPage` flag is properly set:
|
|
|
|
```typescript
|
|
// In tree data building logic
|
|
const isPage = component.name.startsWith('/#__page__/');
|
|
|
|
return {
|
|
// ...
|
|
isPage: isPage, // ✅ Ensure this is set
|
|
// ...
|
|
};
|
|
```
|
|
|
|
### Alternative
|
|
|
|
Check `ComponentItem.tsx` icon logic:
|
|
|
|
```typescript
|
|
let icon = IconName.Component;
|
|
if (component.isRoot) {
|
|
icon = IconName.Home;
|
|
} else if (component.isPage) {
|
|
// ← Must be true for pages
|
|
icon = IconName.PageRouter;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🟡 BUG-004: Fix Modal Styling
|
|
|
|
**Severity**: Low (Cosmetic)
|
|
|
|
### File to Edit
|
|
|
|
`packages/noodl-editor/src/editor/src/styles/propertyeditor/pages.css`
|
|
|
|
### Investigation Steps
|
|
|
|
1. Inspect the popup when it appears
|
|
2. Check CSS classes on triangle and rectangle
|
|
3. Look for positioning offsets
|
|
|
|
### Likely Fix
|
|
|
|
Adjust vertical alignment:
|
|
|
|
```css
|
|
.popup-layer-content {
|
|
margin-top: 0 !important;
|
|
/* or adjust to match triangle position */
|
|
}
|
|
|
|
.popup-layer-arrow {
|
|
/* Ensure positioned correctly relative to content */
|
|
}
|
|
```
|
|
|
|
### Long-term Solution
|
|
|
|
Migrate from legacy PopupLayer to modern `PopupMenu` from `@noodl-core-ui`.
|
|
|
|
---
|
|
|
|
## ✅ Implementation Checklist
|
|
|
|
### Phase 1: Critical Fix (30 minutes)
|
|
|
|
- [ ] Add `allowAsExportRoot: true` to Router node
|
|
- [ ] Test new project creation
|
|
- [ ] Test "Make Home" functionality
|
|
- [ ] Verify preview works
|
|
|
|
### Phase 2: UI Improvements (1-2 hours)
|
|
|
|
- [ ] Debug BUG-001 (page icon not showing)
|
|
- [ ] Fix if needed
|
|
- [ ] Debug BUG-004 (modal alignment)
|
|
- [ ] Fix CSS positioning
|
|
|
|
### Phase 3: Documentation (30 minutes)
|
|
|
|
- [ ] Update LEARNINGS.md with findings
|
|
- [ ] Document `allowAsExportRoot` requirement
|
|
- [ ] Add regression test notes
|
|
|
|
---
|
|
|
|
## 📝 Regression Test Plan
|
|
|
|
After fixes, test:
|
|
|
|
1. **New Project Flow**
|
|
|
|
- Create project from launcher
|
|
- App should be Home automatically
|
|
- Preview shows "Hello World!"
|
|
|
|
2. **Make Home Feature**
|
|
|
|
- Create second component
|
|
- Right-click → "Make Home"
|
|
- Should work without errors
|
|
|
|
3. **Page Router**
|
|
- App has Router as root
|
|
- Can add pages to Router
|
|
- Modal styling looks correct
|
|
|
|
---
|
|
|
|
## 🚀 Expected Results
|
|
|
|
| Bug | Before | After |
|
|
| --- | ------------------------- | ------------------------- |
|
|
| #1 | Home shows component icon | Home shows page icon |
|
|
| #2 | Preview error | Preview works immediately |
|
|
| #3 | "Make Home" does nothing | "Make Home" works |
|
|
| #4 | Modal misaligned | Modal looks professional |
|
|
|
|
---
|
|
|
|
_Ready for implementation!_
|