Link cluster agent index to show page

Update GraphQl to include cluster path.
Add link in vue so users can navigate to cluster show page.
Update associated tests.

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

@@ -45,6 +45,12 @@ export default {
     </div>
 
     <gl-table :items="agents" :fields="fields" stacked="md" data-testid="cluster-agent-list-table">
+      <template #cell(name)="{ item }">
+        <gl-link :href="item.webPath">
+          {{ item.name }}
+        </gl-link>
+      </template>
+
       <template #cell(configuration)="{ item }">
         <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
         <gl-link v-if="item.configFolder" :href="item.configFolder.webPath">

ee/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql

@@ -15,6 +15,7 @@ query getAgents(
       nodes {
         id
         name
+        webPath
       }
 
       pageInfo {

ee/changelogs/unreleased/298748-agent-webpath.yml

+---
+title: Link cluster index page to cluster show page
+merge_request: 55536
+author:
+type: changed

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

@@ -9,9 +9,11 @@ const propsData = {
       configFolder: {
         webPath: '/agent/full/path',
       },
+      webPath: '/agent-1',
     },
     {
       name: 'agent-2',
+      webPath: '/agent-2',
     },
   ],
 };
@@ -36,16 +38,17 @@ describe('AgentTable', () => {
 
   describe('agent table', () => {
     it.each`
-      agentName    | lineNumber
-      ${'agent-1'} | ${0}
-      ${'agent-2'} | ${1}
-    `('displays agent name', ({ agentName, lineNumber }) => {
+      agentName    | link          | lineNumber
+      ${'agent-1'} | ${'/agent-1'} | ${0}
+      ${'agent-2'} | ${'/agent-2'} | ${1}
+    `('displays agent link', ({ agentName, link, lineNumber }) => {
       const agents = wrapper.findAll(
         '[data-testid="cluster-agent-list-table"] tbody tr > td:first-child',
       );
-      const agent = agents.at(lineNumber);
+      const agent = agents.at(lineNumber).find(GlLink);
 
       expect(agent.text()).toBe(agentName);
+      expect(agent.attributes('href')).toBe(link);
     });
 
     it.each`

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

@@ -58,10 +58,12 @@ describe('Agents', () => {
       {
         id: '1',
         name: 'agent-1',
+        webPath: '/agent-1',
       },
       {
         id: '2',
         name: 'agent-2',
+        webPath: '/agent-2',
       },
     ];
 
@@ -84,7 +86,7 @@ describe('Agents', () => {
 
     it('should pass agent and folder info to table component', () => {
       expect(findAgentTable().props('agents')).toEqual([
-        { id: '1', name: 'agent-1', configFolder: undefined },
+        { id: '1', name: 'agent-1', webPath: '/agent-1', configFolder: undefined },
         {
           id: '2',
           name: 'agent-2',
@@ -93,6 +95,7 @@ describe('Agents', () => {
             path: '.gitlab/agents/agent-2',
             webPath: '/project/path/.gitlab/agents/agent-2',
           },
+          webPath: '/agent-2',
         },
       ]);
     });