Display mapped agents in Workspaces settings

Issue: FE: Display mapped agents in the group agents s... (#444837 - closed)

What does this MR do and why?

NOTICE This feature is behind the remote_development_namespace_agent_authorization feature flag.

It displays cluster agents available to create Remote Development Workspaces in the Workspaces group settings page. This merge request introduces the initial implementation of the workspaces agent admin UI. It contains a significant amount of boilerplate code because it introduces several new Vue components. The functionality introduced in this MR is simple:

1. It displays a table with a list of available agents. The table contains a single column: The agent's name.
2. A skeleton loader is displayed while the data is fetched from the GraphQL API.
3. An empty state message is displayed when there aren't agents available.

Next steps

• FE: Display unmapped agents in the group agents... (#444847 - closed)
• FE: Allow users to map an available agent to a ... (#444857 - closed)
• FE: Allow users to unmap an available agent to ... (#444858 - closed)

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

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

Description	Screenshot
When there are available agents
When there aren't available agents
Loading error

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

Given the complexity of setting up remote development in a local environment, I recommend testing these changes by running the feature tests locally using CHROME_HEADLESS=0 flag. Follow these instructions to use this approach:

Test empty state

1. Apply the following patch. It will insert a debugging breakpoint in the feature spec.

   diff --git a/ee/spec/features/groups/settings/remote_development/workspaces_spec.rb b/ee/spec/features/groups/settings/remote_development/workspaces_spec.rb
   index 71f3dd5ed1da..b75e13e868be 100644
   --- a/ee/spec/features/groups/settings/remote_development/workspaces_spec.rb
   +++ b/ee/spec/features/groups/settings/remote_development/workspaces_spec.rb
   @@ -31,6 +31,7 @@
      describe 'Group agents' do
        context 'when there are not available agents' do
          it 'displays available agents table with empty state message' do
   +        live_debug
            expect(page).to have_content 'This group has no allowed agents.'
          end
        end
   

2. Run the feature spec using the following command: CHROME_HEADLESS=0 bundle exec rspec ee/spec/features/groups/settings/remote_development/workspaces_spec.rb -e "displays available agents table with empty state message"

3. You will see a table with the empty state message.

Test table with one agent

1. Apply the following patch. It will insert a debugging breakpoint in the feature spec.

   diff --git a/ee/spec/features/groups/settings/remote_development/workspaces_spec.rb b/ee/spec/features/groups/settings/remote_development/workspaces_spec.rb
   index 71f3dd5ed1da..7ed85956d94e 100644
   --- a/ee/spec/features/groups/settings/remote_development/workspaces_spec.rb
   +++ b/ee/spec/features/groups/settings/remote_development/workspaces_spec.rb
   @@ -45,6 +45,7 @@
          end
    
          it 'displays agent in the agents table' do
   +        live_debug
            expect(page).to have_content agent.name
          end
        end
   

2. Run the feature spec using the following command: CHROME_HEADLESS=0 bundle exec rspec ee/spec/features/groups/settings/remote_development/workspaces_spec.rb -e 'displays agent in the agents table'

3. You will see a table with one agent available.

Related to #444837 (closed)