Design discovery for client and server evaluation in Web IDE (pane management)
We want to support client side evaluation https://gitlab.com/gitlab-org/gitlab-ce/issues/47268 and server side evaluation https://gitlab.com/gitlab-org/gitlab-ee/issues/5426 https://gitlab.com/gitlab-org/gitlab-ee/issues/4013 in the Web IDE. We need to make sure the interface can support:
- live preview (both client side and server side evaluation)
- javascript console (client side evaluation, javascript console scoped to the live preview iframe)
- web terminal (server side evaluation, bash console to a container)
Proposal
The Web IDE should work in either context, but we shouldn't do server and client side evaluation at the same time.
A user should be able to tell if client or server side evaluation is available:
- client side evaluation will only be available if a
package.json
with abrowser
entry point defined exists - server side evaluation will only be available if a
web-ide
job is defined in the.gitlab-ci.yml
and runners tagged withweb-ide
are available
When client side evaluation is active, a user should be able to view a live preview of their application and debug it with a javascript console
- should be possible to resize, hide the live preview panel, and open it into a different tab
- should be possible to open the project in Codesandbox to share with others not on my GitLab instance
- should be possible to resize and hide the javascript console
- should be possible to see the live preview and javascript console at the same time
When server side evaluation is active ...
Links / references
Edited by James Ramsay (ex-GitLab)