mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 01:53:30 +01:00
ddcb9cd02e
Phase 5 - BYOB Backend (TASK-007A/B): - LocalSQL Adapter with full CloudStore API compatibility - QueryBuilder translates Parse-style queries to SQL - SchemaManager with PostgreSQL/Supabase export - LocalBackendServer with REST endpoints - BackendManager with IPC handlers for Electron - In-memory fallback when better-sqlite3 unavailable Phase 3 - GitHub Panel (GIT-004): - Issues tab with list/detail views - Pull Requests tab with list/detail views - GitHub API client with OAuth support - Repository info hook integration Phase 3 - Editor UX Bugfixes (TASK-013): - Legacy runtime detection banners - Read-only enforcement for legacy projects - Code editor modal close improvements - Property panel stuck state fix - Blockly node deletion and UI polish Phase 11 - Cloud Functions Planning: - Architecture documentation for workflow automation - Execution history storage schema design - Canvas overlay concept for debugging Docs: Updated LEARNINGS.md and COMMON-ISSUES.md
170 lines
4.3 KiB
Markdown
170 lines
4.3 KiB
Markdown
# BUG-2.1: Blockly UI Polish
|
|
|
|
**Priority:** P2 - UX improvement
|
|
**Status:** ✅ Ready to implement
|
|
**Introduced in:** Phase 3 Task 12 (Blockly integration)
|
|
|
|
---
|
|
|
|
## Issues
|
|
|
|
### 1. Redundant Label
|
|
|
|
There's a label text above the "Edit Logic Blocks" button that's not needed - the button text is self-explanatory.
|
|
|
|
### 2. Generated Code Field is Wrong Type
|
|
|
|
The "Generated Code" field is currently an **input field** but should be a **button** that opens a read-only code viewer modal.
|
|
|
|
---
|
|
|
|
## Current UI
|
|
|
|
```
|
|
Property Panel for Logic Builder Node:
|
|
┌────────────────────────────────┐
|
|
│ Logic Builder │ ← Node label
|
|
├────────────────────────────────┤
|
|
│ [Label Text Here] │ ← ❌ Remove this
|
|
│ [Edit Logic Blocks] │ ← ✅ Keep button
|
|
│ │
|
|
│ Generated Code: │
|
|
│ [_______________] │ ← ❌ Wrong! It's an input
|
|
└────────────────────────────────┘
|
|
```
|
|
|
|
## Desired UI
|
|
|
|
```
|
|
Property Panel for Logic Builder Node:
|
|
┌────────────────────────────────┐
|
|
│ Logic Builder │ ← Node label
|
|
├────────────────────────────────┤
|
|
│ [Edit Logic Blocks] │ ← Button (no label above)
|
|
│ │
|
|
│ [View Generated Code] │ ← ✅ New button
|
|
└────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Implementation
|
|
|
|
### File to Modify
|
|
|
|
`packages/noodl-editor/src/editor/src/views/panels/propertyeditor/DataTypes/LogicBuilderWorkspaceType.ts`
|
|
|
|
### Changes Needed
|
|
|
|
#### 1. Remove Redundant Label
|
|
|
|
Find and remove the label div/text above the "Edit Logic Blocks" button.
|
|
|
|
#### 2. Replace Generated Code Input with Button
|
|
|
|
**Remove:**
|
|
|
|
```typescript
|
|
{
|
|
type: 'string',
|
|
name: 'generatedCode',
|
|
displayName: 'Generated Code',
|
|
group: 'Logic',
|
|
readonly: true
|
|
}
|
|
```
|
|
|
|
**Add:**
|
|
|
|
```typescript
|
|
// Add button to view generated code
|
|
const viewCodeButton = {
|
|
type: 'button',
|
|
displayName: 'View Generated Code',
|
|
onClick: () => {
|
|
// Get the generated code from the node
|
|
const code = node.parameters.generatedCode || '// No code generated yet';
|
|
|
|
// Open code editor modal in read-only mode
|
|
PopupLayer.instance.showModal({
|
|
type: 'code-editor',
|
|
title: 'Generated Code (Read-Only)',
|
|
code: code,
|
|
language: 'javascript',
|
|
readOnly: true,
|
|
allowCopy: true,
|
|
allowPaste: false
|
|
});
|
|
}
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Code Editor Modal Integration
|
|
|
|
The modal should use the same code editor component from TASK-011 (Advanced Code Editor):
|
|
|
|
```typescript
|
|
import { JavaScriptEditor } from '@noodl-core-ui/components/code-editor';
|
|
|
|
// In modal content
|
|
<JavaScriptEditor
|
|
value={generatedCode}
|
|
onChange={() => {}} // No-op since read-only
|
|
readOnly={true}
|
|
language="javascript"
|
|
height="500px"
|
|
/>;
|
|
```
|
|
|
|
---
|
|
|
|
## User Experience
|
|
|
|
### Before
|
|
|
|
1. User opens Logic Builder properties
|
|
2. Sees confusing label above button
|
|
3. Sees "Generated Code" input field with code
|
|
4. Can't easily view or copy the code
|
|
5. Input might be mistaken for editable
|
|
|
|
### After
|
|
|
|
1. User opens Logic Builder properties
|
|
2. Sees clean "Edit Logic Blocks" button
|
|
3. Sees "View Generated Code" button
|
|
4. Clicks button → Modal opens with formatted code
|
|
5. Can easily read, copy code
|
|
6. Clear it's read-only
|
|
|
|
---
|
|
|
|
## Testing Plan
|
|
|
|
- [ ] Label above "Edit Logic Blocks" button is removed
|
|
- [ ] "Generated Code" input field is replaced with button
|
|
- [ ] Button says "View Generated Code"
|
|
- [ ] Clicking button opens modal with code
|
|
- [ ] Modal shows generated JavaScript code
|
|
- [ ] Code is syntax highlighted
|
|
- [ ] Code is read-only (can't type/edit)
|
|
- [ ] Can select and copy code
|
|
- [ ] Modal has close button
|
|
- [ ] Modal title is clear ("Generated Code - Read Only")
|
|
|
|
---
|
|
|
|
## Success Criteria
|
|
|
|
- [ ] Clean, minimal property panel UI
|
|
- [ ] Generated code easily viewable in proper editor
|
|
- [ ] Code is formatted and syntax highlighted
|
|
- [ ] User can copy code but not edit
|
|
- [ ] No confusion about editability
|
|
|
|
---
|
|
|
|
_Last Updated: January 13, 2026_
|