From c89804112a1d40a14ffe0c674cf38b36f24d3c2c Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 23 May 2025 16:04:11 +0900
Subject: [PATCH 1/9] Implement org cluster agent query

---
 ...zation_workspaces_cluster_agents_query.vue |  94 +++++++++
 .../workspaces/admin_settings/constants.js    |  12 +-
 .../organization_mapped_agents.query.graphql  |  10 +
 ...on_workspaces_cluster_agents.query.graphql |  44 +++++
 .../admin_settings/init_admin_settings_app.js |  11 ++
 .../workspaces/admin_settings/pages/app.vue   | 178 +++++++++++-------
 locale/gitlab.pot                             |   3 +
 7 files changed, 271 insertions(+), 81 deletions(-)
 create mode 100644 ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
 create mode 100644 ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql
 create mode 100644 ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
new file mode 100644
index 00000000000000..66585c94f39ef6
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
@@ -0,0 +1,94 @@
+<script>
+import { joinPaths } from '~/lib/utils/url_utility';
+
+import organizationWorkspacesClusterAgentsQuery from '../graphql/queries/organization_workspaces_cluster_agents.query.graphql';
+import mappedOrganizationClusterAgentsQuery from '../graphql/queries/organization_mapped_agents.query.graphql';
+import { AVAILABILITY_OPTIONS } from '../constants';
+
+export default {
+  props: {
+    organizationId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      mappedAgentsLoaded: false,
+      mappedAgents: null,
+    };
+  },
+  apollo: {
+    mappedAgents: {
+      query: mappedOrganizationClusterAgentsQuery,
+      variables() {
+        return {
+          organizationId: this.organizationId,
+        };
+      },
+      skip() {
+        return !this.organizationId || this.mappedAgents;
+      },
+
+      result(result) {
+        if (result.error) {
+          this.$emit('error', { error: result.error });
+          return;
+        }
+
+        const mappedAgentIds =
+          result.data.organization.mappedAgents.nodes?.map((agent) => agent.id) || [];
+
+        this.mappedAgents = new Set(mappedAgentIds);
+        this.mappedAgentsLoaded = true;
+      },
+    },
+    // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
+    getOrgAgents: {
+      query: organizationWorkspacesClusterAgentsQuery,
+      variables() {
+        return {
+          organizationId: this.organizationId,
+          before: this.beforeCursor,
+          after: this.afterCursor,
+        };
+      },
+      skip() {
+        return !this.mappedAgentsLoaded;
+      },
+      result(result) {
+        if (result.error) {
+          this.$emit('error', { error: result.error });
+          return;
+        }
+
+        const agents = result.data.organization.clusterAgents.nodes.map((agent) => ({
+          name: agent.name,
+          url: joinPaths(window.gon.gitlab_url, agent.webPath),
+          group: agent.project?.group?.name || '',
+          project: agent.project?.name || '',
+          isConnected: Boolean(agent.connections?.nodes.length),
+          workspacesEnabled: Boolean(agent.workspacesAgentConfig?.enabled),
+          availability: this.mappedAgents.has(agent.id)
+            ? AVAILABILITY_OPTIONS.AVAILABLE
+            : AVAILABILITY_OPTIONS.BLOCKED,
+        }));
+
+        const { pageInfo } = result.data.organization.clusterAgents;
+
+        const pagination = {
+          hasNextPage: pageInfo.hasNextPage,
+          hasPreviousPage: pageInfo.hasPreviousPage,
+          beforeCursor: pageInfo.startCursor,
+          afterCursor: pageInfo.endCursor,
+        };
+
+        this.$emit('result', { agents, pagination });
+      },
+    },
+  },
+  render() {
+    return this.$scopedSlots.default?.({ loading: this.$apollo.loading });
+  },
+};
+</script>
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/constants.js b/ee/app/assets/javascripts/workspaces/admin_settings/constants.js
index f9e3abc56e9c5e..1d30a9c9940ec3 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/constants.js
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/constants.js
@@ -1,21 +1,11 @@
 import { s__ } from '~/locale';
 
