Open RemoteDev Web IDE through Terminal
Description
We want to integrate our Remote Development "MVC" into the product. The plan is to do this from the empty-state Terminal view of the Client-Only Web IDE.
Draft
Patch
diff --git a/packages/web-ide-vscode-extension/src/main.ts b/packages/web-ide-vscode-extension/src/main.ts
index 3f0ebc9..2b2c695 100644
--- a/packages/web-ide-vscode-extension/src/main.ts
+++ b/packages/web-ide-vscode-extension/src/main.ts
@@ -56,6 +56,16 @@ export async function activate(context: vscode.ExtensionContext) {
// eslint-disable-next-line @typescript-eslint/no-floating-promises
vscode.commands.executeCommand('workbench.action.closeAllEditors');
+ await vscode.commands.registerCommand('gitlab-vscode.start-remote', async () => {
+ const result = await vscode.window.showInputBox({
+ title: 'URL',
+ });
+
+ await vscode.window.showInformationMessage(
+ `You have to be sudo to do that. This will be reported.\n${result}`,
+ );
+ });
+
await vscode.window.withProgress(
{
cancellable: false,
diff --git a/packages/web-ide-vscode-extension/vscode.package.json b/packages/web-ide-vscode-extension/vscode.package.json
index 1c651b8..2601f5b 100644
--- a/packages/web-ide-vscode-extension/vscode.package.json
+++ b/packages/web-ide-vscode-extension/vscode.package.json
@@ -19,6 +19,11 @@
"command": "gitlab-vscode.commit",
"title": "Commit",
"icon": "$(check)"
+ },
+ {
+ "command": "gitlab-vscode.start-remote",
+ "title": "Start Remote Development Immediately, Please and Thank you.",
+ "icon": "$(check)"
}
],
"menus": {
@@ -42,6 +47,10 @@
{
"view": "gitlab-vscode.commitWelcome",
"contents": "All done with you changes? Start committing today!\n[Start committing](command:gitlab-vscode.startCommit)"
+ },
+ {
+ "view": "terminal",
+ "contents": "Lorem ipsum, dog!\n[Start remote](command:gitlab-vscode.start-remote)"
}
]
}
Implementation Guide
High-level flow
From the Client-Only Web IDE, when the user opens the Terminal, they should see a button to Connect to Remote Development
which triggers a workflow asking for RemoteConfig
properties:
-
remoteAuthority
(example:localhost:9888
) -
hostPath
(example:/
) -
connectionToken
(example:password
)
When the user submits these properties, then we POST
to the GitLab ide_controller
endpoint (so that private info like connectionToken
is appropriately in the Request body, not the URL). This will trigger the ide_controller
to call startRemote
instead of just start
.
Iteration plan
- Add an optional
handleStartRemote
option to ClientOnlyConfig. We need the main GitLab project (i.e. the client of@gitlab/web-ide
) to own how we want to handle moving to the remote development environment (i.e. aPOST
to theide_controller
endpoint).-
How will
handleStartRemote
from the client get called? ThishandleStartRemote
is not serializable, so is only available outside theiframe
context. This means we'll have to use thepostMessage
API to communicate to it from within theiframe
(see example posting message, and example receiving message). We cannotpostMessage
from within the extension context, so we'll need to create this command when we bootstrap the VSCode workbench (see relevant code). We can then reference this new built-in command from within the extension (see example).
-
How will
- Add a welcome view to the
terminal
with some helpful description and a button that will trigger aninputBox
user workflow (see relevant VSCode API). At the end of the flow, we should trigger the new built-in command that was introduced in the previous iteration.-
What's a good way to test that this all works? We can add a
handleStartRemote
option in the example app (see relevant code) which simply console logs or maybe redirects with URL params.
-
What's a good way to test that this all works? We can add a
- Publish a new release of
@gitlab/web-ide
and open an MR in the main GitLab project to use the new package - Open an MR in the main GitLab project to handle
POST
in theide_controller
(to either the same route or a different one, see also gitlab#371968 (closed)) and use the newhandleStartRemote
. We'll want to update this to conditionally callstart
orstartRemote
Edited by Paul Slaughter