Streamlining Node-RED Development with Integrated FlowFuse features

[MarianRaphael]

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]

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

[cstns]

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]

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

[joepavitt]

@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]

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

[cstns]

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

[joepavitt]

This can now be closed as all child tasks are completed