Show a preview of Team Library entries on click

[joepavitt]

Currently, it is not possible to click on any of the .json or .js files in a Team's library. This task will enable that, and then show a preview of it's content in the team Library UI.

[joepavitt]

Not sure which way to go in terms of layout/interaction:

Option 1 - New Page

• Gives clean separation, easier to build, and navigate to straight from URL.
• Scales the best to mobile too

Option 2 - Dialog

• More "preview"-y than Option 1,
• Doesn't scale well

Option 3 - Bottom

• More "preview"-y than Option 1
• Easy to switch to another file in a single click, rather than having to go "back"
• Doesn't scale great when we have lots of content in a single folder

Option 4 - Side

• More "preview"-y than Option 1
• Easy to switch to another file in a single click, rather than having to go "back"
• May have to switch to Option 3 on smaller screens

[joepavitt]

option 1 implemented for starters:

Screen.Recording.2023-02-03.at.17.11.08.mov

[ZJvandeWeg]

If the flow isn't rendered, why would we pursue this?

[joepavitt]

Because its not just flow.json files they can save.

Also possible to save function.js files, which are useful to inspect. Having flows here also makes them easier to export outside of flowforge, as no need to open Node-RED to get them.

Very easy win here, was only 1 hr of work, just need to add some styling/syntax highlighting to it.

Iteration towards then showing the flow eventually, but that's a big piece of work.