1 files changed, 40 insertions, 12 deletions

diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index 5f192fe4d5a..6eb2e85ecea 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -13,8 +13,10 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import { generateAgentRegistrationCommand } from '../clusters_util';
 import { INSTALL_AGENT_MODAL_ID, I18N_INSTALL_AGENT_MODAL } from '../constants';
+import { addAgentToStore } from '../graphql/cache_update';
 import createAgent from '../graphql/mutations/create_agent.mutation.graphql';
 import createAgentToken from '../graphql/mutations/create_agent_token.mutation.graphql';
+import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AvailableAgentsDropdown from './available_agents_dropdown.vue';
 
 export default {
@@ -33,12 +35,24 @@ export default {
     GlSprintf,
   },
   inject: ['projectPath', 'kasAddress'],
+  props: {
+    defaultBranchName: {
+      default: '.noBranch',
+      required: false,
+      type: String,
+    },
+    maxAgents: {
+      required: true,
+      type: Number,
+    },
+  },
   data() {
     return {
       registering: false,
       agentName: null,
       agentToken: null,
       error: null,
+      clusterAgent: null,
     };
   },
   computed: {
@@ -55,27 +69,31 @@ export default {
       return generateAgentRegistrationCommand(this.agentToken, this.kasAddress);
     },
     basicInstallPath() {
-      return helpPagePath('user/clusters/agent/index', {
+      return helpPagePath('user/clusters/agent/install/index', {
         anchor: 'install-the-agent-into-the-cluster',
       });
     },
     advancedInstallPath() {
-      return helpPagePath('user/clusters/agent/index', { anchor: 'advanced-installation' });
+      return helpPagePath('user/clusters/agent/install/index', { anchor: 'advanced-installation' });
+    },
+    getAgentsQueryVariables() {
+      return {
+        defaultBranchName: this.defaultBranchName,
+        first: this.maxAgents,
+        last: null,
+        projectPath: this.projectPath,
+      };
     },
   },
   methods: {
     setAgentName(name) {
       this.agentName = name;
     },
-    cancelClicked() {
-      this.$refs.modal.hide();
-    },
-    doneClicked() {
-      this.$emit('agentRegistered');
+    closeModal() {
       this.$refs.modal.hide();
     },
     resetModal() {
-      this.registering = null;
+      this.registering = false;
       this.agentName = null;
       this.agentToken = null;
       this.error = null;
@@ -90,6 +108,14 @@ export default {
               projectPath: this.projectPath,
             },
           },
+          update: (store, { data: { createClusterAgent } }) => {
+            addAgentToStore(
+              store,
+              createClusterAgent,
+              getAgentsQuery,
+              this.getAgentsQueryVariables,
+            );
+          },
         })
         .then(({ data: { createClusterAgent } }) => createClusterAgent);
     },
@@ -117,6 +143,8 @@ export default {
           throw new Error(agentErrors[0]);
         }
 
+        this.clusterAgent = clusterAgent;
+
         const { errors: tokenErrors, secret } = await this.createAgentTokenMutation(
           clusterAgent.id,
         );
@@ -240,10 +268,10 @@ export default {
     </template>
 
     <template #modal-footer>
-      <gl-button v-if="canCancel" @click="cancelClicked">{{ $options.i18n.cancel }} </gl-button>
+      <gl-button v-if="canCancel" @click="closeModal">{{ $options.i18n.cancel }} </gl-button>
 
-      <gl-button v-if="registered" variant="confirm" category="primary" @click="doneClicked"
-        >{{ $options.i18n.done }}
+      <gl-button v-if="registered" variant="confirm" category="primary" @click="closeModal"
+        >{{ $options.i18n.close }}
       </gl-button>
 
       <gl-button
@@ -252,7 +280,7 @@ export default {
         variant="confirm"
         category="primary"
         @click="registerAgent"
-        >{{ $options.i18n.next }}
+        >{{ $options.i18n.registerAgentButton }}
       </gl-button>
     </template>
   </gl-modal>