Add the Browser Terminal as an IDE #17196

filiptronicek · 2023-04-12T20:33:21Z

Description

Adds Xterm.js as a web alternative to connecting to your workspace via SSH from your terminal. The code can be found at https://github.com/gitpod-io/xterm-web-ide and the Docker image is at ide/xterm-web.

Note: The original PR is at #8464, but it was merged incorrectly.

Note: this relies on #17240 being merged first

Preview environment 🌐: https://ide-browser-terminal.preview.gitpod-dev.com/workspaces

How to test

Open the preview environment
In the preferences, notice there is no Xterm IDE
In Configcat, include yourself in the enable-rule for experimentalIdes (non-prod)
Wait a couple of minutes (🫖 time)
Reload and see the Terminal IDE magically appear
Create a workspace and have a blast

Useful commands

Re-pull the IDE:

kubectl rollout restart deployment/ide-service

Current limitations

Does not work on mobile [fixed]

iPad demo

RPReplay_Final1679590301.mp4

Release Notes

NONE

⬆️ we can mention it after we finish the internal dog food

Documentation

Todo

gp stop closes xterm.js editor and shows the "Workspace Stopping" screen
gp open works
gp preview works
Ensure heartbreating works
Move Docker image from DockerHub to our GCP registry

Nice-to-haves

Local echo [source]

Build Options:

/werft with-werft
Run the build with werft instead of GHA
leeway-no-cache
/werft no-test
Run Leeway with --dont-test

Publish Options

/werft publish-to-npm
/werft publish-to-jb-marketplace

Installer Options

with-dedicated-emulation
with-ws-manager-mk2
workspace-feature-flags
Add desired feature flags to the end of the line above, space separated

Preview Environment Options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-gce-vm
If enabled this will create the environment on GCE infra
with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

filiptronicek · 2023-04-14T14:55:36Z

/gh run recreate-vm

Comment triggered a workflow run

Started workflow run: 4701100147

recreate_vm: true

akosyakov · 2023-04-14T20:34:34Z

components/ide-service/pkg/server/ideconfig.go

@@ -51,6 +52,9 @@ func ParseConfig(ctx context.Context, b []byte) (*config.IDEConfig, error) {
 		return nil, err
 	}

+	configCatClient := experiments.NewClient()
+	experimentalIdesEnabled := configCatClient.GetBoolValue(ctx, "experimentalIdes", false, experiments.Attributes{})


Should not it be per a user? 🤔 otherwise it either enables for all or none?

It should, do you know where we can get the user data info from?

It should be done in getConfig then, i.e. provide user id and email similar to resolveWorkspaceConfig.

filiptronicek · 2023-04-17T14:52:18Z

/hold since we need #17240 merged first.

gtsiolis

Added my email on the feature flag but still not seeing the editor in /new or /preferences. 🫖

gtsiolis · 2023-04-19T12:15:46Z

Cross-posting for visibility a review comment from the original PR in #8464 (review):

thought: Overall, UX LGTM and following the flow we're using with other editor options.

suggestion: Also, since this option only supports one terminal, this seems more closely related to the connection with Command Line feature. Cc @loujaybee

This means users who would be interested in this will probably be interested in either using 🅰️ their local terminal or 🅱️ the browser xterm.

This is also related to what a customer reported once in Epic: SSH access copy/paste via dashboard #7713 (comment).

Maybe it's worth toning down this a bit and merging with the Command Line feature, strengthening the SSH functionality.

This would make SSH a primary option as an editor and when the workspace is loaded the user could have the option to copy the access token or SSH key to connect with their local terminal or fallback to opening a terminal in the browser.

We could also make it pop up as a smaller browser window which is the most common approach for such cases to emulate a terminal UX for users using the command line in browser.

filiptronicek · 2023-04-19T12:45:25Z

Hello @gtsiolis, could you please look at #17240 first? There are still a couple of things we need to figure out here after that one gets merged.

filiptronicek · 2023-04-19T19:41:12Z

@gtsiolis may I ask you to give this another go 🙏? I just tried and it seems to work 👀

filiptronicek · 2023-04-20T14:52:07Z

components/supervisor/frontend/src/shared/loading-frame.ts

@@ -16,7 +16,7 @@ export function load(): Promise<{
        frame.src = startUrl.toString();
        frame.style.visibility = "visible";
        frame.className = "gitpod-frame loading";
-        document.body.appendChild(frame);
+        document.body.prepend(frame);


This solves a bug in which in Safari, the loading screen would not be hidden when the IDE loaded. It wasn't present in VS Code, because we actually append the IDE itself lazily, but for Xterm and potentially other web IDEs we might have a static HTML structure ready.

filiptronicek · 2023-04-20T14:55:12Z

install/installer/pkg/components/ide-service/ide_config_configmap.go

@@ -195,6 +196,18 @@ func ideConfigConfigmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 					ImageLayers:       []string{jbPluginImage, jbLauncherImage},
 					LatestImageLayers: []string{jbPluginLatestImage, jbLauncherImage},
 				},
