Add link to open any port in dashboard

[presleyp]

Once #3753 is merged, users can navigate to ports running on their agent from the web browser 🌏 🔗

For example, if I have a Python server running on port 3333 on my main agent in my blue workspace on dev.coder.com, I can access the app via: https://bpmct--blue--main--3333.dev.coder.com/ OR https://dev.coder.com/@bpmct/blue/apps/3333/.

Prior art

@code-asher created a port-forwarding dropdown in the workspaces that also auto-detects ports via agent: #1824. This was previously blocked by no backend routing (#3753).

TODO

• There are some todos in feat: port forwarding dropdown #1824
• If an admin doesn't set up a wildcard domain, the port forwarding dropdown should not use a subdomain.
  • Coder Classic entirely disabled port forwarding via the dashboard when coderd. devurlsHost was not set.
  • @bpmct suggestion: use a deployment-wide environment variable to enable subdomain apps. When disabled, use path URLs and link to docs to enable subdomains via the dropdown (many apps don't work by default as a path).

[f0ssel]

I believe the port forward feature will be a deterministic url like $port--user--workspace.coder.com so we may be able to just mvp this by giving the user this information instead of making the specific link for them.

[ammario]

I think @f0ssel's MVP idea is good.

As for the full implementation, I suggest the developer investigates VS Code's port detection.

[ketang]

Isn't port detection just attempting to open a port? I mean we can probably do something less brute force (and faster? but refusing a connection is fast), but that's probably not going to be portable across containers and VMs or Linux and Windows.

[ammario]

VS Code brute forces but only checks a small subset of the port range. Whatever subset they use we should.

[BrunoQuaresma]

This is kind of related to #1648. I think we could have a menu with an option "Port forward" that pops up a modal with the port forward information. We could also add the port field to the modal to make it easier.

Something like this:

PS: This is just a mock.

[kylecarbs]

I really like how GitHub has this style of dropdown:

What do you think about something like that? The content you have inside is perfect! ✨✨✨

[BrunoQuaresma]

I think this is pretty good. But right now, inside of the resource card, we want to have:

• Dev URLs
• Lifecyle
• Open terminal
• Resource type
• Port forward

So I was thinking on move the Open Terminal and Port forward to a dropdown menu, which was going to "block" this kind of inline popover style.

I will play around with the resource card design and see if I can free some space in the resource row to not add these actions inside of a dropdown menu.

[kylecarbs]

Oh I mean the port forward should be in a dropdown menu, like the one I linked above from GitHub.

[BrunoQuaresma]

@kylecarbs by dropdown I mean the menu dropdown:

I don't like the Material UI icons too much, especially the one for the terminal but it can work well to have the popover style.

But, I think the "Three dots menu" can be easier to add more items if we need them in the future and it also requires less space in the row.

What do you think?

[BrunoQuaresma]

Also, is the port forward something attached to a resource? Or is it global? I mean, we may move this to the sidebar if it is something more "workspace driven" than a "resource" thing. 🤔

[kylecarbs]

We'll be adding custom icons for user-defined applications with #257, so I don't think it'd be great to move into a "three dots menu".

Port forwarding is attached to an agent specifically!