Enable agent registration UI

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/63718

Changelog: added
EE: true

app/helpers/clusters_helper.rb

@@ -24,7 +24,8 @@ module ClustersHelper
       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')
+      integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'),
+      kas_address: Gitlab::Kas.external_url
     }
   end
 

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

 <script>
-import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
+import { INSTALL_AGENT_MODAL_ID } from '../constants';
 
 export default {
+  modalId: INSTALL_AGENT_MODAL_ID,
   components: {
     GlButton,
     GlEmptyState,
@@ -9,6 +11,9 @@ export default {
     GlSprintf,
     GlAlert,
   },
+  directives: {
+    GlModalDirective,
+  },
   inject: [
     'emptyStateImage',
     'projectPath',
@@ -101,12 +106,11 @@ export default {
 
     <template #actions>
       <gl-button
+        v-gl-modal-directive="$options.modalId"
         :disabled="!hasConfigurations"
         data-testid="integration-primary-button"
         category="primary"
         variant="success"
-        :href="integrationDocsUrl"
-        target="_blank"
       >
         {{ s__('ClusterAgents|Integrate with the GitLab Agent') }}
       </gl-button>

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

 <script>
-import { GlLink, GlTable } from '@gitlab/ui';
+import { GlButton, GlLink, GlModalDirective, GlTable } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { INSTALL_AGENT_MODAL_ID } from '../constants';
 
 export default {
+  modalId: INSTALL_AGENT_MODAL_ID,
   components: {
+    GlButton,
     GlLink,
     GlTable,
   },
+  directives: {
+    GlModalDirective,
+  },
   inject: ['integrationDocsUrl'],
   props: {
     agents: {
@@ -34,9 +40,9 @@ export default {
 <template>
   <div>
     <div class="gl-display-block gl-text-right gl-my-3">
-      <gl-link :href="integrationDocsUrl" target="_blank">
-        {{ s__('ClusterAgents|Learn more about installing the GitLab Agent') }}
-      </gl-link>
+      <gl-button v-gl-modal-directive="$options.modalId" variant="success" category="primary"
+        >{{ s__('ClusterAgents|Install a new GitLab Agent') }}
+      </gl-button>
     </div>
 
     <gl-table :items="agents" :fields="fields" stacked="md" data-testid="cluster-agent-list-table">

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

@@ -4,6 +4,7 @@ import { MAX_LIST_COUNT } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AgentEmptyState from './agent_empty_state.vue';
 import AgentTable from './agent_table.vue';
+import InstallAgentModal from './install_agent_modal.vue';
 
 export default {
   apollo: {
@@ -25,6 +26,7 @@ export default {
   components: {
     AgentEmptyState,
     AgentTable,
+    InstallAgentModal,
     GlAlert,
     GlKeysetPagination,
     GlLoadingIcon,
@@ -76,6 +78,9 @@ export default {
     },
   },
   methods: {
+    reloadAgents() {
+      this.$apollo.queries.agents.refetch();
+    },
     nextPage() {
       this.cursor = {
         first: MAX_LIST_COUNT,
@@ -118,6 +123,7 @@ export default {
     </div>
 
     <AgentEmptyState v-else :has-configurations="hasConfigurations" />
+    <InstallAgentModal @agentRegistered="reloadAgents" />
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">

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

@@ -18,6 +18,7 @@ export default (Vue, VueApollo) => {
     installDocsUrl,
     getStartedDocsUrl,
     integrationDocsUrl,
+    kasAddress,
   } = el.dataset;
 
   return new Vue({
@@ -30,6 +31,7 @@ export default (Vue, VueApollo) => {
       installDocsUrl,
       getStartedDocsUrl,
       integrationDocsUrl,
+      kasAddress,
     },
     render(createElement) {
       return createElement(Agents, {

ee/spec/features/clusters/create_agent_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Cluster agent registration', :js do
+  let_it_be(:project) { create(:project, :custom_repo, files: { '.gitlab/agents/example-agent-1/config.yaml' => '' }) }
+  let_it_be(:current_user) { create(:user, maintainer_projects: [project]) }
+
+  before do
+    stub_licensed_features(cluster_agents: true)
+
+    allow(Gitlab::Kas).to receive(:enabled?).and_return(true)
+    allow(Gitlab::Kas).to receive(:internal_url).and_return('kas.example.internal')
+
+    allow_next_instance_of(Gitlab::Kas::Client) do |client|
+      allow(client).to receive(:list_agent_config_files).and_return([
+        double(agent_name: 'example-agent-1', path: '.gitlab/agents/example-agent-1/config.yaml'),
+        double(agent_name: 'example-agent-2', path: '.gitlab/agents/example-agent-2/config.yaml')
+      ])
+    end
+
+    allow(Devise).to receive(:friendly_token).and_return('example-agent-token')
+
+    sign_in(current_user)
+    visit project_clusters_path(project)
+  end
+
+  it 'allows the user to select an agent to install, and displays the resulting agent token' do
+    click_link('GitLab Agent managed clusters')
+
+    click_button('Integrate with the GitLab Agent')
+    expect(page).to have_content('Install new Agent')
+
+    click_button('Select an Agent')
+    click_button('example-agent-2')
+    click_button('Next')
+
+    expect(page).to have_content('The token value will not be shown again after you close this window.')
+    expect(page).to have_content('example-agent-token')
+    expect(page).to have_content('docker run --pull=always --rm')
+
+    click_button('Done')
+    expect(page).to have_link('example-agent-2')
+    expect(page).to have_no_content('Install new Agent')
+  end
+end

ee/spec/features/projects/cluster_agents_spec.rb

@@ -57,7 +57,7 @@ RSpec.describe 'ClusterAgents', :js do
       it 'displays empty state', :aggregate_failures do
         click_link 'GitLab Agent managed clusters'
 
-        expect(page).to have_link('Integrate with the GitLab Agent')
+        expect(page).to have_content('Integrate with the GitLab Agent')
         expect(page).to have_selector('.empty-state')
       end
     end

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

@@ -73,9 +73,5 @@ 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

-import { GlLink } from '@gitlab/ui';
+import { GlButton, GlLink } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import AgentTable from 'ee/clusters_list/components/agent_table.vue';
 
@@ -33,9 +33,8 @@ describe('AgentTable', () => {
     }
   });
 
-  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');
+  it('displays header button', () => {
+    expect(wrapper.find(GlButton).text()).toBe('Install a new GitLab Agent');
   });
 
   describe('agent table', () => {

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

@@ -18,6 +18,7 @@ describe('Agents', () => {
   };
   const provideData = {
     projectPath: 'path/to/project',
+    kasAddress: 'kas.example.com',
   };
 
   const createWrapper = ({ agents = [], pageInfo = null, trees = [] }) => {

locale/gitlab.pot

@@ -7165,6 +7165,9 @@ msgstr ""
 msgid "ClusterAgents|Go to the repository"
 msgstr ""
 
+msgid "ClusterAgents|Install a new GitLab Agent"
+msgstr ""
+
 msgid "ClusterAgents|Install new Agent"
 msgstr ""
 
@@ -7180,9 +7183,6 @@ msgstr ""
 msgid "ClusterAgents|Learn how to create an agent access token"
 msgstr ""
 
-msgid "ClusterAgents|Learn more about installing the GitLab Agent"
-msgstr ""
-
 msgid "ClusterAgents|Name"
 msgstr ""
 

spec/helpers/clusters_helper_spec.rb

@@ -82,6 +82,10 @@ RSpec.describe ClustersHelper do
       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
+
+    it 'displays kas address' do
+      expect(subject[:kas_address]).to eq(Gitlab::Kas.external_url)
+    end
   end
 
   describe '#js_clusters_list_data' do