From f08eac26177a73ffa9770a1f9630c0ef79b9d388 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Thu, 12 Jun 2025 12:30:06 +0900
Subject: [PATCH 1/2] Update copy based on feedback

---
 .../components/availability_popover.vue       |  2 +-
 .../components/availability_toggle.vue        | 17 +++-----
 .../workspaces/admin_settings/pages/app.vue   | 40 ++++++++++++++-----
 .../components/availability_toggle_spec.js    | 22 +++++-----
 .../admin_settings/pages/app_spec.js          | 11 +----
 .../frontend/workspaces/mock_data/index.js    |  2 +-
 locale/gitlab.pot                             | 25 +++++++-----
 7 files changed, 62 insertions(+), 57 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
index 5b9b0a588d3a4e..06e0594c193b32 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
@@ -9,7 +9,7 @@ export default {
     GlPopover,
   },
   POPOVER_TEXT: s__(
-    "Workspaces|Blocking an agent doesn't delete it. Agents can only be deleted in the project where they were created. In addition, existing workspaces using a blocked agent will continue to run.",
+    'Workspaces|Blocked agents are not deleted and existing workspaces continue running. You can delete agents in their source project.',
   ),
 };
 </script>
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_toggle.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_toggle.vue
index 329e7a43d0c260..4b6b54fcba6ddf 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_toggle.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_toggle.vue
@@ -1,7 +1,8 @@
 <script>
 import { GlToggle } from '@gitlab/ui';
 import produce from 'immer';
-import { s__, __ } from '~/locale';
+import { s__ } from '~/locale';
+import { logError } from '~/lib/logger';
 
 import createClusterAgentMappingMutation from '../graphql/mutations/create_org_cluster_agent_mapping.mutation.graphql';
 import deleteClusterAgentMappingMutation from '../graphql/mutations/delete_org_cluster_agent_mapping.mutation.graphql';
