Use group-agent mapping API to get available agents

issue: FE: Use group-agent mapping API in Create Works... (#444860 - closed)

What does this MR do and why?

Use the new group-agent mapping GraphQL API to get available cluster agents to create a workspace for a selected project.

IMPORTANT

• This change is behind a feature flag.
• The group-agent mapping GraphQL API is not implemented yet in backend. You have to use a client-side resolver to test these changes in the local environment. I provide a patch below with a local resolver implementation.
• We will integrate with the backend in a follow-up issue: FE: Replace mock group-agent mapping GraphQL wi... (#455214 - 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.

There aren't visual changes introduced in this MR.

How to set up and validate locally

Apply the following patch in your local environment to set up a local resolver for the unimplemented GraphQL query

diff --git a/ee/app/assets/javascripts/remote_development/init_workspaces_app.js b/ee/app/assets/javascripts/remote_development/init_workspaces_app.js
index 4b7188bc27bd..3ca51bfcc103 100644
--- a/ee/app/assets/javascripts/remote_development/init_workspaces_app.js
+++ b/ee/app/assets/javascripts/remote_development/init_workspaces_app.js
@@ -10,7 +10,32 @@ import createRouter from './router/index';
 Vue.use(VueApollo);
 
 const createApolloProvider = () => {
-  const defaultClient = createDefaultClient();
+  const defaultClient = createDefaultClient({
+    Query: {
+      namespace: () => ({
+        remoteDevelopmentClusterAgents: {
+          nodes: [
+            {
+              id: 'gid://gitlab/Clusters::Agent/1',
+              name: 'rootgroup-agent',
+              project: {
+                id: 'gid://gitlab/Project/101',
+                nameWithNamespace: 'GitLab Org / GitLab Agent One',
+              },
+            },
+            {
+              id: 'gid://gitlab/Clusters::Agent/2',
+              name: 'rootgroup-agent-2',
+              project: {
+                id: 'gid://gitlab/Project/102',
+                nameWithNamespace: 'GitLab Org / GitLab Agent Two',
+              },
+            },
+          ],
+        },
+      }),
+    },
+  });
 
   return new VueApollo({ defaultClient });
 };

After applying the patch, follow these steps:

1. Enable the remote_development_namespace_agent_authorization feature flag.
2. Navigate to "Your Work" -> Workspaces
3. Click the "Create Workspace" button.
4. Select a project in the form select component.
5. You should see a "Cluster agent" select form component with the two cluster agents provided by the local resolver.

Related to #444860 (closed)