Added alert error message to Agent List view

Error message displays when agent list vue fails to load
Updated associated tests and translations

ee/app/assets/javascripts/clusters_list/components/agents.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import AgentEmptyState from './agent_empty_state.vue';
 import AgentTable from './agent_table.vue';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
@@ -15,23 +15,17 @@ export default {
         };
       },
       update: data => {
-        let agentList = data.project.clusterAgents.nodes;
-        const configFolders = data.project.repository.tree?.trees?.nodes;
-
-        if (configFolders) {
-          agentList = agentList.map(agent => {
-            const configFolder = configFolders.find(({ name }) => name === agent.name);
-            return { ...agent, configFolder };
-          });
-        }
-
-        return agentList;
+        return {
+          list: data?.project?.clusterAgents?.nodes,
+          folders: data?.project?.repository?.tree?.trees?.nodes,
+        };
       },
     },
   },
   components: {
     AgentEmptyState,
     AgentTable,
+    GlAlert,
     GlLoadingIcon,
   },
   props: {
@@ -49,15 +43,37 @@ export default {
       type: String,
     },
   },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.agents.loading;
+    },
+    agentList() {
+      let list = this.agents?.list;
+      const configFolders = this.agents?.folders;
+
+      if (list && configFolders) {
+        list = list.map(agent => {
+          const configFolder = configFolders.find(({ name }) => name === agent.name);
+          return { ...agent, configFolder };
+        });
+      }
+
+      return list;
+    },
+  },
 };
 </script>
 
 <template>
-  <section v-if="agents" class="gl-mt-3">
-    <AgentTable v-if="agents.length" :agents="agents" />
+  <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" />
+
+  <section v-else-if="agentList" class="gl-mt-3">
+    <AgentTable v-if="agentList.length" :agents="agentList" />
 
     <AgentEmptyState v-else :image="emptyStateImage" />
   </section>
 
-  <gl-loading-icon v-else size="md" class="gl-mt-3" />
+  <gl-alert v-else variant="danger" :dismissible="false">
+    {{ s__('ClusterAgents|An error occurred while loading your GitLab Agents') }}
+  </gl-alert>
 </template>

ee/changelogs/unreleased/259676-agent-error-message.yml

+---
+title: Add error message to cluster agent list
+merge_request: 44050
+author:
+type: changed

ee/spec/frontend/clusters_list/components/agents_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import VueApollo from 'vue-apollo';
 import Agents from 'ee/clusters_list/components/agents.vue';
@@ -12,6 +13,12 @@ localVue.use(VueApollo);
 describe('Agents', () => {
   let wrapper;
 
+  const propsData = {
+    emptyStateImage: '/path/to/image',
+    defaultBranchName: 'default',
+    projectPath: 'path/to/project',
+  };
+
   const createWrapper = ({ agents }) => {
     const apolloQueryResponse = {
       data: {
@@ -29,11 +36,7 @@ describe('Agents', () => {
     wrapper = shallowMount(Agents, {
       localVue,
       apolloProvider,
-      propsData: {
-        emptyStateImage: '/path/to/image',
-        defaultBranchName: 'default',
-        projectPath: 'path/to/project',
-      },
+      propsData,
     });
 
     return wrapper.vm.$nextTick();
@@ -78,4 +81,36 @@ describe('Agents', () => {
       expect(wrapper.find(AgentEmptyState).exists()).toBe(true);
     });
   });
+
+  describe('when agents query has errored', () => {
+    beforeEach(() => {
+      return createWrapper({ agents: null });
+    });
+
+    it('displays an alert message', () => {
+      expect(wrapper.find(GlAlert).exists()).toBe(true);
+    });
+  });
+
+  describe('when agents query is loading', () => {
+    const mocks = {
+      $apollo: {
+        queries: {
+          agents: {
+            loading: true,
+          },
+        },
+      },
+    };
+
+    beforeEach(() => {
+      wrapper = shallowMount(Agents, { mocks, propsData });
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('displays a loading icon', () => {
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    });
+  });
 });

locale/gitlab.pot

@@ -5498,6 +5498,9 @@ msgstr ""
 msgid "Cluster type must be specificed for Stages::ClusterEndpointInserter"
 msgstr ""
 
+msgid "ClusterAgents|An error occurred while loading your GitLab Agents"
+msgstr ""
+
 msgid "ClusterAgents|Configuration"
 msgstr ""