From da9ffc3ac0cab7f97f648164c33c756a77da34cd Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Wed, 3 Nov 2021 23:28:25 +0200
Subject: [PATCH 01/12] Move nav and actions on clusters page to Vue

As we want enhance the GitLab Agent, we are changing the nav:
- moving it to Vue
- switching tabs order
- adding persistent actions button that defaults to register new Agent

Changelog: changed
---
 .../clusters_list/components/agents.vue       | 11 +++++++
 .../components/install_agent_modal.vue        |  2 ++
 .../clusters_list/store/actions.js            |  4 +++
 .../clusters_list/store/mutation_types.js     |  1 +
 .../clusters_list/store/mutations.js          |  3 ++
 .../javascripts/clusters_list/store/state.js  |  1 +
 .../clusters_list/components/agents_spec.js   | 32 +++++++++++++++++++
 .../components/install_agent_modal_spec.js    | 21 ++++++++++++
 .../clusters_list/store/mutations_spec.js     |  8 +++++
 9 files changed, 83 insertions(+)

diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index 4fc79b32b9cdfa..4097968a32de11 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
 import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AgentEmptyState from './agent_empty_state.vue';
@@ -47,6 +48,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(['newAgentRegistered']),
     agentList() {
       let list = this.agents?.project?.clusterAgents?.nodes;
 
@@ -77,7 +79,16 @@ export default {
       return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
     },
   },
+  watch: {
+    newAgentRegistered(value) {
+      if (value) {
+        this.reloadAgents();
+        this.setNewAgentRegistered(false);
+      }
+    },
+  },
   methods: {
+    ...mapActions(['setNewAgentRegistered']),
     reloadAgents() {
       this.$apollo.queries.agents.refetch();
     },
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 0efd3844cc94dc..7c9ebc0f9e2a89 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -8,6 +8,7 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
@@ -82,6 +83,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['setNewAgentRegistered']),
     setAgentName(name) {
       this.agentName = name;
     },
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index f0f96fd7872d06..2856bed2b6bbac 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -78,3 +78,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
 export const setPage = ({ commit }, page) => {
   commit(types.SET_PAGE, page);
 };
+
+export const setNewAgentRegistered = ({ commit }, state) => {
+  commit(types.SET_NEW_AGENT_REGISTERED, state);
+};
diff --git a/app/assets/javascripts/clusters_list/store/mutation_types.js b/app/assets/javascripts/clusters_list/store/mutation_types.js
index beb4388c93e3b6..a64a17688dd259 100644
--- a/app/assets/javascripts/clusters_list/store/mutation_types.js
+++ b/app/assets/javascripts/clusters_list/store/mutation_types.js
@@ -2,3 +2,4 @@ export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
 export const SET_LOADING_CLUSTERS = 'SET_LOADING_CLUSTERS';
 export const SET_LOADING_NODES = 'SET_LOADING_NODES';
 export const SET_PAGE = 'SET_PAGE';
+export const SET_NEW_AGENT_REGISTERED = 'SET_NEW_AGENT_REGISTERED';
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index e5c15ccbd6e4b2..ffa4423deec312 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -18,4 +18,7 @@ export default {
   [types.SET_PAGE](state, value) {
     state.page = Number(value) || 1;
   },
+  [types.SET_NEW_AGENT_REGISTERED](state, value) {
+    state.newAgentRegistered = value;
+  },
 };
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 3dcbf58c8d39e6..979d21c98f1c9f 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -16,4 +16,5 @@ export default (initialState = {}) => ({
   },
   totalClusters: 0,
   canAddCluster: parseBoolean(initialState.canAddCluster),
+  newAgentRegistered: false,
 });
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 3bd163c74eba83..3c069ff96851b5 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -1,18 +1,21 @@
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import Vuex from 'vuex';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import Agents from '~/clusters_list/components/agents.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import defaultStore from '~/clusters_list/store';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 describe('Agents', () => {
   let wrapper;
