Open server address link in new window

[dotNomad]

Created from Kelly O'Briant's feedback

I clicked the link for the server address while a deployment was running and got trapped there. I expected this to open in a new browser window.

I then couldn’t return to my in progress deployment. I clicked on the destination again and went into the logs. Is this the expected message? Did I bork it?

[dotNomad]

Will require some discovery to see if open-in-new-tab anchors easily work in VSCode.

[dotNomad]

VSCode doesn't have a way to open in a new window using target="_blank" instead you have to call vscode.openExternal

@tdstein can you think of anyway we can get around this or utilize vscode.openExternal?

References

• Support opening links in a new window from within webviews microsoft/vscode#186043
• Reconsider the request to allow modals in Simple Browser and other WebViews microsoft/vscode#185204
• https://code.visualstudio.com/api/references/vscode-api

[dotNomad]

We can remove the link in the frontend, and if we cannot get links to work we can add a nice auto-copy on click to help users a bit.

[dotNomad]

VSCode doesn't support target="_blank" and actively blocks it. More details can be found in references above. The links would still work if you used CMD clicking or middle mouse clicks which defaults to opening in a new tab (new window in VSCode), but if you clicked on them normally:

• a target="blank" would be blocked and nothing would happen. A console error would be in the devtools that it was blocked
• an external link would take over the iframe and the only way to navigate back is to use keyboard or mouse shortcuts like a normal browser. VSCode has no interface to back or navigate through history.

[dotNomad]

https://code.visualstudio.com/api/extension-guides/webview#passing-messages-from-a-webview-to-an-extension looks very promising.

[dotNomad]

We can call the VSCode API by:

• Have a onDidReceiveMessage listener function in the extension that determines what to do based on the object passed
• adding a script to the Web View HTML that uses acquireVsCodeApi(), add an event listener for message, and use the message to do vscode.PostMessage to interact with the above
• Use window.parent.postMessage in the Vue app to interact with the above

Example found here: #629

[tdstein]

VSCode doesn't have a way to open in a new window using target="_blank" instead you have to call vscode.openExternal

@tdstein can you think of anyway we can get around this or utilize vscode.openExternal?

References

• Support opening links in a new window from within webviews microsoft/vscode#186043
• Reconsider the request to allow modals in Simple Browser and other WebViews microsoft/vscode#185204
• https://code.visualstudio.com/api/references/vscode-api

At first glance, vscode.openExternal looks like the appropriate call for handling external links. Can you try calling this from the Vite application?

If it works, an onclick handler could call vscode.openExternal if acquireVsCodeApi returns non-null. Otherwise, do default target="_blank" behavior.

[dotNomad]

On hold for #646

[dotNomad]

If it works, an onclick handler could call vscode.openExternal if acquireVsCodeApi returns non-null. Otherwise, do default target="_blank" behavior.

acquireVsCodeApi is not available in the Vite application because it is only available at the top-level of the VSCode extension webview. Inside the iframe it is not defined.

The target="_blank" behavior doesn't work either. Since VSCode doesn't have tabs the default behavior for a `target="_blank" link is to replace the current window.

[dotNomad]

I believe we can close this one up. By default anchors behave this way due to the way that VSCode injects the click listener described in #759.