Fixed bug preventing agent creation from agent tab

The MR fixes the bug on not updating `maxAgents` property
when navigating through the clusters tabs,
which prevented agent creation and threw an error.

Changelog: fixed

app/assets/javascripts/clusters_list/components/clusters_main_view.vue

@@ -42,13 +42,19 @@ export default {
       maxAgents: MAX_CLUSTERS_LIST,
     };
   },
+  watch: {
+    selectedTabIndex(val) {
+      this.onTabChange(val);
+    },
+  },
   methods: {
-    onTabChange(tabName) {
+    setSelectedTab(tabName) {
       this.selectedTabIndex = CLUSTERS_TABS.findIndex((tab) => tab.queryParamValue === tabName);
-      this.maxAgents = tabName === AGENT ? MAX_LIST_COUNT : MAX_CLUSTERS_LIST;
     },
-    trackTabChange(tab) {
+    onTabChange(tab) {
       const tabName = CLUSTERS_TABS[tab].queryParamValue;
+
+      this.maxAgents = tabName === AGENT ? MAX_LIST_COUNT : MAX_CLUSTERS_LIST;
       this.track(EVENT_ACTIONS_CHANGE, { property: tabName });
     },
   },
@@ -61,7 +67,6 @@ export default {
       sync-active-tab-with-query-params
       nav-class="gl-flex-grow-1 gl-align-items-center"
       lazy
-      @input="trackTabChange"
     >
       <gl-tab
         v-for="(tab, idx) in $options.CLUSTERS_TABS"
@@ -74,7 +79,7 @@ export default {
           :is="tab.component"
           :default-branch-name="defaultBranchName"
           data-testid="clusters-tab-component"
-          @changeTab="onTabChange"
+          @changeTab="setSelectedTab"
         />
       </gl-tab>
 

app/assets/javascripts/clusters_list/components/delete_agent_button.vue

@@ -116,7 +116,7 @@ export default {
 
         this.$toast.show(this.error || successMessage);
 
-        this.$refs.modal.hide();
+        this.$refs.modal?.hide();
       }
     },
     deleteAgentMutation() {

app/assets/javascripts/clusters_list/components/install_agent_modal.vue

@@ -194,13 +194,13 @@ export default {
           return createClusterAgent;
         });
     },
-    createAgentTokenMutation(agendId) {
+    createAgentTokenMutation(agentId) {
       return this.$apollo
         .mutate({
           mutation: createAgentToken,
           variables: {
             input: {
-              clusterAgentId: agendId,
+              clusterAgentId: agentId,
               name: this.agentName,
             },
           },

spec/frontend/clusters_list/components/clusters_main_view_spec.js

@@ -49,14 +49,6 @@ describe('ClustersMainViewComponent', () => {
     expect(findAllTabs()).toHaveLength(CLUSTERS_TABS.length);
   });
 
-  it('passes child-component param to the component', () => {
-    expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
-  });
-
-  it('passes correct max-agents param to the modal', () => {
-    expect(findModal().props('maxAgents')).toBe(MAX_CLUSTERS_LIST);
-  });
-
   describe('tabs', () => {
     it.each`
       tabTitle         | queryParamValue      | lineNumber
@@ -72,24 +64,41 @@ describe('ClustersMainViewComponent', () => {
     );
   });
 
-  describe('when the child component emits the tab change event', () => {
+  describe.each`
+    tab    | tabName
+    ${'1'} | ${AGENT}
+    ${'2'} | ${CERTIFICATE_BASED}
+  `('when the child component emits the tab change event for $tabName tab', ({ tab, tabName }) => {
+    beforeEach(() => {
+      findComponent().vm.$emit('changeTab', tabName);
+    });
+
+    it(`changes the tab value to ${tab}`, () => {
+      expect(findTabs().attributes('value')).toBe(tab);
+    });
+  });
+
+  describe.each`
+    tab  | tabName              | maxAgents
+    ${1} | ${AGENT}             | ${MAX_LIST_COUNT}
+    ${2} | ${CERTIFICATE_BASED} | ${MAX_CLUSTERS_LIST}
+  `('when the active tab is $tabName', ({ tab, tabName, maxAgents }) => {
     beforeEach(() => {
-      findComponent().vm.$emit('changeTab', AGENT);
+      findTabs().vm.$emit('input', tab);
     });
 
-    it('changes the tab', () => {
-      expect(findTabs().attributes('value')).toBe('1');
+    it('passes child-component param to the component', () => {
+      expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
     });
 
-    it('passes correct max-agents param to the modal', () => {
-      expect(findModal().props('maxAgents')).toBe(MAX_LIST_COUNT);
+    it(`sets max-agents param to ${maxAgents} and passes it to the modal`, () => {
+      expect(findModal().props('maxAgents')).toBe(maxAgents);
     });
 
-    it('sends the correct tracking event', () => {
-      findTabs().vm.$emit('input', 1);
+    it(`sends the correct tracking event with the property '${tabName}'`, () => {
       expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, {
         label: EVENT_LABEL_TABS,
-        property: AGENT,
+        property: tabName,
       });
     });
   });