Streamlining Node-RED Development with Integrated FlowFuse features

[MarianRaphael]

Epic

#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

• Enhanced Navigation from the Node-RED Editor within FlowFuse #3647

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Tasks

Beta Give feedback

1. Add new /instance<instance-id>/editor view #3656
   area:frontend size:M - 3 task +3
   
2. Update links to point to new /editor/<tab> view for Instances #3658
   area:frontend size:XS - 1 task +3
   
3. Optimize the Node-RED immersive editor experience #3657
   area:frontend size:XS - 1 task +3
   
4. Add the dashboard button to the immersive editor #3760
   area:frontend size:XS - 1 +2
   
5. Add the actions button to the applications overview instances list #3765
   area:frontend size:XS - 1 story +3
   

[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 #3800

[cstns]

referencing #3800 (comment)

[joepavitt]

This can now be closed as all child tasks are completed