Refactor agent_workspaces_list.vue async callback with graceful reactivity

MR

MR: Pending

Description

In ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue we have an async result callback which populates the workspaces data with some async info. But! apollo will not await this callback, so this approach might run into race conditions...

Let's try leaning into Vue reactivity and setting up a separate smart query for project names.

Context

The following discussion from !137336 (merged) should be addressed:

• @pslaughter started a discussion: (+1 comment)

  question: I think we might have a problem here but I'm not sure if this is a blocking or non-blocking issue.

  The result hook from apollo SmartQuery is not awaited (see relevant upstream code), so we introduce the possibility of weird race conditions here. For instance, if this result is processing while any of the query variables change, we could end up where the old result finishes and is displayed after the new one.

  Some ideas:

  • Could we not just expose the project on the Workspace GraphQL type? If not, could we possible expose a projectName field?
  • If we really need to do the 2 step request, we can lean into Vue reactivity and display the workspaces incrementally. It'd be pretty straightforward to load/display initial workspace info, while loading the project name info in the background, and then Vue will automatically show the project names once that relevant info is loaded.

  I guess since this is preexisting we can consider this non-blocking but we should probably follow-up on it pretty soon. WDYT?

Acceptance Criteria

• Have the GraphQL workspace type with project association.
• Update the GraphQL query to take in new project and its full path, ee/app/assets/javascripts/workspaces/agent/graphql/queries/agent_workspaces_list.query.graphql
• Remove the async result from ee/app/assets/javascripts/workspaces/agent/components/agent_workspaces_list.vue and move relevant code to update section