Change static docs links

Build docs url for the GitLab Agent page using page path helper

app/helpers/clusters_helper.rb

@@ -20,7 +20,11 @@ module ClustersHelper
     {
       default_branch_name: clusterable_project.default_branch,
       empty_state_image: image_path('illustrations/clusters_empty.svg'),
-      project_path: clusterable_project.full_path
+      project_path: clusterable_project.full_path,
+      agent_docs_url: help_page_path('user/clusters/agent/index'),
+      install_docs_url: help_page_path('administration/clusters/kas'),
+      get_started_docs_url: help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'),
+      integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent')
     }
   end
 

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

@@ -9,15 +9,15 @@ export default {
     GlSprintf,
     GlAlert,
   },
+  inject: [
+    'emptyStateImage',
+    'projectPath',
+    'agentDocsUrl',
+    'installDocsUrl',
+    'getStartedDocsUrl',
+    'integrationDocsUrl',
+  ],
   props: {
-    image: {
-      type: String,
-      required: true,
-    },
-    projectPath: {
-      type: String,
-      required: true,
-    },
     hasConfigurations: {
       type: Boolean,
       required: true,
@@ -33,7 +33,7 @@ export default {
 
 <template>
   <gl-empty-state
-    :svg-path="image"
+    :svg-path="emptyStateImage"
     :title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')"
     class="empty-state--agent"
   >
@@ -47,7 +47,7 @@ export default {
           "
         >
           <template #link="{ content }">
-            <gl-link href="https://docs.gitlab.com/ee/user/clusters/agent/" target="_blank">
+            <gl-link :href="agentDocsUrl" target="_blank" data-testid="agent-docs-link">
               {{ content }}
             </gl-link>
           </template>
@@ -63,10 +63,7 @@ export default {
           "
         >
           <template #link="{ content }">
-            <gl-link
-              href="https://docs.gitlab.com/ee/user/clusters/agent/#install-the-agent-server"
-              target="_blank"
-            >
+            <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
               {{ content }}
             </gl-link>
           </template>
@@ -89,7 +86,7 @@ export default {
           <gl-button
             category="primary"
             variant="info"
-            href="https://docs.gitlab.com/ee/user/clusters/agent/#define-a-configuration-repository"
+            :href="getStartedDocsUrl"
             target="_blank"
             class="gl-ml-0!"
           >
@@ -108,7 +105,7 @@ export default {
         data-testid="integration-primary-button"
         category="primary"
         variant="success"
-        href="https://docs.gitlab.com/ee/user/clusters/agent/#get-started-with-gitops-and-the-gitlab-agent"
+        :href="integrationDocsUrl"
         target="_blank"
       >
         {{ s__('ClusterAgents|Integrate with the GitLab Agent') }}

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

@@ -7,6 +7,7 @@ export default {
     GlLink,
     GlTable,
   },
+  inject: ['integrationDocsUrl'],
   props: {
     agents: {
       required: true,
@@ -33,10 +34,7 @@ export default {
 <template>
   <div>
     <div class="gl-display-block gl-text-right gl-my-3">
-      <gl-link
-        href="https://docs.gitlab.com/ee/user/clusters/agent/#get-started-with-gitops-and-the-gitlab-agent"
-        target="_blank"
-      >
+      <gl-link :href="integrationDocsUrl" target="_blank">
         {{ s__('ClusterAgents|Learn more about installing the GitLab Agent') }}
       </gl-link>
     </div>

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

@@ -29,20 +29,13 @@ export default {
     GlKeysetPagination,
     GlLoadingIcon,
   },
+  inject: ['projectPath'],
   props: {
-    emptyStateImage: {
-      required: true,
-      type: String,
-    },
     defaultBranchName: {
       default: '.noBranch',
       required: false,
       type: String,
     },
-    projectPath: {
-      required: true,
-      type: String,
-    },
   },
   data() {
     return {
@@ -124,12 +117,7 @@ export default {
       </div>
     </div>
 
-    <AgentEmptyState
-      v-else
-      :image="emptyStateImage"
-      :project-path="projectPath"
-      :has-configurations="hasConfigurations"
-    />
+    <AgentEmptyState v-else :has-configurations="hasConfigurations" />
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">

ee/app/assets/javascripts/clusters_list/load_agents.js

@@ -10,17 +10,31 @@ export default (Vue, VueApollo) => {
 
   const defaultClient = createDefaultClient();
 
-  const { emptyStateImage, defaultBranchName, projectPath } = el.dataset;
+  const {
+    emptyStateImage,
+    defaultBranchName,
+    projectPath,
+    agentDocsUrl,
+    installDocsUrl,
+    getStartedDocsUrl,
+    integrationDocsUrl,
+  } = el.dataset;
 
   return new Vue({
     el,
     apolloProvider: new VueApollo({ defaultClient }),
+    provide: {
+      emptyStateImage,
+      projectPath,
+      agentDocsUrl,
+      installDocsUrl,
+      getStartedDocsUrl,
+      integrationDocsUrl,
+    },
     render(createElement) {
       return createElement(Agents, {
         props: {
-          emptyStateImage,
           defaultBranchName,
-          projectPath,
         },
       });
     },

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

@@ -2,22 +2,38 @@ import { GlAlert, GlEmptyState, GlSprintf } from '@gitlab/ui';
 import AgentEmptyState from 'ee/clusters_list/components/agent_empty_state.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
+const emptyStateImage = '/path/to/image';
+const projectPath = 'path/to/project';
+const agentDocsUrl = 'path/to/agentDocs';
+const installDocsUrl = 'path/to/installDocs';
+const getStartedDocsUrl = 'path/to/getStartedDocs';
+const integrationDocsUrl = 'path/to/integrationDocs';
+
 describe('AgentEmptyStateComponent', () => {
   let wrapper;
 
   const propsData = {
-    image: '/image/path',
-    projectPath: 'path/to/project',
     hasConfigurations: false,
   };
+  const provideData = {
+    emptyStateImage,
+    projectPath,
+    agentDocsUrl,
+    installDocsUrl,
+    getStartedDocsUrl,
+    integrationDocsUrl,
+  };
 
   const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
+  const findAgentDocsLink = () => wrapper.findByTestId('agent-docs-link');
+  const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
   const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
 
   beforeEach(() => {
     wrapper = shallowMountExtended(AgentEmptyState, {
       propsData,
+      provide: provideData,
       stubs: { GlEmptyState, GlSprintf },
     });
   });
@@ -29,6 +45,11 @@ describe('AgentEmptyStateComponent', () => {
     }
   });
 
+  it('renders correct href attributes for the links', () => {
+    expect(findAgentDocsLink().attributes('href')).toBe(agentDocsUrl);
+    expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl);
+  });
+
   describe('when there are no agent configurations in repository', () => {
     it('should render notification message box', () => {
       expect(findConfigurationsAlert().exists()).toBe(true);
@@ -44,6 +65,7 @@ describe('AgentEmptyStateComponent', () => {
       propsData.hasConfigurations = true;
       wrapper = shallowMountExtended(AgentEmptyState, {
         propsData,
+        provide: provideData,
       });
     });
     it('should render content without notification message box', () => {
@@ -51,5 +73,9 @@ describe('AgentEmptyStateComponent', () => {
       expect(findConfigurationsAlert().exists()).toBe(false);
       expect(findIntegrationButton().attributes('disabled')).toBeUndefined();
     });
+
+    it('should render correct href for the integration button', () => {
+      expect(findIntegrationButton().attributes('href')).toBe(integrationDocsUrl);
+    });
   });
 });

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

@@ -17,12 +17,13 @@ const propsData = {
     },
   ],
 };
+const provideData = { integrationDocsUrl: 'path/to/integrationDocs' };
 
 describe('AgentTable', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(AgentTable, { propsData });
+    wrapper = mount(AgentTable, { propsData, provide: provideData });
   });
 
   afterEach(() => {
@@ -32,8 +33,9 @@ describe('AgentTable', () => {
     }
   });
 
-  it('displays header link', () => {
+  it('displays header link with the correct href', () => {
     expect(wrapper.find(GlLink).text()).toBe('Learn more about installing the GitLab Agent');
+    expect(wrapper.find(GlLink).attributes('href')).toBe('path/to/integrationDocs');
   });
 
   describe('agent table', () => {

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

@@ -14,12 +14,14 @@ describe('Agents', () => {
   let wrapper;
 
   const propsData = {
-    emptyStateImage: '/path/to/image',
     defaultBranchName: 'default',
+  };
+  const provideData = {
     projectPath: 'path/to/project',
   };
 
   const createWrapper = ({ agents = [], pageInfo = null, trees = [] }) => {
+    const provide = provideData;
     const apolloQueryResponse = {
       data: {
         project: {
@@ -30,13 +32,14 @@ describe('Agents', () => {
     };
 
     const apolloProvider = createMockApollo([
-      [getAgentsQuery, jest.fn().mockResolvedValue(apolloQueryResponse)],
+      [getAgentsQuery, jest.fn().mockResolvedValue(apolloQueryResponse, provide)],
     ]);
 
     wrapper = shallowMount(Agents, {
       localVue,
       apolloProvider,
       propsData,
+      provide: provideData,
     });
 
     return wrapper.vm.$nextTick();
@@ -138,10 +141,6 @@ describe('Agents', () => {
       expect(findAgentTable().exists()).toBe(false);
       expect(findEmptyState().exists()).toBe(true);
     });
-
-    it('should pass the correct project path to empty state component', () => {
-      expect(findEmptyState().props('projectPath')).toEqual('path/to/project');
-    });
   });
 
   describe('when the agent configurations are present', () => {
@@ -184,7 +183,7 @@ describe('Agents', () => {
     };
 
     beforeEach(() => {
-      wrapper = shallowMount(Agents, { mocks, propsData });
+      wrapper = shallowMount(Agents, { mocks, propsData, provide: provideData });
 
       return wrapper.vm.$nextTick();
     });

spec/helpers/clusters_helper_spec.rb

@@ -75,6 +75,13 @@ RSpec.describe ClustersHelper do
     it 'displays project path' do
       expect(subject[:project_path]).to eq(project.full_path)
     end
+
+    it 'generates docs urls' do
+      expect(subject[:agent_docs_url]).to eq(help_page_path('user/clusters/agent/index'))
+      expect(subject[:install_docs_url]).to eq(help_page_path('administration/clusters/kas'))
+      expect(subject[:get_started_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'))
+      expect(subject[:integration_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'))
+    end
   end
 
   describe '#js_clusters_list_data' do