feat(ws): Add "Connect" column to workspace table and display popup with workspace endpoints.

[Yael-F]

Fixes #150
This PR adds a "Connect" column to the workspace table, positioned before the Actions column.
The new column displays a list of endpoints on hover.

I've added a screenshot of the implementation. Please let me know if any further changes are needed.

[Yael-F]

Following a discussion with @jenny-s51, we've decided to move the endpoints into the expanded table row.

The updated screenshot:

[thesuperzapper]

@Yael-F The intention of this button is to connect to the notebook instance (open a new tab), making it the single most important button on the page, it must be in the main row.

The design I was thinking was a button with dropdown to select which port to connect to.

NOTE: replace "Primary" with "Jupyter" (or whatever the first port is called), and the other actions being the other ports (or greyed out if there is only one).

NOTE 2: we might also want some kind of "connect" icon on the left side of the button, but I am not sure if that will just clutter.

[ederign]

@Yael-F I agree with @thesuperzapper! That is the primary action when I open the workspaces listing.

[Yael-F]

Hey @thesuperzapper
Moved the connect button to the main row, if you can take a look.

Jenn (the UX) suggested to label the dropdown with "Connect" (instead of the first endpoint) for better clarity, what do you say?

[paulovmr]

Hi @Yael-F , thanks for the PR!
Please check the npm run test locally, it has a few errors. You can use npm run test:fix to fix most of them. Also please rebase your branch with the latest commits.

[paulovmr]

Please consider renaming the file and component (and other associated types, like the EndpointsDropdownProps) to WorkspaceConnectAction.

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ederign, paulovmr

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• workspaces/frontend/OWNERS [ederign]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[ederign]

/lgtm