+				xterm: {


Here we add the IDE to the IDE list. Currently, latest is the same as stable, since there are no proper versions yet.

filiptronicek · 2023-04-20T16:44:52Z

/gh run recreate-vm

Comment triggered a workflow run

Started workflow run: 4756788264

recreate_vm: true

mbrevoort · 2023-04-21T13:17:40Z

@gtsiolis in what ways would popping up in a separate smaller window be better?

This reverts commit 06aee00.

components/ide-service/pkg/server/server.go

Never mutate `s.ideConfig` itself and make an in-memory copy of it to not use it every time.

akosyakov

code-wise looks good, but I did not test

/hold

filiptronicek · 2023-04-24T11:31:34Z

Just tested the feature flag and it seems to work again

No feature flag	Part of the feature flag

roboquat added release-note-none do-not-merge/work-in-progress size/M labels Apr 12, 2023

filiptronicek force-pushed the ide/browser-terminal branch from 6af7b2c to c502c80 Compare April 14, 2023 15:19

filiptronicek self-assigned this Apr 14, 2023

filiptronicek mentioned this pull request Apr 14, 2023

Add xterm as an IDE #17005

Closed

20 tasks

filiptronicek marked this pull request as ready for review April 14, 2023 20:30

filiptronicek requested review from a team April 14, 2023 20:30

roboquat removed the do-not-merge/work-in-progress label Apr 14, 2023

filiptronicek added the team: IDE label Apr 14, 2023

github-actions bot added the team: webapp Issue belongs to the WebApp team label Apr 14, 2023

akosyakov reviewed Apr 14, 2023

View reviewed changes

filiptronicek mentioned this pull request Apr 17, 2023

experimental IDEs feature flag #17240

Merged

14 tasks

filiptronicek force-pushed the ide/browser-terminal branch from 725b6f8 to 81c22d5 Compare April 17, 2023 13:16

roboquat added the do-not-merge/hold label Apr 17, 2023

gtsiolis reviewed Apr 19, 2023

View reviewed changes

filiptronicek force-pushed the ide/browser-terminal branch from 81c22d5 to f605a8b Compare April 19, 2023 15:17

roboquat added size/S size/M and removed size/M size/S labels Apr 19, 2023

filiptronicek commented Apr 20, 2023

View reviewed changes

filiptronicek added 9 commits April 22, 2023 12:02

Add xterm as an IDE

bc1242e

Move the IDE to our GCP registry 🎉

7db82ad

Also resolve the source code commit for IDEs in ide-service

738cdd7

Add feature flag

662f057

Xterm => terminal

b908f4b

Revert "Also resolve the source code commit for IDEs in ide-service"

d7c9472

This reverts commit 06aee00.

always add <iframe> to the top of <body>

44b3ece

Add the next non-jb IDE :)

52264ff

Add latest image

450dc2b

filiptronicek force-pushed the ide/browser-terminal branch from a37ff85 to 450dc2b Compare April 22, 2023 12:03

Filter out IDEs on the backend (#17324)

b2b4ea1

roboquat added size/L and removed size/M labels Apr 22, 2023

akosyakov reviewed Apr 24, 2023

View reviewed changes

components/ide-service/pkg/server/server.go Outdated Show resolved Hide resolved

akosyakov reviewed Apr 24, 2023

View reviewed changes

components/ide-service/pkg/server/server.go Outdated Show resolved Hide resolved

filiptronicek added 2 commits April 24, 2023 10:20

Address review comments

12c1b0d

Never mutate `s.ideConfig` itself and make an in-memory copy of it to not use it every time.

Pre-compute outside

fc096e4

akosyakov approved these changes Apr 24, 2023

View reviewed changes

Stringify config instead of options

4cf67f1

easyCZ approved these changes Apr 24, 2023

View reviewed changes

filiptronicek removed the do-not-merge/hold label Apr 24, 2023

roboquat merged commit 83e56d5 into main Apr 24, 2023

roboquat deleted the ide/browser-terminal branch April 24, 2023 11:42

roboquat added deployed: webapp Meta team change is running in production deployed: IDE IDE change is running in production deployed Change is completely running in production labels May 15, 2023

Add the Browser Terminal as an IDE #17196

Add the Browser Terminal as an IDE #17196

Uh oh!

Conversation

filiptronicek commented Apr 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How to test

Useful commands

Current limitations

Release Notes

Documentation

Todo

Nice-to-haves

Build Options:

Preview Environment Options:

Uh oh!

filiptronicek commented Apr 14, 2023 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Comment triggered a workflow run

Uh oh!

akosyakov Apr 14, 2023

Choose a reason for hiding this comment

Uh oh!

filiptronicek Apr 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akosyakov Apr 15, 2023

Choose a reason for hiding this comment

Uh oh!

filiptronicek commented Apr 17, 2023

Uh oh!

gtsiolis left a comment

Choose a reason for hiding this comment

Uh oh!

gtsiolis commented Apr 19, 2023

Uh oh!

filiptronicek commented Apr 19, 2023

Uh oh!

filiptronicek commented Apr 19, 2023

Uh oh!

filiptronicek Apr 20, 2023

Choose a reason for hiding this comment

Uh oh!

filiptronicek Apr 20, 2023

Choose a reason for hiding this comment

Uh oh!

filiptronicek commented Apr 20, 2023 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Comment triggered a workflow run

Uh oh!

mbrevoort commented Apr 21, 2023

Uh oh!

Uh oh!

Uh oh!

akosyakov left a comment

Choose a reason for hiding this comment

Uh oh!

filiptronicek commented Apr 24, 2023

Uh oh!

Uh oh!

filiptronicek commented Apr 12, 2023 •

edited

Loading

filiptronicek commented Apr 14, 2023 •

edited by github-actions bot

Loading

filiptronicek Apr 14, 2023 •

edited

Loading

filiptronicek commented Apr 20, 2023 •

edited by github-actions bot

Loading