Commit bfb1a003 authored by Anna Vovchenko's avatar Anna Vovchenko Committed by Frédéric Caplette

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
parent 70b73351
...@@ -42,13 +42,19 @@ export default { ...@@ -42,13 +42,19 @@ export default {
maxAgents: MAX_CLUSTERS_LIST, maxAgents: MAX_CLUSTERS_LIST,
}; };
}, },
watch: {
selectedTabIndex(val) {
this.onTabChange(val);
},
},
methods: { methods: {
onTabChange(tabName) { setSelectedTab(tabName) {
this.selectedTabIndex = CLUSTERS_TABS.findIndex((tab) => tab.queryParamValue === 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; const tabName = CLUSTERS_TABS[tab].queryParamValue;
this.maxAgents = tabName === AGENT ? MAX_LIST_COUNT : MAX_CLUSTERS_LIST;
this.track(EVENT_ACTIONS_CHANGE, { property: tabName }); this.track(EVENT_ACTIONS_CHANGE, { property: tabName });
}, },
}, },
...@@ -61,7 +67,6 @@ export default { ...@@ -61,7 +67,6 @@ export default {
sync-active-tab-with-query-params sync-active-tab-with-query-params
nav-class="gl-flex-grow-1 gl-align-items-center" nav-class="gl-flex-grow-1 gl-align-items-center"
lazy lazy
@input="trackTabChange"
> >
<gl-tab <gl-tab
v-for="(tab, idx) in $options.CLUSTERS_TABS" v-for="(tab, idx) in $options.CLUSTERS_TABS"
...@@ -74,7 +79,7 @@ export default { ...@@ -74,7 +79,7 @@ export default {
:is="tab.component" :is="tab.component"
:default-branch-name="defaultBranchName" :default-branch-name="defaultBranchName"
data-testid="clusters-tab-component" data-testid="clusters-tab-component"
@changeTab="onTabChange" @changeTab="setSelectedTab"
/> />
</gl-tab> </gl-tab>
......
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
this.$toast.show(this.error || successMessage); this.$toast.show(this.error || successMessage);
this.$refs.modal.hide(); this.$refs.modal?.hide();
} }
}, },
deleteAgentMutation() { deleteAgentMutation() {
......
...@@ -194,13 +194,13 @@ export default { ...@@ -194,13 +194,13 @@ export default {
return createClusterAgent; return createClusterAgent;
}); });
}, },
createAgentTokenMutation(agendId) { createAgentTokenMutation(agentId) {
return this.$apollo return this.$apollo
.mutate({ .mutate({
mutation: createAgentToken, mutation: createAgentToken,
variables: { variables: {
input: { input: {
clusterAgentId: agendId, clusterAgentId: agentId,
name: this.agentName, name: this.agentName,
}, },
}, },
......
...@@ -49,14 +49,6 @@ describe('ClustersMainViewComponent', () => { ...@@ -49,14 +49,6 @@ describe('ClustersMainViewComponent', () => {
expect(findAllTabs()).toHaveLength(CLUSTERS_TABS.length); 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', () => { describe('tabs', () => {
it.each` it.each`
tabTitle | queryParamValue | lineNumber tabTitle | queryParamValue | lineNumber
...@@ -72,24 +64,41 @@ describe('ClustersMainViewComponent', () => { ...@@ -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(() => { beforeEach(() => {
findComponent().vm.$emit('changeTab', AGENT); findTabs().vm.$emit('input', tab);
}); });
it('changes the tab', () => { it('passes child-component param to the component', () => {
expect(findTabs().attributes('value')).toBe('1'); expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
}); });
it('passes correct max-agents param to the modal', () => { it(`sets max-agents param to ${maxAgents} and passes it to the modal`, () => {
expect(findModal().props('maxAgents')).toBe(MAX_LIST_COUNT); expect(findModal().props('maxAgents')).toBe(maxAgents);
}); });
it('sends the correct tracking event', () => { it(`sends the correct tracking event with the property '${tabName}'`, () => {
findTabs().vm.$emit('input', 1);
expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, { expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, {
label: EVENT_LABEL_TABS, label: EVENT_LABEL_TABS,
property: AGENT, property: tabName,
}); });
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment