From 7b4b9e1cc453c2620502daceb94d3e2248b58dcb Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 13 Jun 2018 17:06:35 +0100 Subject: Web IDE & CodeSandbox This enables JavaScripts projects to have live previews straight in the browser without requiring any local configuration. This uses the CodeSandbox package `sandpack` to compile it all inside of an iframe. This feature is off by default and can be toggled on in the admin settings. Only projects with a `package.json` and a `main` key are supported. Updates happen in real-time with hot-reloading. We just watch for changes to files and then send them to `sandpack` to allow it to reload the iframe. The iframe includes a very simple navigation bar, the text bar is `readonly` to stop users navigating away from the preview and the back and forward buttons just pop/splice the navigation stack which is tracked by a listener on `sandpack` There is a button inside the iframe which allows the user to open the projects inside of CodeSandbox. This button is only visible on **public** projects. On private or internal projects this button get hidden to protect private code being leaked into an external public URL. Closes #47268 --- app/views/ide/index.html.haml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'app/views/ide') diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml index d29dda43c89..4cae9c51acc 100644 --- a/app/views/ide/index.html.haml +++ b/app/views/ide/index.html.haml @@ -8,7 +8,10 @@ "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'), "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg'), "pipelines-empty-state-svg-path": image_path('illustrations/pipelines_empty.svg'), - "ci-help-page-path" => help_page_path('ci/quick_start/README'), } } + "promotion-svg-path": image_path('illustrations/web-ide_promotion.svg'), + "ci-help-page-path" => help_page_path('ci/quick_start/README'), + "web-ide-help-page-path" => help_page_path('user/project/web_ide/index.html'), + "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s } } .text-center = icon('spinner spin 2x') %h2.clgray= _('Loading the GitLab IDE...') -- cgit v1.2.1