Add workspace_ports feature to the gitlab-vscode-extension

MR: Pending

Description

We want to extend the gitlab-vscode-extension with a new feature for workspace_ports which will allow workspace users to manage their ports through the UI of the VSCode editor injected in a workspace.

By default every workspace comes with the gitlab-vscode-extension pre-installed, we want to add a desktop specific feature for the workspace ports that is only enabled when the extension is running inside a workspace container.

References:

• Gitlab vscode extension - [POC] Workspace Ports Feature
• Gitlab vscode extension - Architecture
• VScode commands
• VScode viewsContainers

Acceptance Criteria

• Review Coding guidelines for the gitlab-vscode-extension
• A new tab for workspace ports in the Panel area
• Workspace ports feature/UI only enabled inside a workspace
• Authenticate/authorize API requests for workspace_ports
• View/Create/Delete ports through the extension
• Write unit tests for the feature following the developer docs

Technical Requirements

• The following user command should be registered:

  • gl.openWorkspacePortsWebview (Opens the UI for workspace ports)

• Entry added for the workspace ports panel in the viewsContainers object in desktop.package.json

• A new service class for mapping the graphql query/mutations and executing the Gitlab API requests

  • Fetch the workspace_id from the ENV variable GL_WORKSPACE_ID, use this global ID to make relevant requests for workspace ports

• A new controller and webview containing event handlers to enable message passing between the controller and view for events including

  • A new port is opened
  • A port is closed
  • The port list is updated

• Update the extension documentation in README.md

Design Requirements

TODO: Fill out or delete (optional) [If applicable, please provide a link to the design specifications for this feature/enhancement.]