Workspaces dropdown group

What does this MR do and why?

It implements a disclosure dropdown group that displays a user’s workspaces for a given project. This Merge Request partially delivers the Workspaces popover feature as seen in the following screenshot:

This merge request does not implement the following characteristics of the popover above:

• It doesn’t implement actions to restart, stop, or terminate a Workspace.
• It doesn’t implement the "New workspace" button.

The workspaces popover will appear as part of the "Edit" dropdown button in the Repository view. This Merge Request does not integrate the Workspaces viewer yet. This will happen in a different merge request.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After
User has workspaces in the given project
User doesn’t have workspaces
Error loading workspaces

How to set up and validate locally

The dropdown group can’t be tested in the GitLab application yet because it isn’t integrated with the Edit dropdown in the repository view. However, I created a Storybook story using the With API Access decorator where you can interact with the dropdown. Follow these instructions:

Preparing the backend

You have two options to prepare the backend.

Setting remote development in your local environment

1. Set up a remote development environment in your GDK.
2. Create a Workspace in your local Remote Development set up https://docs.gitlab.com/ee/user/workspace/#create-a-workspace.

Using GitLab.com

1. You can create a Workspace in gitlab.com for the gitlab-web-ide project. Read the docs about creating a workspace: https://docs.gitlab.com/ee/user/workspace/#create-a-workspace

Setting up Storybook

1. Connect your Storybook instance to either your local GDK or gitlab.com: https://docs.gitlab.com/ee/development/fe_guide/storybook.html#set-up-api-access-token-and-gitlab-instance-url

2. Open http://localhost:9002/?path=/story/ee-remote-development-workspaces-dropdown-group--with-api-access&args=projectId:35104827

3. Pass the ID of the project where you created the Workspace in the "Controls" panel

   

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #395517 (closed)