✨ Frontend: Preview page: WorkbenchPreview + Thumbnails

[odeimaiz]

What do these changes do?

In order to improve the UX for inspecting a Study without opening it, this PR adds a Preview page to the Study details tabsView.

For now, in this view, only accessible for the osparc and s4l products, a preview of the workbench (suggested by @sanderegg in #4360 (review)) and the service's thumbnails are shown together with the nodes tree.

Bonus

Data page was also added to the tabsView.

Related issue/s

• related to Project home page osparc-issues#979

How to test

DevOps Checklist

[pcrespov]

🎉

[mguidon]

This comes along nicely. Maybe we could unleash the icon lady?

[SCA-ZMT]

Looks really cool... so cool in fact, that I would suggest a more standard behavior: the preview shows first when the user clicks on a study, rather than the detailed and verbose (and less intuitive) info with study ID etc.

[sanderegg]

looking cool! I agree with @SCA-ZMT that maybe defaulting on the preview might be what you wanna see most of the time

[elisabettai]

Very very cool and I agree that this can become "default preview" of a Study.

Is here that we might include some markdown editing function for users, so they can edit what is shown?

[matusdrobuliak66]

🥇

[codeclimate]

Code Climate has analyzed commit 0176f36 and detected 0 issues on this pull request.

View more on Code Climate.

[odeimaiz]

Very very cool and I agree that this can become "default preview" of a Study.

Is here that we might include some markdown editing function for users, so they can edit what is shown?

@elisabettai @sanderegg @SCA-ZMT
Let's present it at RM and decide what to show by default... I personally think that even though it looks nice (and it will look nicer), we you show the boring Info page.

@elisabettai
What do you mean by the markdown editing function? That's part the Info page, the Description section. We will now add also the comments section below that: #4386

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[elisabettai]

@elisabettai
What do you mean by the markdown editing function? That's part the Info page, the Description section. We will now add also the comments section below that: #4386

Yes, I was thinking about the Info page and that would fulfill most of the features requested in ITISFoundation/osparc-issues#979.

What are you planning to show next in this Preview? I am just afraid that users might not notice the Preview and put stuff in the Info page only.