Streamlining Node-RED Development with Integrated FlowFuse features

MarianRaphael commented 6 months ago

Epic

https://github.com/FlowFuse/flowfuse/issues/2246

Description

As a: Node-RED Developer and FlowFuse User

I want to: develop my Node-RED flows utilizing FlowFuse features such as Node-RED logs, Snapshots, and the restart function directly within the same user interface

So that: I can manage and enhance my development workflow without the need to switch between different browser tabs or windows, leading to a more streamlined and efficient development process.

Which customers would this be availble to

Everyone - CE/Starter/Team/Enterprise

Acceptance Criteria

[ ] Easily jump back to other FlowFuse menus
[ ] Maintain the ability to pop out the Node-RED editor into an independent browser window if needed
[ ] Display Node-RED Editor and Instance management features (such as logs, snapshots, and restart functions) on the same screen

Scope

Just for Instances, not (yet) for devices

Design

Follow-up issue

https://github.com/FlowFuse/flowfuse/issues/3647

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

### Tasks
- [ ] https://github.com/FlowFuse/flowfuse/issues/3656
- [ ] https://github.com/FlowFuse/flowfuse/issues/3658
- [ ] https://github.com/FlowFuse/flowfuse/issues/3657
- [ ] https://github.com/FlowFuse/flowfuse/issues/3760
- [ ] https://github.com/FlowFuse/flowfuse/issues/3765

joepavitt commented 6 months ago

Only thing missing on this was the "Back" button:

cstns commented 5 months ago

Had a chat with @Yndira-E, had a look over the ui and noted the following:

should increase the safety area for drawer open button (padding) based on the branding guide
there's too much space between the drawer open button and the close drawer button (on the right side)
- we should add a middle button that closes the drawer (visible on hover, similar to NR)
- mimic NR sidebar resize functionality on drawer hover
make the drawer draggable area full width of drawer instead of one small draggable handle
the full branded logo button that opens the drawer might be a little to much, as well as two carets on both sides

I'll try and adapt the current implementation based on these notes and will have a chat with @joepavitt upon his return

joepavitt commented 5 months ago

Let's get out first iteration and then worry about the minor UX improvements after

joepavitt commented 4 months ago

@cstns @knolleary can you list here what limitations we have in terms who will be able to use this given the technical complexities we are hitting.

e.g. Node-RED version, browser limitations, nr-launcher version, FlowFuse builds/drivers

cstns commented 4 months ago

A starting point for the CSP & other browser security concerns is https://github.com/FlowFuse/flowfuse/issues/3800

cstns commented 4 months ago

referencing https://github.com/FlowFuse/flowfuse/issues/3800#issuecomment-2127133360

joepavitt commented 2 months ago

This can now be closed as all child tasks are completed

FlowFuse / flowfuse