+  let store;
 
   const propsData = {
     defaultBranchName: 'default',
@@ -22,6 +25,10 @@ describe('Agents', () => {
     kasAddress: 'kas.example.com',
   };
 
+  const entryData = {
+    newAgentRegistered: false,
+  };
+
   const createWrapper = ({ agents = [], pageInfo = null, trees = [] }) => {
     const provide = provideData;
     const apolloQueryResponse = {
@@ -37,8 +44,18 @@ describe('Agents', () => {
       [getAgentsQuery, jest.fn().mockResolvedValue(apolloQueryResponse, provide)],
     ]);
 
+    const setNewAgentRegistered = jest.fn();
+
+    store = new Vuex.Store({
+      ...defaultStore,
+      state: entryData,
+      actions: {
+        setNewAgentRegistered,
+      },
+    });
     wrapper = shallowMount(Agents, {
       localVue,
+      store,
       apolloProvider,
       propsData,
       provide: provideData,
@@ -237,6 +254,7 @@ describe('Agents', () => {
         mocks,
         propsData,
         provide: provideData,
+        store,
       });
 
       return wrapper.vm.$nextTick();
@@ -246,4 +264,18 @@ describe('Agents', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
+
+  describe('when new agent is registered', () => {
+    let reloadAgentsSpy;
+    beforeEach(() => {
+      createWrapper({ agents: [] });
+      reloadAgentsSpy = jest.spyOn(wrapper.vm, 'reloadAgents');
+    });
+
+    it('reloads agents query', async () => {
+      wrapper.vm.$store.state.newAgentRegistered = true;
+      await wrapper.vm.$nextTick();
+      expect(reloadAgentsSpy).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 89c99bb260e0dd..da30e441d59108 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -1,6 +1,7 @@
 import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import Vuex from 'vuex';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
 import { I18N_INSTALL_AGENT_MODAL, MAX_LIST_COUNT } from '~/clusters_list/constants';
@@ -10,6 +11,7 @@ import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_a
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
+import defaultStore from '~/clusters_list/store';
 import {
   createAgentResponse,
   createAgentErrorResponse,
@@ -48,6 +50,17 @@ describe('InstallAgentModal', () => {
     }
   };
 
+  const setNewAgentRegistered = jest.fn();
+
+  const createStore = () => {
+    return new Vuex.Store({
+      ...defaultStore,
+      actions: {
+        setNewAgentRegistered,
+      },
+    });
+  };
+
   const createWrapper = () => {
     const provide = {
       projectPath,
@@ -60,6 +73,7 @@ describe('InstallAgentModal', () => {
 
     wrapper = shallowMount(InstallAgentModal, {
       attachTo: document.body,
+      store: createStore(),
       stubs: {
         GlModal: ModalStub,
       },
@@ -180,6 +194,13 @@ describe('InstallAgentModal', () => {
       expect(code).toContain('--kas-address=kas.example.com');
     });
 
+    describe('clicking on the done button', () => {
+      it('updates the newAgentRegistered value in store', () => {
+        findActionButton().vm.$emit('click');
+        expect(setNewAgentRegistered).toHaveBeenCalledWith(expect.anything(), true);
+      });
+    });
+
     describe('error creating agent', () => {
       beforeEach(() => {
         apolloProvider = createMockApollo([
diff --git a/spec/frontend/clusters_list/store/mutations_spec.js b/spec/frontend/clusters_list/store/mutations_spec.js
index f8723bfcdfc0af..b557e1932f05fd 100644
--- a/spec/frontend/clusters_list/store/mutations_spec.js
+++ b/spec/frontend/clusters_list/store/mutations_spec.js
@@ -57,4 +57,12 @@ describe('Admin statistics panel mutations', () => {
       expect(state.page).toBe(123);
     });
   });
+
+  describe(`${types.SET_NEW_AGENT_REGISTERED}`, () => {
+    it('changes newAgentRegistered value', () => {
+      mutations[types.SET_NEW_AGENT_REGISTERED](state, true);
+
+      expect(state.newAgentRegistered).toBe(true);
+    });
+  });
 });
-- 
GitLab


From 90c1848b43961ffe5fd65dec9093be2d37ac7066 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 9 Nov 2021 01:03:03 +0200
Subject: [PATCH 02/12] Applied the suggestions after the FE review

---
 .../components/agent_empty_state.vue            | 17 +++++++++++++++++
 .../clusters_list/components/agent_table.vue    |  6 ++++++
 .../components/agent_empty_state_spec.js        |  6 ------
 .../clusters_list/components/agents_spec.js     |  6 +++---
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 5c6f9de0624ce2..d15452cd791ef2 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -2,6 +2,7 @@
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
@@ -35,6 +36,22 @@ export default {
     repositoryPath() {
       return `/${this.projectPath}`;
     },
+    agentDocsUrl() {
+      return helpPagePath('user/clusters/agent/index');
+    },
+    installDocsUrl() {
+      return helpPagePath('administration/clusters/kas');
+    },
+    getStartedDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'define-a-configuration-repository',
+      });
+    },
+    integrationsDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
+      });
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 000730ac1ba526..af9ee309bfb06a 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -9,6 +9,7 @@ import {
   GlPopover,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -67,6 +68,11 @@ export default {
         },
       ];
     },
+    integrationDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
+      });
+    },
   },
   methods: {
     getCellId(item) {
diff --git a/spec/frontend/clusters_list/components/agent_empty_state_spec.js b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
index 38f0e0ba2c4f5a..87ba4f30ffcfcc 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -19,12 +19,6 @@ describe('AgentEmptyStateComponent', () => {
     projectPath,
   };
 
-  const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
-  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-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,
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 3c069ff96851b5..a516b8769f1c0e 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -266,16 +266,16 @@ describe('Agents', () => {
   });
 
   describe('when new agent is registered', () => {
-    let reloadAgentsSpy;
+    let refetchAgentsSpy;
     beforeEach(() => {
       createWrapper({ agents: [] });
-      reloadAgentsSpy = jest.spyOn(wrapper.vm, 'reloadAgents');
+      refetchAgentsSpy = jest.spyOn(wrapper.vm.$apollo.queries.agents, 'refetch');
     });
 
     it('reloads agents query', async () => {
       wrapper.vm.$store.state.newAgentRegistered = true;
       await wrapper.vm.$nextTick();
-      expect(reloadAgentsSpy).toHaveBeenCalled();
+      expect(refetchAgentsSpy).toHaveBeenCalled();
     });
   });
 });
-- 
GitLab


From 742089d93662ff6cab64d7a23ce16736c0679e53 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 9 Nov 2021 20:40:37 +0200
Subject: [PATCH 03/12] Applied suggestions after the FE review

---
 .../components/agent_empty_state.vue             | 16 ----------------
 .../components/agent_empty_state_spec.js         |  6 ++++++
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index d15452cd791ef2..2327d702b09c35 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -36,22 +36,6 @@ export default {
     repositoryPath() {
       return `/${this.projectPath}`;
     },
-    agentDocsUrl() {
-      return helpPagePath('user/clusters/agent/index');
-    },
-    installDocsUrl() {
-      return helpPagePath('administration/clusters/kas');
-    },
-    getStartedDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'define-a-configuration-repository',
-      });
-    },
-    integrationsDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
-      });
-    },
   },
 };
 </script>
diff --git a/spec/frontend/clusters_list/components/agent_empty_state_spec.js b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
index 87ba4f30ffcfcc..38f0e0ba2c4f5a 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -19,6 +19,12 @@ describe('AgentEmptyStateComponent', () => {
     projectPath,
   };
 
+  const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
+  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-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,
-- 
GitLab


From 98155ed83956e773dfc42977b3f2f157a26b1c4c Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 9 Nov 2021 23:17:59 +0200
Subject: [PATCH 04/12] Updated branch with the latest changes

---
 .../clusters_list/components/agent_empty_state.vue          | 1 -
 .../javascripts/clusters_list/components/agent_table.vue    | 6 ------
 2 files changed, 7 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 2327d702b09c35..5c6f9de0624ce2 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -2,7 +2,6 @@
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
-import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index af9ee309bfb06a..000730ac1ba526 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -9,7 +9,6 @@ import {
   GlPopover,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -68,11 +67,6 @@ export default {
         },
       ];
     },
-    integrationDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
-      });
-    },
   },
   methods: {
     getCellId(item) {
-- 
GitLab


From 6bb5e86a691d9c268c0ba6b526d021fb96e0dc4f Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Thu, 11 Nov 2021 01:01:01 +0200
Subject: [PATCH 05/12] Changed setNewAgent action to apollo cache

---
 .../clusters_list/components/agents.vue       | 11 -------
 .../components/install_agent_modal.vue        |  2 --
 .../clusters_list/store/actions.js            |  4 ---
 .../clusters_list/store/mutation_types.js     |  1 -
 .../clusters_list/store/mutations.js          |  3 --
 .../javascripts/clusters_list/store/state.js  |  1 -
 .../clusters_list/components/agents_spec.js   | 32 -------------------
 .../components/install_agent_modal_spec.js    | 21 ------------
 .../clusters_list/store/mutations_spec.js     |  8 -----
 9 files changed, 83 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index 4097968a32de11..4fc79b32b9cdfa 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
 import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AgentEmptyState from './agent_empty_state.vue';
@@ -48,7 +47,6 @@ export default {
     };
   },
   computed: {
-    ...mapState(['newAgentRegistered']),
     agentList() {
       let list = this.agents?.project?.clusterAgents?.nodes;
 
@@ -79,16 +77,7 @@ export default {
       return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
     },
   },
-  watch: {
-    newAgentRegistered(value) {
-      if (value) {
-        this.reloadAgents();
-        this.setNewAgentRegistered(false);
-      }
-    },
-  },
   methods: {
-    ...mapActions(['setNewAgentRegistered']),
     reloadAgents() {
       this.$apollo.queries.agents.refetch();
     },
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 7c9ebc0f9e2a89..0efd3844cc94dc 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -8,7 +8,6 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
-import { mapActions } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
@@ -83,7 +82,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['setNewAgentRegistered']),
     setAgentName(name) {
       this.agentName = name;
     },
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 2856bed2b6bbac..f0f96fd7872d06 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -78,7 +78,3 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
 export const setPage = ({ commit }, page) => {
   commit(types.SET_PAGE, page);
 };
-
-export const setNewAgentRegistered = ({ commit }, state) => {
-  commit(types.SET_NEW_AGENT_REGISTERED, state);
-};
diff --git a/app/assets/javascripts/clusters_list/store/mutation_types.js b/app/assets/javascripts/clusters_list/store/mutation_types.js
index a64a17688dd259..beb4388c93e3b6 100644
--- a/app/assets/javascripts/clusters_list/store/mutation_types.js
+++ b/app/assets/javascripts/clusters_list/store/mutation_types.js
@@ -2,4 +2,3 @@ export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
 export const SET_LOADING_CLUSTERS = 'SET_LOADING_CLUSTERS';
 export const SET_LOADING_NODES = 'SET_LOADING_NODES';
 export const SET_PAGE = 'SET_PAGE';
-export const SET_NEW_AGENT_REGISTERED = 'SET_NEW_AGENT_REGISTERED';
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index ffa4423deec312..e5c15ccbd6e4b2 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -18,7 +18,4 @@ export default {
   [types.SET_PAGE](state, value) {
     state.page = Number(value) || 1;
   },
-  [types.SET_NEW_AGENT_REGISTERED](state, value) {
-    state.newAgentRegistered = value;
-  },
 };
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 979d21c98f1c9f..3dcbf58c8d39e6 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -16,5 +16,4 @@ export default (initialState = {}) => ({
   },
   totalClusters: 0,
   canAddCluster: parseBoolean(initialState.canAddCluster),
-  newAgentRegistered: false,
 });
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index a516b8769f1c0e..3bd163c74eba83 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -1,21 +1,18 @@
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import Vuex from 'vuex';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import Agents from '~/clusters_list/components/agents.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import defaultStore from '~/clusters_list/store';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 describe('Agents', () => {
   let wrapper;
-  let store;
 
   const propsData = {
     defaultBranchName: 'default',
@@ -25,10 +22,6 @@ describe('Agents', () => {
     kasAddress: 'kas.example.com',
   };
 
-  const entryData = {
-    newAgentRegistered: false,
-  };
-
   const createWrapper = ({ agents = [], pageInfo = null, trees = [] }) => {
     const provide = provideData;
     const apolloQueryResponse = {
@@ -44,18 +37,8 @@ describe('Agents', () => {
       [getAgentsQuery, jest.fn().mockResolvedValue(apolloQueryResponse, provide)],
     ]);
 
-    const setNewAgentRegistered = jest.fn();
-
-    store = new Vuex.Store({
-      ...defaultStore,
-      state: entryData,
-      actions: {
-        setNewAgentRegistered,
-      },
-    });
     wrapper = shallowMount(Agents, {
       localVue,
-      store,
       apolloProvider,
       propsData,
       provide: provideData,
@@ -254,7 +237,6 @@ describe('Agents', () => {
         mocks,
         propsData,
         provide: provideData,
-        store,
       });
 
       return wrapper.vm.$nextTick();
@@ -264,18 +246,4 @@ describe('Agents', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
-
-  describe('when new agent is registered', () => {
-    let refetchAgentsSpy;
-    beforeEach(() => {
-      createWrapper({ agents: [] });
-      refetchAgentsSpy = jest.spyOn(wrapper.vm.$apollo.queries.agents, 'refetch');
-    });
-
-    it('reloads agents query', async () => {
-      wrapper.vm.$store.state.newAgentRegistered = true;
-      await wrapper.vm.$nextTick();
-      expect(refetchAgentsSpy).toHaveBeenCalled();
-    });
-  });
 });
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index da30e441d59108..89c99bb260e0dd 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -1,7 +1,6 @@
 import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import Vuex from 'vuex';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
 import { I18N_INSTALL_AGENT_MODAL, MAX_LIST_COUNT } from '~/clusters_list/constants';
@@ -11,7 +10,6 @@ import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_a
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
-import defaultStore from '~/clusters_list/store';
 import {
   createAgentResponse,
   createAgentErrorResponse,
@@ -50,17 +48,6 @@ describe('InstallAgentModal', () => {
     }
   };
 
-  const setNewAgentRegistered = jest.fn();
-
-  const createStore = () => {
-    return new Vuex.Store({
-      ...defaultStore,
-      actions: {
-        setNewAgentRegistered,
-      },
-    });
-  };
-
   const createWrapper = () => {
     const provide = {
       projectPath,
@@ -73,7 +60,6 @@ describe('InstallAgentModal', () => {
 
     wrapper = shallowMount(InstallAgentModal, {
       attachTo: document.body,
-      store: createStore(),
       stubs: {
         GlModal: ModalStub,
       },
@@ -194,13 +180,6 @@ describe('InstallAgentModal', () => {
       expect(code).toContain('--kas-address=kas.example.com');
     });
 
-    describe('clicking on the done button', () => {
-      it('updates the newAgentRegistered value in store', () => {
-        findActionButton().vm.$emit('click');
-        expect(setNewAgentRegistered).toHaveBeenCalledWith(expect.anything(), true);
-      });
-    });
-
     describe('error creating agent', () => {
       beforeEach(() => {
         apolloProvider = createMockApollo([
diff --git a/spec/frontend/clusters_list/store/mutations_spec.js b/spec/frontend/clusters_list/store/mutations_spec.js
index b557e1932f05fd..f8723bfcdfc0af 100644
--- a/spec/frontend/clusters_list/store/mutations_spec.js
+++ b/spec/frontend/clusters_list/store/mutations_spec.js
@@ -57,12 +57,4 @@ describe('Admin statistics panel mutations', () => {
       expect(state.page).toBe(123);
     });
   });
-
-  describe(`${types.SET_NEW_AGENT_REGISTERED}`, () => {
-    it('changes newAgentRegistered value', () => {
-      mutations[types.SET_NEW_AGENT_REGISTERED](state, true);
-
-      expect(state.newAgentRegistered).toBe(true);
-    });
-  });
 });
-- 
GitLab


From 0d747f59342a80bf136dba5ea0c9cc3b67f9889c Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Thu, 11 Nov 2021 01:01:01 +0200
Subject: [PATCH 06/12] Changed setNewAgent action to apollo cache

---
 .../components/install_agent_modal.vue        | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

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 0efd3844cc94dc..23341ad71276c0 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -80,6 +80,14 @@ export default {
         projectPath: this.projectPath,
       };
     },
+    agentVariables() {
+      return {
+        defaultBranchName: this.defaultBranchName,
+        first: MAX_LIST_COUNT,
+        last: null,
+        projectPath: this.projectPath,
+      };
+    },
   },
   methods: {
     setAgentName(name) {
@@ -88,6 +96,47 @@ export default {
     closeModal() {
       this.$refs.modal.hide();
     },
+    updateCache() {
+      const { defaultClient: client } = this.$apollo.provider.clients;
+
+      const sourceData = client.readQuery({
+        query: getAgentsQuery,
+        variables: this.agentVariables,
+      });
+
+      const data = produce(sourceData, (draftData) => {
+        const agent = {
+          id: this.clusterAgent.id,
+          name: this.agentName,
+          tokens: {
+            nodes: [
+              {
+                lastUsedAt: null,
+                __typename: 'ClusterAgentToken',
+              },
+            ],
+            __typename: 'ClusterAgentTokenConnection',
+          },
+          webPath: this.clusterAgent.webPath,
+          __typename: 'ClusterAgent',
+        };
+        const configuration = {
+          name: this.agentName,
+          path: `.gitlab/agents/${this.agentName}`,
+          webPath: this.clusterAgent.webPath,
+          __typename: 'TreeEntry',
+        };
+
+        draftData.project.clusterAgents.nodes.push(agent);
+        draftData.project.repository.tree.trees.nodes.push(configuration);
+      });
+
+      client.writeQuery({
+        query: getAgentsQuery,
+        variables: this.agentVariables,
+        data,
+      });
+    },
     resetModal() {
       this.registering = false;
       this.agentName = null;
-- 
GitLab


From 2e931d6f861f3ca9255867613c5348b8743aa8ca Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Wed, 10 Nov 2021 03:18:38 +0200
Subject: [PATCH 07/12] Added view all tab to the clusters page

The new tab contains information on both Agents and clusters.
Tha Agent integrations are recommended.

Changelog: added
---
 .../components/agent_empty_state.vue          |   6 +
 .../clusters_list/components/agents.vue       |  27 ++-
 .../clusters_list/components/clusters.vue     |  22 +-
 .../components/clusters_empty_state.vue       |   8 +
 .../components/clusters_main_view.vue         |   2 +
 .../components/clusters_view_all.vue          | 210 +++++++++++++++++
 .../javascripts/clusters_list/constants.js    |  34 +++
 .../graphql/queries/get_agents.query.graphql  |   2 +
 .../clusters_list/store/actions.js            |  12 +-
 .../clusters_list/store/mutation_types.js     |   1 +
 .../clusters_list/store/mutations.js          |   3 +
 .../javascripts/clusters_list/store/state.js  |   2 +-
 app/assets/stylesheets/pages/clusters.scss    |   6 +
 locale/gitlab.pot                             |  27 +++
 spec/features/projects/cluster_agents_spec.rb |   2 +-
 .../clusters_list/components/agents_spec.js   |  27 ++-
 .../components/clusters_empty_state_spec.js   |  39 +++-
 .../components/clusters_main_view_spec.js     |  14 +-
 .../clusters_list/components/clusters_spec.js |  10 +
 .../components/clusters_view_all_spec.js      | 218 ++++++++++++++++++
 .../clusters_list/store/mutations_spec.js     |   8 +
 21 files changed, 663 insertions(+), 17 deletions(-)
 create mode 100644 app/assets/javascripts/clusters_list/components/clusters_view_all.vue
 create mode 100644 spec/frontend/clusters_list/components/clusters_view_all_spec.js

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 5c6f9de0624ce2..8a2654bfac47d8 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -30,6 +30,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
   },
   computed: {
     repositoryPath() {
@@ -92,6 +97,7 @@ export default {
 
     <template #actions>
       <gl-button
+        v-if="!childComponent"
         v-gl-modal-directive="$options.modalId"
         :disabled="!hasConfigurations"
         data-testid="integration-primary-button"
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index 4fc79b32b9cdfa..d91c5f3b3e5209 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -20,6 +20,9 @@ export default {
         this.updateTreeList(data);
         return data;
       },
+      result() {
+        this.emitAgentsLoaded();
+      },
     },
   },
   components: {
@@ -36,11 +39,21 @@ export default {
       required: false,
       type: String,
     },
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    limit: {
+      default: null,
+      required: false,
+      type: Number,
+    },
   },
   data() {
     return {
       cursor: {
-        first: MAX_LIST_COUNT,
+        first: this.limit ? this.limit : MAX_LIST_COUNT,
         last: null,
       },
       folderList: {},
@@ -68,7 +81,7 @@ export default {
       return this.$apollo.queries.agents.loading;
     },
     showPagination() {
-      return this.agentPageInfo.hasPreviousPage || this.agentPageInfo.hasNextPage;
+      return !this.limit && (this.agentPageInfo.hasPreviousPage || this.agentPageInfo.hasNextPage);
     },
     treePageInfo() {
       return this.agents?.project?.repository?.tree?.trees?.pageInfo || {};
@@ -128,6 +141,10 @@ export default {
       }
       return 'unused';
     },
+    emitAgentsLoaded() {
+      const count = this.agents?.project?.clusterAgents?.count;
+      this.$emit('onAgentsLoad', count);
+    },
   },
 };
 </script>
@@ -144,7 +161,11 @@ export default {
       </div>
     </div>
 
-    <agent-empty-state v-else :has-configurations="hasConfigurations" />
+    <agent-empty-state
+      v-else
+      :has-configurations="hasConfigurations"
+      :child-component="childComponent"
+    />
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index bc27563b6d54f7..e2d073a8c854aa 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -34,6 +34,18 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  props: {
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    limit: {
+      default: null,
+      required: false,
+      type: Number,
+    },
+  },
   computed: {
     ...mapState([
       'clusters',
@@ -100,10 +112,14 @@ export default {
     },
   },
   mounted() {
+    if (this.limit) {
+      this.setClustersPerPage(this.limit);
+    }
+
     this.fetchClusters();
   },
   methods: {
-    ...mapActions(['fetchClusters', 'reportSentryError', 'setPage']),
+    ...mapActions(['fetchClusters', 'reportSentryError', 'setPage', 'setClustersPerPage']),
     k8sQuantityToGb(quantity) {
       if (!quantity) {
         return 0;
@@ -312,10 +328,10 @@ export default {
       </template>
     </gl-table>
 
-    <clusters-empty-state v-else />
+    <clusters-empty-state v-else :child-component="childComponent" />
 
     <gl-pagination
-      v-if="hasClustersPerPage"
+      v-if="hasClustersPerPage && !limit"
       v-model="currentPage"
       :per-page="clustersPerPage"
       :total-items="totalClusters"
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
index 993507b18bfdaa..762b2f7290e1c3 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -13,6 +13,13 @@ export default {
     GlSprintf,
   },
   inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
+  props: {
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+  },
   learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
   multipleClustersHelpUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'),
   computed: {
@@ -54,6 +61,7 @@ export default {
 
     <template #actions>
       <gl-button
+        v-if="!childComponent"
         data-testid="integration-primary-button"
         data-qa-selector="add_kubernetes_cluster_link"
         category="primary"
diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
index c87cf5933050bd..3412576b81bd91 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -5,12 +5,14 @@ import Agents from './agents.vue';
 import InstallAgentModal from './install_agent_modal.vue';
 import ClustersActions from './clusters_actions.vue';
 import Clusters from './clusters.vue';
+import ClustersViewAll from './clusters_view_all.vue';
 
 export default {
   components: {
     GlTabs,
     GlTab,
     ClustersActions,
+    ClustersViewAll,
     Clusters,
     Agents,
     InstallAgentModal,
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
new file mode 100644
index 00000000000000..a95d07fea85e23
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -0,0 +1,210 @@
+<script>
+import {
+  GlCard,
+  GlSprintf,
+  GlPopover,
+  GlLink,
+  GlButton,
+  GlLoadingIcon,
+  GlModalDirective,
+} from '@gitlab/ui';
+import { mapState } from 'vuex';
+import { sprintf } from '~/locale';
+import {
+  AGENT_CARD_INFO,
+  CERTIFICATE_BASED_CARD_INFO,
+  MAX_CLUSTERS_LIST,
+  INSTALL_AGENT_MODAL_ID,
+} from '../constants';
+import Clusters from './clusters.vue';
+import Agents from './agents.vue';
+
+export default {
+  components: {
+    GlCard,
+    GlSprintf,
+    GlPopover,
+    GlLink,
+    GlButton,
+    GlLoadingIcon,
+    Clusters,
+    Agents,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  AGENT_CARD_INFO,
+  CERTIFICATE_BASED_CARD_INFO,
+  MAX_CLUSTERS_LIST,
+  INSTALL_AGENT_MODAL_ID,
+  inject: ['addClusterPath'],
+  props: {
+    defaultBranchName: {
+      default: '.noBranch',
+      required: false,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      loadingAgents: true,
+      totalAgents: null,
+    };
+  },
+  computed: {
+    ...mapState(['loadingClusters', 'totalClusters']),
+    isLoading() {
+      return this.loadingAgents || this.loadingClusters;
+    },
+  },
+  methods: {
+    cardTitle(card) {
+      let clustersNumber;
+      let title;
+      let emptyTitle;
+      let cardTitle;
+
+      if (card === 'agent') {
+        clustersNumber = this.totalAgents;
+        title = AGENT_CARD_INFO.title;
+        emptyTitle = AGENT_CARD_INFO.emptyTitle;
+      } else if (card === 'certificate_based') {
+        clustersNumber = this.totalClusters;
+        title = CERTIFICATE_BASED_CARD_INFO.title;
+        emptyTitle = CERTIFICATE_BASED_CARD_INFO.emptyTitle;
+      }
+      if (clustersNumber > 0) {
+        cardTitle = sprintf(title, {
+          number: clustersNumber < MAX_CLUSTERS_LIST ? clustersNumber : MAX_CLUSTERS_LIST,
+          total: clustersNumber,
+        });
+      } else {
+        cardTitle = emptyTitle;
+      }
+      return cardTitle;
+    },
+    cardFooterNumber(number) {
+      return number > MAX_CLUSTERS_LIST ? number : '';
+    },
+    onAgentsLoad(number) {
+      this.totalAgents = number;
+      this.loadingAgents = false;
+    },
+    changeTab($event, tab) {
+      $event.preventDefault();
+      this.$emit('changeTab', tab);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" size="md" />
+    <div
+      data-testid="clusters-cards-container"
+      :class="{
+        'gl-display-none': isLoading,
+      }"
+    >
+      <gl-card
+        header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between gl-py-4"
+        body-class="gl-pb-0"
+        footer-class="gl-text-right"
+      >
+        <template #header>
+          <h3 data-testid="agent-card-title" class="gl-my-0 gl-font-weight-normal gl-font-size-h2">
+            {{ cardTitle('agent') }}
+          </h3>
+
+          <span
+            id="clusters-recommended-badge"
+            data-testid="clusters-recommended-badge"
+            class="btn button-recommended"
+            >{{ $options.AGENT_CARD_INFO.tooltip.label }}</span
+          >
+          <gl-popover
+            target="clusters-recommended-badge"
+            container="viewport"
+            placement="bottom"
+            :title="$options.AGENT_CARD_INFO.tooltip.title"
+          >
+            <p class="gl-mb-0">
+              <gl-sprintf :message="$options.AGENT_CARD_INFO.tooltip.text">
+                <template #link="{ content }">
+                  <gl-link
+                    :href="$options.AGENT_CARD_INFO.tooltip.link"
+                    target="_blank"
+                    class="gl-font-sm"
+                  >
+                    {{ content }}</gl-link
+                  >
+                </template>
+              </gl-sprintf>
+            </p>
+          </gl-popover>
+        </template>
+
+        <Agents
+          :limit="$options.MAX_CLUSTERS_LIST"
+          :default-branch-name="defaultBranchName"
+          :child-component="true"
+          @onAgentsLoad="onAgentsLoad"
+        />
+
+        <template #footer>
+          <gl-link
+            v-if="totalAgents"
+            data-testid="agents-tab-footer-link"
+            :href="`?tab=${$options.AGENT_CARD_INFO.tabName}`"
+            @click="changeTab($event, $options.AGENT_CARD_INFO.tabName)"
+            ><gl-sprintf :message="$options.AGENT_CARD_INFO.footerText"
+              ><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf
+            ></gl-link
+          ><gl-button
+            v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+            class="gl-ml-4"
+            category="secondary"
+            variant="confirm"
+            >{{ $options.AGENT_CARD_INFO.actionText }}</gl-button
+          >
+        </template>
+      </gl-card>
+
+      <gl-card
+        class="gl-mt-6"
+        header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between"
+        body-class="gl-pb-0"
+        footer-class="gl-text-right"
+      >
+        <template #header>
+          <h3
+            class="gl-my-1 gl-font-weight-normal gl-font-size-h2"
+            data-testid="clusters-card-title"
+          >
+            {{ cardTitle('certificate_based') }}
+          </h3>
+        </template>
+
+        <clusters :limit="$options.MAX_CLUSTERS_LIST" :child-component="true" />
+
+        <template #footer>
+          <gl-link
+            v-if="totalClusters"
+            data-testid="clusters-tab-footer-link"
+            :href="`?tab=${$options.CERTIFICATE_BASED_CARD_INFO.tabName}`"
+            @click="changeTab($event, $options.CERTIFICATE_BASED_CARD_INFO.tabName)"
+            ><gl-sprintf :message="$options.CERTIFICATE_BASED_CARD_INFO.footerText"
+              ><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf
+            ></gl-link
+          ><gl-button
+            category="secondary"
+            variant="confirm"
+            class="gl-ml-4"
+            :href="addClusterPath"
+            >{{ $options.CERTIFICATE_BASED_CARD_INFO.actionText }}</gl-button
+          >
+        </template>
+      </gl-card>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 36e6a065cbf07e..a83b8f8690ab60 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -1,4 +1,5 @@
 import { __, s__, sprintf } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export const MAX_LIST_COUNT = 25;
 export const INSTALL_AGENT_MODAL_ID = 'install-agent';
@@ -167,7 +168,40 @@ export const I18N_CLUSTERS_EMPTY_STATE = {
   buttonText: s__('ClusterIntegration|Connect with a certificate'),
 };
 
+export const AGENT_CARD_INFO = {
+  tabName: 'agent',
+  title: sprintf(s__('ClusterAgents|%{number} of %{total} Agent based integrations')),
+  emptyTitle: s__('ClusterAgents|No Agent based integrations'),
+  tooltip: {
+    label: s__('ClusterAgents|Recommended'),
+    title: s__('ClusterAgents|GitLab Agents'),
+    text: sprintf(
+      s__(
+        'ClusterAgents|GitLab Agents provide an increased level of security when integrating with clusters. %{linkStart}Learn more about the GitLab Kubernetes Agent.%{linkEnd}',
+      ),
+    ),
+    link: helpPagePath('user/clusters/agent/index'),
+  },
+  actionText: s__('ClusterAgents|Install new Agent'),
+  footerText: sprintf(s__('ClusterAgents|View all %{number} Agent based integrations')),
+};
+
+export const CERTIFICATE_BASED_CARD_INFO = {
+  tabName: 'certificate_based',
+  title: sprintf(s__('ClusterAgents|%{number} of %{total} Certificate based integrations')),
+  emptyTitle: s__('ClusterAgents|No Certificate based integrations'),
+  actionText: s__('ClusterAgents|Connect existing cluster'),
+  footerText: sprintf(s__('ClusterAgents|View all %{number} Certificate based integrations')),
+};
+
+export const MAX_CLUSTERS_LIST = 6;
+
 export const CLUSTERS_TABS = [
+  {
+    title: s__('ClusterAgents|All'),
+    component: 'ClustersViewAll',
+    queryParamValue: 'all',
+  },
   {
     title: s__('ClusterAgents|Agent'),
     component: 'agents',
diff --git a/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql b/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql
index 397895b7d0153c..47b259888779b0 100644
--- a/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql
+++ b/app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql
@@ -20,6 +20,8 @@ query getAgents(
       pageInfo {
         ...PageInfo
       }
+
+      count
     }
 
     repository {
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index f0f96fd7872d06..d70b36e63bc9b0 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -30,7 +30,13 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
 
   const poll = new Poll({
     resource: {
-      fetchClusters: (paginatedEndPoint) => axios.get(paginatedEndPoint),
+      fetchClusters: (paginatedEndPoint) =>
+        axios.get(paginatedEndPoint, {
+          params: {
+            page: state.page,
+            per_page: state.clustersPerPage,
+          },
+        }),
     },
     data: `${state.endpoint}?page=${state.page}`,
     method: 'fetchClusters',
@@ -78,3 +84,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
 export const setPage = ({ commit }, page) => {
   commit(types.SET_PAGE, page);
 };
+
+export const setClustersPerPage = ({ commit }, limit) => {
+  commit(types.SET_CLUSTERS_PER_PAGE, limit);
+};
diff --git a/app/assets/javascripts/clusters_list/store/mutation_types.js b/app/assets/javascripts/clusters_list/store/mutation_types.js
index beb4388c93e3b6..e88d4c74761784 100644
--- a/app/assets/javascripts/clusters_list/store/mutation_types.js
+++ b/app/assets/javascripts/clusters_list/store/mutation_types.js
@@ -2,3 +2,4 @@ export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
 export const SET_LOADING_CLUSTERS = 'SET_LOADING_CLUSTERS';
 export const SET_LOADING_NODES = 'SET_LOADING_NODES';
 export const SET_PAGE = 'SET_PAGE';
+export const SET_CLUSTERS_PER_PAGE = 'SET_CLUSTERS_PER_PAGE';
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index e5c15ccbd6e4b2..93156c9200fbba 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -18,4 +18,7 @@ export default {
   [types.SET_PAGE](state, value) {
     state.page = Number(value) || 1;
   },
+  [types.SET_CLUSTERS_PER_PAGE](state, value) {
+    state.clustersPerPage = Number(value) || 1;
+  },
 };
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 3dcbf58c8d39e6..763d7389d0f22d 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -5,7 +5,7 @@ export default (initialState = {}) => ({
   endpoint: initialState.endpoint,
   hasAncestorClusters: false,
   clusters: [],
-  clustersPerPage: 0,
+  clustersPerPage: 20,
   loadingClusters: true,
   loadingNodes: true,
   page: 1,
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index b450bca4f41032..299bb73191d538 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -21,6 +21,12 @@
     }
   }
 
+  .button-recommended {
+    @include gl-text-white;
+    background-color: $purple-500;
+    border-radius: $border-radius-large;
+  }
+
   .gl-card-body {
     @include media-breakpoint-up(sm) {
       @include gl-pt-2;
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a9bd64027dc6dc..6bc4147e77a1f8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7318,6 +7318,12 @@ msgstr ""
 msgid "Cluster type must be specificed for Stages::ClusterEndpointInserter"
 msgstr ""
 
+msgid "ClusterAgents|%{number} of %{total} Agent based integrations"
+msgstr ""
+
+msgid "ClusterAgents|%{number} of %{total} Certificate based integrations"
+msgstr ""
+
 msgid "ClusterAgents|Access tokens"
 msgstr ""
 
@@ -7333,6 +7339,9 @@ msgstr ""
 msgid "ClusterAgents|Agent never connected to GitLab"
 msgstr ""
 
+msgid "ClusterAgents|All"
+msgstr ""
+
 msgid "ClusterAgents|Alternative installation methods"
 msgstr ""
 
@@ -7351,6 +7360,9 @@ msgstr ""
 msgid "ClusterAgents|Configuration"
 msgstr ""
 
+msgid "ClusterAgents|Connect existing cluster"
+msgstr ""
+
 msgid "ClusterAgents|Connect with Agent"
 msgstr ""
 
@@ -7423,12 +7435,21 @@ msgstr ""
 msgid "ClusterAgents|Never connected"
 msgstr ""
 
+msgid "ClusterAgents|No Agent based integrations"
+msgstr ""
+
+msgid "ClusterAgents|No Certificate based integrations"
+msgstr ""
+
 msgid "ClusterAgents|Not connected"
 msgstr ""
 
 msgid "ClusterAgents|Read more about getting started"
 msgstr ""
 
+msgid "ClusterAgents|Recommended"
+msgstr ""
+
 msgid "ClusterAgents|Recommended installation method"
 msgstr ""
 
@@ -7477,6 +7498,12 @@ msgstr ""
 msgid "ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more."
 msgstr ""
 
+msgid "ClusterAgents|View all %{number} Agent based integrations"
+msgstr ""
+
+msgid "ClusterAgents|View all %{number} Certificate based integrations"
+msgstr ""
+
 msgid "ClusterAgents|You will need to create a token to connect to your agent"
 msgstr ""
 
diff --git a/spec/features/projects/cluster_agents_spec.rb b/spec/features/projects/cluster_agents_spec.rb
index 98ee6ca161f4df..3ef710169f0e59 100644
--- a/spec/features/projects/cluster_agents_spec.rb
+++ b/spec/features/projects/cluster_agents_spec.rb
@@ -22,7 +22,7 @@
     end
 
     it 'displays empty state', :aggregate_failures do
-      expect(page).to have_content('Connect with a GitLab Agent')
+      expect(page).to have_content('Install new Agent')
       expect(page).to have_selector('.empty-state')
     end
   end
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 3bd163c74eba83..238babdc2250a2 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -22,12 +22,12 @@ describe('Agents', () => {
     kasAddress: 'kas.example.com',
   };
 
-  const createWrapper = ({ agents = [], pageInfo = null, trees = [] }) => {
+  const createWrapper = ({ agents = [], pageInfo = null, trees = [], count = 0 }) => {
     const provide = provideData;
     const apolloQueryResponse = {
       data: {
         project: {
-          clusterAgents: { nodes: agents, pageInfo, tokens: { nodes: [] } },
+          clusterAgents: { nodes: agents, pageInfo, tokens: { nodes: [] }, count },
           repository: { tree: { trees: { nodes: trees, pageInfo } } },
         },
       },
@@ -80,6 +80,8 @@ describe('Agents', () => {
       },
     ];
 
+    const count = 2;
+
     const trees = [
       {
         name: 'agent-2',
@@ -120,7 +122,7 @@ describe('Agents', () => {
     ];
 
     beforeEach(() => {
-      return createWrapper({ agents, trees });
+      return createWrapper({ agents, count, trees });
     });
 
     it('should render agent table', () => {
@@ -132,6 +134,10 @@ describe('Agents', () => {
       expect(findAgentTable().props('agents')).toMatchObject(expectedAgentsList);
     });
 
+    it('should emit agents count to the parent component', () => {
+      expect(wrapper.emitted().onAgentsLoad).toEqual([[count]]);
+    });
+
     describe('when the agent has recently connected tokens', () => {
       it('should set agent status to active', () => {
         expect(findAgentTable().props('agents')).toMatchObject(expectedAgentsList);
@@ -179,6 +185,21 @@ describe('Agents', () => {
       it('should pass pageInfo to the pagination component', () => {
         expect(findPaginationButtons().props()).toMatchObject(pageInfo);
       });
+
+      describe('when limit is passed from the parent component', () => {
+        beforeEach(() => {
+          propsData.limit = 6;
+
+          return createWrapper({
+            agents,
+            pageInfo,
+          });
+        });
+
+        it('should not render pagination buttons', () => {
+          expect(findPaginationButtons().exists()).toBe(false);
+        });
+      });
     });
   });
 
diff --git a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
index bda0e6c110c04a..fcee62e4dba556 100644
--- a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
@@ -11,6 +11,10 @@ const canAddCluster = true;
 describe('ClustersEmptyStateComponent', () => {
   let wrapper;
 
+  const propsData = {
+    childComponent: false,
+  };
+
   const provideData = {
     clustersEmptyStateImage,
     emptyStateHelpText: null,
@@ -27,6 +31,7 @@ describe('ClustersEmptyStateComponent', () => {
   beforeEach(() => {
     wrapper = shallowMountExtended(ClustersEmptyState, {
       store: ClusterStore(entryData),
+      propsData,
       provide: provideData,
       stubs: { GlEmptyState },
     });
@@ -36,8 +41,10 @@ describe('ClustersEmptyStateComponent', () => {
     wrapper.destroy();
   });
 
-  it('should render the action button', () => {
-    expect(findButton().exists()).toBe(true);
+  describe('when the component is loaded independently', () => {
+    it('should render the action button', () => {
+      expect(findButton().exists()).toBe(true);
+    });
   });
 
   describe('when the help text is not provided', () => {
@@ -46,11 +53,31 @@ describe('ClustersEmptyStateComponent', () => {
     });
   });
 
+  describe('when the component is loaded as a child component', () => {
+    beforeEach(() => {
+      propsData.childComponent = true;
+      wrapper = shallowMountExtended(ClustersEmptyState, {
+        store: ClusterStore(entryData),
+        propsData,
+        provide: provideData,
+      });
+    });
+
+    afterEach(() => {
+      propsData.childComponent = false;
+    });
+
+    it('should not render the action button', () => {
+      expect(findButton().exists()).toBe(false);
+    });
+  });
+
   describe('when the help text is provided', () => {
     beforeEach(() => {
       provideData.emptyStateHelpText = emptyStateHelpText;
       wrapper = shallowMountExtended(ClustersEmptyState, {
         store: ClusterStore(entryData),
+        propsData,
         provide: provideData,
       });
     });
@@ -61,8 +88,14 @@ describe('ClustersEmptyStateComponent', () => {
   });
 
   describe('when the user cannot add clusters', () => {
+    entryData.canAddCluster = false;
     beforeEach(() => {
-      wrapper.vm.$store.state.canAddCluster = false;
+      wrapper = shallowMountExtended(ClustersEmptyState, {
+        store: ClusterStore(entryData),
+        propsData,
+        provide: provideData,
+        stubs: { GlEmptyState },
+      });
     });
     it('should disable the button', () => {
       expect(findButton().props('disabled')).toBe(true);
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
index 3869a2a87365d8..3905e9bb79ea4d 100644
--- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -43,8 +43,9 @@ describe('ClustersMainViewComponent', () => {
   describe('tabs', () => {
     it.each`
       tabTitle               | queryParamValue        | lineNumber
-      ${'Agent'}             | ${'agent'}             | ${0}
-      ${'Certificate based'} | ${'certificate_based'} | ${1}
+      ${'All'}               | ${'all'}               | ${0}
+      ${'Agent'}             | ${'agent'}             | ${1}
+      ${'Certificate based'} | ${'certificate_based'} | ${2}
     `(
       'renders correct tab title and query param value',
       ({ tabTitle, queryParamValue, lineNumber }) => {
@@ -53,4 +54,13 @@ describe('ClustersMainViewComponent', () => {
       },
     );
   });
+
+  describe('when the child component emits the tab change event', () => {
+    beforeEach(() => {
+      findComponent().vm.$emit('changeTab', 'agent');
+    });
+    it('changes the tab', () => {
+      expect(wrapper.vm.$data.selectedTabIndex).toBe(1);
+    });
+  });
 });
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index de511788b089ff..8103bc8f35db18 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -105,6 +105,16 @@ describe('Clusters', () => {
         expect(findEmptyState().exists()).toBe(true);
       });
     });
+
+    describe('when is loaded as a child component', () => {
+      beforeEach(() => {
+        wrapper.setProps({ limit: 6 });
+      });
+
+      it("shouldn't render pagination buttons", () => {
+        expect(findPaginatedButtons().exists()).toBe(false);
+      });
+    });
   });
 
   describe('cluster icon', () => {
diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
new file mode 100644
index 00000000000000..52802cae8d8bf7
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -0,0 +1,218 @@
+import { GlCard, GlLoadingIcon, GlButton, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ClustersViewAll from '~/clusters_list/components/clusters_view_all.vue';
+import Agents from '~/clusters_list/components/agents.vue';
+import Clusters from '~/clusters_list/components/clusters.vue';
+import ClusterStore from '~/clusters_list/store';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import {
+  AGENT_CARD_INFO,
+  CERTIFICATE_BASED_CARD_INFO,
+  MAX_CLUSTERS_LIST,
+  INSTALL_AGENT_MODAL_ID,
+} from '~/clusters_list/constants';
+import { sprintf } from '~/locale';
+
+const loadingClusters = true;
+const totalClusters = 0;
+const addClusterPath = '/path/to/add/cluster';
+const defaultBranchName = 'default-branch';
+
+describe('ClustersViewAllComponent', () => {
+  let wrapper;
+  let changeTabSpy;
+
+  const event = {
+    preventDefault: jest.fn(),
+  };
+
+  const propsData = {
+    defaultBranchName,
+  };
+
+  const provideData = {
+    addClusterPath,
+  };
+
+  const entryData = {
+    loadingClusters,
+    totalClusters,
+  };
+
+  const findCards = () => wrapper.findAllComponents(GlCard);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findAgentsComponent = () => wrapper.findComponent(Agents);
+  const findClustersComponent = () => wrapper.findComponent(Clusters);
+  const findCardsContainer = () => wrapper.findByTestId('clusters-cards-container');
+  const findAgentCardTitle = () => wrapper.findByTestId('agent-card-title');
+  const findRecommendedBadge = () => wrapper.findByTestId('clusters-recommended-badge');
+  const findClustersCardTitle = () => wrapper.findByTestId('clusters-card-title');
+  const findFooterButton = (line) => findCards().at(line).findComponent(GlButton);
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(ClustersViewAll, {
+      store: ClusterStore(entryData),
+      propsData,
+      provide: provideData,
+      directives: {
+        GlModalDirective: createMockDirective(),
+      },
+      stubs: { GlCard, GlSprintf },
+    });
+
+    changeTabSpy = jest.spyOn(wrapper.vm, 'changeTab');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render 2 cards', () => {
+    expect(findCards().length).toBe(2);
+  });
+
+  describe('when agents and clusters are not loaded', () => {
+    it('should show the loading icon', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+  });
+
+  describe('when both agents and clusters are loaded', () => {
+    beforeEach(() => {
+      wrapper.vm.$store.state.loadingClusters = false;
+      findAgentsComponent().vm.$emit('onAgentsLoad', 6);
+    });
+
+    it("shouldn't show the loading icon", () => {
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+
+    it('should make content visible', () => {
+      expect(findCardsContainer().classes('gl-display-none')).toBe(false);
+    });
+  });
+
+  describe('agents card', () => {
+    it('should show recommended badge', () => {
+      expect(findRecommendedBadge().exists()).toBe(true);
+    });
+
+    it('should render Agents component', () => {
+      expect(findAgentsComponent().exists()).toBe(true);
+    });
+
+    it('should pass the limit prop', () => {
+      expect(findAgentsComponent().props('limit')).toBe(MAX_CLUSTERS_LIST);
+    });
+
+    it('should pass the default-branch-name prop', () => {
+      expect(findAgentsComponent().props('defaultBranchName')).toBe(defaultBranchName);
+    });
+
+    describe('when there are no agents', () => {
+      it('should show the empty title', () => {
+        expect(findAgentCardTitle().text()).toBe(AGENT_CARD_INFO.emptyTitle);
+      });
+
+      it('should show install new Agent button in the footer', () => {
+        expect(findFooterButton(0).exists()).toBe(true);
+      });
+
+      it('should render correct modal id for the agent link', () => {
+        const binding = getBinding(findFooterButton(0).element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
+    });
+
+    describe('when the agents are present', () => {
+      const findFooterLink = () => wrapper.findByTestId('agents-tab-footer-link');
+      const agentsNumber = 7;
+      beforeEach(() => {
+        findAgentsComponent().vm.$emit('onAgentsLoad', agentsNumber);
+      });
+
+      it('should show the correct title', () => {
+        expect(findAgentCardTitle().text()).toBe(
+          sprintf(AGENT_CARD_INFO.title, { number: MAX_CLUSTERS_LIST, total: agentsNumber }),
+        );
+      });
+
+      it('should show the link to the Agents tab in the footer', () => {
+        expect(findFooterLink().exists()).toBe(true);
+        expect(findFooterLink().text()).toBe(
+          sprintf(AGENT_CARD_INFO.footerText, { number: agentsNumber }),
+        );
+        expect(findFooterLink().attributes('href')).toBe('?tab=agent');
+      });
+
+      describe('when clicking on the footer link', () => {
+        beforeEach(() => {
+          findFooterLink().vm.$emit('click', event);
+        });
+
+        it('should trigger tab change', () => {
+          expect(changeTabSpy).toHaveBeenCalledWith(event, 'agent');
+        });
+      });
+    });
+  });
+
+  describe('clusters tab', () => {
+    it('should pass the limit prop', () => {
+      expect(findClustersComponent().props('limit')).toBe(MAX_CLUSTERS_LIST);
+    });
+
+    it('should pass the child-component prop', () => {
+      expect(findClustersComponent().props('childComponent')).toBe(true);
+    });
+
+    describe('when there are no clusters', () => {
+      it('should show the empty title', () => {
+        expect(findClustersCardTitle().text()).toBe(CERTIFICATE_BASED_CARD_INFO.emptyTitle);
+      });
+
+      it('should show install new Agent button in the footer', () => {
+        expect(findFooterButton(1).exists()).toBe(true);
+      });
+
+      it('should render correct href for the button in the footer', () => {
+        expect(findFooterButton(1).attributes('href')).toBe(addClusterPath);
+      });
+    });
+
+    describe('when the clusters are present', () => {
+      const findFooterLink = () => wrapper.findByTestId('clusters-tab-footer-link');
+      const clustersNumber = 7;
+      beforeEach(() => {
+        wrapper.vm.$store.state.totalClusters = clustersNumber;
+      });
+
+      it('should show the correct title', () => {
+        expect(findClustersCardTitle().text()).toBe(
+          sprintf(CERTIFICATE_BASED_CARD_INFO.title, {
+            number: MAX_CLUSTERS_LIST,
+            total: clustersNumber,
+          }),
+        );
+      });
+
+      it('should show the link to the Clusters tab in the footer', () => {
+        expect(findFooterLink().exists()).toBe(true);
+        expect(findFooterLink().text()).toBe(
+          sprintf(CERTIFICATE_BASED_CARD_INFO.footerText, { number: clustersNumber }),
+        );
+      });
+
+      describe('when clicking on the footer link', () => {
+        beforeEach(() => {
+          findFooterLink().vm.$emit('click', event);
+        });
+
+        it('should trigger tab change', () => {
+          expect(changeTabSpy).toHaveBeenCalledWith(event, 'certificate_based');
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/clusters_list/store/mutations_spec.js b/spec/frontend/clusters_list/store/mutations_spec.js
index f8723bfcdfc0af..ae264eee4496cd 100644
--- a/spec/frontend/clusters_list/store/mutations_spec.js
+++ b/spec/frontend/clusters_list/store/mutations_spec.js
@@ -57,4 +57,12 @@ describe('Admin statistics panel mutations', () => {
       expect(state.page).toBe(123);
     });
   });
+
+  describe(`${types.SET_CLUSTERS_PER_PAGE}`, () => {
+    it('changes clustersPerPage value', () => {
+      mutations[types.SET_CLUSTERS_PER_PAGE](state, 123);
+
+      expect(state.clustersPerPage).toBe(123);
+    });
+  });
 });
-- 
GitLab


From 32f5f7be3f401033be70f59ae2b8793aea53b033 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Thu, 11 Nov 2021 11:58:19 +0200
Subject: [PATCH 08/12] Implemented changes after the FE review

---
 .../components/clusters_view_all.vue          |  7 +--
 .../components/install_agent_modal.vue        | 52 -------------------
 .../clusters_list/components/agents_spec.js   | 14 ++---
 .../components/clusters_main_view_spec.js     |  2 +-
 .../clusters_list/components/clusters_spec.js | 10 ++--
 .../components/clusters_view_all_spec.js      |  2 +-
 6 files changed, 16 insertions(+), 71 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index a95d07fea85e23..40a0fa58fbf99c 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -100,12 +100,7 @@ export default {
 <template>
   <div>
     <gl-loading-icon v-if="isLoading" size="md" />
-    <div
-      data-testid="clusters-cards-container"
-      :class="{
-        'gl-display-none': isLoading,
-      }"
-    >
+    <div v-show="!isLoading" data-testid="clusters-cards-container">
       <gl-card
         header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between gl-py-4"
         body-class="gl-pb-0"
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 23341ad71276c0..ac5a1276952e61 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -48,7 +48,6 @@ export default {
       agentName: null,
       agentToken: null,
       error: null,
-      clusterAgent: null,
     };
   },
   computed: {
@@ -80,14 +79,6 @@ export default {
         projectPath: this.projectPath,
       };
     },
-    agentVariables() {
-      return {
-        defaultBranchName: this.defaultBranchName,
-        first: MAX_LIST_COUNT,
-        last: null,
-        projectPath: this.projectPath,
-      };
-    },
   },
   methods: {
     setAgentName(name) {
@@ -96,47 +87,6 @@ export default {
     closeModal() {
       this.$refs.modal.hide();
     },
-    updateCache() {
-      const { defaultClient: client } = this.$apollo.provider.clients;
-
-      const sourceData = client.readQuery({
-        query: getAgentsQuery,
-        variables: this.agentVariables,
-      });
-
-      const data = produce(sourceData, (draftData) => {
-        const agent = {
-          id: this.clusterAgent.id,
-          name: this.agentName,
-          tokens: {
-            nodes: [
-              {
-                lastUsedAt: null,
-                __typename: 'ClusterAgentToken',
-              },
-            ],
-            __typename: 'ClusterAgentTokenConnection',
-          },
-          webPath: this.clusterAgent.webPath,
-          __typename: 'ClusterAgent',
-        };
-        const configuration = {
-          name: this.agentName,
-          path: `.gitlab/agents/${this.agentName}`,
-          webPath: this.clusterAgent.webPath,
-          __typename: 'TreeEntry',
-        };
-
-        draftData.project.clusterAgents.nodes.push(agent);
-        draftData.project.repository.tree.trees.nodes.push(configuration);
-      });
-
-      client.writeQuery({
-        query: getAgentsQuery,
-        variables: this.agentVariables,
-        data,
-      });
-    },
     resetModal() {
       this.registering = false;
       this.agentName = null;
@@ -188,8 +138,6 @@ export default {
           throw new Error(agentErrors[0]);
         }
 
-        this.clusterAgent = clusterAgent;
-
         const { errors: tokenErrors, secret } = await this.createAgentTokenMutation(
           clusterAgent.id,
         );
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 238babdc2250a2..2dec7cdc973e28 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -14,7 +14,7 @@ localVue.use(VueApollo);
 describe('Agents', () => {
   let wrapper;
 
-  const propsData = {
+  const defaultProps = {
     defaultBranchName: 'default',
   };
   const provideData = {
@@ -22,7 +22,7 @@ describe('Agents', () => {
     kasAddress: 'kas.example.com',
   };
 
-  const createWrapper = ({ agents = [], pageInfo = null, trees = [], count = 0 }) => {
+  const createWrapper = ({ props = {}, agents = [], pageInfo = null, trees = [], count = 0 }) => {
     const provide = provideData;
     const apolloQueryResponse = {
       data: {
@@ -40,7 +40,10 @@ describe('Agents', () => {
     wrapper = shallowMount(Agents, {
       localVue,
       apolloProvider,
-      propsData,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
       provide: provideData,
     });
 
@@ -188,9 +191,8 @@ describe('Agents', () => {
 
       describe('when limit is passed from the parent component', () => {
         beforeEach(() => {
-          propsData.limit = 6;
-
           return createWrapper({
+            props: { limit: 6 },
             agents,
             pageInfo,
           });
@@ -256,7 +258,7 @@ describe('Agents', () => {
     beforeEach(() => {
       wrapper = shallowMount(Agents, {
         mocks,
-        propsData,
+        propsData: defaultProps,
         provide: provideData,
       });
 
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
index 3905e9bb79ea4d..ba521dee72bb6c 100644
--- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -60,7 +60,7 @@ describe('ClustersMainViewComponent', () => {
       findComponent().vm.$emit('changeTab', 'agent');
     });
     it('changes the tab', () => {
-      expect(wrapper.vm.$data.selectedTabIndex).toBe(1);
+      expect(findTabs().attributes('value')).toBe('1');
     });
   });
 });
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index 8103bc8f35db18..a34202c789d9e3 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -48,9 +48,9 @@ describe('Clusters', () => {
     mock.onGet(`${endpoint}?page=${header['x-page']}`).reply(response, body, header);
   };
 
-  const mountWrapper = () => {
+  const createWrapper = ({ propsData = {} }) => {
     store = ClusterStore(entryData);
-    wrapper = mount(Clusters, { provide: provideData, store, stubs: { GlTable } });
+    wrapper = mount(Clusters, { propsData, provide: provideData, store, stubs: { GlTable } });
     return axios.waitForAll();
   };
 
@@ -70,7 +70,7 @@ describe('Clusters', () => {
     mock = new MockAdapter(axios);
     mockPollingApi(200, apiData, paginationHeader());
 
-    return mountWrapper();
+    return createWrapper({});
   });
 
   afterEach(() => {
@@ -108,7 +108,7 @@ describe('Clusters', () => {
 
     describe('when is loaded as a child component', () => {
       beforeEach(() => {
-        wrapper.setProps({ limit: 6 });
+        createWrapper({ limit: 6 });
       });
 
       it("shouldn't render pagination buttons", () => {
@@ -258,7 +258,7 @@ describe('Clusters', () => {
 
     beforeEach(() => {
       mockPollingApi(200, apiData, paginationHeader(totalFirstPage, perPage, 1));
-      return mountWrapper();
+      return createWrapper({});
     });
 
     it('should load to page 1 with header values', () => {
diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
index 52802cae8d8bf7..94b3b46fb24995 100644
--- a/spec/frontend/clusters_list/components/clusters_view_all_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -88,7 +88,7 @@ describe('ClustersViewAllComponent', () => {
     });
 
     it('should make content visible', () => {
-      expect(findCardsContainer().classes('gl-display-none')).toBe(false);
+      expect(findCardsContainer().isVisible()).toBe(true);
     });
   });
 
-- 
GitLab


From 1bcf15149c0a69ac2254cdfcbf9d901dfd5b0bf4 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Fri, 12 Nov 2021 14:09:24 +0200
Subject: [PATCH 09/12] Implemented suggested changes after the FE review:

- added constants for 'agent' and 'certificate_based'
- change test to pass the initial state instead of setting state in spec
---
 .../components/clusters_view_all.vue          | 12 ++--
 .../components/install_agent_modal.vue        |  3 +
 .../javascripts/clusters_list/constants.js    |  3 +
 .../components/clusters_main_view_spec.js     | 12 ++--
 .../components/clusters_view_all_spec.js      | 61 +++++++++++++------
 spec/frontend/clusters_list/mocks/apollo.js   |  3 +-
 6 files changed, 65 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index 40a0fa58fbf99c..e8261527afb899 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -11,6 +11,8 @@ import {
 import { mapState } from 'vuex';
 import { sprintf } from '~/locale';
 import {
+  AGENT,
+  CERTIFICATE_BASED,
   AGENT_CARD_INFO,
   CERTIFICATE_BASED_CARD_INFO,
   MAX_CLUSTERS_LIST,
@@ -33,6 +35,8 @@ export default {
   directives: {
     GlModalDirective,
   },
+  AGENT,
+  CERTIFICATE_BASED,
   AGENT_CARD_INFO,
   CERTIFICATE_BASED_CARD_INFO,
   MAX_CLUSTERS_LIST,
@@ -64,11 +68,11 @@ export default {
       let emptyTitle;
       let cardTitle;
 
-      if (card === 'agent') {
+      if (card === AGENT) {
         clustersNumber = this.totalAgents;
         title = AGENT_CARD_INFO.title;
         emptyTitle = AGENT_CARD_INFO.emptyTitle;
-      } else if (card === 'certificate_based') {
+      } else if (card === CERTIFICATE_BASED) {
         clustersNumber = this.totalClusters;
         title = CERTIFICATE_BASED_CARD_INFO.title;
         emptyTitle = CERTIFICATE_BASED_CARD_INFO.emptyTitle;
@@ -108,7 +112,7 @@ export default {
       >
         <template #header>
           <h3 data-testid="agent-card-title" class="gl-my-0 gl-font-weight-normal gl-font-size-h2">
-            {{ cardTitle('agent') }}
+            {{ cardTitle($options.AGENT) }}
           </h3>
 
           <span
@@ -176,7 +180,7 @@ export default {
             class="gl-my-1 gl-font-weight-normal gl-font-size-h2"
             data-testid="clusters-card-title"
           >
-            {{ cardTitle('certificate_based') }}
+            {{ cardTitle($options.CERTIFICATE_BASED) }}
           </h3>
         </template>
 
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 ac5a1276952e61..0efd3844cc94dc 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -48,6 +48,7 @@ export default {
       agentName: null,
       agentToken: null,
       error: null,
+      clusterAgent: null,
     };
   },
   computed: {
@@ -138,6 +139,8 @@ export default {
           throw new Error(agentErrors[0]);
         }
 
+        this.clusterAgent = clusterAgent;
+
         const { errors: tokenErrors, secret } = await this.createAgentTokenMutation(
           clusterAgent.id,
         );
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index a83b8f8690ab60..9fefdf450c4224 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -220,3 +220,6 @@ export const CLUSTERS_ACTIONS = {
   connectWithAgent: s__('ClusterAgents|Connect with Agent'),
   connectExistingCluster: s__('ClusterAgents|Connect with certificate'),
 };
+
+export const AGENT = 'agent';
+export const CERTIFICATE_BASED = 'certificate_based';
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
index ba521dee72bb6c..2e71616ce34f32 100644
--- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -1,7 +1,7 @@
 import { GlTabs, GlTab } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ClustersMainView from '~/clusters_list/components/clusters_main_view.vue';
-import { CLUSTERS_TABS } from '~/clusters_list/constants';
+import { AGENT, CERTIFICATE_BASED, CLUSTERS_TABS } from '~/clusters_list/constants';
 
 const defaultBranchName = 'default-branch';
 
@@ -42,10 +42,10 @@ describe('ClustersMainViewComponent', () => {
 
   describe('tabs', () => {
     it.each`
-      tabTitle               | queryParamValue        | lineNumber
-      ${'All'}               | ${'all'}               | ${0}
-      ${'Agent'}             | ${'agent'}             | ${1}
-      ${'Certificate based'} | ${'certificate_based'} | ${2}
+      tabTitle               | queryParamValue      | lineNumber
+      ${'All'}               | ${'all'}             | ${0}
+      ${'Agent'}             | ${AGENT}             | ${1}
+      ${'Certificate based'} | ${CERTIFICATE_BASED} | ${2}
     `(
       'renders correct tab title and query param value',
       ({ tabTitle, queryParamValue, lineNumber }) => {
@@ -57,7 +57,7 @@ describe('ClustersMainViewComponent', () => {
 
   describe('when the child component emits the tab change event', () => {
     beforeEach(() => {
-      findComponent().vm.$emit('changeTab', 'agent');
+      findComponent().vm.$emit('changeTab', AGENT);
     });
     it('changes the tab', () => {
       expect(findTabs().attributes('value')).toBe('1');
diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
index 94b3b46fb24995..4be488e6425c9f 100644
--- a/spec/frontend/clusters_list/components/clusters_view_all_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -1,11 +1,14 @@
 import { GlCard, GlLoadingIcon, GlButton, GlSprintf } from '@gitlab/ui';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ClustersViewAll from '~/clusters_list/components/clusters_view_all.vue';
 import Agents from '~/clusters_list/components/agents.vue';
 import Clusters from '~/clusters_list/components/clusters.vue';
-import ClusterStore from '~/clusters_list/store';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import {
+  AGENT,
+  CERTIFICATE_BASED,
   AGENT_CARD_INFO,
   CERTIFICATE_BASED_CARD_INFO,
   MAX_CLUSTERS_LIST,
@@ -13,14 +16,14 @@ import {
 } from '~/clusters_list/constants';
 import { sprintf } from '~/locale';
 
-const loadingClusters = true;
-const totalClusters = 0;
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 const addClusterPath = '/path/to/add/cluster';
 const defaultBranchName = 'default-branch';
 
 describe('ClustersViewAllComponent', () => {
   let wrapper;
-  let changeTabSpy;
 
   const event = {
     preventDefault: jest.fn(),
@@ -35,8 +38,8 @@ describe('ClustersViewAllComponent', () => {
   };
 
   const entryData = {
-    loadingClusters,
-    totalClusters,
+    loadingClusters: false,
+    totalClusters: 0,
   };
 
   const findCards = () => wrapper.findAllComponents(GlCard);
@@ -49,9 +52,15 @@ describe('ClustersViewAllComponent', () => {
   const findClustersCardTitle = () => wrapper.findByTestId('clusters-card-title');
   const findFooterButton = (line) => findCards().at(line).findComponent(GlButton);
 
-  beforeEach(() => {
+  const createStore = (initialState) =>
+    new Vuex.Store({
+      state: initialState,
+    });
+
+  const createWrapper = ({ initialState }) => {
     wrapper = shallowMountExtended(ClustersViewAll, {
-      store: ClusterStore(entryData),
+      localVue,
+      store: createStore(initialState),
       propsData,
       provide: provideData,
       directives: {
@@ -59,19 +68,25 @@ describe('ClustersViewAllComponent', () => {
       },
       stubs: { GlCard, GlSprintf },
     });
+  };
 
-    changeTabSpy = jest.spyOn(wrapper.vm, 'changeTab');
+  beforeEach(() => {
+    createWrapper({ initialState: entryData });
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('should render 2 cards', () => {
-    expect(findCards().length).toBe(2);
-  });
-
   describe('when agents and clusters are not loaded', () => {
+    const initialState = {
+      loadingClusters: true,
+      totalClusters: 0,
+    };
+    beforeEach(() => {
+      createWrapper({ initialState });
+    });
+
     it('should show the loading icon', () => {
       expect(findLoadingIcon().exists()).toBe(true);
     });
@@ -79,7 +94,6 @@ describe('ClustersViewAllComponent', () => {
 
   describe('when both agents and clusters are loaded', () => {
     beforeEach(() => {
-      wrapper.vm.$store.state.loadingClusters = false;
       findAgentsComponent().vm.$emit('onAgentsLoad', 6);
     });
 
@@ -90,6 +104,10 @@ describe('ClustersViewAllComponent', () => {
     it('should make content visible', () => {
       expect(findCardsContainer().isVisible()).toBe(true);
     });
+
+    it('should render 2 cards', () => {
+      expect(findCards().length).toBe(2);
+    });
   });
 
   describe('agents card', () => {
@@ -128,6 +146,7 @@ describe('ClustersViewAllComponent', () => {
     describe('when the agents are present', () => {
       const findFooterLink = () => wrapper.findByTestId('agents-tab-footer-link');
       const agentsNumber = 7;
+
       beforeEach(() => {
         findAgentsComponent().vm.$emit('onAgentsLoad', agentsNumber);
       });
@@ -143,7 +162,7 @@ describe('ClustersViewAllComponent', () => {
         expect(findFooterLink().text()).toBe(
           sprintf(AGENT_CARD_INFO.footerText, { number: agentsNumber }),
         );
-        expect(findFooterLink().attributes('href')).toBe('?tab=agent');
+        expect(findFooterLink().attributes('href')).toBe(`?tab=${AGENT}`);
       });
 
       describe('when clicking on the footer link', () => {
@@ -152,7 +171,7 @@ describe('ClustersViewAllComponent', () => {
         });
 
         it('should trigger tab change', () => {
-          expect(changeTabSpy).toHaveBeenCalledWith(event, 'agent');
+          expect(wrapper.emitted('changeTab')).toEqual([[AGENT]]);
         });
       });
     });
@@ -183,9 +202,15 @@ describe('ClustersViewAllComponent', () => {
 
     describe('when the clusters are present', () => {
       const findFooterLink = () => wrapper.findByTestId('clusters-tab-footer-link');
+
       const clustersNumber = 7;
+      const initialState = {
+        loadingClusters: false,
+        totalClusters: clustersNumber,
+      };
+
       beforeEach(() => {
-        wrapper.vm.$store.state.totalClusters = clustersNumber;
+        createWrapper({ initialState });
       });
 
       it('should show the correct title', () => {
@@ -210,7 +235,7 @@ describe('ClustersViewAllComponent', () => {
         });
 
         it('should trigger tab change', () => {
-          expect(changeTabSpy).toHaveBeenCalledWith(event, 'certificate_based');
+          expect(wrapper.emitted('changeTab')).toEqual([[CERTIFICATE_BASED]]);
         });
       });
     });
diff --git a/spec/frontend/clusters_list/mocks/apollo.js b/spec/frontend/clusters_list/mocks/apollo.js
index eeed494883f179..1a7ef84a6d9091 100644
--- a/spec/frontend/clusters_list/mocks/apollo.js
+++ b/spec/frontend/clusters_list/mocks/apollo.js
@@ -16,6 +16,7 @@ const pageInfo = {
   hasPreviousPage: false,
   startCursor: '',
 };
+const count = 1;
 
 export const createAgentResponse = {
   data: {
@@ -64,7 +65,7 @@ export const createAgentTokenErrorResponse = {
 export const getAgentResponse = {
   data: {
     project: {
-      clusterAgents: { nodes: [{ ...agent, tokens }], pageInfo },
+      clusterAgents: { nodes: [{ ...agent, tokens }], pageInfo, count },
       repository: {
         tree: {
           trees: { nodes: [{ ...agent, path: null }], pageInfo },
-- 
GitLab


From 097048e2619836d9d93ae119cc74b670284aca58 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Fri, 12 Nov 2021 14:50:29 +0200
Subject: [PATCH 10/12] Fixed card titles

Changed card titlesto reflect agent registered count change
---
 .../components/clusters_main_view.vue         |  7 ++-
 .../components/clusters_view_all.vue          | 49 +++++++++----------
 .../components/install_agent_modal.vue        |  8 ++-
 .../clusters_list/graphql/cache_update.js     |  1 +
 .../components/clusters_main_view_spec.js     | 18 ++++++-
 .../components/install_agent_modal_spec.js    |  2 +
 6 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
index 3412576b81bd91..9e03093aa67738 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlTabs, GlTab } from '@gitlab/ui';
-import { CLUSTERS_TABS } from '../constants';
+import { CLUSTERS_TABS, MAX_CLUSTERS_LIST, MAX_LIST_COUNT, AGENT } from '../constants';
 import Agents from './agents.vue';
 import InstallAgentModal from './install_agent_modal.vue';
 import ClustersActions from './clusters_actions.vue';
@@ -28,11 +28,14 @@ export default {
   data() {
     return {
       selectedTabIndex: 0,
+      maxAgents: MAX_CLUSTERS_LIST,
     };
   },
   methods: {
     onTabChange(tabName) {
       this.selectedTabIndex = CLUSTERS_TABS.findIndex((tab) => tab.queryParamValue === tabName);
+
+      this.maxAgents = tabName === AGENT ? MAX_LIST_COUNT : MAX_CLUSTERS_LIST;
     },
   },
 };
@@ -65,6 +68,6 @@ export default {
       </template>
     </gl-tabs>
 
-    <install-agent-modal :default-branch-name="defaultBranchName" />
+    <install-agent-modal :default-branch-name="defaultBranchName" :max-agents="maxAgents" />
   </div>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index e8261527afb899..5b2ed91a76aa1c 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -11,8 +11,6 @@ import {
 import { mapState } from 'vuex';
 import { sprintf } from '~/locale';
 import {
-  AGENT,
-  CERTIFICATE_BASED,
   AGENT_CARD_INFO,
   CERTIFICATE_BASED_CARD_INFO,
   MAX_CLUSTERS_LIST,
@@ -35,8 +33,6 @@ export default {
   directives: {
     GlModalDirective,
   },
-  AGENT,
-  CERTIFICATE_BASED,
   AGENT_CARD_INFO,
   CERTIFICATE_BASED_CARD_INFO,
   MAX_CLUSTERS_LIST,
@@ -60,33 +56,34 @@ export default {
     isLoading() {
       return this.loadingAgents || this.loadingClusters;
     },
-  },
-  methods: {
-    cardTitle(card) {
-      let clustersNumber;
-      let title;
-      let emptyTitle;
+    agentsCardTitle() {
       let cardTitle;
-
-      if (card === AGENT) {
-        clustersNumber = this.totalAgents;
-        title = AGENT_CARD_INFO.title;
-        emptyTitle = AGENT_CARD_INFO.emptyTitle;
-      } else if (card === CERTIFICATE_BASED) {
-        clustersNumber = this.totalClusters;
-        title = CERTIFICATE_BASED_CARD_INFO.title;
-        emptyTitle = CERTIFICATE_BASED_CARD_INFO.emptyTitle;
+      if (this.totalAgents > 0) {
+        cardTitle = sprintf(AGENT_CARD_INFO.title, {
+          number: this.totalAgents < MAX_CLUSTERS_LIST ? this.totalAgents : MAX_CLUSTERS_LIST,
+          total: this.totalAgents,
+        });
+      } else {
+        cardTitle = AGENT_CARD_INFO.emptyTitle;
       }
-      if (clustersNumber > 0) {
-        cardTitle = sprintf(title, {
-          number: clustersNumber < MAX_CLUSTERS_LIST ? clustersNumber : MAX_CLUSTERS_LIST,
-          total: clustersNumber,
+
+      return cardTitle;
+    },
+    clustersCardTitle() {
+      let cardTitle;
+      if (this.totalClusters > 0) {
+        cardTitle = sprintf(CERTIFICATE_BASED_CARD_INFO.title, {
+          number: this.totalClusters < MAX_CLUSTERS_LIST ? this.totalClusters : MAX_CLUSTERS_LIST,
+          total: this.totalClusters,
         });
       } else {
-        cardTitle = emptyTitle;
+        cardTitle = CERTIFICATE_BASED_CARD_INFO.emptyTitle;
       }
+
       return cardTitle;
     },
+  },
+  methods: {
     cardFooterNumber(number) {
       return number > MAX_CLUSTERS_LIST ? number : '';
     },
@@ -112,7 +109,7 @@ export default {
       >
         <template #header>
           <h3 data-testid="agent-card-title" class="gl-my-0 gl-font-weight-normal gl-font-size-h2">
-            {{ cardTitle($options.AGENT) }}
+            {{ agentsCardTitle }}
           </h3>
 
           <span
@@ -180,7 +177,7 @@ export default {
             class="gl-my-1 gl-font-weight-normal gl-font-size-h2"
             data-testid="clusters-card-title"
           >
-            {{ cardTitle($options.CERTIFICATE_BASED) }}
+            {{ clustersCardTitle }}
           </h3>
         </template>
 
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 0efd3844cc94dc..6eb2e85eceab25 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -12,7 +12,7 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 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, MAX_LIST_COUNT } from '../constants';
+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';
@@ -41,6 +41,10 @@ export default {
       required: false,
       type: String,
     },
+    maxAgents: {
+      required: true,
+      type: Number,
+    },
   },
   data() {
     return {
@@ -75,7 +79,7 @@ export default {
     getAgentsQueryVariables() {
       return {
         defaultBranchName: this.defaultBranchName,
-        first: MAX_LIST_COUNT,
+        first: this.maxAgents,
         last: null,
         projectPath: this.projectPath,
       };
diff --git a/app/assets/javascripts/clusters_list/graphql/cache_update.js b/app/assets/javascripts/clusters_list/graphql/cache_update.js
index ce6daecc908220..dd633820952d67 100644
--- a/app/assets/javascripts/clusters_list/graphql/cache_update.js
+++ b/app/assets/javascripts/clusters_list/graphql/cache_update.js
@@ -17,6 +17,7 @@ export function addAgentToStore(store, createClusterAgent, query, variables) {
     };
 
     draftData.project.clusterAgents.nodes.push(clusterAgent);
+    draftData.project.clusterAgents.count += 1;
     draftData.project.repository.tree.trees.nodes.push(configuration);
   });
 
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
index 2e71616ce34f32..c2233e5d39c2fd 100644
--- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -1,7 +1,14 @@
 import { GlTabs, GlTab } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ClustersMainView from '~/clusters_list/components/clusters_main_view.vue';
-import { AGENT, CERTIFICATE_BASED, CLUSTERS_TABS } from '~/clusters_list/constants';
+import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
+import {
+  AGENT,
+  CERTIFICATE_BASED,
+  CLUSTERS_TABS,
+  MAX_CLUSTERS_LIST,
+  MAX_LIST_COUNT,
+} from '~/clusters_list/constants';
 
 const defaultBranchName = 'default-branch';
 
@@ -26,6 +33,7 @@ describe('ClustersMainViewComponent', () => {
   const findAllTabs = () => wrapper.findAllComponents(GlTab);
   const findGlTabAtIndex = (index) => findAllTabs().at(index);
   const findComponent = () => wrapper.findByTestId('clusters-tab-component');
+  const findModal = () => wrapper.findComponent(InstallAgentModal);
 
   it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', () => {
     expect(findTabs().exists()).toBe(true);
@@ -40,6 +48,10 @@ describe('ClustersMainViewComponent', () => {
     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
@@ -62,5 +74,9 @@ describe('ClustersMainViewComponent', () => {
     it('changes the tab', () => {
       expect(findTabs().attributes('value')).toBe('1');
     });
+
+    it('passes correct max-agents param to the modal', () => {
+      expect(findModal().props('maxAgents')).toBe(MAX_LIST_COUNT);
+    });
   });
 });
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 89c99bb260e0dd..6c2ea45b99bcc3 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -24,6 +24,7 @@ localVue.use(VueApollo);
 
 const projectPath = 'path/to/project';
 const defaultBranchName = 'default';
+const maxAgents = MAX_LIST_COUNT;
 
 describe('InstallAgentModal', () => {
   let wrapper;
@@ -56,6 +57,7 @@ describe('InstallAgentModal', () => {
 
     const propsData = {
       defaultBranchName,
+      maxAgents,
     };
 
     wrapper = shallowMount(InstallAgentModal, {
-- 
GitLab


From d952d686bd5a522d498592867b40d4ee84368935 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Mon, 15 Nov 2021 13:26:00 +0200
Subject: [PATCH 11/12] Implemented changes after the FE review

---
 .../components/agent_empty_state.vue          |  4 +-
 .../clusters_list/components/agents.vue       |  4 +-
 .../clusters_list/components/clusters.vue     |  4 +-
 .../components/clusters_empty_state.vue       |  4 +-
 .../components/clusters_view_all.vue          | 45 ++++++++++++-------
 app/assets/stylesheets/pages/clusters.scss    |  6 ---
 locale/gitlab.pot                             |  6 +++
 .../components/clusters_empty_state_spec.js   |  6 +--
 .../components/clusters_view_all_spec.js      |  4 +-
 9 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 8a2654bfac47d8..17002bc8f57db7 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -30,7 +30,7 @@ export default {
       type: Boolean,
       required: true,
     },
-    childComponent: {
+    isChildComponent: {
       default: false,
       required: false,
       type: Boolean,
@@ -97,7 +97,7 @@ export default {
 
     <template #actions>
       <gl-button
-        v-if="!childComponent"
+        v-if="!isChildComponent"
         v-gl-modal-directive="$options.modalId"
         :disabled="!hasConfigurations"
         data-testid="integration-primary-button"
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index d91c5f3b3e5209..fb5cf7d120648d 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -39,7 +39,7 @@ export default {
       required: false,
       type: String,
     },
-    childComponent: {
+    isChildComponent: {
       default: false,
       required: false,
       type: Boolean,
@@ -164,7 +164,7 @@ export default {
     <agent-empty-state
       v-else
       :has-configurations="hasConfigurations"
-      :child-component="childComponent"
+      :is-child-component="isChildComponent"
     />
   </section>
 
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index e2d073a8c854aa..9c330045596e92 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -35,7 +35,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
-    childComponent: {
+    isChildComponent: {
       default: false,
       required: false,
       type: Boolean,
@@ -328,7 +328,7 @@ export default {
       </template>
     </gl-table>
 
-    <clusters-empty-state v-else :child-component="childComponent" />
+    <clusters-empty-state v-else :is-child-component="isChildComponent" />
 
     <gl-pagination
       v-if="hasClustersPerPage && !limit"
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
index 762b2f7290e1c3..3879af6e9cb94f 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -14,7 +14,7 @@ export default {
   },
   inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
   props: {
-    childComponent: {
+    isChildComponent: {
       default: false,
       required: false,
       type: Boolean,
@@ -61,7 +61,7 @@ export default {
 
     <template #actions>
       <gl-button
-        v-if="!childComponent"
+        v-if="!isChildComponent"
         data-testid="integration-primary-button"
         data-qa-selector="add_kubernetes_cluster_link"
         category="primary"
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index 5b2ed91a76aa1c..acd686f59eb22c 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -5,11 +5,11 @@ import {
   GlPopover,
   GlLink,
   GlButton,
+  GlBadge,
   GlLoadingIcon,
   GlModalDirective,
 } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import { sprintf } from '~/locale';
 import {
   AGENT_CARD_INFO,
   CERTIFICATE_BASED_CARD_INFO,
@@ -26,6 +26,7 @@ export default {
     GlPopover,
     GlLink,
     GlButton,
+    GlBadge,
     GlLoadingIcon,
     Clusters,
     Agents,
@@ -59,12 +60,15 @@ export default {
     agentsCardTitle() {
       let cardTitle;
       if (this.totalAgents > 0) {
-        cardTitle = sprintf(AGENT_CARD_INFO.title, {
+        cardTitle = {
+          message: AGENT_CARD_INFO.title,
           number: this.totalAgents < MAX_CLUSTERS_LIST ? this.totalAgents : MAX_CLUSTERS_LIST,
           total: this.totalAgents,
-        });
+        };
       } else {
-        cardTitle = AGENT_CARD_INFO.emptyTitle;
+        cardTitle = {
+          message: AGENT_CARD_INFO.emptyTitle,
+        };
       }
 
       return cardTitle;
@@ -72,12 +76,15 @@ export default {
     clustersCardTitle() {
       let cardTitle;
       if (this.totalClusters > 0) {
-        cardTitle = sprintf(CERTIFICATE_BASED_CARD_INFO.title, {
+        cardTitle = {
+          message: CERTIFICATE_BASED_CARD_INFO.title,
           number: this.totalClusters < MAX_CLUSTERS_LIST ? this.totalClusters : MAX_CLUSTERS_LIST,
           total: this.totalClusters,
-        });
+        };
       } else {
-        cardTitle = CERTIFICATE_BASED_CARD_INFO.emptyTitle;
+        cardTitle = {
+          message: CERTIFICATE_BASED_CARD_INFO.emptyTitle,
+        };
       }
 
       return cardTitle;
@@ -109,15 +116,20 @@ export default {
       >
         <template #header>
           <h3 data-testid="agent-card-title" class="gl-my-0 gl-font-weight-normal gl-font-size-h2">
-            {{ agentsCardTitle }}
+            <gl-sprintf :message="agentsCardTitle.message"
+              ><template #number>{{ agentsCardTitle.number }}</template>
+              <template #total>{{ agentsCardTitle.total }}</template>
+            </gl-sprintf>
           </h3>
 
-          <span
+          <gl-badge
             id="clusters-recommended-badge"
             data-testid="clusters-recommended-badge"
-            class="btn button-recommended"
-            >{{ $options.AGENT_CARD_INFO.tooltip.label }}</span
+            size="md"
+            variant="info"
+            >{{ $options.AGENT_CARD_INFO.tooltip.label }}</gl-badge
           >
+
           <gl-popover
             target="clusters-recommended-badge"
             container="viewport"
@@ -140,10 +152,10 @@ export default {
           </gl-popover>
         </template>
 
-        <Agents
+        <agents
           :limit="$options.MAX_CLUSTERS_LIST"
           :default-branch-name="defaultBranchName"
-          :child-component="true"
+          :is-child-component="true"
           @onAgentsLoad="onAgentsLoad"
         />
 
@@ -177,11 +189,14 @@ export default {
             class="gl-my-1 gl-font-weight-normal gl-font-size-h2"
             data-testid="clusters-card-title"
           >
-            {{ clustersCardTitle }}
+            <gl-sprintf :message="clustersCardTitle.message"
+              ><template #number>{{ clustersCardTitle.number }}</template>
+              <template #total>{{ clustersCardTitle.total }}</template>
+            </gl-sprintf>
           </h3>
         </template>
 
-        <clusters :limit="$options.MAX_CLUSTERS_LIST" :child-component="true" />
+        <clusters :limit="$options.MAX_CLUSTERS_LIST" :is-child-component="true" />
 
         <template #footer>
           <gl-link
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 299bb73191d538..b450bca4f41032 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -21,12 +21,6 @@
     }
   }
 
-  .button-recommended {
-    @include gl-text-white;
-    background-color: $purple-500;
-    border-radius: $border-radius-large;
-  }
-
   .gl-card-body {
     @include media-breakpoint-up(sm) {
       @include gl-pt-2;
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6bc4147e77a1f8..263a4d2fe7b15d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7399,6 +7399,12 @@ msgstr ""
 msgid "ClusterAgents|For alternative installation methods %{linkStart}go to the documentation%{linkEnd}."
 msgstr ""
 
+msgid "ClusterAgents|GitLab Agents"
+msgstr ""
+
+msgid "ClusterAgents|GitLab Agents provide an increased level of security when integrating with clusters. %{linkStart}Learn more about the GitLab Kubernetes Agent.%{linkEnd}"
+msgstr ""
+
 msgid "ClusterAgents|Go to the repository"
 msgstr ""
 
diff --git a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
index fcee62e4dba556..f7e1791d0f744a 100644
--- a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
@@ -12,7 +12,7 @@ describe('ClustersEmptyStateComponent', () => {
   let wrapper;
 
   const propsData = {
-    childComponent: false,
+    isChildComponent: false,
   };
 
   const provideData = {
@@ -55,7 +55,7 @@ describe('ClustersEmptyStateComponent', () => {
 
   describe('when the component is loaded as a child component', () => {
     beforeEach(() => {
-      propsData.childComponent = true;
+      propsData.isChildComponent = true;
       wrapper = shallowMountExtended(ClustersEmptyState, {
         store: ClusterStore(entryData),
         propsData,
@@ -64,7 +64,7 @@ describe('ClustersEmptyStateComponent', () => {
     });
 
     afterEach(() => {
-      propsData.childComponent = false;
+      propsData.isChildComponent = false;
     });
 
     it('should not render the action button', () => {
diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
index 4be488e6425c9f..1528dbe0fdf962 100644
--- a/spec/frontend/clusters_list/components/clusters_view_all_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -182,8 +182,8 @@ describe('ClustersViewAllComponent', () => {
       expect(findClustersComponent().props('limit')).toBe(MAX_CLUSTERS_LIST);
     });
 
-    it('should pass the child-component prop', () => {
-      expect(findClustersComponent().props('childComponent')).toBe(true);
+    it('should pass the is-child-component prop', () => {
+      expect(findClustersComponent().props('isChildComponent')).toBe(true);
     });
 
     describe('when there are no clusters', () => {
-- 
GitLab


From f0cad4bfc188433bef51bf1d660754fc9bdbad01 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Mon, 15 Nov 2021 16:02:19 +0200
Subject: [PATCH 12/12] Applied the suggestion after FE review

---
 .../clusters_list/components/agent_empty_state.vue     |  3 ---
 .../clusters_list/components/clusters_view_all.vue     | 10 +++-------
 .../clusters_list/components/clusters_view_all_spec.js |  4 ++--
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 17002bc8f57db7..af44a23b4b393e 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -11,9 +11,6 @@ export default {
   getStartedDocsUrl: helpPagePath('user/clusters/agent/index', {
     anchor: 'define-a-configuration-repository',
   }),
-  integrationsDocsUrl: helpPagePath('user/clusters/agent/index', {
-    anchor: 'get-started-with-gitops-and-the-gitlab-agent',
-  }),
   components: {
     GlButton,
     GlEmptyState,
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index acd686f59eb22c..48a1944fde38dd 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -122,13 +122,9 @@ export default {
             </gl-sprintf>
           </h3>
 
-          <gl-badge
-            id="clusters-recommended-badge"
-            data-testid="clusters-recommended-badge"
-            size="md"
-            variant="info"
-            >{{ $options.AGENT_CARD_INFO.tooltip.label }}</gl-badge
-          >
+          <gl-badge id="clusters-recommended-badge" size="md" variant="info">{{
+            $options.AGENT_CARD_INFO.tooltip.label
+          }}</gl-badge>
 
           <gl-popover
             target="clusters-recommended-badge"
diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
index 1528dbe0fdf962..6ef56beddee0d3 100644
--- a/spec/frontend/clusters_list/components/clusters_view_all_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -1,4 +1,4 @@
-import { GlCard, GlLoadingIcon, GlButton, GlSprintf } from '@gitlab/ui';
+import { GlCard, GlLoadingIcon, GlButton, GlSprintf, GlBadge } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -48,7 +48,7 @@ describe('ClustersViewAllComponent', () => {
   const findClustersComponent = () => wrapper.findComponent(Clusters);
   const findCardsContainer = () => wrapper.findByTestId('clusters-cards-container');
   const findAgentCardTitle = () => wrapper.findByTestId('agent-card-title');
-  const findRecommendedBadge = () => wrapper.findByTestId('clusters-recommended-badge');
+  const findRecommendedBadge = () => wrapper.findComponent(GlBadge);
   const findClustersCardTitle = () => wrapper.findByTestId('clusters-card-title');
   const findFooterButton = (line) => findCards().at(line).findComponent(GlButton);
 
-- 
GitLab