@@ -73,8 +74,6 @@ export default {
         this.loading = true;
         this.errorMessage = '';
 
-        let hasMutationError = false;
-
         await this.$apollo.mutate({
           mutation,
           variables: {
@@ -90,21 +89,15 @@ export default {
               : data.organizationCreateClusterAgentMapping.errors;
 
             if (errors?.length) {
-              hasMutationError = true;
-              return;
+              throw new Error(`Error updating Workspaces agent availability: ${errors}`);
             }
 
             updateMappedAgentsStore(store, agentId, isMapped);
           },
         });
-
-        if (hasMutationError) {
-          this.errorMessage = isDeleting
-            ? s__('Workspaces|This agent is already blocked.')
-            : s__('Workspaces|This agent is already available.');
-        }
       } catch (e) {
-        this.errorMessage = __('Something went wrong. Please try again.');
+        logError(e);
+        this.errorMessage = s__('Workspaces|Unable to complete request. Please try again.');
       } finally {
         this.loading = false;
       }
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 64d87f416b3322..569891d4efdf88 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -5,10 +5,12 @@ import {
   GlSkeletonLoader,
   GlLink,
   GlAlert,
+  GlSprintf,
   GlKeysetPagination,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 import AvailabilityPopover from '../components/availability_popover.vue';
 import ClusterAgentAvailabilityToggle from '../components/availability_toggle.vue';
@@ -26,6 +28,7 @@ export default {
     GlSkeletonLoader,
     GlLink,
     GlAlert,
+    GlSprintf,
     GlKeysetPagination,
   },
   inject: {
@@ -38,6 +41,11 @@ export default {
       default: false,
     },
   },
+  computed: {
+    helpUrl() {
+      return helpPagePath('user/workspace/gitlab_agent_configuration');
+    },
+  },
   methods: {
     getStatusBadgeMetadata(item) {
       const { isConnected } = item;
@@ -73,15 +81,23 @@ export default {
 </script>
 <template>
   <settings-block
-    :title="s__('Workspaces|Workspaces Agent Availability')"
+    :title="s__('Workspaces|Available agents for workspaces')"
     :default-expanded="defaultExpanded"
   >
     <template #description>
-      {{
-        s__(
-          'Workspaces|Configure which Kubernetes agents are available for new workspaces. These settings do not affect existing workspaces.',
-        )
-      }}
+      <gl-sprintf
+        :message="
+          s__(
+            'Workspaces|Configure which Kubernetes agents are available for new workspaces. %{learnMore}',
+          )
+        "
+      >
+        <template #learnMore>
+          <gl-link :href="helpUrl" target="_blank">{{
+            s__('Workspaces|Learn more about agents.')
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
     </template>
     <template #default>
       <get-organization-workspaces-cluster-agents-query :organization-id="organizationId">
@@ -95,7 +111,7 @@ export default {
               v-else-if="!loading && !agents.length"
               data-testid="agent-availability-empty-state"
             >
-              {{ s__('Workspaces|No agents available') }}
+              {{ s__('Workspaces|No agents found.') }}
             </div>
             <div v-else class="gl-flex gl-flex-col gl-items-center gl-gap-3">
               <gl-table-lite
@@ -111,9 +127,13 @@ export default {
                   </div>
                 </template>
                 <template #cell(name)="{ item }">
-                  <gl-link class="gl-font-bold" :href="item.url" target="_blank">{{
-                    item.name
-                  }}</gl-link>
+                  <gl-link
+                    data-testid="agent-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/availability_toggle_spec.js b/ee/spec/frontend/workspaces/admin_settings/components/availability_toggle_spec.js
index fdfa414eac23a7..cccbee41e3dc34 100644
--- a/ee/spec/frontend/workspaces/admin_settings/components/availability_toggle_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/components/availability_toggle_spec.js
@@ -9,6 +9,7 @@ import deleteClusterAgentMappingMutation from 'ee/workspaces/admin_settings/grap
 import ClusterAgentAvailabilityToggle from 'ee/workspaces/admin_settings/components/availability_toggle.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { logError } from '~/lib/logger';
 
 import {
   DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT,
@@ -182,20 +183,14 @@ describe('workspaces/admin_settings/components/availability_toggle.vue', () => {
   });
 
   describe('on mutation error', () => {
-    beforeEach(() => {
-      setupApolloProvider(
-        CREATE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR,
-        DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR,
-      );
-    });
-
     it.each`
-      isMapped | expectedErrorMessage
-      ${true}  | ${'This agent is already blocked.'}
-      ${false} | ${'This agent is already available.'}
+      isMapped | createResult                                                   | deleteResult                                                   | expectedErrorLogged
+      ${true}  | ${CREATE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT}            | ${DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR} | ${new Error('Error updating Workspaces agent availability: Organization cluster agent mapping not found')}
+      ${false} | ${CREATE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR} | ${DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT}            | ${new Error('Error updating Workspaces agent availability: Cluster agent mapping already exists')}
     `(
-      'displays correct error message when mutation fails when agent is mapped: $isMapped',
-      async ({ isMapped, expectedErrorMessage }) => {
+      'handles error when mutation fails when an agent is mapped = $isMapped',
+      async ({ isMapped, createResult, deleteResult, expectedErrorLogged }) => {
+        setupApolloProvider(createResult, deleteResult);
         buildWrapper({
           isMapped,
         });
@@ -204,7 +199,8 @@ describe('workspaces/admin_settings/components/availability_toggle.vue', () => {
         await nextTick();
 
         expect(findToggle().props('disabled')).toBe(false);
-        expect(findErrorMessage().text()).toEqual(expectedErrorMessage);
+        expect(findErrorMessage().text()).toEqual('Unable to complete request. Please try again.');
+        expect(logError).toHaveBeenCalledWith(expectedErrorLogged);
       },
     );
   });
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 3d970cf9e9a097..e01ebb93972517 100644
--- a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
@@ -1,12 +1,5 @@
 import { nextTick } from 'vue';
-import {
-  GlTableLite,
-  GlBadge,
-  GlLink,
-  GlAlert,
-  GlKeysetPagination,
-  GlSkeletonLoader,
-} from '@gitlab/ui';
+import { GlTableLite, GlBadge, 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';
@@ -148,7 +141,7 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
       });
 
       it('renders agent name with link to the agent page', () => {
-        const nameElement = wrapper.findComponent(GlLink);
+        const nameElement = wrapper.find('[data-testid="agent-link"]');
 
         expect(nameElement.exists()).toBe(true);
         expect(nameElement.attributes('href')).toBe(mockResult[0].url);
diff --git a/ee/spec/frontend/workspaces/mock_data/index.js b/ee/spec/frontend/workspaces/mock_data/index.js
index 038bb58da21068..8857d14702f13f 100644
--- a/ee/spec/frontend/workspaces/mock_data/index.js
+++ b/ee/spec/frontend/workspaces/mock_data/index.js
@@ -935,7 +935,7 @@ export const DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT = {
 export const DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR = {
   data: {
     organizationDeleteClusterAgentMapping: {
-      errors: ['Cluster agent mapping already exists'],
+      errors: ['Organization cluster agent mapping not found'],
     },
   },
 };
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3a5f9cd0a7f279..2a95acaaf22d25 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -70763,6 +70763,9 @@ msgstr ""
 msgid "Workspaces|Available"
 msgstr ""
 
+msgid "Workspaces|Available agents for workspaces"
+msgstr ""
+
 msgid "Workspaces|Block agent"
 msgstr ""
 
@@ -70772,10 +70775,10 @@ msgstr ""
 msgid "Workspaces|Blocked"
 msgstr ""
 
-msgid "Workspaces|Blocking an agent doesn't delete it. Agents can only be deleted in the project where they were created."
+msgid "Workspaces|Blocked agents are not deleted and existing workspaces continue running. You can delete agents in their source project."
 msgstr ""
 
-msgid "Workspaces|Blocking an agent doesn't delete it. Agents can only be deleted in the project where they were created. In addition, existing workspaces using a blocked agent will continue to run."
+msgid "Workspaces|Blocking an agent doesn't delete it. Agents can only be deleted in the project where they were created."
 msgstr ""
 
 msgid "Workspaces|Cancel"
@@ -70784,7 +70787,7 @@ msgstr ""
 msgid "Workspaces|Cluster agent"
 msgstr ""
 
-msgid "Workspaces|Configure which Kubernetes agents are available for new workspaces. These settings do not affect existing workspaces."
+msgid "Workspaces|Configure which Kubernetes agents are available for new workspaces. %{learnMore}"
 msgstr ""
 
 msgid "Workspaces|Connected"
@@ -70868,6 +70871,9 @@ msgstr ""
 msgid "Workspaces|Instant development environments"
 msgstr ""
 
+msgid "Workspaces|Learn more about agents."
+msgstr ""
+
 msgid "Workspaces|Learn more."
 msgstr ""
 
@@ -70880,10 +70886,10 @@ msgstr ""
 msgid "Workspaces|No active workspaces"
 msgstr ""
 
-msgid "Workspaces|No agents available"
+msgid "Workspaces|No agents available to create workspaces. Please consult %{linkStart}Workspaces documentation%{linkEnd} for troubleshooting."
 msgstr ""
 
-msgid "Workspaces|No agents available to create workspaces. Please consult %{linkStart}Workspaces documentation%{linkEnd} for troubleshooting."
+msgid "Workspaces|No agents found."
 msgstr ""
 
 msgid "Workspaces|No terminated workspaces"
@@ -70949,9 +70955,6 @@ msgstr ""
 msgid "Workspaces|This agent is already allowed."
 msgstr ""
 
-msgid "Workspaces|This agent is already available."
-msgstr ""
-
 msgid "Workspaces|This agent is already blocked."
 msgstr ""
 
@@ -70964,6 +70967,9 @@ msgstr ""
 msgid "Workspaces|To create a workspace, add a devfile to this project. A devfile is a configuration file for your workspace."
 msgstr ""
 
+msgid "Workspaces|Unable to complete request. Please try again."
+msgstr ""
+
 msgid "Workspaces|Unable to complete this action"
 msgstr ""
 
@@ -70988,9 +70994,6 @@ msgstr ""
 msgid "Workspaces|Workspaces"
 msgstr ""
 
-msgid "Workspaces|Workspaces Agent Availability"
-msgstr ""
-
 msgid "Workspaces|Workspaces Settings"
 msgstr ""
 
-- 
GitLab


From b56b8f0a21487a3bbd40032022cd6b105df0758e Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Thu, 12 Jun 2025 20:38:48 +0900
Subject: [PATCH 2/2] Apply MR feedback

---
 .../components/availability_toggle.vue              |  4 ++--
 .../components/availability_toggle_spec.js          | 13 ++++++++-----
 .../workspaces/admin_settings/pages/app_spec.js     |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_toggle.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_toggle.vue
index 4b6b54fcba6ddf..398f8b318532cc 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_toggle.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_toggle.vue
@@ -89,14 +89,14 @@ export default {
               : data.organizationCreateClusterAgentMapping.errors;
 
             if (errors?.length) {
-              throw new Error(`Error updating Workspaces agent availability: ${errors}`);
+              throw new Error(errors);
             }
 
             updateMappedAgentsStore(store, agentId, isMapped);
           },
         });
       } catch (e) {
-        logError(e);
+        logError(`Error updating Workspaces agent availability`, e.message);
         this.errorMessage = s__('Workspaces|Unable to complete request. Please try again.');
       } finally {
         this.loading = false;
diff --git a/ee/spec/frontend/workspaces/admin_settings/components/availability_toggle_spec.js b/ee/spec/frontend/workspaces/admin_settings/components/availability_toggle_spec.js
index cccbee41e3dc34..af9815d3988075 100644
--- a/ee/spec/frontend/workspaces/admin_settings/components/availability_toggle_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/components/availability_toggle_spec.js
@@ -184,12 +184,12 @@ describe('workspaces/admin_settings/components/availability_toggle.vue', () => {
 
   describe('on mutation error', () => {
     it.each`
-      isMapped | createResult                                                   | deleteResult                                                   | expectedErrorLogged
-      ${true}  | ${CREATE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT}            | ${DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR} | ${new Error('Error updating Workspaces agent availability: Organization cluster agent mapping not found')}
-      ${false} | ${CREATE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR} | ${DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT}            | ${new Error('Error updating Workspaces agent availability: Cluster agent mapping already exists')}
+      isMapped | createResult                                                   | deleteResult                                                   | expectedErrorMessage
+      ${true}  | ${CREATE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT}            | ${DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR} | ${DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR.data.organizationDeleteClusterAgentMapping.errors[0]}
+      ${false} | ${CREATE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR} | ${DELETE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT}            | ${CREATE_ORG_CLUSTER_AGENT_MAPPING_MUTATION_RESULT_WITH_ERROR.data.organizationCreateClusterAgentMapping.errors[0]}
     `(
       'handles error when mutation fails when an agent is mapped = $isMapped',
-      async ({ isMapped, createResult, deleteResult, expectedErrorLogged }) => {
+      async ({ isMapped, createResult, deleteResult, expectedErrorMessage }) => {
         setupApolloProvider(createResult, deleteResult);
         buildWrapper({
           isMapped,
@@ -200,7 +200,10 @@ describe('workspaces/admin_settings/components/availability_toggle.vue', () => {
 
         expect(findToggle().props('disabled')).toBe(false);
         expect(findErrorMessage().text()).toEqual('Unable to complete request. Please try again.');
-        expect(logError).toHaveBeenCalledWith(expectedErrorLogged);
+        expect(logError).toHaveBeenCalledWith(
+          'Error updating Workspaces agent availability',
+          expectedErrorMessage,
+        );
       },
     );
   });
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 e01ebb93972517..7441798077bafd 100644
--- a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
+++ b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
@@ -141,7 +141,7 @@ describe('workspaces/admin_settings/pages/app.vue', () => {
       });
 
       it('renders agent name with link to the agent page', () => {
-        const nameElement = wrapper.find('[data-testid="agent-link"]');
+        const nameElement = wrapper.findByTestId('agent-link');
 
         expect(nameElement.exists()).toBe(true);
         expect(nameElement.attributes('href')).toBe(mockResult[0].url);
-- 
GitLab