-const AVAILABILITY_OPTIONS = {
+export const AVAILABILITY_OPTIONS = {
   AVAILABLE: 'available',
   BLOCKED: 'blocked',
 };
 
-export const CONNECTION_STATUS = {
-  CONNECTED: 'connected',
-  NOT_CONNECTED: 'not_connected',
-};
-
 export const AVAILABILITY_TEXT = {
   [AVAILABILITY_OPTIONS.AVAILABLE]: s__('Workspaces|Available'),
   [AVAILABILITY_OPTIONS.BLOCKED]: s__('Workspaces|Blocked'),
 };
-
-export const CONNECTION_STATUS_TEXT = {
-  [CONNECTION_STATUS.CONNECTED]: s__('Workspaces|Connected'),
-  [CONNECTION_STATUS.NOT_CONNECTED]: s__('Workspaces|Not connected'),
-};
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql
new file mode 100644
index 00000000000000..38b29ba1853468
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql
@@ -0,0 +1,10 @@
+query mappedOrganizationClusterAgentsQuery($organizationId: OrganizationsOrganizationID!) {
+  organization(id: $organizationId) {
+    id
+    mappedAgents: workspacesClusterAgents(filter: DIRECTLY_MAPPED) {
+      nodes {
+        id
+      }
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql
new file mode 100644
index 00000000000000..651376e218e47b
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql
@@ -0,0 +1,44 @@
+query organizationWorkspacesClusterAgentsQuery(
+  $organizationId: OrganizationsOrganizationID!
+  $before: String
+  $after: String
+) {
+  organization(id: $organizationId) {
+    id
+    clusterAgents: workspacesClusterAgents(
+      filter: UNMAPPED
+      first: 5
+      before: $before
+      after: $after
+    ) {
+      nodes {
+        id
+        name
+        webPath
+        project {
+          id
+          name
+          group {
+            id
+            name
+          }
+        }
+        workspacesAgentConfig {
+          id
+          enabled
+        }
+        connections {
+          nodes {
+            connectedAt
+          }
+        }
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js b/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
index b340f8711455d3..af90a561b626dc 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
@@ -1,10 +1,20 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_ORGANIZATION } from '~/graphql_shared/constants';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import createDefaultClient from '~/lib/graphql';
 
 import WorkspacesAgentAvailabilityApp from './pages/app.vue';
 
+Vue.use(VueApollo);
+
+const createApolloProvider = () => {
+  const defaultClient = createDefaultClient();
+
+  return new VueApollo({ defaultClient });
+};
+
 const initWorkspacesAgentAvailabilityApp = () => {
   const el = document.getElementById('js-workspaces-agent-availability-settings');
 
@@ -14,6 +24,7 @@ const initWorkspacesAgentAvailabilityApp = () => {
 
   return new Vue({
     el,
+    apolloProvider: createApolloProvider(),
     components: {
       WorkspacesAgentAvailabilityApp,
     },
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index 0e083f8d9ce32c..fe8967d93a2708 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -1,19 +1,27 @@
 <script>
-import { GlBadge, GlTableLite, GlToggle, GlLink } from '@gitlab/ui';
+import { GlBadge, GlTableLite, GlToggle, GlSkeletonLoader, GlLink } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
-import { AVAILABILITY_TEXT, CONNECTION_STATUS_TEXT, CONNECTION_STATUS } from '../constants';
 import AvailabilityPopover from '../components/availability_popover.vue';
+import GetOrganizationWorkspacesClusterAgentsQuery from '../components/get_organization_workspaces_cluster_agents_query.vue';
+
+import { AVAILABILITY_TEXT } from '../constants';
+
+const I18N = {
+  EMPTY_TEXT: s__('Workspaces|No agents available'),
+};
 
 export default {
   name: 'WorkspacesAgentAvailabilityApp',
   components: {
     SettingsBlock,
+    GetOrganizationWorkspacesClusterAgentsQuery,
     AvailabilityPopover,
     GlTableLite,
     GlBadge,
     GlToggle,
+    GlSkeletonLoader,
     GlLink,
   },
   inject: {
@@ -26,41 +34,54 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      hasQueryError: false,
+      agents: [],
+      currentPageInfo: {
+        beforeCursor: null,
+        afterCursor: null,
+        hasNextPage: null,
+        hasPreviousPage: null,
+      },
+    };
+  },
+  computed: {
+    hasAgents() {
+      return this.agents?.length;
+    },
+  },
   methods: {
-    getBadgeVariant(status) {
-      switch (status) {
-        case CONNECTION_STATUS.CONNECTED:
-          return 'success';
-        default:
-          return 'neutral';
-      }
+    onQueryResult({ agents, pagination }) {
+      this.agents = agents;
+      this.currentPageInfo.beforeCursor = pagination.beforeCursor;
+      this.currentPageInfo.afterCursor = pagination.afterCursor;
+      this.currentPageInfo.hasNextPage = pagination.hasNextPage;
+      this.currentPageInfo.hasPreviousPage = pagination.hasPreviousPage;
     },
-    getStatusText(status) {
-      return CONNECTION_STATUS_TEXT[status] ?? null;
+    onErrorResult() {
+      this.hasQueryError = true;
+      // CINDYTODO: handle errors
     },
     getAvailabilityText(availability) {
       return AVAILABILITY_TEXT[availability] ?? null;
     },
-  },
-  // TODO: replace with GQL query - https://gitlab.com/gitlab-org/gitlab/-/issues/513370
-  mockData: [
-    {
-      name: 'remotedev',
-      group: 'GitLab.com',
-      project: 'GitLab Shell',
-      availability: 'available',
-      status: 'connected',
-      url: '',
-    },
-    {
-      name: 'ws-agent',
-      group: 'GitLab.com',
-      project: 'GitLab Shell',
-      status: 'not_connected',
-      availability: 'blocked',
-      url: '',
+    getStatusBadgeMetadata(item) {
+      const { isConnected, workspacesEnabled } = item;
+      return [
+        {
+          text: s__('Workspaces|Workspaces enabled in config'),
+          variant: 'success',
+          show: workspacesEnabled,
+        },
+        {
+          text: isConnected ? s__('Workspaces|Connected') : s__('Workspaces|Not connected'),
+          variant: isConnected ? 'success' : 'neutral',
+          show: true,
+        },
+      ];
     },
-  ],
+  },
   fields: [
     {
       key: 'name',
@@ -87,6 +108,7 @@ export default {
   SETTINGS_DESCRIPTION: s__(
     'Workspaces|Configure which Kubernetes agents are available for new workspaces. These settings do not affect existing workspaces.',
   ),
+  I18N,
 };
 </script>
 <template>
@@ -95,48 +117,64 @@ export default {
       {{ $options.SETTINGS_DESCRIPTION }}
     </template>
     <template #default>
-      <div>
-        <gl-table-lite
-          v-if="$options.mockData.length"
-          responsive
-          :items="$options.mockData"
-          :fields="$options.fields"
-        >
-          <template #head(availability)="{ label }">
-            <div class="gl-flex gl-items-center gl-gap-3">
-              <span>{{ label }}</span>
-              <availability-popover />
-            </div>
-          </template>
-          <template #cell(name)="{ item }">
-            <gl-link
-              class="gl-font-bold"
-              data-test-id="agent-name"
-              :href="item.url"
-              target="_blank"
-              >{{ item.name }}</gl-link
+      <get-organization-workspaces-cluster-agents-query
+        :organization-id="organizationId"
+        @result="onQueryResult"
+        @error="onErrorResult"
+      >
+        <template #default="{ loading }">
+          <div>
+            <gl-skeleton-loader v-if="loading && !hasAgents" :lines="5" :width="600" />
+            <div
+              v-if="!loading && !hasAgents"
+              data-testid="workspaces-agent-availability-empty-state"
             >
-          </template>
-          <template #cell(status)="{ item }">
-            <gl-badge v-if="item.status" :variant="getBadgeVariant(item.status)">{{
-              getStatusText(item.status)
-            }}</gl-badge>
-          </template>
-          <template #cell(availability)="{ item }">
-            <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
-              <gl-toggle
-                :value="item.availability === 'available'"
-                :label="getAvailabilityText(item.availability)"
-                label-position="hidden"
-              />
-              <p class="gl-mb-0">{{ getAvailabilityText(item.availability) }}</p>
+              {{ $options.EMPTY_TEXT }}
             </div>
-          </template>
-        </gl-table-lite>
-        <div v-else data-testid="workspaces-agent-availability-empty-state">
-          {{ s__('Workspaces|No agents available') }}
-        </div>
-      </div>
+            <gl-table-lite
+              responsive
+              :items="agents"
+              :fields="$options.fields"
+              :aria-busy="loading"
+            >
+              <template #head(availability)="{ label }">
+                <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
+                  <span>{{ label }}</span>
+                  <availability-popover />
+                </div>
+              </template>
+              <template #cell(name)="{ item }">
+                <gl-link
+                  class="gl-font-bold"
+                  data-test-id="agent-name"
+                  :href="item.url"
+                  target="_blank"
+                  >{{ item.name }}</gl-link
+                >
+              </template>
+              <template #cell(status)="{ item }">
+                <div
+                  v-for="({ show, text, variant }, index) in getStatusBadgeMetadata(item)"
+                  :key="index"
+                  class="gl-flex gl-flex-row gl-items-center gl-gap-3"
+                >
+                  <gl-badge v-if="show" :variant="variant">{{ text }}</gl-badge>
+                </div>
+              </template>
+              <template #cell(availability)="{ item }">
+                <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
+                  <gl-toggle
+                    :value="item.availability === 'available'"
+                    :label="getAvailabilityText(item.availability)"
+                    label-position="hidden"
+                  />
+                  <p class="gl-mb-0">{{ getAvailabilityText(item.availability) }}</p>
+                </div>
+              </template>
+            </gl-table-lite>
+          </div>
+        </template>
+      </get-organization-workspaces-cluster-agents-query>
     </template>
   </settings-block>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7f862f91ff8e85..7a5b25569c515a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -70676,6 +70676,9 @@ msgstr ""
 msgid "Workspaces|Workspaces Settings"
 msgstr ""
 
+msgid "Workspaces|Workspaces enabled in config"
+msgstr ""
+
 msgid "Workspaces|Workspaces have built-in support for devfiles. The default location is .devfile.yaml, but you can also use a custom location. The devfile is used to automatically configure the development environment with the defined specifications."
 msgstr ""
 
-- 
GitLab


From a0a74e9d545f1ee409502b5487760eaae6c4b725 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 23 May 2025 20:18:20 +0900
Subject: [PATCH 2/9] Add specs for query component

---
 ...zation_workspaces_cluster_agents_query.vue |  40 ++-
 .../organization_mapped_agents.query.graphql  |   2 +-
 ...on_workspaces_cluster_agents.query.graphql |   4 +-
 ...on_workspaces_cluster_agents_query_spec.js | 248 ++++++++++++++++++
 .../frontend/workspaces/mock_data/index.js    | 247 +++++++++++++++++
 5 files changed, 525 insertions(+), 16 deletions(-)
 create mode 100644 ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
index 66585c94f39ef6..c1e47cc3d911c6 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
@@ -1,5 +1,6 @@
 <script>
 import { joinPaths } from '~/lib/utils/url_utility';
+import { logError } from '~/lib/logger';
 
 import organizationWorkspacesClusterAgentsQuery from '../graphql/queries/organization_workspaces_cluster_agents.query.graphql';
 import mappedOrganizationClusterAgentsQuery from '../graphql/queries/organization_mapped_agents.query.graphql';
@@ -29,7 +30,12 @@ export default {
       skip() {
         return !this.organizationId || this.mappedAgents;
       },
-
+      error(error) {
+        logError(error);
+      },
+      update() {
+        return [];
+      },
       result(result) {
         if (result.error) {
           this.$emit('error', { error: result.error });
@@ -56,25 +62,33 @@ export default {
       skip() {
         return !this.mappedAgentsLoaded;
       },
+      error(error) {
+        logError(error);
+      },
+      update() {
+        return [];
+      },
       result(result) {
         if (result.error) {
           this.$emit('error', { error: result.error });
           return;
         }
 
-        const agents = result.data.organization.clusterAgents.nodes.map((agent) => ({
-          name: agent.name,
-          url: joinPaths(window.gon.gitlab_url, agent.webPath),
-          group: agent.project?.group?.name || '',
-          project: agent.project?.name || '',
-          isConnected: Boolean(agent.connections?.nodes.length),
-          workspacesEnabled: Boolean(agent.workspacesAgentConfig?.enabled),
-          availability: this.mappedAgents.has(agent.id)
-            ? AVAILABILITY_OPTIONS.AVAILABLE
-            : AVAILABILITY_OPTIONS.BLOCKED,
-        }));
+        const agents = result.data.organization.organizationWorkspacesClusterAgents.nodes.map(
+          (agent) => ({
+            name: agent.name,
+            url: joinPaths(window.gon.gitlab_url, agent.webPath),
+            group: agent.project?.group?.name || '',
+            project: agent.project?.name || '',
+            isConnected: Boolean(agent.connections?.nodes.length),
+            workspacesEnabled: Boolean(agent.workspacesAgentConfig?.enabled),
+            availability: this.mappedAgents.has(agent.id)
+              ? AVAILABILITY_OPTIONS.AVAILABLE
+              : AVAILABILITY_OPTIONS.BLOCKED,
+          }),
+        );
 
-        const { pageInfo } = result.data.organization.clusterAgents;
+        const { pageInfo } = result.data.organization.organizationWorkspacesClusterAgents;
 
         const pagination = {
           hasNextPage: pageInfo.hasNextPage,
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql
index 38b29ba1853468..942689e62df16d 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql
@@ -1,4 +1,4 @@
-query mappedOrganizationClusterAgentsQuery($organizationId: OrganizationsOrganizationID!) {
+query mappedAgents($organizationId: OrganizationsOrganizationID!) {
   organization(id: $organizationId) {
     id
     mappedAgents: workspacesClusterAgents(filter: DIRECTLY_MAPPED) {
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql
index 651376e218e47b..b4a666587102ba 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql
@@ -1,11 +1,11 @@
-query organizationWorkspacesClusterAgentsQuery(
+query organizationWorkspacesClusterAgents(
   $organizationId: OrganizationsOrganizationID!
   $before: String
   $after: String
 ) {
   organization(id: $organizationId) {
     id
-    clusterAgents: workspacesClusterAgents(
+    organizationWorkspacesClusterAgents: workspacesClusterAgents(
       filter: UNMAPPED
       first: 5
       before: $before
diff --git a/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js b/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js
new file mode 100644
index 00000000000000..7356d427e9dae4
--- /dev/null
+++ b/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js
@@ -0,0 +1,248 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { shallowMount } from '@vue/test-utils';
+
+import { logError } from '~/lib/logger';
+import mappedOrganizationClusterAgentsQuery from 'ee/workspaces/admin_settings/graphql/queries/organization_mapped_agents.query.graphql';
+import organizationWorkspacesClusterAgentsQuery from 'ee/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql';
+import GetOrganizationWorkspacesClusterAgentsQuery from 'ee/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+
+import {
+  ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT,
+  ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT,
+} from '../../mock_data';
+
+Vue.use(VueApollo);
+jest.mock('~/lib/logger');
+
+const MOCK_ORG_ID = 'gid://gitlab/Organizations::Organization/1';
+
+describe('workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue', () => {
+  let mappedOrganizationClusterAgentsQueryHandler;
+  let organizationWorkspacesClusterAgentsQueryHandler;
+  let wrapper;
+
+  const buildWrapper = async ({ propsData = {}, scopedSlots = {} } = {}) => {
+    const apolloProvider = createMockApollo([
+      [mappedOrganizationClusterAgentsQuery, mappedOrganizationClusterAgentsQueryHandler],
+      [organizationWorkspacesClusterAgentsQuery, organizationWorkspacesClusterAgentsQueryHandler],
+    ]);
+
+    wrapper = shallowMount(GetOrganizationWorkspacesClusterAgentsQuery, {
+      apolloProvider,
+      propsData: {
+        organizationId: '',
+        ...propsData,
+      },
+      scopedSlots: {
+        ...scopedSlots,
+      },
+    });
+
+    await waitForPromises();
+  };
+  const buildWrapperWithOrg = () => buildWrapper({ propsData: { organizationId: MOCK_ORG_ID } });
+
+  const setupMappedOrganizationClusterAgentsQueryHandler = (responses) => {
+    mappedOrganizationClusterAgentsQueryHandler.mockResolvedValueOnce(responses);
+  };
+  const setupOrganizationWorkspacesClusterAgentsQueryHandler = (responses) => {
+    organizationWorkspacesClusterAgentsQueryHandler.mockResolvedValueOnce(responses);
+  };
+
+  beforeEach(() => {
+    mappedOrganizationClusterAgentsQueryHandler = jest.fn();
+    organizationWorkspacesClusterAgentsQueryHandler = jest.fn();
+    logError.mockReset();
+  });
+
+  describe('organizationMappedAgents query', () => {
+    it('does not execute query when organizationId is not provided', async () => {
+      await buildWrapper();
+
+      expect(mappedOrganizationClusterAgentsQueryHandler).not.toHaveBeenCalled();
+    });
+
+    it('executes query when organizationId is provided', async () => {
+      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
+
+      await buildWrapperWithOrg();
+
+      expect(mappedOrganizationClusterAgentsQueryHandler).toHaveBeenCalledWith({
+        organizationId: MOCK_ORG_ID,
+      });
+    });
+
+    it('populates sets correct state when query is successful', async () => {
+      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
+
+      await buildWrapperWithOrg();
+      await nextTick();
+
+      expect(mappedOrganizationClusterAgentsQueryHandler).toHaveBeenCalledWith({
+        organizationId: MOCK_ORG_ID,
+      });
+    });
+
+    it('triggers error event when query is not successful', async () => {
+      const mockError = new Error('Some error');
+      mappedOrganizationClusterAgentsQueryHandler.mockRejectedValueOnce(mockError);
+
+      await buildWrapperWithOrg();
+
+      await nextTick();
+
+      expect(wrapper.emitted('error')).toEqual([[{ error: mockError }]]);
+    });
+  });
+
+  describe('organizationWorkspacesClusterAgents query', () => {
+    it('does not execute query when organizationId is not provided', async () => {
+      await buildWrapper();
+
+      expect(organizationWorkspacesClusterAgentsQueryHandler).not.toHaveBeenCalled();
+    });
+
+    it('does not execute query when organizationId is provided but organizationMappedAgentsQuery is not successful', async () => {
+      mappedOrganizationClusterAgentsQueryHandler.mockRejectedValueOnce(new Error());
+      await buildWrapperWithOrg();
+
+      expect(organizationWorkspacesClusterAgentsQueryHandler).not.toHaveBeenCalled();
+    });
+
+    it('executes when organizationId is provided and organizationMappedAgentsQuery is successful', async () => {
+      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
+      setupOrganizationWorkspacesClusterAgentsQueryHandler(
+        ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT,
+      );
+      await buildWrapperWithOrg();
+
+      expect(organizationWorkspacesClusterAgentsQueryHandler).toHaveBeenCalledWith({
+        organizationId: MOCK_ORG_ID,
+      });
+    });
+
+    it('triggers result event with correct payload when query is successful', async () => {
+      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
+      setupOrganizationWorkspacesClusterAgentsQueryHandler(
+        ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT,
+      );
+      await buildWrapperWithOrg();
+
+      await nextTick();
+
+      const expectedAgentsResult = [
+        {
+          // gid://gitlab/Clusters::Agent/14
+          availability: 'available',
+          group: 'Gitlab Org',
+          isConnected: false,
+          name: 'midnightowlgarden',
+          project: 'gitlab-agent-configurations',
+          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/midnightowlgarden',
+          workspacesEnabled: true,
+        },
+        // gid://gitlab/Clusters::Agent/13
+        {
+          availability: 'blocked',
+          group: 'Gitlab Org',
+          isConnected: false,
+          name: 'coastalechovalley',
+          project: 'gitlab-agent-configurations',
+          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/coastalechovalley',
+          workspacesEnabled: true,
+        },
+        // gid://gitlab/Clusters::Agent/12
+        {
+          availability: 'available',
+          group: 'Gitlab Org',
+          isConnected: false,
+          name: 'wandingbreezetale',
+          project: 'gitlab-agent-configurations',
+          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/wandingbreezetale',
+          workspacesEnabled: false,
+        },
+        // gid://gitlab/Clusters::Agent/11
+        {
+          availability: 'blocked',
+          group: 'Gitlab Org',
+          isConnected: false,
+          name: 'crimsonmapleshadow',
+          project: 'gitlab-agent-configurations',
+          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/crimsonmapleshadow',
+          workspacesEnabled: false,
+        },
+        // gid://gitlab/Clusters::Agent/10
+        {
+          availability: 'available',
+          group: 'Gitlab Org',
+          isConnected: true,
+          name: 'meadowsageharbor',
+          project: 'gitlab-agent-configurations',
+          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/meadowsageharbor',
+          workspacesEnabled: true,
+        },
+        // gid://gitlab/Clusters::Agent/16
+        {
+          availability: 'blocked',
+          group: 'Gitlab Org',
+          isConnected: true,
+          name: 'silvermoonharbor',
+          project: 'gitlab-agent-configurations',
+          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/silvermoonharbor',
+          workspacesEnabled: true,
+        },
+        // gid://gitlab/Clusters::Agent/17
+        {
+          availability: 'available',
+          group: 'Gitlab Org',
+          isConnected: true,
+          name: 'silvermoonharbor',
+          project: 'gitlab-agent-configurations',
+          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/silvermoonharbor',
+          workspacesEnabled: false,
+        },
+        // gid://gitlab/Clusters::Agent/18
+        {
+          availability: 'blocked',
+          group: 'Gitlab Org',
+          isConnected: true,
+          name: 'oceanbreezecliff',
+          project: 'gitlab-agent-configurations',
+          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/oceanbreezecliff',
+          workspacesEnabled: false,
+        },
+      ];
+
+      const expectedPaginationResults = {
+        afterCursor: 'eyJpZCI6IjEwIn0',
+        beforeCursor: 'eyJpZCI6IjE0In0',
+        hasNextPage: true,
+        hasPreviousPage: false,
+      };
+
+      expect(wrapper.emitted('result')).toEqual([
+        [
+          {
+            agents: expectedAgentsResult,
+            pagination: expectedPaginationResults,
+          },
+        ],
+      ]);
+    });
+
+    it('triggers error event when query is not successful', async () => {
+      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
+      const mockError = new Error('Some error');
+      organizationWorkspacesClusterAgentsQueryHandler.mockRejectedValueOnce(mockError);
+
+      await buildWrapperWithOrg();
+
+      await nextTick();
+
+      expect(wrapper.emitted('error')).toEqual([[{ error: mockError }]]);
+    });
+  });
+});
diff --git a/ee/spec/frontend/workspaces/mock_data/index.js b/ee/spec/frontend/workspaces/mock_data/index.js
index a50bf5f647e153..129db9a6c2b2b5 100644
--- a/ee/spec/frontend/workspaces/mock_data/index.js
+++ b/ee/spec/frontend/workspaces/mock_data/index.js
@@ -660,3 +660,250 @@ export const DELETE_CLUSTER_AGENT_MAPPING_MUTATION_WITH_ERROR_RESULT = {
 };
 
 export const NAMESPACE_ID = 'gid://gitlab/Group/81';
+
+// these values correspond to ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT
+export const ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT = {
+  data: {
+    organization: {
+      id: 'gid://gitlab/Organizations::Organization/1',
+      mappedAgents: {
+        nodes: [
+          {
+            id: 'gid://gitlab/Clusters::Agent/14',
+          },
+          {
+            id: 'gid://gitlab/Clusters::Agent/12',
+          },
+          {
+            id: 'gid://gitlab/Clusters::Agent/10',
+          },
+          {
+            id: 'gid://gitlab/Clusters::Agent/17',
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT = {
+  data: {
+    organization: {
+      id: 'gid://gitlab/Organizations::Organization/1',
+      organizationWorkspacesClusterAgents: {
+        nodes: [
+          /**
+           * Connection status: Not connected
+           * Workspaces agent config: enabled
+           * Availability: available
+           */
+          {
+            id: 'gid://gitlab/Clusters::Agent/14',
+            name: 'midnightowlgarden',
+            webPath: '/gitlab-org/gitlab-agent-configurations/-/cluster_agents/midnightowlgarden',
+            project: {
+              id: 'gid://gitlab/Project/19',
+              name: 'gitlab-agent-configurations',
+              group: {
+                id: 'gid://gitlab/Group/24',
+                name: 'Gitlab Org',
+              },
+            },
+            workspacesAgentConfig: {
+              id: '',
+              enabled: true,
+            },
+            connections: {
+              nodes: [],
+            },
+          },
+          /**
+           * Connection status: Not connected
+           * Workspaces agent config: enabled
+           * Availability: blocked
+           */
+          {
+            id: 'gid://gitlab/Clusters::Agent/13',
+            name: 'coastalechovalley',
+            webPath: '/gitlab-org/gitlab-agent-configurations/-/cluster_agents/coastalechovalley',
+            project: {
+              id: 'gid://gitlab/Project/19',
+              name: 'gitlab-agent-configurations',
+              group: {
+                id: 'gid://gitlab/Group/24',
+                name: 'Gitlab Org',
+              },
+            },
+            workspacesAgentConfig: {
+              id: '',
+              enabled: true,
+            },
+            connections: {
+              nodes: [],
+            },
+          },
+          /**
+           * Connection status: Not connected
+           * Workspaces agent config: not enabled
+           * Availability: available
+           */
+          {
+            id: 'gid://gitlab/Clusters::Agent/12',
+            name: 'wandingbreezetale',
+            webPath: '/gitlab-org/gitlab-agent-configurations/-/cluster_agents/wandingbreezetale',
+            project: {
+              id: 'gid://gitlab/Project/19',
+              name: 'gitlab-agent-configurations',
+              group: {
+                id: 'gid://gitlab/Group/24',
+                name: 'Gitlab Org',
+              },
+            },
+            workspacesAgentConfig: null,
+            connections: {
+              nodes: [],
+            },
+          },
+          /**
+           * Connection status: Not connected
+           * Workspaces agent config: not enabled
+           * Availability: blocked
+           */
+          {
+            id: 'gid://gitlab/Clusters::Agent/11',
+            name: 'crimsonmapleshadow',
+            webPath: '/gitlab-org/gitlab-agent-configurations/-/cluster_agents/crimsonmapleshadow',
+            project: {
+              id: 'gid://gitlab/Project/19',
+              name: 'gitlab-agent-configurations',
+              group: {
+                id: 'gid://gitlab/Group/24',
+                name: 'Gitlab Org',
+              },
+            },
+            workspacesAgentConfig: null,
+            connections: {
+              nodes: [],
+            },
+          },
+          /**
+           * Connection status: Connected
+           * Workspaces agent config: enabled
+           * Availability: available
+           */
+          {
+            id: 'gid://gitlab/Clusters::Agent/10',
+            name: 'meadowsageharbor',
+            webPath: '/gitlab-org/gitlab-agent-configurations/-/cluster_agents/meadowsageharbor',
+            project: {
+              id: 'gid://gitlab/Project/19',
+              name: 'gitlab-agent-configurations',
+              group: {
+                id: 'gid://gitlab/Group/24',
+                name: 'Gitlab Org',
+              },
+            },
+            workspacesAgentConfig: {
+              id: '',
+              enabled: true,
+            },
+            connections: {
+              nodes: [
+                {
+                  connectedAt: '2023-04-29T18:24:34Z',
+                },
+              ],
+            },
+          },
+          /**
+           * Connection status: Connected
+           * Workspaces agent config: enabled
+           * Availability: blocked
+           */
+          {
+            id: 'gid://gitlab/Clusters::Agent/16',
+            name: 'silvermoonharbor',
+            webPath: '/gitlab-org/gitlab-agent-configurations/-/cluster_agents/silvermoonharbor',
+            project: {
+              id: 'gid://gitlab/Project/19',
+              name: 'gitlab-agent-configurations',
+              group: {
+                id: 'gid://gitlab/Group/24',
+                name: 'Gitlab Org',
+              },
+            },
+            workspacesAgentConfig: {
+              id: '',
+              enabled: true,
+            },
+            connections: {
+              nodes: [
+                {
+                  connectedAt: '2023-04-29T18:24:34Z',
+                },
+              ],
+            },
+          },
+          /**
+           * Connection status: Connected
+           * Workspaces agent config: not enabled
+           * Availability: available
+           */
+          {
+            id: 'gid://gitlab/Clusters::Agent/17',
+            name: 'silvermoonharbor',
+            webPath: '/gitlab-org/gitlab-agent-configurations/-/cluster_agents/silvermoonharbor',
+            project: {
+              id: 'gid://gitlab/Project/19',
+              name: 'gitlab-agent-configurations',
+              group: {
+                id: 'gid://gitlab/Group/24',
+                name: 'Gitlab Org',
+              },
+            },
+            workspacesAgentConfig: null,
+            connections: {
+              nodes: [
+                {
+                  connectedAt: '2023-04-29T18:24:34Z',
+                },
+              ],
+            },
+          },
+          /**
+           * Connection status: Connected
+           * Workspaces agent config: not enabled
+           * Availability: blocked
+           */
+          {
+            id: 'gid://gitlab/Clusters::Agent/18',
+            name: 'oceanbreezecliff',
+            webPath: '/gitlab-org/gitlab-agent-configurations/-/cluster_agents/oceanbreezecliff',
+            project: {
+              id: 'gid://gitlab/Project/19',
+              name: 'gitlab-agent-configurations',
+              group: {
+                id: 'gid://gitlab/Group/24',
+                name: 'Gitlab Org',
+              },
+            },
+            workspacesAgentConfig: null,
+            connections: {
+              nodes: [
+                {
+                  connectedAt: '2023-04-29T18:24:34Z',
+                },
+              ],
+            },
+          },
+        ],
+        pageInfo: {
+          hasNextPage: true,
+          hasPreviousPage: false,
+          startCursor: 'eyJpZCI6IjE0In0',
+          endCursor: 'eyJpZCI6IjEwIn0',
+        },
+      },
+    },
+  },
+};
-- 
GitLab


From 618ec8823dc11fe62f3bd10d4c0aebdde9c7aafe Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 23 May 2025 21:29:20 +0900
Subject: [PATCH 3/9] Add page specs

---
 .../workspaces/admin_settings/pages/app.vue   |  22 ++-
 .../admin_settings/pages/app_spec.js          | 177 ++++++++++++++++--
 locale/gitlab.pot                             |   3 +
 3 files changed, 182 insertions(+), 20 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index fe8967d93a2708..81bfc36c346cf4 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlTableLite, GlToggle, GlSkeletonLoader, GlLink } from '@gitlab/ui';
+import { GlBadge, GlTableLite, GlToggle, GlSkeletonLoader, GlLink, GlAlert } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
@@ -8,10 +8,6 @@ import GetOrganizationWorkspacesClusterAgentsQuery from '../components/get_organ
 
 import { AVAILABILITY_TEXT } from '../constants';
 
-const I18N = {
-  EMPTY_TEXT: s__('Workspaces|No agents available'),
-};
-
 export default {
   name: 'WorkspacesAgentAvailabilityApp',
   components: {
@@ -23,6 +19,12 @@ export default {
     GlToggle,
     GlSkeletonLoader,
     GlLink,
+    GlAlert,
+  },
+  inject: {
+    organizationId: {
+      default: '',
+    },
   },
   inject: {
     organizationId: {
@@ -53,6 +55,8 @@ export default {
   },
   methods: {
     onQueryResult({ agents, pagination }) {
+      this.hasQueryError = false;
+
       this.agents = agents;
       this.currentPageInfo.beforeCursor = pagination.beforeCursor;
       this.currentPageInfo.afterCursor = pagination.afterCursor;
@@ -61,7 +65,6 @@ export default {
     },
     onErrorResult() {
       this.hasQueryError = true;
-      // CINDYTODO: handle errors
     },
     getAvailabilityText(availability) {
       return AVAILABILITY_TEXT[availability] ?? null;
@@ -108,7 +111,8 @@ export default {
   SETTINGS_DESCRIPTION: s__(
     'Workspaces|Configure which Kubernetes agents are available for new workspaces. These settings do not affect existing workspaces.',
   ),
-  I18N,
+  EMPTY_TEXT: s__('Workspaces|No agents available'),
+  ERROR_MESSAGE: s__('Workspaces|Could not load agents. Refresh the page to try again.'),
 };
 </script>
 <template>
@@ -124,6 +128,9 @@ export default {
       >
         <template #default="{ loading }">
           <div>
+            <gl-alert v-if="hasQueryError" variant="danger" :dismissible="false"
+              >{{ $options.ERROR_MESSAGE }}
+            </gl-alert>
             <gl-skeleton-loader v-if="loading && !hasAgents" :lines="5" :width="600" />
             <div
               v-if="!loading && !hasAgents"
@@ -132,6 +139,7 @@ export default {
               {{ $options.EMPTY_TEXT }}
             </div>
             <gl-table-lite
+              v-else
               responsive
               :items="agents"
               :fields="$options.fields"
diff --git a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
index aed43d2677fda1..3a1a51de442a4e 100644
--- a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
@@ -1,44 +1,195 @@
 import { nextTick } from 'vue';
-import { GlTableLite, GlLink } from '@gitlab/ui';
+import { GlTableLite, GlBadge, GlLink, GlAlert } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import WorkspacesAgentAvailabilityApp from 'ee_component/workspaces/admin_settings/pages/app.vue';
 import AvailabilityPopover from 'ee_component/workspaces/admin_settings/components/availability_popover.vue';
+import GetOrganizationWorkspacesClusterAgentsQuery from 'ee_component/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue';
+import { stubComponent } from 'helpers/stub_component';
 
 const MOCK_ORG_ID = 'gid://gitlab/Organizations::Organization/1';
 
+const createMockResult = (customAgent = {}, customPagination = {}) => {
+  return {
+    agents: [
+      {
+        availability: 'available',
+        group: 'Gitlab Org',
+        isConnected: false,
+        name: 'midnightowlgarden',
+        project: 'gitlab-agent-configurations',
+        url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/midnightowlgarden',
+        workspacesEnabled: true,
+        ...customAgent,
+      },
+    ],
+    pagination: {
+      afterCursor: 'eyJpZCI6IjEwIn0',
+      beforeCursor: 'eyJpZCI6IjE0In0',
+      hasNextPage: true,
+      hasPreviousPage: false,
+      ...customPagination,
+    },
+  };
+};
+
 describe('workspaces/admin_settings/pages/app.vue', () => {
   let wrapper;
 
-  const buildWrapper = () => {
+  const buildWrapper = ({ organizationWorkspacesClusterAgentsQueryState = {} } = {}) => {
     wrapper = mountExtended(WorkspacesAgentAvailabilityApp, {
       provide: {
         organizationId: MOCK_ORG_ID,
-        defaultExpanded: true,
+      },
+      stubs: {
+        GetOrganizationWorkspacesClusterAgentsQuery: stubComponent(
+          GetOrganizationWorkspacesClusterAgentsQuery,
+          {
+            render() {
+              return this.$scopedSlots.default?.(organizationWorkspacesClusterAgentsQueryState);
+            },
+          },
+        ),
       },
     });
   };
+
+  const findGetOrganizationWorkspacesClusterAgentsQuery = () =>
+    wrapper.findComponent(GetOrganizationWorkspacesClusterAgentsQuery);
   const findAgentsTable = () => wrapper.findComponent(GlTableLite);
   const findAvailabilityPopover = () => wrapper.findComponent(AvailabilityPopover);
+  const findBadges = () => wrapper.findAllComponents(GlBadge);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  const triggerQueryResultEvent = (result) => {
+    findGetOrganizationWorkspacesClusterAgentsQuery().vm.$emit('result', result);
+  };
 
   describe('default', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
       buildWrapper();
+    });
+
+    it('renders GetOrganizationWorkspacesClusterAgentsQuery component and passes organizationId', () => {
+      expect(findGetOrganizationWorkspacesClusterAgentsQuery().props('organizationId')).toBe(
+        MOCK_ORG_ID,
+      );
+    });
+
+    it('does not render agents table', () => {
+      expect(findAgentsTable().exists()).toBe(false);
+    });
+  });
+
+  describe('when GetOrganizationWorkspacesClusterAgentsQuery component emits result event', () => {
+    it('renders empty state if no agents are returned', async () => {
+      buildWrapper();
+      triggerQueryResultEvent({
+        agents: [],
+        pagination: {
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: null,
+          endCursor: null,
+        },
+      });
+
       await nextTick();
+
+      const emptyStateComponent = wrapper.findByTestId('agent-availability-empty-state');
+
+      expect(findAgentsTable().exists()).toBe(false);
+      expect(emptyStateComponent.exists()).toBe(true);
+    });
+
+    describe('when an error is returned', () => {
+      it('renders alert component', async () => {
+        buildWrapper();
+
+        findGetOrganizationWorkspacesClusterAgentsQuery().vm.$emit('error', new Error());
+        await nextTick();
+
+        const alertComponent = findAlert();
+        expect(alertComponent.exists()).toBe(true);
+        expect(alertComponent.props('variant')).toBe('danger');
+        expect(alertComponent.text()).toBe('Could not load agents. Refresh the page to try again.');
+      });
     });
 
-    it('renders agents table', () => {
-      expect(findAgentsTable().exists()).toBe(true);
+    describe('when agents are returned', () => {
+      const mockResult = createMockResult();
+
+      beforeEach(async () => {
+        buildWrapper();
+
+        triggerQueryResultEvent(mockResult);
+        await nextTick();
+      });
+
+      it('renders agents table', () => {
+        expect(findAgentsTable().exists()).toBe(true);
+      });
+
+      it('renders popover in availability header column', () => {
+        expect(findAvailabilityPopover().exists()).toBe(true);
+      });
+
+      it('renders agent name with link to the agent page', () => {
+        const nameElement = wrapper.findComponent(GlLink);
+        expect(nameElement.exists()).toBe(true);
+        expect(nameElement.attributes('href')).toBe(mockResult.agents[0].url);
+      });
     });
+  });
+
+  describe('status badges', () => {
+    describe('workspaces config enabled badge', () => {
+      it('does not render badge if workspaces config is not enabled', async () => {
+        buildWrapper();
+        triggerQueryResultEvent(createMockResult({ workspacesEnabled: false }));
 
-    it('renders popover in availability header column', () => {
-      expect(findAvailabilityPopover().exists()).toBe(true);
+        await nextTick();
+
+        const badges = findBadges();
+        expect(badges.length).toBe(1);
+      });
+
+      it('renders badge if workspaces config is enabled', async () => {
+        buildWrapper();
+        triggerQueryResultEvent(createMockResult({ workspacesEnabled: true }));
+
+        await nextTick();
+
+        const badges = findBadges();
+        expect(badges.length).toBe(2);
+        expect(badges.at(0).props('variant')).toBe('success');
+        expect(badges.at(0).text()).toBe('Workspaces enabled in config');
+      });
     });
 
-    it('renders agent name with link to the agent page', () => {
-      const nameElement = wrapper.findComponent(GlLink);
-      expect(nameElement.exists()).toBe(true);
-      // TODO: update once we implement query: https://gitlab.com/gitlab-org/gitlab/-/issues/513370
-      expect(nameElement.attributes('href')).toBe('#');
+    describe('connection status badge', () => {
+      it('renders correct badge variant based for connected', async () => {
+        buildWrapper();
+        triggerQueryResultEvent(createMockResult({ isConnected: true }));
+
+        await nextTick();
+
+        const badges = findBadges();
+        expect(badges.length).toBe(2);
+        expect(badges.at(1).props('variant')).toBe('success');
+        expect(badges.at(1).text()).toBe('Connected');
+      });
+
+      it('renders correct badge variant based for not connected', async () => {
+        buildWrapper();
+        triggerQueryResultEvent(createMockResult({ isConnected: false }));
+
+        await nextTick();
+
+        const badges = findBadges();
+        expect(badges.length).toBe(2);
+        expect(badges.at(1).props('variant')).toBe('neutral');
+        expect(badges.at(1).text()).toBe('Not connected');
+      });
     });
   });
 });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7a5b25569c515a..ca0d44b5729b13 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -70475,6 +70475,9 @@ msgstr ""
 msgid "Workspaces|Connected"
 msgstr ""
 
+msgid "Workspaces|Could not load agents. Refresh the page to try again."
+msgstr ""
+
 msgid "Workspaces|Could not load available agents. Refresh the page to try again."
 msgstr ""
 
-- 
GitLab


From f55d76c9c8f4bbad98ffd017060a79d47755c39f Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Mon, 26 May 2025 14:09:55 +0900
Subject: [PATCH 4/9] Implement pagination

---
 ...zation_workspaces_cluster_agents_query.vue |  45 ++++--
 .../workspaces/admin_settings/pages/app.vue   | 130 +++++++++---------
 ...on_workspaces_cluster_agents_query_spec.js |  83 ++++++++---
 .../admin_settings/pages/app_spec.js          | 126 ++++++++++++++---
 4 files changed, 272 insertions(+), 112 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
index c1e47cc3d911c6..f8458ce585bb87 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
@@ -17,6 +17,10 @@ export default {
     return {
       mappedAgentsLoaded: false,
       mappedAgents: null,
+      beforeCursor: null,
+      afterCursor: null,
+      hasNextPage: false,
+      hasPreviousPage: false,
     };
   },
   apollo: {
@@ -55,8 +59,6 @@ export default {
       variables() {
         return {
           organizationId: this.organizationId,
-          before: this.beforeCursor,
-          after: this.afterCursor,
         };
       },
       skip() {
@@ -90,19 +92,42 @@ export default {
 
         const { pageInfo } = result.data.organization.organizationWorkspacesClusterAgents;
 
-        const pagination = {
-          hasNextPage: pageInfo.hasNextPage,
-          hasPreviousPage: pageInfo.hasPreviousPage,
-          beforeCursor: pageInfo.startCursor,
-          afterCursor: pageInfo.endCursor,
-        };
+        this.hasNextPage = pageInfo.hasNextPage;
+        this.hasPreviousPage = pageInfo.hasPreviousPage;
+        this.beforeCursor = pageInfo.startCursor;
+        this.afterCursor = pageInfo.endCursor;
 
-        this.$emit('result', { agents, pagination });
+        this.$emit('result', { agents });
       },
     },
   },
+  methods: {
+    nextPage() {
+      this.$apollo.queries.getOrgAgents.refetch({
+        organizationId: this.organizationId,
+        before: null,
+        after: this.afterCursor,
+      });
+    },
+    prevPage() {
+      this.$apollo.queries.getOrgAgents.refetch({
+        organizationId: this.organizationId,
+        before: this.beforeCursor,
+        after: null,
+      });
+    },
+  },
   render() {
-    return this.$scopedSlots.default?.({ loading: this.$apollo.loading });
+    return this.$scopedSlots.default?.({
+      loading: this.$apollo.loading,
+      pagination: {
+        show: this.hasNextPage || this.hasPreviousPage,
+        hasPreviousPage: this.hasPreviousPage,
+        hasNextPage: this.hasNextPage,
+        nextPage: this.nextPage,
+        prevPage: this.prevPage,
+      },
+    });
   },
 };
 </script>
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index 81bfc36c346cf4..de52e6dc7c4d27 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlBadge, GlTableLite, GlToggle, GlSkeletonLoader, GlLink, GlAlert } from '@gitlab/ui';
+import {
+  GlBadge,
+  GlTableLite,
+  GlToggle,
+  GlSkeletonLoader,
+  GlLink,
+  GlAlert,
+  GlKeysetPagination,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
@@ -20,11 +28,7 @@ export default {
     GlSkeletonLoader,
     GlLink,
     GlAlert,
-  },
-  inject: {
-    organizationId: {
-      default: '',
-    },
+    GlKeysetPagination,
   },
   inject: {
     organizationId: {
@@ -40,12 +44,6 @@ export default {
     return {
       hasQueryError: false,
       agents: [],
-      currentPageInfo: {
-        beforeCursor: null,
-        afterCursor: null,
-        hasNextPage: null,
-        hasPreviousPage: null,
-      },
     };
   },
   computed: {
@@ -54,14 +52,10 @@ export default {
     },
   },
   methods: {
-    onQueryResult({ agents, pagination }) {
+    onQueryResult({ agents }) {
       this.hasQueryError = false;
 
       this.agents = agents;
-      this.currentPageInfo.beforeCursor = pagination.beforeCursor;
-      this.currentPageInfo.afterCursor = pagination.afterCursor;
-      this.currentPageInfo.hasNextPage = pagination.hasNextPage;
-      this.currentPageInfo.hasPreviousPage = pagination.hasPreviousPage;
     },
     onErrorResult() {
       this.hasQueryError = true;
@@ -126,60 +120,66 @@ export default {
         @result="onQueryResult"
         @error="onErrorResult"
       >
-        <template #default="{ loading }">
+        <template #default="{ loading, pagination }">
           <div>
             <gl-alert v-if="hasQueryError" variant="danger" :dismissible="false"
               >{{ $options.ERROR_MESSAGE }}
             </gl-alert>
-            <gl-skeleton-loader v-if="loading && !hasAgents" :lines="5" :width="600" />
-            <div
-              v-if="!loading && !hasAgents"
-              data-testid="workspaces-agent-availability-empty-state"
-            >
+            <gl-skeleton-loader v-else-if="loading" :lines="5" :width="600" />
+            <div v-else-if="!loading && !hasAgents" data-testid="agent-availability-empty-state">
               {{ $options.EMPTY_TEXT }}
             </div>
-            <gl-table-lite
-              v-else
-              responsive
-              :items="agents"
-              :fields="$options.fields"
-              :aria-busy="loading"
-            >
-              <template #head(availability)="{ label }">
-                <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
-                  <span>{{ label }}</span>
-                  <availability-popover />
-                </div>
-              </template>
-              <template #cell(name)="{ item }">
-                <gl-link
-                  class="gl-font-bold"
-                  data-test-id="agent-name"
-                  :href="item.url"
-                  target="_blank"
-                  >{{ item.name }}</gl-link
-                >
-              </template>
-              <template #cell(status)="{ item }">
-                <div
-                  v-for="({ show, text, variant }, index) in getStatusBadgeMetadata(item)"
-                  :key="index"
-                  class="gl-flex gl-flex-row gl-items-center gl-gap-3"
-                >
-                  <gl-badge v-if="show" :variant="variant">{{ text }}</gl-badge>
-                </div>
-              </template>
-              <template #cell(availability)="{ item }">
-                <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
-                  <gl-toggle
-                    :value="item.availability === 'available'"
-                    :label="getAvailabilityText(item.availability)"
-                    label-position="hidden"
-                  />
-                  <p class="gl-mb-0">{{ getAvailabilityText(item.availability) }}</p>
-                </div>
-              </template>
-            </gl-table-lite>
+            <div v-else class="gl-flex gl-flex-col gl-items-center gl-gap-3">
+              <gl-table-lite
+                responsive
+                :items="agents"
+                :fields="$options.fields"
+                :aria-busy="loading"
+              >
+                <template #head(availability)="{ label }">
+                  <div class="gl-flex gl-items-center gl-gap-3">
+                    <span>{{ label }}</span>
+                    <availability-popover />
+                  </div>
+                </template>
+                <template #cell(name)="{ item }">
+                  <gl-link
+                    class="gl-font-bold"
+                    data-test-id="agent-name"
+                    :href="item.url"
+                    target="_blank"
+                    >{{ item.name }}</gl-link
+                  >
+                </template>
+                <template #cell(status)="{ item }">
+                  <div
+                    v-for="({ show, text, variant }, index) in getStatusBadgeMetadata(item)"
+                    :key="index"
+                    class="gl-flex gl-items-center gl-gap-3"
+                  >
+                    <gl-badge v-if="show" :variant="variant">{{ text }}</gl-badge>
+                  </div>
+                </template>
+                <template #cell(availability)="{ item }">
+                  <div class="gl-flex gl-items-center gl-gap-3">
+                    <gl-toggle
+                      :value="item.availability === 'available'"
+                      :label="getAvailabilityText(item.availability)"
+                      label-position="hidden"
+                      class="flex-row"
+                    />
+                    <p class="gl-mb-0">{{ getAvailabilityText(item.availability) }}</p>
+                  </div>
+                </template>
+              </gl-table-lite>
+              <gl-keyset-pagination
+                v-if="!loading && pagination.show"
+                :has-next-page="pagination.hasNextPage"
+                :has-previous-page="pagination.hasPreviousPage"
+                @prev="pagination.prevPage"
+                @next="pagination.nextPage"
+              />
+            </div>
           </div>
         </template>
       </get-organization-workspaces-cluster-agents-query>
diff --git a/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js b/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js
index 7356d427e9dae4..64f8886e850821 100644
--- a/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js
@@ -46,10 +46,10 @@ describe('workspaces/admin_settings/components/get_organization_workspaces_clust
   const buildWrapperWithOrg = () => buildWrapper({ propsData: { organizationId: MOCK_ORG_ID } });
 
   const setupMappedOrganizationClusterAgentsQueryHandler = (responses) => {
-    mappedOrganizationClusterAgentsQueryHandler.mockResolvedValueOnce(responses);
+    mappedOrganizationClusterAgentsQueryHandler.mockResolvedValue(responses);
   };
   const setupOrganizationWorkspacesClusterAgentsQueryHandler = (responses) => {
-    organizationWorkspacesClusterAgentsQueryHandler.mockResolvedValueOnce(responses);
+    organizationWorkspacesClusterAgentsQueryHandler.mockResolvedValue(responses);
   };
 
   beforeEach(() => {
@@ -124,6 +124,18 @@ describe('workspaces/admin_settings/components/get_organization_workspaces_clust
       });
     });
 
+    it('triggers error event when query is not successful', async () => {
+      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
+      const mockError = new Error('Some error');
+      organizationWorkspacesClusterAgentsQueryHandler.mockRejectedValueOnce(mockError);
+
+      await buildWrapperWithOrg();
+
+      await nextTick();
+
+      expect(wrapper.emitted('error')).toEqual([[{ error: mockError }]]);
+    });
+
     it('triggers result event with correct payload when query is successful', async () => {
       setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
       setupOrganizationWorkspacesClusterAgentsQueryHandler(
@@ -216,33 +228,70 @@ describe('workspaces/admin_settings/components/get_organization_workspaces_clust
         },
       ];
 
-      const expectedPaginationResults = {
-        afterCursor: 'eyJpZCI6IjEwIn0',
-        beforeCursor: 'eyJpZCI6IjE0In0',
-        hasNextPage: true,
-        hasPreviousPage: false,
-      };
-
       expect(wrapper.emitted('result')).toEqual([
         [
           {
             agents: expectedAgentsResult,
-            pagination: expectedPaginationResults,
           },
         ],
       ]);
     });
 
-    it('triggers error event when query is not successful', async () => {
-      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
-      const mockError = new Error('Some error');
-      organizationWorkspacesClusterAgentsQueryHandler.mockRejectedValueOnce(mockError);
+    describe('scoped slot', () => {
+      const defaultSlotSpy = jest.fn();
 
-      await buildWrapperWithOrg();
+      beforeEach(async () => {
+        defaultSlotSpy.mockClear();
+        setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
+        setupOrganizationWorkspacesClusterAgentsQueryHandler(
+          ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT,
+        );
 
-      await nextTick();
+        await buildWrapper({
+          propsData: {
+            organizationId: MOCK_ORG_ID,
+          },
+          scopedSlots: {
+            default: defaultSlotSpy,
+          },
+        });
 
-      expect(wrapper.emitted('error')).toEqual([[{ error: mockError }]]);
+        await nextTick();
+      });
+
+      it('renders correct data to scoped slot', () => {
+        const scopedSlotCall = defaultSlotSpy.mock.lastCall[0];
+        const expectedPaginationData = {
+          show: true,
+          hasPreviousPage: false,
+          hasNextPage: true,
+          nextPage: wrapper.vm.nextPage,
+          prevPage: wrapper.vm.prevPage,
+        };
+
+        expect(scopedSlotCall).toMatchObject({
+          loading: false,
+          pagination: expectedPaginationData,
+        });
+      });
+
+      it.each`
+        methodName    | expectedVariables
+        ${'nextPage'} | ${{ organizationId: MOCK_ORG_ID, before: null, after: 'eyJpZCI6IjEwIn0' }}
+        ${'prevPage'} | ${{ organizationId: MOCK_ORG_ID, before: 'eyJpZCI6IjE0In0', after: null }}
+      `(
+        'refetches query with correct variables when $methodName is called',
+        async ({ methodName, expectedVariables }) => {
+          const scopedSlotCall = defaultSlotSpy.mock.lastCall[0];
+
+          await scopedSlotCall.pagination[methodName]();
+
+          expect(organizationWorkspacesClusterAgentsQueryHandler).toHaveBeenCalledTimes(2);
+          expect(organizationWorkspacesClusterAgentsQueryHandler).toHaveBeenLastCalledWith(
+            expectedVariables,
+          );
+        },
+      );
     });
   });
 });
diff --git a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
index 3a1a51de442a4e..54bf84eddd8ac1 100644
--- a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
@@ -1,5 +1,12 @@
 import { nextTick } from 'vue';
-import { GlTableLite, GlBadge, GlLink, GlAlert } from '@gitlab/ui';
+import {
+  GlTableLite,
+  GlBadge,
+  GlLink,
+  GlAlert,
+  GlKeysetPagination,
+  GlSkeletonLoader,
+} from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import WorkspacesAgentAvailabilityApp from 'ee_component/workspaces/admin_settings/pages/app.vue';
 import AvailabilityPopover from 'ee_component/workspaces/admin_settings/components/availability_popover.vue';
@@ -8,7 +15,7 @@ import { stubComponent } from 'helpers/stub_component';
 
 const MOCK_ORG_ID = 'gid://gitlab/Organizations::Organization/1';
 
-const createMockResult = (customAgent = {}, customPagination = {}) => {
+const createMockResult = (customAgent = {}) => {
   return {
     agents: [
       {
@@ -22,20 +29,23 @@ const createMockResult = (customAgent = {}, customPagination = {}) => {
         ...customAgent,
       },
     ],
-    pagination: {
-      afterCursor: 'eyJpZCI6IjEwIn0',
-      beforeCursor: 'eyJpZCI6IjE0In0',
-      hasNextPage: true,
-      hasPreviousPage: false,
-      ...customPagination,
-    },
   };
 };
 
+const MOCK_PAGINATION_DATA = {
+  show: true,
+  hasNextPage: true,
+  hasPreviousPage: false,
+  nextPage: jest.fn(),
+  prevPage: jest.fn(),
+};
+
 describe('workspaces/admin_settings/pages/app.vue', () => {
   let wrapper;
 
-  const buildWrapper = ({ organizationWorkspacesClusterAgentsQueryState = {} } = {}) => {
+  const buildWrapper = (organizationWorkspacesClusterAgentsQueryState = {}) => {
+    const { pagination = {}, ...restOfState } = organizationWorkspacesClusterAgentsQueryState;
+
     wrapper = mountExtended(WorkspacesAgentAvailabilityApp, {
       provide: {
         organizationId: MOCK_ORG_ID,
@@ -45,7 +55,14 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
           GetOrganizationWorkspacesClusterAgentsQuery,
           {
             render() {
-              return this.$scopedSlots.default?.(organizationWorkspacesClusterAgentsQueryState);
+              return this.$scopedSlots.default?.({
+                loading: false,
+                pagination: {
+                  ...MOCK_PAGINATION_DATA,
+                  ...pagination,
+                },
+                ...restOfState,
+              });
             },
           },
         ),
@@ -59,14 +76,20 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
   const findAvailabilityPopover = () => wrapper.findComponent(AvailabilityPopover);
   const findBadges = () => wrapper.findAllComponents(GlBadge);
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findPagination = () => wrapper.findComponent(GlKeysetPagination);
+  const findLoadingState = () => wrapper.findComponent(GlSkeletonLoader);
 
-  const triggerQueryResultEvent = (result) => {
+  const triggerQueryResultEvent = (result = createMockResult()) => {
     findGetOrganizationWorkspacesClusterAgentsQuery().vm.$emit('result', result);
   };
 
   describe('default', () => {
-    beforeEach(() => {
-      buildWrapper();
+    beforeEach(async () => {
+      buildWrapper({
+        loading: true,
+        pagination: undefined,
+      });
+      await nextTick();
     });
 
     it('renders GetOrganizationWorkspacesClusterAgentsQuery component and passes organizationId', () => {
@@ -78,6 +101,10 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
     it('does not render agents table', () => {
       expect(findAgentsTable().exists()).toBe(false);
     });
+
+    it('renders loading state', () => {
+      expect(findLoadingState().exists()).toBe(true);
+    });
   });
 
   describe('when GetOrganizationWorkspacesClusterAgentsQuery component emits result event', () => {
@@ -85,12 +112,6 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
       buildWrapper();
       triggerQueryResultEvent({
         agents: [],
-        pagination: {
-          hasNextPage: false,
-          hasPreviousPage: false,
-          startCursor: null,
-          endCursor: null,
-        },
       });
 
       await nextTick();
@@ -192,4 +213,69 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
       });
     });
   });
+
+  describe('pagination', () => {
+    describe('when show is false', () => {
+      it('does not render component', async () => {
+        buildWrapper({
+          pagination: {
+            show: false,
+            hasPreviousPage: false,
+            hasNextPage: false,
+          },
+        });
+        await nextTick();
+        expect(findPagination().exists()).toBe(false);
+      });
+    });
+
+    describe('when show is true', () => {
+      const nextPageSpy = jest.fn();
+      const prevPageSpy = jest.fn();
+
+      beforeEach(async () => {
+        nextPageSpy.mockClear();
+        prevPageSpy.mockClear();
+
+        buildWrapper({
+          pagination: {
+            nextPage: nextPageSpy,
+            prevPage: prevPageSpy,
+          },
+        });
+        triggerQueryResultEvent();
+        await nextTick();
+      });
+
+      it('renders component if show is true', () => {
+        const paginationComponent = findPagination();
+
+        expect(paginationComponent.exists()).toBe(true);
+        expect(paginationComponent.props('hasNextPage')).toBe(MOCK_PAGINATION_DATA.hasNextPage);
+        expect(paginationComponent.props('hasPreviousPage')).toBe(
+          MOCK_PAGINATION_DATA.hasPreviousPage,
+        );
+      });
+
+      it('calls correct method when next event is emitted', async () => {
+        const paginationComponent = findPagination();
+
+        paginationComponent.vm.$emit('next');
+        await nextTick();
+
+        expect(nextPageSpy).toHaveBeenCalledTimes(1);
+        expect(prevPageSpy).not.toHaveBeenCalled();
+      });
+
+      it('calls correct method when prev event is emitted', async () => {
+        const paginationComponent = findPagination();
+
+        paginationComponent.vm.$emit('prev');
+        await nextTick();
+
+        expect(prevPageSpy).toHaveBeenCalledTimes(1);
+        expect(nextPageSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
 });
-- 
GitLab


From 72b54664427fcd18837e56af22b83668b2a51b3f Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 30 May 2025 12:32:53 +0900
Subject: [PATCH 5/9] Remove workspaces enabled badge logic

Based on product decision to only display agents with workspaces config enabled.
---
 .../workspaces/admin_settings/pages/app.vue   | 28 ++++---------
 .../admin_settings/pages/app_spec.js          | 40 ++++---------------
 locale/gitlab.pot                             |  3 --
 3 files changed, 15 insertions(+), 56 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index de52e6dc7c4d27..8dead7a9e37beb 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -64,19 +64,11 @@ export default {
       return AVAILABILITY_TEXT[availability] ?? null;
     },
     getStatusBadgeMetadata(item) {
-      const { isConnected, workspacesEnabled } = item;
-      return [
-        {
-          text: s__('Workspaces|Workspaces enabled in config'),
-          variant: 'success',
-          show: workspacesEnabled,
-        },
-        {
-          text: isConnected ? s__('Workspaces|Connected') : s__('Workspaces|Not connected'),
-          variant: isConnected ? 'success' : 'neutral',
-          show: true,
-        },
-      ];
+      const { isConnected } = item;
+      return {
+        text: isConnected ? s__('Workspaces|Connected') : s__('Workspaces|Not connected'),
+        variant: isConnected ? 'success' : 'neutral',
+      };
     },
   },
   fields: [
@@ -152,13 +144,9 @@ export default {
                   >
                 </template>
                 <template #cell(status)="{ item }">
-                  <div
-                    v-for="({ show, text, variant }, index) in getStatusBadgeMetadata(item)"
-                    :key="index"
-                    class="gl-flex gl-items-center gl-gap-3"
-                  >
-                    <gl-badge v-if="show" :variant="variant">{{ text }}</gl-badge>
-                  </div>
+                  <gl-badge :variant="getStatusBadgeMetadata(item).variant">{{
+                    getStatusBadgeMetadata(item).text
+                  }}</gl-badge>
                 </template>
                 <template #cell(availability)="{ item }">
                   <div class="gl-flex gl-items-center gl-gap-3">
diff --git a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
index 54bf84eddd8ac1..7680e237d97b9d 100644
--- a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
@@ -74,7 +74,7 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
     wrapper.findComponent(GetOrganizationWorkspacesClusterAgentsQuery);
   const findAgentsTable = () => wrapper.findComponent(GlTableLite);
   const findAvailabilityPopover = () => wrapper.findComponent(AvailabilityPopover);
-  const findBadges = () => wrapper.findAllComponents(GlBadge);
+  const findBadge = () => wrapper.findComponent(GlBadge);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findPagination = () => wrapper.findComponent(GlKeysetPagination);
   const findLoadingState = () => wrapper.findComponent(GlSkeletonLoader);
@@ -163,30 +163,6 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
   });
 
   describe('status badges', () => {
-    describe('workspaces config enabled badge', () => {
-      it('does not render badge if workspaces config is not enabled', async () => {
-        buildWrapper();
-        triggerQueryResultEvent(createMockResult({ workspacesEnabled: false }));
-
-        await nextTick();
-
-        const badges = findBadges();
-        expect(badges.length).toBe(1);
-      });
-
-      it('renders badge if workspaces config is enabled', async () => {
-        buildWrapper();
-        triggerQueryResultEvent(createMockResult({ workspacesEnabled: true }));
-
-        await nextTick();
-
-        const badges = findBadges();
-        expect(badges.length).toBe(2);
-        expect(badges.at(0).props('variant')).toBe('success');
-        expect(badges.at(0).text()).toBe('Workspaces enabled in config');
-      });
-    });
-
     describe('connection status badge', () => {
       it('renders correct badge variant based for connected', async () => {
         buildWrapper();
@@ -194,10 +170,9 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
 
         await nextTick();
 
-        const badges = findBadges();
-        expect(badges.length).toBe(2);
-        expect(badges.at(1).props('variant')).toBe('success');
-        expect(badges.at(1).text()).toBe('Connected');
+        const badge = findBadge();
+        expect(badge.props('variant')).toBe('success');
+        expect(badge.text()).toBe('Connected');
       });
 
       it('renders correct badge variant based for not connected', async () => {
@@ -206,10 +181,9 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
 
         await nextTick();
 
-        const badges = findBadges();
-        expect(badges.length).toBe(2);
-        expect(badges.at(1).props('variant')).toBe('neutral');
-        expect(badges.at(1).text()).toBe('Not connected');
+        const badge = findBadge();
+        expect(badge.props('variant')).toBe('neutral');
+        expect(badge.text()).toBe('Not connected');
       });
     });
   });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ca0d44b5729b13..315e1dffd2a5ce 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -70679,9 +70679,6 @@ msgstr ""
 msgid "Workspaces|Workspaces Settings"
 msgstr ""
 
-msgid "Workspaces|Workspaces enabled in config"
-msgstr ""
-
 msgid "Workspaces|Workspaces have built-in support for devfiles. The default location is .devfile.yaml, but you can also use a custom location. The devfile is used to automatically configure the development environment with the defined specifications."
 msgstr ""
 
-- 
GitLab


From e5661864099eba40d1812fceb0deb5f41ec47721 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 30 May 2025 13:09:28 +0900
Subject: [PATCH 6/9] Apply Duo suggestions

---
 ...et_organization_workspaces_cluster_agents_query.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
index f8458ce585bb87..6c8e3e78225099 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
@@ -32,13 +32,13 @@ export default {
         };
       },
       skip() {
-        return !this.organizationId || this.mappedAgents;
+        return !this.organizationId;
       },
       error(error) {
         logError(error);
       },
-      update() {
-        return [];
+      update(data) {
+        return data?.organization?.mappedAgents?.nodes || [];
       },
       result(result) {
         if (result.error) {
@@ -67,8 +67,8 @@ export default {
       error(error) {
         logError(error);
       },
-      update() {
-        return [];
+      update(data) {
+        return data?.organization?.organizationWorkspacesClusterAgents?.nodes || [];
       },
       result(result) {
         if (result.error) {
-- 
GitLab


From be84849f8bf6887c2ac609e702777c5b98e4a1e1 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Mon, 2 Jun 2025 20:50:47 +0900
Subject: [PATCH 7/9] Use inline translations

---
 .../workspaces/admin_settings/pages/app.vue   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index 8dead7a9e37beb..c3c438b4841d6e 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -93,18 +93,19 @@ export default {
       label: s__('Workspaces|Availability'),
     },
   ],
-  SETTINGS_TITLE: s__('Workspaces|Workspaces Agent Availability'),
-  SETTINGS_DESCRIPTION: s__(
-    'Workspaces|Configure which Kubernetes agents are available for new workspaces. These settings do not affect existing workspaces.',
-  ),
-  EMPTY_TEXT: s__('Workspaces|No agents available'),
-  ERROR_MESSAGE: s__('Workspaces|Could not load agents. Refresh the page to try again.'),
 };
 </script>
 <template>
-  <settings-block :title="$options.SETTINGS_TITLE" :default-expanded="defaultExpanded">
+  <settings-block
+    :title="s__('Workspaces|Workspaces Agent Availability')"
+    :default-expanded="defaultExpanded"
+  >
     <template #description>
-      {{ $options.SETTINGS_DESCRIPTION }}
+      {{
+        s__(
+          'Workspaces|Configure which Kubernetes agents are available for new workspaces. These settings do not affect existing workspaces.',
+        )
+      }}
     </template>
     <template #default>
       <get-organization-workspaces-cluster-agents-query
@@ -115,11 +116,11 @@ export default {
         <template #default="{ loading, pagination }">
           <div>
             <gl-alert v-if="hasQueryError" variant="danger" :dismissible="false"
-              >{{ $options.ERROR_MESSAGE }}
+              >{{ s__('Workspaces|Could not load agents. Refresh the page to try again.') }}
             </gl-alert>
             <gl-skeleton-loader v-else-if="loading" :lines="5" :width="600" />
             <div v-else-if="!loading && !hasAgents" data-testid="agent-availability-empty-state">
-              {{ $options.EMPTY_TEXT }}
+              {{ s__('Workspaces|No agents available') }}
             </div>
             <div v-else class="gl-flex gl-flex-col gl-items-center gl-gap-3">
               <gl-table-lite
-- 
GitLab


From 5429e63a977169b9045565ff1741996e47539f77 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Tue, 3 Jun 2025 14:55:48 +0900
Subject: [PATCH 8/9] Address MR feedback

---
 ...zation_workspaces_cluster_agents_query.vue |  81 ++---
 .../workspaces/admin_settings/pages/app.vue   |  44 +--
 ...on_workspaces_cluster_agents_query_spec.js | 338 ++++++++----------
 .../admin_settings/pages/app_spec.js          |  77 ++--
 4 files changed, 241 insertions(+), 299 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
index 6c8e3e78225099..66a0097f55fb7f 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue
@@ -17,6 +17,8 @@ export default {
     return {
       mappedAgentsLoaded: false,
       mappedAgents: null,
+      agents: [],
+      error: null,
       beforeCursor: null,
       afterCursor: null,
       hasNextPage: false,
@@ -36,25 +38,18 @@ export default {
       },
       error(error) {
         logError(error);
+        this.error = error;
       },
       update(data) {
-        return data?.organization?.mappedAgents?.nodes || [];
-      },
-      result(result) {
-        if (result.error) {
-          this.$emit('error', { error: result.error });
-          return;
-        }
+        this.error = null;
 
-        const mappedAgentIds =
-          result.data.organization.mappedAgents.nodes?.map((agent) => agent.id) || [];
+        const mappedAgentIds = data.organization.mappedAgents.nodes?.map((agent) => agent.id) || [];
 
-        this.mappedAgents = new Set(mappedAgentIds);
         this.mappedAgentsLoaded = true;
+        return new Set(mappedAgentIds);
       },
     },
-    // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
-    getOrgAgents: {
+    agents: {
       query: organizationWorkspacesClusterAgentsQuery,
       variables() {
         return {
@@ -66,67 +61,67 @@ export default {
       },
       error(error) {
         logError(error);
+        this.error = error;
       },
       update(data) {
-        return data?.organization?.organizationWorkspacesClusterAgents?.nodes || [];
-      },
-      result(result) {
-        if (result.error) {
-          this.$emit('error', { error: result.error });
-          return;
-        }
+        this.error = null;
 
-        const agents = result.data.organization.organizationWorkspacesClusterAgents.nodes.map(
-          (agent) => ({
-            name: agent.name,
-            url: joinPaths(window.gon.gitlab_url, agent.webPath),
-            group: agent.project?.group?.name || '',
-            project: agent.project?.name || '',
-            isConnected: Boolean(agent.connections?.nodes.length),
-            workspacesEnabled: Boolean(agent.workspacesAgentConfig?.enabled),
-            availability: this.mappedAgents.has(agent.id)
-              ? AVAILABILITY_OPTIONS.AVAILABLE
-              : AVAILABILITY_OPTIONS.BLOCKED,
-          }),
-        );
-
-        const { pageInfo } = result.data.organization.organizationWorkspacesClusterAgents;
+        const { pageInfo } = data.organization.organizationWorkspacesClusterAgents;
 
         this.hasNextPage = pageInfo.hasNextPage;
         this.hasPreviousPage = pageInfo.hasPreviousPage;
         this.beforeCursor = pageInfo.startCursor;
         this.afterCursor = pageInfo.endCursor;
 
-        this.$emit('result', { agents });
+        const agents = data.organization.organizationWorkspacesClusterAgents.nodes.map((agent) => ({
+          name: agent.name,
+          url: joinPaths(window.gon.gitlab_url, agent.webPath),
+          group: agent.project?.group?.name || '',
+          project: agent.project?.name || '',
+          isConnected: Boolean(agent.connections?.nodes.length),
+          workspacesEnabled: Boolean(agent.workspacesAgentConfig?.enabled),
+          availability: this.mappedAgents.has(agent.id)
+            ? AVAILABILITY_OPTIONS.AVAILABLE
+            : AVAILABILITY_OPTIONS.BLOCKED,
+        }));
+
+        return agents;
       },
     },
   },
   methods: {
     nextPage() {
-      this.$apollo.queries.getOrgAgents.refetch({
+      this.$apollo.queries.agents.refetch({
         organizationId: this.organizationId,
         before: null,
         after: this.afterCursor,
       });
     },
     prevPage() {
-      this.$apollo.queries.getOrgAgents.refetch({
+      this.$apollo.queries.agents.refetch({
         organizationId: this.organizationId,
         before: this.beforeCursor,
         after: null,
       });
     },
-  },
-  render() {
-    return this.$scopedSlots.default?.({
-      loading: this.$apollo.loading,
-      pagination: {
+    getPaginationData() {
+      if (this.error) return null;
+
+      return {
         show: this.hasNextPage || this.hasPreviousPage,
         hasPreviousPage: this.hasPreviousPage,
         hasNextPage: this.hasNextPage,
         nextPage: this.nextPage,
         prevPage: this.prevPage,
-      },
+      };
+    },
+  },
+  render() {
+    return this.$scopedSlots.default?.({
+      loading: this.$apollo.loading,
+      error: this.error,
+      agents: this.agents,
+      pagination: this.getPaginationData(),
     });
   },
 };
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index c3c438b4841d6e..c0338217d1a108 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -40,26 +40,7 @@ export default {
       default: false,
     },
   },
-  data() {
-    return {
-      hasQueryError: false,
-      agents: [],
-    };
-  },
-  computed: {
-    hasAgents() {
-      return this.agents?.length;
-    },
-  },
   methods: {
-    onQueryResult({ agents }) {
-      this.hasQueryError = false;
-
-      this.agents = agents;
-    },
-    onErrorResult() {
-      this.hasQueryError = true;
-    },
     getAvailabilityText(availability) {
       return AVAILABILITY_TEXT[availability] ?? null;
     },
@@ -108,18 +89,17 @@ export default {
       }}
     </template>
     <template #default>
-      <get-organization-workspaces-cluster-agents-query
-        :organization-id="organizationId"
-        @result="onQueryResult"
-        @error="onErrorResult"
-      >
-        <template #default="{ loading, pagination }">
+      <get-organization-workspaces-cluster-agents-query :organization-id="organizationId">
+        <template #default="{ loading, pagination, agents, error }">
           <div>
-            <gl-alert v-if="hasQueryError" variant="danger" :dismissible="false"
+            <gl-alert v-if="error" variant="danger" :dismissible="false"
               >{{ s__('Workspaces|Could not load agents. Refresh the page to try again.') }}
             </gl-alert>
             <gl-skeleton-loader v-else-if="loading" :lines="5" :width="600" />
-            <div v-else-if="!loading && !hasAgents" data-testid="agent-availability-empty-state">
+            <div
+              v-else-if="!loading && !agents.length"
+              data-testid="agent-availability-empty-state"
+            >
               {{ s__('Workspaces|No agents available') }}
             </div>
             <div v-else class="gl-flex gl-flex-col gl-items-center gl-gap-3">
@@ -136,13 +116,9 @@ export default {
                   </div>
                 </template>
                 <template #cell(name)="{ item }">
-                  <gl-link
-                    class="gl-font-bold"
-                    data-test-id="agent-name"
-                    :href="item.url"
-                    target="_blank"
-                    >{{ item.name }}</gl-link
-                  >
+                  <gl-link class="gl-font-bold" :href="item.url" target="_blank">{{
+                    item.name
+                  }}</gl-link>
                 </template>
                 <template #cell(status)="{ item }">
                   <gl-badge :variant="getStatusBadgeMetadata(item).variant">{{
diff --git a/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js b/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js
index 64f8886e850821..660c8b2d0aad24 100644
--- a/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query_spec.js
@@ -20,15 +20,20 @@ jest.mock('~/lib/logger');
 const MOCK_ORG_ID = 'gid://gitlab/Organizations::Organization/1';
 
 describe('workspaces/admin_settings/components/get_organization_workspaces_cluster_agents_query.vue', () => {
-  let mappedOrganizationClusterAgentsQueryHandler;
-  let organizationWorkspacesClusterAgentsQueryHandler;
+  const defaultSlotSpy = jest.fn();
+  const mappedOrganizationClusterAgentsQueryHandler = jest.fn();
+  const organizationWorkspacesClusterAgentsQueryHandler = jest.fn();
   let wrapper;
 
-  const buildWrapper = async ({ propsData = {}, scopedSlots = {} } = {}) => {
-    const apolloProvider = createMockApollo([
-      [mappedOrganizationClusterAgentsQuery, mappedOrganizationClusterAgentsQueryHandler],
-      [organizationWorkspacesClusterAgentsQuery, organizationWorkspacesClusterAgentsQueryHandler],
-    ]);
+  const buildWrapper = async ({ propsData = {} } = {}) => {
+    const apolloProvider = createMockApollo(
+      [
+        [mappedOrganizationClusterAgentsQuery, mappedOrganizationClusterAgentsQueryHandler],
+        [organizationWorkspacesClusterAgentsQuery, organizationWorkspacesClusterAgentsQueryHandler],
+      ],
+      {},
+      { typePolicies: { Query: { fields: { organization: { merge: false } } } } },
+    );
 
     wrapper = shallowMount(GetOrganizationWorkspacesClusterAgentsQuery, {
       apolloProvider,
@@ -37,11 +42,12 @@ describe('workspaces/admin_settings/components/get_organization_workspaces_clust
         ...propsData,
       },
       scopedSlots: {
-        ...scopedSlots,
+        default: defaultSlotSpy,
       },
     });
 
     await waitForPromises();
+    await nextTick();
   };
   const buildWrapperWithOrg = () => buildWrapper({ propsData: { organizationId: MOCK_ORG_ID } });
 
@@ -53,9 +59,10 @@ describe('workspaces/admin_settings/components/get_organization_workspaces_clust
   };
 
   beforeEach(() => {
-    mappedOrganizationClusterAgentsQueryHandler = jest.fn();
-    organizationWorkspacesClusterAgentsQueryHandler = jest.fn();
     logError.mockReset();
+    defaultSlotSpy.mockReset();
+    mappedOrganizationClusterAgentsQueryHandler.mockReset();
+    organizationWorkspacesClusterAgentsQueryHandler.mockReset();
   });
 
   describe('organizationMappedAgents query', () => {
@@ -75,26 +82,19 @@ describe('workspaces/admin_settings/components/get_organization_workspaces_clust
       });
     });
 
-    it('populates sets correct state when query is successful', async () => {
-      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
-
-      await buildWrapperWithOrg();
-      await nextTick();
-
-      expect(mappedOrganizationClusterAgentsQueryHandler).toHaveBeenCalledWith({
-        organizationId: MOCK_ORG_ID,
-      });
-    });
-
-    it('triggers error event when query is not successful', async () => {
+    it('returns error data to scoped slot on query error', async () => {
       const mockError = new Error('Some error');
       mappedOrganizationClusterAgentsQueryHandler.mockRejectedValueOnce(mockError);
 
       await buildWrapperWithOrg();
 
-      await nextTick();
-
-      expect(wrapper.emitted('error')).toEqual([[{ error: mockError }]]);
+      const scopedSlotCall = defaultSlotSpy.mock.lastCall[0];
+      expect(scopedSlotCall).toMatchObject({
+        loading: false,
+        pagination: null,
+        error: mockError,
+        agents: [],
+      });
     });
   });
 
@@ -124,174 +124,152 @@ describe('workspaces/admin_settings/components/get_organization_workspaces_clust
       });
     });
 
-    it('triggers error event when query is not successful', async () => {
-      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
-      const mockError = new Error('Some error');
-      organizationWorkspacesClusterAgentsQueryHandler.mockRejectedValueOnce(mockError);
-
-      await buildWrapperWithOrg();
-
-      await nextTick();
-
-      expect(wrapper.emitted('error')).toEqual([[{ error: mockError }]]);
-    });
-
-    it('triggers result event with correct payload when query is successful', async () => {
-      setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
-      setupOrganizationWorkspacesClusterAgentsQueryHandler(
-        ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT,
-      );
-      await buildWrapperWithOrg();
-
-      await nextTick();
-
-      const expectedAgentsResult = [
-        {
-          // gid://gitlab/Clusters::Agent/14
-          availability: 'available',
-          group: 'Gitlab Org',
-          isConnected: false,
-          name: 'midnightowlgarden',
-          project: 'gitlab-agent-configurations',
-          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/midnightowlgarden',
-          workspacesEnabled: true,
-        },
-        // gid://gitlab/Clusters::Agent/13
-        {
-          availability: 'blocked',
-          group: 'Gitlab Org',
-          isConnected: false,
-          name: 'coastalechovalley',
-          project: 'gitlab-agent-configurations',
-          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/coastalechovalley',
-          workspacesEnabled: true,
-        },
-        // gid://gitlab/Clusters::Agent/12
-        {
-          availability: 'available',
-          group: 'Gitlab Org',
-          isConnected: false,
-          name: 'wandingbreezetale',
-          project: 'gitlab-agent-configurations',
-          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/wandingbreezetale',
-          workspacesEnabled: false,
-        },
-        // gid://gitlab/Clusters::Agent/11
-        {
-          availability: 'blocked',
-          group: 'Gitlab Org',
-          isConnected: false,
-          name: 'crimsonmapleshadow',
-          project: 'gitlab-agent-configurations',
-          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/crimsonmapleshadow',
-          workspacesEnabled: false,
-        },
-        // gid://gitlab/Clusters::Agent/10
-        {
-          availability: 'available',
-          group: 'Gitlab Org',
-          isConnected: true,
-          name: 'meadowsageharbor',
-          project: 'gitlab-agent-configurations',
-          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/meadowsageharbor',
-          workspacesEnabled: true,
-        },
-        // gid://gitlab/Clusters::Agent/16
-        {
-          availability: 'blocked',
-          group: 'Gitlab Org',
-          isConnected: true,
-          name: 'silvermoonharbor',
-          project: 'gitlab-agent-configurations',
-          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/silvermoonharbor',
-          workspacesEnabled: true,
-        },
-        // gid://gitlab/Clusters::Agent/17
-        {
-          availability: 'available',
-          group: 'Gitlab Org',
-          isConnected: true,
-          name: 'silvermoonharbor',
-          project: 'gitlab-agent-configurations',
-          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/silvermoonharbor',
-          workspacesEnabled: false,
-        },
-        // gid://gitlab/Clusters::Agent/18
-        {
-          availability: 'blocked',
-          group: 'Gitlab Org',
-          isConnected: true,
-          name: 'oceanbreezecliff',
-          project: 'gitlab-agent-configurations',
-          url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/oceanbreezecliff',
-          workspacesEnabled: false,
-        },
-      ];
-
-      expect(wrapper.emitted('result')).toEqual([
-        [
-          {
-            agents: expectedAgentsResult,
-          },
-        ],
-      ]);
-    });
-
     describe('scoped slot', () => {
-      const defaultSlotSpy = jest.fn();
-
-      beforeEach(async () => {
-        defaultSlotSpy.mockClear();
+      it('triggers error event when query is not successful', async () => {
         setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
-        setupOrganizationWorkspacesClusterAgentsQueryHandler(
-          ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT,
-        );
-
-        await buildWrapper({
-          propsData: {
-            organizationId: MOCK_ORG_ID,
-          },
-          scopedSlots: {
-            default: defaultSlotSpy,
-          },
-        });
+        const mockError = new Error('Some error');
+        organizationWorkspacesClusterAgentsQueryHandler.mockRejectedValueOnce(mockError);
 
-        await nextTick();
-      });
+        await buildWrapperWithOrg();
 
-      it('renders correct data to scoped slot', () => {
         const scopedSlotCall = defaultSlotSpy.mock.lastCall[0];
-        const expectedPaginationData = {
-          show: true,
-          hasPreviousPage: false,
-          hasNextPage: true,
-          nextPage: wrapper.vm.nextPage,
-          prevPage: wrapper.vm.prevPage,
-        };
 
         expect(scopedSlotCall).toMatchObject({
           loading: false,
-          pagination: expectedPaginationData,
+          pagination: null,
+          error: mockError,
+          agents: [],
         });
       });
 
-      it.each`
-        methodName    | expectedVariables
-        ${'nextPage'} | ${{ organizationId: MOCK_ORG_ID, before: null, after: 'eyJpZCI6IjEwIn0' }}
-        ${'prevPage'} | ${{ organizationId: MOCK_ORG_ID, before: 'eyJpZCI6IjE0In0', after: null }}
-      `(
-        'refetches query with correct variables when $methodName is called',
-        async ({ methodName, expectedVariables }) => {
-          const scopedSlotCall = defaultSlotSpy.mock.lastCall[0];
+      describe('on query success', () => {
+        beforeEach(async () => {
+          setupMappedOrganizationClusterAgentsQueryHandler(ORGANIZATION_MAPPED_AGENTS_QUERY_RESULT);
+          setupOrganizationWorkspacesClusterAgentsQueryHandler(
+            ORGANIZATION_WORKSPACES_CLUSTER_AGENTS_QUERY_RESULT,
+          );
+          await buildWrapperWithOrg();
+        });
 
-          await scopedSlotCall.pagination[methodName]();
+        it('renders correct data to scoped slot', () => {
+          const scopedSlotCall = defaultSlotSpy.mock.lastCall[0];
+          const expectedPaginationData = {
+            show: true,
+            hasPreviousPage: false,
+            hasNextPage: true,
+            nextPage: wrapper.vm.nextPage,
+            prevPage: wrapper.vm.prevPage,
+          };
+
+          const expectedAgentsResult = [
+            {
+              // gid://gitlab/Clusters::Agent/14
+              availability: 'available',
+              group: 'Gitlab Org',
+              isConnected: false,
+              name: 'midnightowlgarden',
+              project: 'gitlab-agent-configurations',
+              url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/midnightowlgarden',
+              workspacesEnabled: true,
+            },
+            // gid://gitlab/Clusters::Agent/13
+            {
+              availability: 'blocked',
+              group: 'Gitlab Org',
+              isConnected: false,
+              name: 'coastalechovalley',
+              project: 'gitlab-agent-configurations',
+              url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/coastalechovalley',
+              workspacesEnabled: true,
+            },
+            // gid://gitlab/Clusters::Agent/12
+            {
+              availability: 'available',
+              group: 'Gitlab Org',
+              isConnected: false,
+              name: 'wandingbreezetale',
+              project: 'gitlab-agent-configurations',
+              url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/wandingbreezetale',
+              workspacesEnabled: false,
+            },
+            // gid://gitlab/Clusters::Agent/11
+            {
+              availability: 'blocked',
+              group: 'Gitlab Org',
+              isConnected: false,
+              name: 'crimsonmapleshadow',
+              project: 'gitlab-agent-configurations',
+              url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/crimsonmapleshadow',
+              workspacesEnabled: false,
+            },
+            // gid://gitlab/Clusters::Agent/10
+            {
+              availability: 'available',
+              group: 'Gitlab Org',
+              isConnected: true,
+              name: 'meadowsageharbor',
+              project: 'gitlab-agent-configurations',
+              url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/meadowsageharbor',
+              workspacesEnabled: true,
+            },
+            // gid://gitlab/Clusters::Agent/16
+            {
+              availability: 'blocked',
+              group: 'Gitlab Org',
+              isConnected: true,
+              name: 'silvermoonharbor',
+              project: 'gitlab-agent-configurations',
+              url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/silvermoonharbor',
+              workspacesEnabled: true,
+            },
+            // gid://gitlab/Clusters::Agent/17
+            {
+              availability: 'available',
+              group: 'Gitlab Org',
+              isConnected: true,
+              name: 'silvermoonharbor',
+              project: 'gitlab-agent-configurations',
+              url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/silvermoonharbor',
+              workspacesEnabled: false,
+            },
+            // gid://gitlab/Clusters::Agent/18
+            {
+              availability: 'blocked',
+              group: 'Gitlab Org',
+              isConnected: true,
+              name: 'oceanbreezecliff',
+              project: 'gitlab-agent-configurations',
+              url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/oceanbreezecliff',
+              workspacesEnabled: false,
+            },
+          ];
+
+          expect(scopedSlotCall).toMatchObject({
+            loading: false,
+            pagination: expectedPaginationData,
+            error: null,
+            agents: expectedAgentsResult,
+          });
+        });
 
-          expect(organizationWorkspacesClusterAgentsQueryHandler).toHaveBeenCalledTimes(2);
-          expect(organizationWorkspacesClusterAgentsQueryHandler).toHaveBeenLastCalledWith(
-            expectedVariables,
-          );
-        },
-      );
+        it.each`
+          methodName    | expectedVariables
+          ${'nextPage'} | ${{ organizationId: MOCK_ORG_ID, before: null, after: 'eyJpZCI6IjEwIn0' }}
+          ${'prevPage'} | ${{ organizationId: MOCK_ORG_ID, before: 'eyJpZCI6IjE0In0', after: null }}
+        `(
+          'refetches query with correct variables when $methodName is called',
+          async ({ methodName, expectedVariables }) => {
+            const scopedSlotCall = defaultSlotSpy.mock.lastCall[0];
+
+            await scopedSlotCall.pagination[methodName]();
+
+            expect(organizationWorkspacesClusterAgentsQueryHandler).toHaveBeenCalledTimes(2);
+            expect(organizationWorkspacesClusterAgentsQueryHandler).toHaveBeenLastCalledWith(
+              expectedVariables,
+            );
+          },
+        );
+      });
     });
   });
 });
diff --git a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
index 7680e237d97b9d..71b0446d652975 100644
--- a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
@@ -15,21 +15,19 @@ import { stubComponent } from 'helpers/stub_component';
 
 const MOCK_ORG_ID = 'gid://gitlab/Organizations::Organization/1';
 
-const createMockResult = (customAgent = {}) => {
-  return {
-    agents: [
-      {
-        availability: 'available',
-        group: 'Gitlab Org',
-        isConnected: false,
-        name: 'midnightowlgarden',
-        project: 'gitlab-agent-configurations',
-        url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/midnightowlgarden',
-        workspacesEnabled: true,
-        ...customAgent,
-      },
-    ],
-  };
+const createMockAgents = (customAgent = {}) => {
+  return [
+    {
+      availability: 'available',
+      group: 'Gitlab Org',
+      isConnected: false,
+      name: 'midnightowlgarden',
+      project: 'gitlab-agent-configurations',
+      url: 'http://test.host/gitlab-org/gitlab-agent-configurations/-/cluster_agents/midnightowlgarden',
+      workspacesEnabled: true,
+      ...customAgent,
+    },
+  ];
 };
 
 const MOCK_PAGINATION_DATA = {
@@ -44,8 +42,6 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
   let wrapper;
 
   const buildWrapper = (organizationWorkspacesClusterAgentsQueryState = {}) => {
-    const { pagination = {}, ...restOfState } = organizationWorkspacesClusterAgentsQueryState;
-
     wrapper = mountExtended(WorkspacesAgentAvailabilityApp, {
       provide: {
         organizationId: MOCK_ORG_ID,
@@ -57,11 +53,10 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
             render() {
               return this.$scopedSlots.default?.({
                 loading: false,
-                pagination: {
-                  ...MOCK_PAGINATION_DATA,
-                  ...pagination,
-                },
-                ...restOfState,
+                agents: createMockAgents(),
+                error: null,
+                pagination: MOCK_PAGINATION_DATA,
+                ...organizationWorkspacesClusterAgentsQueryState,
               });
             },
           },
@@ -79,15 +74,10 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
   const findPagination = () => wrapper.findComponent(GlKeysetPagination);
   const findLoadingState = () => wrapper.findComponent(GlSkeletonLoader);
 
-  const triggerQueryResultEvent = (result = createMockResult()) => {
-    findGetOrganizationWorkspacesClusterAgentsQuery().vm.$emit('result', result);
-  };
-
   describe('default', () => {
     beforeEach(async () => {
       buildWrapper({
         loading: true,
-        pagination: undefined,
       });
       await nextTick();
     });
@@ -109,8 +99,7 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
 
   describe('when GetOrganizationWorkspacesClusterAgentsQuery component emits result event', () => {
     it('renders empty state if no agents are returned', async () => {
-      buildWrapper();
-      triggerQueryResultEvent({
+      buildWrapper({
         agents: [],
       });
 
@@ -124,9 +113,11 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
 
     describe('when an error is returned', () => {
       it('renders alert component', async () => {
-        buildWrapper();
+        buildWrapper({
+          agents: [],
+          error: new Error('Some error'),
+        });
 
-        findGetOrganizationWorkspacesClusterAgentsQuery().vm.$emit('error', new Error());
         await nextTick();
 
         const alertComponent = findAlert();
@@ -137,12 +128,11 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
     });
 
     describe('when agents are returned', () => {
-      const mockResult = createMockResult();
-
+      const mockResult = createMockAgents();
       beforeEach(async () => {
-        buildWrapper();
-
-        triggerQueryResultEvent(mockResult);
+        buildWrapper({
+          agents: mockResult,
+        });
         await nextTick();
       });
 
@@ -156,8 +146,9 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
 
       it('renders agent name with link to the agent page', () => {
         const nameElement = wrapper.findComponent(GlLink);
+
         expect(nameElement.exists()).toBe(true);
-        expect(nameElement.attributes('href')).toBe(mockResult.agents[0].url);
+        expect(nameElement.attributes('href')).toBe(mockResult[0].url);
       });
     });
   });
@@ -165,8 +156,9 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
   describe('status badges', () => {
     describe('connection status badge', () => {
       it('renders correct badge variant based for connected', async () => {
-        buildWrapper();
-        triggerQueryResultEvent(createMockResult({ isConnected: true }));
+        buildWrapper({
+          agents: createMockAgents({ isConnected: true }),
+        });
 
         await nextTick();
 
@@ -176,8 +168,9 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
       });
 
       it('renders correct badge variant based for not connected', async () => {
-        buildWrapper();
-        triggerQueryResultEvent(createMockResult({ isConnected: false }));
+        buildWrapper({
+          agents: createMockAgents({ isConnected: false }),
+        });
 
         await nextTick();
 
@@ -213,11 +206,11 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
 
         buildWrapper({
           pagination: {
+            ...MOCK_PAGINATION_DATA,
             nextPage: nextPageSpy,
             prevPage: prevPageSpy,
           },
         });
-        triggerQueryResultEvent();
         await nextTick();
       });
 
-- 
GitLab


From d192013d3ef7210e9dc915d690fcc822763b29c5 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Thu, 5 Jun 2025 14:03:01 +0900
Subject: [PATCH 9/9] Update filter to not use unmapped

---
 .../organization_workspaces_cluster_agents.query.graphql        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql
index b4a666587102ba..833c3892009e5a 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/graphql/queries/organization_workspaces_cluster_agents.query.graphql
@@ -6,7 +6,7 @@ query organizationWorkspacesClusterAgents(
   organization(id: $organizationId) {
     id
     organizationWorkspacesClusterAgents: workspacesClusterAgents(
-      filter: UNMAPPED
+      filter: DIRECTLY_MAPPED
       first: 5
       before: $before
       after: $after
-- 
GitLab