From 0c7f5391a959a7c22b9ed19c0472a7938f362003 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 12 Oct 2021 19:14:24 +0300
Subject: [PATCH 1/3] Change the Kubernetes section UX

Now that we want to encourage our customers to use the GitLab Agent,
we are changing the Kubernetes section UX:
- adding 3 tabs on the top of the page
- adding 'All' tab to show both Kubernetes options in 1 view
- adding the actions button that is constant across the tabs
- updating the tabs to have unique permalinks (via query parameters)

Changelog: changed
---
 .../components/agent_empty_state.vue          |  53 ++---
 .../clusters_list/components/agent_table.vue  | 167 ++++++--------
 .../clusters_list/components/agents.vue       |  27 ++-
 .../clusters_list/components/clusters.vue     |  38 +++-
 .../components/clusters_actions.vue           |  49 ++++
 .../components/clusters_empty_state.vue       |  79 +++++++
 .../components/clusters_main_view.vue         |  71 ++++++
 .../components/clusters_view_all.vue          | 209 +++++++++++++++++
 .../components/install_agent_modal.vue        |   5 +-
 .../javascripts/clusters_list/constants.js    |  47 ++++
 .../javascripts/clusters_list/eventhub.js     |   3 +
 .../graphql/queries/get_agents.query.graphql  |   2 +
 app/assets/javascripts/clusters_list/index.js |   4 +-
 .../javascripts/clusters_list/load_agents.js  |  44 ----
 .../clusters_list/load_clusters.js            |   5 +
 .../clusters_list/load_main_view.js           |  57 +++++
 .../clusters_list/store/actions.js            |  16 +-
 .../clusters_list/store/mutation_types.js     |   1 +
 .../clusters_list/store/mutations.js          |   5 +-
 .../javascripts/clusters_list/store/state.js  |   7 +-
 app/assets/stylesheets/pages/clusters.scss    |  18 ++
 app/helpers/clusters_helper.rb                |  38 ++--
 .../clusters/clusters/_cluster_list.html.haml |  19 +-
 .../clusters/clusters/_empty_state.html.haml  |  14 --
 app/views/clusters/clusters/index.html.haml   |  20 +-
 app/views/clusters/clusters/new.html.haml     |   2 +-
 .../features/clusters/create_agent_spec.rb    |   5 +-
 .../features/projects/cluster_agents_spec.rb  |   6 +-
 locale/gitlab.pot                             |  88 +++++--
 .../infrastructure/kubernetes/index.rb        |   2 +-
 .../components/agent_empty_state_spec.js      |  14 +-
 .../components/agent_table_spec.js            |   6 +-
 .../clusters_list/components/agents_spec.js   |  43 +++-
 .../components/clusters_actions_spec.js       |  55 +++++
 .../components/clusters_empty_state_spec.js   |  79 +++++++
 .../components/clusters_main_view_spec.js     |  66 ++++++
 .../clusters_list/components/clusters_spec.js |  59 +++--
 .../components/clusters_view_all_spec.js      | 214 ++++++++++++++++++
 .../clusters_list/store/mutations_spec.js     |  10 +-
 spec/helpers/clusters_helper_spec.rb          |  38 +++-
 40 files changed, 1354 insertions(+), 331 deletions(-)
 create mode 100644 app/assets/javascripts/clusters_list/components/clusters_actions.vue
 create mode 100644 app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
 create mode 100644 app/assets/javascripts/clusters_list/components/clusters_main_view.vue
 create mode 100644 app/assets/javascripts/clusters_list/components/clusters_view_all.vue
 create mode 100644 app/assets/javascripts/clusters_list/eventhub.js
 delete mode 100644 app/assets/javascripts/clusters_list/load_agents.js
 create mode 100644 app/assets/javascripts/clusters_list/load_main_view.js
 delete mode 100644 app/views/clusters/clusters/_empty_state.html.haml
 create mode 100644 spec/frontend/clusters_list/components/clusters_actions_spec.js
 create mode 100644 spec/frontend/clusters_list/components/clusters_empty_state_spec.js
 create mode 100644 spec/frontend/clusters_list/components/clusters_main_view_spec.js
 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 405339b3d365cf..4afcdff47f3290 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -17,7 +17,7 @@ export default {
   inject: [
     'emptyStateImage',
     'projectPath',
-    'agentDocsUrl',
+    'multipleClustersDocsUrl',
     'installDocsUrl',
     'getStartedDocsUrl',
     'integrationDocsUrl',
@@ -37,22 +37,29 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state
-    :svg-path="emptyStateImage"
-    :title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')"
-    class="empty-state--agent"
-  >
+  <gl-empty-state :svg-path="emptyStateImage" title="" class="empty-state--agent">
     <template #description>
-      <p class="mw-460 gl-mx-auto">
+      <p class="mw-460 gl-mx-auto gl-text-left">
+        {{
+          s__(
+            'ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more.',
+          )
+        }}
+      </p>
+      <p class="mw-460 gl-mx-auto gl-text-left">
         <gl-sprintf
           :message="
             s__(
-              'ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}',
+              'ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
             )
           "
         >
           <template #link="{ content }">
-            <gl-link :href="agentDocsUrl" target="_blank" data-testid="agent-docs-link">
+            <gl-link
+              :href="multipleClustersDocsUrl"
+              target="_blank"
+              data-testid="multiple-clusters-docs-link"
+            >
               {{ content }}
             </gl-link>
           </template>
@@ -60,19 +67,9 @@ export default {
       </p>
 
       <p class="mw-460 gl-mx-auto">
-        <gl-sprintf
-          :message="
-            s__(
-              'ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}',
-            )
-          "
-        >
-          <template #link="{ content }">
-            <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
-              {{ content }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
+        <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
+          {{ s__('ClusterAgents|Learn more about the GitLab Kubernetes Agent.') }}
+        </gl-link>
       </p>
 
       <gl-alert
@@ -103,17 +100,5 @@ export default {
         </template>
       </gl-alert>
     </template>
-
-    <template #actions>
-      <gl-button
-        v-gl-modal-directive="$options.modalId"
-        :disabled="!hasConfigurations"
-        data-testid="integration-primary-button"
-        category="primary"
-        variant="success"
-      >
-        {{ s__('ClusterAgents|Integrate with the GitLab Agent') }}
-      </gl-button>
-    </template>
   </gl-empty-state>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 487e512c06d50f..49d87d8f99777f 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -1,22 +1,12 @@
 <script>
-import {
-  GlButton,
-  GlLink,
-  GlModalDirective,
-  GlTable,
-  GlIcon,
-  GlSprintf,
-  GlTooltip,
-  GlPopover,
-} from '@gitlab/ui';
+import { GlLink, GlTable, GlIcon, GlSprintf, GlTooltip, GlPopover } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES, TROUBLESHOOTING_LINK } from '../constants';
+import { AGENT_STATUSES, TROUBLESHOOTING_LINK } from '../constants';
 
 export default {
   components: {
-    GlButton,
     GlLink,
     GlTable,
     GlIcon,
@@ -25,12 +15,8 @@ export default {
     GlPopover,
     TimeAgoTooltip,
   },
-  directives: {
-    GlModalDirective,
-  },
   mixins: [timeagoMixin],
   inject: ['integrationDocsUrl'],
-  INSTALL_AGENT_MODAL_ID,
   AGENT_STATUSES,
   TROUBLESHOOTING_LINK,
   props: {
@@ -65,88 +51,77 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div class="gl-display-block gl-text-right gl-my-3">
-      <gl-button
-        v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-        variant="confirm"
-        category="primary"
-        >{{ s__('ClusterAgents|Install a new GitLab Agent') }}
-      </gl-button>
-    </div>
-
-    <gl-table
-      :items="agents"
-      :fields="fields"
-      stacked="md"
-      head-variant="white"
-      thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
-      data-testid="cluster-agent-list-table"
-    >
-      <template #cell(name)="{ item }">
-        <gl-link :href="item.webPath" data-testid="cluster-agent-name-link">
-          {{ item.name }}
-        </gl-link>
-      </template>
+  <gl-table
+    :items="agents"
+    :fields="fields"
+    stacked="md"
+    head-variant="white"
+    thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
+    data-testid="cluster-agent-list-table"
+  >
+    <template #cell(name)="{ item }">
+      <gl-link :href="item.webPath" data-testid="cluster-agent-name-link">
+        {{ item.name }}
+      </gl-link>
+    </template>
 
-      <template #cell(status)="{ item }">
-        <span
-          :id="`connection-status-${item.name}`"
-          class="gl-pr-5"
-          data-testid="cluster-agent-connection-status"
-        >
-          <span :class="$options.AGENT_STATUSES[item.status].class" class="gl-mr-3">
-            <gl-icon :name="$options.AGENT_STATUSES[item.status].icon" :size="12" /></span
-          >{{ $options.AGENT_STATUSES[item.status].name }}
-        </span>
-        <gl-tooltip
-          v-if="item.status === 'active'"
-          :target="`connection-status-${item.name}`"
-          placement="right"
-        >
-          <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.title"
-            ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template>
-          </gl-sprintf>
-        </gl-tooltip>
-        <gl-popover
-          v-else
-          :target="`connection-status-${item.name}`"
-          :title="$options.AGENT_STATUSES[item.status].tooltip.title"
-          placement="right"
-          container="viewport"
-        >
-          <p>
-            <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.body"
-              ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template></gl-sprintf
-            >
-          </p>
-          <p class="gl-mb-0">
-            {{ s__('ClusterAgents|For more troubleshooting information go to') }}
-            <gl-link :href="$options.TROUBLESHOOTING_LINK" target="_blank" class="gl-font-sm">
-              {{ $options.TROUBLESHOOTING_LINK }}</gl-link
-            >
-          </p>
-        </gl-popover>
-      </template>
+    <template #cell(status)="{ item }">
+      <span
+        :id="`connection-status-${item.name}`"
+        class="gl-md-pr-5"
+        data-testid="cluster-agent-connection-status"
+      >
+        <span :class="$options.AGENT_STATUSES[item.status].class" class="gl-mr-3">
+          <gl-icon :name="$options.AGENT_STATUSES[item.status].icon" :size="12" /></span
+        >{{ $options.AGENT_STATUSES[item.status].name }}
+      </span>
+      <gl-tooltip
+        v-if="item.status === 'active'"
+        :target="`connection-status-${item.name}`"
+        placement="right"
+      >
+        <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.title"
+          ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template>
+        </gl-sprintf>
+      </gl-tooltip>
+      <gl-popover
+        v-else
+        :target="`connection-status-${item.name}`"
+        :title="$options.AGENT_STATUSES[item.status].tooltip.title"
+        placement="right"
+        container="viewport"
+      >
+        <p>
+          <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.body"
+            ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template></gl-sprintf
+          >
+        </p>
+        <p class="gl-mb-0">
+          {{ s__('ClusterAgents|For more troubleshooting information go to') }}
+          <gl-link :href="$options.TROUBLESHOOTING_LINK" target="_blank" class="gl-font-sm">
+            {{ $options.TROUBLESHOOTING_LINK }}</gl-link
+          >
+        </p>
+      </gl-popover>
+    </template>
 
-      <template #cell(lastContact)="{ item }">
-        <span data-testid="cluster-agent-last-contact">
-          <time-ago-tooltip v-if="item.lastContact" :time="item.lastContact" />
-          <span v-else>{{ s__('ClusterAgents|Never') }}</span>
-        </span>
-      </template>
+    <template #cell(lastContact)="{ item }">
+      <span data-testid="cluster-agent-last-contact">
+        <time-ago-tooltip v-if="item.lastContact" :time="item.lastContact" />
+        <span v-else>{{ s__('ClusterAgents|Never') }}</span>
+      </span>
+    </template>
 
-      <template #cell(configuration)="{ item }">
-        <span data-testid="cluster-agent-configuration-link">
-          <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
-          <gl-link v-if="item.configFolder" :href="item.configFolder.webPath">
-            .gitlab/agents/{{ item.name }}
-          </gl-link>
+    <template #cell(configuration)="{ item }">
+      <span data-testid="cluster-agent-configuration-link">
+        <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+        <gl-link v-if="item.configFolder" :href="item.configFolder.webPath">
+          .gitlab/agents/{{ item.name }}
+        </gl-link>
 
-          <span v-else>.gitlab/agents/{{ item.name }}</span>
-          <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
-        </span>
-      </template>
-    </gl-table>
-  </div>
+        <span v-else>.gitlab/agents/{{ item.name }}</span>
+        <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
+      </span>
+    </template>
+  </gl-table>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index ed44c1f5fa795d..9aa07373241885 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -2,9 +2,9 @@
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
 import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
+import eventHub from '../eventhub';
 import AgentEmptyState from './agent_empty_state.vue';
 import AgentTable from './agent_table.vue';
-import InstallAgentModal from './install_agent_modal.vue';
 
 export default {
   apollo: {
@@ -21,12 +21,14 @@ export default {
         this.updateTreeList(data);
         return data;
       },
+      result() {
+        this.emitAgentsLoaded();
+      },
     },
   },
   components: {
     AgentEmptyState,
     AgentTable,
-    InstallAgentModal,
     GlAlert,
     GlKeysetPagination,
     GlLoadingIcon,
@@ -38,11 +40,16 @@ export default {
       required: false,
       type: String,
     },
+    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: {},
@@ -70,7 +77,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 || {};
@@ -79,6 +86,9 @@ export default {
       return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
     },
   },
+  mounted() {
+    eventHub.$on('agentRegistered', this.reloadAgents);
+  },
   methods: {
     reloadAgents() {
       this.$apollo.queries.agents.refetch();
@@ -130,14 +140,18 @@ export default {
       }
       return 'unused';
     },
+    emitAgentsLoaded() {
+      const count = this.agents?.project?.clusterAgents?.count;
+      this.$emit('onAgentsLoad', count);
+    },
   },
 };
 </script>
 
 <template>
-  <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" />
+  <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-5" />
 
-  <section v-else-if="agentList" class="gl-mt-3">
+  <section v-else-if="agentList" class="gl-mt-5">
     <div v-if="agentList.length">
       <AgentTable :agents="agentList" />
 
@@ -147,7 +161,6 @@ export default {
     </div>
 
     <AgentEmptyState v-else :has-configurations="hasConfigurations" />
-    <InstallAgentModal @agentRegistered="reloadAgents" />
   </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 0d1534d20e066c..7ca0a639ee35e0 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -14,6 +14,7 @@ import { __, sprintf } from '~/locale';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import AncestorNotice from './ancestor_notice.vue';
 import NodeErrorHelpText from './node_error_help_text.vue';
+import ClustersEmptyState from './clusters_empty_state.vue';
 
 export default {
   nodeMemoryText: __('%{totalMemory} (%{freeSpacePercentage}%{percentSymbol} free)'),
@@ -28,10 +29,23 @@ export default {
     GlSprintf,
     GlTable,
     NodeErrorHelpText,
+    ClustersEmptyState,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  props: {
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    limit: {
+      default: null,
+      required: false,
+      type: Number,
+    },
+  },
   computed: {
     ...mapState([
       'clusters',
@@ -40,7 +54,7 @@ export default {
       'loadingNodes',
       'page',
       'providers',
-      'totalCulsters',
+      'totalClusters',
     ]),
     contentAlignClasses() {
       return 'gl-display-flex gl-align-items-center gl-justify-content-end gl-justify-content-md-start';
@@ -83,15 +97,22 @@ export default {
         },
       ];
     },
-    hasClusters() {
+    hasClustersPerPage() {
       return this.clustersPerPage > 0;
     },
+    hasClusters() {
+      return this.totalClusters > 0;
+    },
   },
   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;
@@ -196,12 +217,13 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loadingClusters" size="md" class="gl-mt-3" />
+  <gl-loading-icon v-if="loadingClusters" size="md" class="gl-mt-5" />
 
-  <section v-else>
+  <section v-else class="gl-mt-5">
     <ancestor-notice />
 
     <gl-table
+      v-if="hasClusters"
       :items="clusters"
       :fields="fields"
       stacked="md"
@@ -298,11 +320,13 @@ export default {
       </template>
     </gl-table>
 
+    <ClustersEmptyState v-else :child-component="childComponent" />
+
     <gl-pagination
-      v-if="hasClusters"
+      v-if="hasClustersPerPage && !limit"
       v-model="currentPage"
       :per-page="clustersPerPage"
-      :total-items="totalCulsters"
+      :total-items="totalClusters"
       :prev-text="__('Prev')"
       :next-text="__('Next')"
       align="center"
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
new file mode 100644
index 00000000000000..2a2943d0567080
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlModalDirective } from '@gitlab/ui';
+import { AGENT_CARD_INFO, INSTALL_AGENT_MODAL_ID } from '../constants';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  inject: ['newClusterPath', 'addClusterPath'],
+  AGENT_CARD_INFO,
+  INSTALL_AGENT_MODAL_ID,
+  methods: {
+    showDropdown() {
+      this.$refs.dropdown.show();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="nav-controls gl-ml-auto">
+    <gl-dropdown
+      ref="dropdown"
+      category="primary"
+      variant="confirm"
+      :text="s__('ClusterAgents|Actions')"
+      split
+      right
+      @click="showDropdown"
+    >
+      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link">
+        {{ s__('ClusterAgents|Create new cluster') }}
+      </gl-dropdown-item>
+      <gl-dropdown-item
+        v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+        data-testid="connect-new-agent-link"
+      >
+        {{ s__('ClusterAgents|Connect with agent') }}
+      </gl-dropdown-item>
+      <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link">
+        {{ s__('ClusterAgents|Connect with certificate') }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
new file mode 100644
index 00000000000000..455eb4f4c527c7
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -0,0 +1,79 @@
+<script>
+import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import { mapState } from 'vuex';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlEmptyState,
+    GlButton,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['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: {
+    ...mapState(['canAddCluster']),
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
+    <template #description>
+      <p class="mw-460 gl-mx-auto gl-text-left">
+        {{
+          s__(
+            'ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way.',
+          )
+        }}
+      </p>
+      <p class="mw-460 gl-mx-auto gl-text-left">
+        <gl-sprintf
+          :message="
+            s__(
+              'ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
+            )
+          "
+        >
+          <template #link="{ content }">
+            <gl-link
+              :href="$options.multipleClustersHelpUrl"
+              target="_blank"
+              data-testid="multiple-clusters-docs-link"
+            >
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+      <p class="mw-460 gl-mx-auto">
+        <gl-link :href="$options.learnMoreHelpUrl" target="_blank" data-testid="clusters-docs-link">
+          {{ s__('ClusterIntegration|Learn more about the GitLab managed clusters') }}
+        </gl-link>
+      </p>
+    </template>
+
+    <template #actions>
+      <gl-button
+        v-if="!childComponent"
+        data-testid="integration-primary-button"
+        data-qa-selector="add_kubernetes_cluster_link"
+        category="primary"
+        variant="confirm"
+        :disabled="!canAddCluster"
+        :href="newClusterPath"
+      >
+        {{ s__('ClusterIntegration|Integrate with a cluster certificate') }}
+      </gl-button>
+    </template>
+  </gl-empty-state>
+</template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
new file mode 100644
index 00000000000000..3e9b87a6fc4f2b
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -0,0 +1,71 @@
+<script>
+import { GlTabs, GlTab } from '@gitlab/ui';
+import { CLUSTERS_TABS } from '../constants';
+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,
+  },
+  CLUSTERS_TABS,
+  props: {
+    defaultBranchName: {
+      default: '.noBranch',
+      required: false,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      selectedTabIndex: 0,
+    };
+  },
+  methods: {
+    onTabChange(tabName) {
+      this.selectedTabIndex = CLUSTERS_TABS.findIndex((tab) => tab.queryParamValue === tabName);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-tabs
+      v-model="selectedTabIndex"
+      sync-active-tab-with-query-params
+      nav-class="gl-flex-grow-1 gl-align-items-center"
+      lazy
+    >
+      <gl-tab
+        v-for="(tab, idx) in $options.CLUSTERS_TABS"
+        :key="idx"
+        :title="tab.title"
+        :query-param-value="tab.queryParamValue"
+        class="gl-line-height-20"
+      >
+        <component
+          :is="tab.component"
+          :default-branch-name="defaultBranchName"
+          :child-component="true"
+          data-testid="clusters-tab-component"
+          @changeTab="onTabChange"
+        />
+      </gl-tab>
+
+      <template #tabs-end>
+        <ClustersActions />
+      </template>
+    </gl-tabs>
+
+    <install-agent-modal />
+  </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
new file mode 100644
index 00000000000000..79db1660f38d58
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -0,0 +1,209 @@
+<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(tab) {
+      this.$emit('changeTab', tab);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-5" />
+    <div
+      data-testid="clusters-cards-container"
+      :class="{
+        'gl-display-none': isLoading,
+      }"
+    >
+      <gl-card
+        class="gl-mt-5"
+        header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between"
+        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>
+
+          <div>
+            <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="top"
+              :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>
+          </div>
+        </template>
+
+        <Agents
+          :limit="$options.MAX_CLUSTERS_LIST"
+          :default-branch-name="defaultBranchName"
+          @onAgentsLoad="onAgentsLoad"
+        />
+
+        <template #footer>
+          <gl-button
+            v-if="!totalAgents"
+            v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+            category="secondary"
+            variant="confirm"
+            >{{ $options.AGENT_CARD_INFO.actionText }}</gl-button
+          >
+          <gl-link
+            v-if="totalAgents"
+            data-testid="agents-tab-footer-link"
+            @click="changeTab('agent')"
+            ><gl-sprintf :message="$options.AGENT_CARD_INFO.footerText"
+              ><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf
+            ></gl-link
+          >
+        </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"
+        footer-class="gl-text-right"
+      >
+        <template #header>
+          <h3
+            class="gl-my-0 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-button
+            v-if="!totalClusters"
+            category="secondary"
+            variant="confirm"
+            :href="addClusterPath"
+            >{{ $options.CERTIFICATE_BASED_CARD_INFO.actionText }}</gl-button
+          >
+          <gl-link
+            v-if="totalClusters"
+            data-testid="clusters-tab-footer-link"
+            @click="changeTab('certificate_based')"
+            ><gl-sprintf :message="$options.CERTIFICATE_BASED_CARD_INFO.footerText"
+              ><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf
+            ></gl-link
+          >
+        </template>
+      </gl-card>
+    </div>
+  </div>
+</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 5f192fe4d5a652..e487eed1981063 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -15,6 +15,7 @@ import { generateAgentRegistrationCommand } from '../clusters_util';
 import { INSTALL_AGENT_MODAL_ID, I18N_INSTALL_AGENT_MODAL } from '../constants';
 import createAgent from '../graphql/mutations/create_agent.mutation.graphql';
 import createAgentToken from '../graphql/mutations/create_agent_token.mutation.graphql';
+import eventHub from '../eventhub';
 import AvailableAgentsDropdown from './available_agents_dropdown.vue';
 
 export default {
@@ -71,11 +72,11 @@ export default {
       this.$refs.modal.hide();
     },
     doneClicked() {
-      this.$emit('agentRegistered');
+      eventHub.$emit('agentRegistered');
       this.$refs.modal.hide();
     },
     resetModal() {
-      this.registering = null;
+      this.registering = false;
       this.agentName = null;
       this.agentToken = null;
       this.error = null;
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 0bade1fc281c73..5508b7dfa5ea1d 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';
@@ -141,3 +142,49 @@ export const AGENT_STATUSES = {
     },
   },
 };
+
+export const AGENT_CARD_INFO = {
+  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__('View all %{number} Agent based integrations')),
+};
+
+export const CERTIFICATE_BASED_CARD_INFO = {
+  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__('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'),
+    /* eslint-disable-next-line @gitlab/require-i18n-strings */
+    component: 'Agents',
+    queryParamValue: 'agent',
+  },
+  {
+    title: s__('ClusterAgents|Certificate based'),
+    /* eslint-disable-next-line @gitlab/require-i18n-strings */
+    component: 'Clusters',
+    queryParamValue: 'certificate_based',
+  },
+];
diff --git a/app/assets/javascripts/clusters_list/eventhub.js b/app/assets/javascripts/clusters_list/eventhub.js
new file mode 100644
index 00000000000000..e31806ad199a11
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/eventhub.js
@@ -0,0 +1,3 @@
+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();
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 61989e00d9e396..56a82f17236de3 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
@@ -26,6 +26,8 @@ query getAgents(
       pageInfo {
         ...PageInfo
       }
+
+      count
     }
 
     repository {
diff --git a/app/assets/javascripts/clusters_list/index.js b/app/assets/javascripts/clusters_list/index.js
index de18965abbd9a0..7f1ef37814b073 100644
--- a/app/assets/javascripts/clusters_list/index.js
+++ b/app/assets/javascripts/clusters_list/index.js
@@ -1,11 +1,11 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import loadClusters from './load_clusters';
-import loadAgents from './load_agents';
+import loadMainView from './load_main_view';
 
 Vue.use(VueApollo);
 
 export default () => {
   loadClusters(Vue);
-  loadAgents(Vue, VueApollo);
+  loadMainView(Vue, VueApollo);
 };
diff --git a/app/assets/javascripts/clusters_list/load_agents.js b/app/assets/javascripts/clusters_list/load_agents.js
deleted file mode 100644
index b77d386df203bd..00000000000000
--- a/app/assets/javascripts/clusters_list/load_agents.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import createDefaultClient from '~/lib/graphql';
-import Agents from './components/agents.vue';
-
-export default (Vue, VueApollo) => {
-  const el = document.querySelector('#js-cluster-agents-list');
-
-  if (!el) {
-    return null;
-  }
-
-  const defaultClient = createDefaultClient({}, { assumeImmutableResults: true });
-
-  const {
-    emptyStateImage,
-    defaultBranchName,
-    projectPath,
-    agentDocsUrl,
-    installDocsUrl,
-    getStartedDocsUrl,
-    integrationDocsUrl,
-    kasAddress,
-  } = el.dataset;
-
-  return new Vue({
-    el,
-    apolloProvider: new VueApollo({ defaultClient }),
-    provide: {
-      emptyStateImage,
-      projectPath,
-      agentDocsUrl,
-      installDocsUrl,
-      getStartedDocsUrl,
-      integrationDocsUrl,
-      kasAddress,
-    },
-    render(createElement) {
-      return createElement(Agents, {
-        props: {
-          defaultBranchName,
-        },
-      });
-    },
-  });
-};
diff --git a/app/assets/javascripts/clusters_list/load_clusters.js b/app/assets/javascripts/clusters_list/load_clusters.js
index 014302308793c4..4cf48581d5705b 100644
--- a/app/assets/javascripts/clusters_list/load_clusters.js
+++ b/app/assets/javascripts/clusters_list/load_clusters.js
@@ -7,9 +7,14 @@ export default (Vue) => {
   if (!el) {
     return null;
   }
+  const { clustersEmptyStateImage, newClusterPath } = el.dataset;
 
   return new Vue({
     el,
+    provide: {
+      clustersEmptyStateImage,
+      newClusterPath,
+    },
     store: createStore(el.dataset),
     render(createElement) {
       return createElement(Clusters);
diff --git a/app/assets/javascripts/clusters_list/load_main_view.js b/app/assets/javascripts/clusters_list/load_main_view.js
new file mode 100644
index 00000000000000..224683e29ea48f
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/load_main_view.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import ClustersMainView from './components/clusters_main_view.vue';
+import { createStore } from './store';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
+});
+
+export default () => {
+  const el = document.querySelector('.js-clusters-main-view');
+
+  if (!el) {
+    return false;
+  }
+
+  const {
+    emptyStateImage,
+    defaultBranchName,
+    projectPath,
+    multipleClustersDocsUrl,
+    installDocsUrl,
+    getStartedDocsUrl,
+    integrationDocsUrl,
+    kasAddress,
+    newClusterPath,
+    addClusterPath,
+    clustersEmptyStateImage,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      emptyStateImage,
+      projectPath,
+      multipleClustersDocsUrl,
+      installDocsUrl,
+      getStartedDocsUrl,
+      integrationDocsUrl,
+      kasAddress,
+      newClusterPath,
+      addClusterPath,
+      clustersEmptyStateImage,
+    },
+    store: createStore(el.dataset),
+    render: (createElement) =>
+      createElement(ClustersMainView, {
+        props: {
+          defaultBranchName,
+        },
+      }),
+  });
+};
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 5f35a0b26f3034..d70b36e63bc9b0 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -3,7 +3,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import { MAX_REQUESTS } from '../constants';
 import * as types from './mutation_types';
 
@@ -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',
@@ -65,7 +71,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
       commit(types.SET_LOADING_CLUSTERS, false);
       commit(types.SET_LOADING_NODES, false);
       createFlash({
-        message: __('Clusters|An error occurred while loading clusters'),
+        message: s__('Clusters|An error occurred while loading clusters'),
       });
 
       dispatch('reportSentryError', { error: response, tag: 'fetchClustersErrorCallback' });
@@ -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 5b462928518594..93156c9200fbba 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -12,10 +12,13 @@ export default {
       clusters: data.clusters,
       clustersPerPage: paginationInformation.perPage,
       hasAncestorClusters: data.has_ancestor_clusters,
-      totalCulsters: paginationInformation.total,
+      totalClusters: paginationInformation.total,
     });
   },
   [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 51fafd49479fbd..763d7389d0f22d 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -1,9 +1,11 @@
+import { parseBoolean } from '~/lib/utils/common_utils';
+
 export default (initialState = {}) => ({
   ancestorHelperPath: initialState.ancestorHelpPath,
   endpoint: initialState.endpoint,
   hasAncestorClusters: false,
   clusters: [],
-  clustersPerPage: 0,
+  clustersPerPage: 20,
   loadingClusters: true,
   loadingNodes: true,
   page: 1,
@@ -12,5 +14,6 @@ export default (initialState = {}) => ({
     default: { path: initialState.imgTagsDefaultPath, text: initialState.imgTagsDefaultText },
     gcp: { path: initialState.imgTagsGcpPath, text: initialState.imgTagsGcpText },
   },
-  totalCulsters: 0,
+  totalClusters: 0,
+  canAddCluster: parseBoolean(initialState.canAddCluster),
 });
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index de27ca2e5e86e6..2462fcacebf0c1 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -16,4 +16,22 @@
       @include gl-flex-wrap;
     }
   }
+
+  .button-recommended {
+    @include gl-text-white;
+    background-color: $purple-500;
+    border-radius: $border-radius-large;
+  }
+
+  @include media-breakpoint-down(xs) {
+    .nav-controls {
+      @include gl-w-full;
+      order: -1;
+
+      .gl-new-dropdown,
+      .split-content-button {
+        @include gl-w-full;
+      }
+    }
+  }
 }
diff --git a/app/helpers/clusters_helper.rb b/app/helpers/clusters_helper.rb
index c355fa5cc67ac5..6af2c2dee189ac 100644
--- a/app/helpers/clusters_helper.rb
+++ b/app/helpers/clusters_helper.rb
@@ -16,31 +16,35 @@ def display_cluster_agents?(_clusterable)
     false
   end
 
-  def js_cluster_agents_list_data(clusterable_project)
+  def js_clusters_list_data(clusterable)
     {
-      default_branch_name: clusterable_project.default_branch,
-      empty_state_image: image_path('illustrations/clusters_empty.svg'),
-      project_path: clusterable_project.full_path,
-      agent_docs_url: help_page_path('user/clusters/agent/index'),
-      install_docs_url: help_page_path('administration/clusters/kas'),
-      get_started_docs_url: help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'),
-      integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'),
-      kas_address: Gitlab::Kas.external_url
-    }
-  end
-
-  def js_clusters_list_data(path = nil)
-    {
-      ancestor_help_path: help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'),
-      endpoint: path,
+      endpoint: clusterable.index_path(format: :json),
       img_tags: {
         aws: { path: image_path('illustrations/logos/amazon_eks.svg'), text: s_('ClusterIntegration|Amazon EKS') },
         default: { path: image_path('illustrations/logos/kubernetes.svg'), text: _('Kubernetes Cluster') },
         gcp: { path: image_path('illustrations/logos/google_gke.svg'), text: s_('ClusterIntegration|Google GKE') }
-      }
+      },
+      ancestor_help_path: help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'),
+      clusters_empty_state_image: image_path('illustrations/clusters_empty.svg'),
+      new_cluster_path: clusterable.new_path(tab: 'create'),
+      can_add_cluster: clusterable.can_add_cluster?.to_s
     }
   end
 
+  def js_clusters_data(clusterable)
+    {
+      default_branch_name: clusterable.default_branch,
+      empty_state_image: image_path('illustrations/clusters_empty.svg'),
+      project_path: clusterable.full_path,
+      multiple_clusters_docs_url: help_page_path('user/project/clusters/multiple_kubernetes_clusters'),
+      install_docs_url: help_page_path('administration/clusters/kas'),
+      get_started_docs_url: help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'),
+      integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'),
+      add_cluster_path: clusterable.new_path(tab: 'add'),
+      kas_address: Gitlab::Kas.external_url
+    }.merge(js_clusters_list_data(clusterable))
+  end
+
   def js_cluster_form_data(cluster, can_edit)
     {
       enabled: cluster.enabled?.to_s,
diff --git a/app/views/clusters/clusters/_cluster_list.html.haml b/app/views/clusters/clusters/_cluster_list.html.haml
index 38ed7e334c954d..674ff988b5804d 100644
--- a/app/views/clusters/clusters/_cluster_list.html.haml
+++ b/app/views/clusters/clusters/_cluster_list.html.haml
@@ -1,12 +1,9 @@
-- if clusters.empty?
-  = render 'empty_state'
-- else
-  .top-area.adjust
-    .gl-display-block.gl-text-right.gl-my-4.gl-w-full
-      - if clusterable.can_add_cluster?
-        = link_to s_('ClusterIntegration|Connect cluster with certificate'), clusterable.new_path, class: 'btn gl-button btn-confirm js-add-cluster gl-py-2', qa_selector: :integrate_kubernetes_cluster_button
-      - else
-        %span.btn.gl-button.btn-confirm.js-add-cluster.disabled.gl-py-2
-          = s_("ClusterIntegration|Connect cluster with certificate")
+.top-area.adjust
+  .gl-display-block.gl-text-right.gl-my-4.gl-w-full
+    - if clusterable.can_add_cluster?
+      = link_to s_('ClusterIntegration|Connect cluster with certificate'), clusterable.new_path, class: 'btn gl-button btn-confirm js-add-cluster gl-py-2', qa_selector: :integrate_kubernetes_cluster_button
+    - else
+      %span.btn.gl-button.btn-confirm.js-add-cluster.disabled.gl-py-2
+        = s_("ClusterIntegration|Connect cluster with certificate")
 
-  #js-clusters-list-app{ data: js_clusters_list_data(clusterable.index_path(format: :json)) }
+#js-clusters-list-app{ data: js_clusters_list_data(clusterable) }
diff --git a/app/views/clusters/clusters/_empty_state.html.haml b/app/views/clusters/clusters/_empty_state.html.haml
deleted file mode 100644
index feef3e0027fbef..00000000000000
--- a/app/views/clusters/clusters/_empty_state.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-.row.empty-state
-  .col-12
-    .svg-content= image_tag 'illustrations/clusters_empty.svg'
-  .col-12
-    .text-content
-      %h4.gl-text-center= s_('ClusterIntegration|Integrate Kubernetes with a cluster certificate')
-      %p.gl-text-center
-        = s_('ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way.')
-        = clusterable.empty_state_help_text
-        = clusterable.learn_more_link
-
-      - if clusterable.can_add_cluster?
-        .gl-text-center
-          = link_to s_('ClusterIntegration|Integrate with a cluster certificate'), clusterable.new_path, class: 'gl-button btn btn-confirm', data: { qa_selector: 'add_kubernetes_cluster_link' }
diff --git a/app/views/clusters/clusters/index.html.haml b/app/views/clusters/clusters/index.html.haml
index 45287a01cc9046..457e34b306a38e 100644
--- a/app/views/clusters/clusters/index.html.haml
+++ b/app/views/clusters/clusters/index.html.haml
@@ -3,24 +3,10 @@
 
 = render_gcp_signup_offer
 
-.clusters-container.gl-my-2
+.clusters-container
   - if display_cluster_agents?(clusterable)
-    .js-toggle-container
-      %ul.nav-links.nav-tabs.nav{ role: 'tablist' }
-        %li.nav-item{ role: 'presentation' }
-          %a.nav-link.active{ href: "#certificate-clusters-pane", id: "certificate-clusters-tab", data: { toggle: 'tab' }, role: 'tab' }
-            %span= s_('ClusterIntegration|Clusters connected with a certificate')
-
-        %li.nav-item{ role: 'presentation' }
-          %a.nav-link{ href: "#agent-clusters-pane", id: "agent-clusters-tab", data: { toggle: 'tab' }, role: 'tab' }
-            %span= s_('ClusterIntegration|GitLab Agent managed clusters')
-
-      .tab-content
-        .tab-pane.active{ id: 'certificate-clusters-pane', role: 'tabpanel' }
-          = render 'cluster_list', clusters: @clusters
-
-        .tab-pane{ id: 'agent-clusters-pane', role: 'tabpanel' }
-          #js-cluster-agents-list{ data: js_cluster_agents_list_data(clusterable) }
+    .gl-my-6
+      .js-clusters-main-view{ data: js_clusters_data(clusterable) }
 
   - else
     = render 'cluster_list', clusters: @clusters
diff --git a/app/views/clusters/clusters/new.html.haml b/app/views/clusters/clusters/new.html.haml
index 74e336723ba2ee..f8d2b286b673d9 100644
--- a/app/views/clusters/clusters/new.html.haml
+++ b/app/views/clusters/clusters/new.html.haml
@@ -1,6 +1,6 @@
 - breadcrumb_title _('Kubernetes')
 - page_title _('Kubernetes Cluster')
-- active_tab = local_assigns.fetch(:active_tab, 'create')
+- active_tab = params[:tab] || local_assigns.fetch(:active_tab, 'create')
 - provider = params[:provider]
 
 = render_gcp_signup_offer
diff --git a/ee/spec/features/clusters/create_agent_spec.rb b/ee/spec/features/clusters/create_agent_spec.rb
index c42db3b02b8b3b..601a5ae8471d7c 100644
--- a/ee/spec/features/clusters/create_agent_spec.rb
+++ b/ee/spec/features/clusters/create_agent_spec.rb
@@ -26,9 +26,8 @@
   end
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
-    click_link('GitLab Agent managed clusters')
-
-    click_button('Integrate with the GitLab Agent')
+    click_button('Actions')
+    click_button('Connect with agent')
     expect(page).to have_content('Install new Agent')
 
     click_button('Select an Agent')
diff --git a/ee/spec/features/projects/cluster_agents_spec.rb b/ee/spec/features/projects/cluster_agents_spec.rb
index 068064ec5df250..45d63dbc912b4a 100644
--- a/ee/spec/features/projects/cluster_agents_spec.rb
+++ b/ee/spec/features/projects/cluster_agents_spec.rb
@@ -27,9 +27,7 @@
       end
 
       it 'displays empty state', :aggregate_failures do
-        click_link 'GitLab Agent managed clusters'
-
-        expect(page).to have_content('Integrate with the GitLab Agent')
+        expect(page).to have_content('Install new Agent')
         expect(page).to have_selector('.empty-state')
       end
     end
@@ -41,8 +39,6 @@
         end
 
         it 'displays a table with agent', :aggregate_failures do
-          click_link 'GitLab Agent managed clusters'
-
           expect(page).to have_content(agent.name)
           expect(page).to have_selector('[data-testid="cluster-agent-list-table"] tbody tr', count: 1)
         end
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ed26616e8e485e..2fff4d4fb9ff96 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7253,15 +7253,30 @@ 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 ""
 
+msgid "ClusterAgents|Actions"
+msgstr ""
+
+msgid "ClusterAgents|Agent"
+msgstr ""
+
 msgid "ClusterAgents|Agent might not be connected to GitLab"
 msgstr ""
 
 msgid "ClusterAgents|Agent never connected to GitLab"
 msgstr ""
 
+msgid "ClusterAgents|All"
+msgstr ""
+
 msgid "ClusterAgents|Alternative installation methods"
 msgstr ""
 
@@ -7274,9 +7289,21 @@ msgstr ""
 msgid "ClusterAgents|An unknown error occurred. Please try again."
 msgstr ""
 
+msgid "ClusterAgents|Certificate based"
+msgstr ""
+
 msgid "ClusterAgents|Configuration"
 msgstr ""
 
+msgid "ClusterAgents|Connect existing cluster"
+msgstr ""
+
+msgid "ClusterAgents|Connect with agent"
+msgstr ""
+
+msgid "ClusterAgents|Connect with certificate"
+msgstr ""
+
 msgid "ClusterAgents|Connected"
 msgstr ""
 
@@ -7286,6 +7313,9 @@ msgstr ""
 msgid "ClusterAgents|Copy token"
 msgstr ""
 
+msgid "ClusterAgents|Create new cluster"
+msgstr ""
+
 msgid "ClusterAgents|Created by"
 msgstr ""
 
@@ -7304,19 +7334,19 @@ msgstr ""
 msgid "ClusterAgents|For more troubleshooting information go to"
 msgstr ""
 
-msgid "ClusterAgents|Go to the repository"
+msgid "ClusterAgents|GitLab Agents"
 msgstr ""
 
-msgid "ClusterAgents|Install a new GitLab Agent"
+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|Install new Agent"
+msgid "ClusterAgents|Go to the repository"
 msgstr ""
 
-msgid "ClusterAgents|Integrate Kubernetes with a GitLab Agent"
+msgid "ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}"
 msgstr ""
 
-msgid "ClusterAgents|Integrate with the GitLab Agent"
+msgid "ClusterAgents|Install new Agent"
 msgstr ""
 
 msgid "ClusterAgents|Last connected %{timeAgo}."
@@ -7328,6 +7358,9 @@ msgstr ""
 msgid "ClusterAgents|Learn how to create an agent access token"
 msgstr ""
 
+msgid "ClusterAgents|Learn more about the GitLab Kubernetes Agent."
+msgstr ""
+
 msgid "ClusterAgents|Make sure you are using a valid token."
 msgstr ""
 
@@ -7340,12 +7373,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 ""
 
@@ -7367,12 +7409,6 @@ msgstr ""
 msgid "ClusterAgents|The Agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}."
 msgstr ""
 
-msgid "ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}"
-msgstr ""
-
-msgid "ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}"
-msgstr ""
-
 msgid "ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window."
 msgstr ""
 
@@ -7391,6 +7427,9 @@ msgstr ""
 msgid "ClusterAgents|Unknown user"
 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|You will need to create a token to connect to your agent"
 msgstr ""
 
@@ -7535,9 +7574,6 @@ msgstr ""
 msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters. %{linkStart}More information%{linkEnd}"
 msgstr ""
 
-msgid "ClusterIntegration|Clusters connected with a certificate"
-msgstr ""
-
 msgid "ClusterIntegration|Connect cluster with certificate"
 msgstr ""
 
@@ -7670,9 +7706,6 @@ msgstr ""
 msgid "ClusterIntegration|Fetching zones"
 msgstr ""
 
-msgid "ClusterIntegration|GitLab Agent managed clusters"
-msgstr ""
-
 msgid "ClusterIntegration|GitLab Integration"
 msgstr ""
 
@@ -7706,6 +7739,9 @@ msgstr ""
 msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{help_link_start}read this first%{help_link_end}."
 msgstr ""
 
+msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}"
+msgstr ""
+
 msgid "ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration."
 msgstr ""
 
@@ -7718,9 +7754,6 @@ msgstr ""
 msgid "ClusterIntegration|Instance type"
 msgstr ""
 
-msgid "ClusterIntegration|Integrate Kubernetes with a cluster certificate"
-msgstr ""
-
 msgid "ClusterIntegration|Integrate with a cluster certificate"
 msgstr ""
 
@@ -7745,9 +7778,6 @@ msgstr ""
 msgid "ClusterIntegration|Kubernetes cluster was successfully created."
 msgstr ""
 
-msgid "ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way."
-msgstr ""
-
 msgid "ClusterIntegration|Kubernetes version"
 msgstr ""
 
@@ -7769,6 +7799,9 @@ msgstr ""
 msgid "ClusterIntegration|Learn more about instance Kubernetes clusters"
 msgstr ""
 
+msgid "ClusterIntegration|Learn more about the GitLab managed clusters"
+msgstr ""
+
 msgid "ClusterIntegration|Loading IAM Roles"
 msgstr ""
 
@@ -8102,6 +8135,9 @@ msgstr ""
 msgid "ClusterIntegration|Unknown Error"
 msgstr ""
 
+msgid "ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way."
+msgstr ""
+
 msgid "ClusterIntegration|Uses the Cloud Run, Istio, and HTTP Load Balancing addons for this cluster."
 msgstr ""
 
@@ -37693,6 +37729,12 @@ msgstr ""
 msgid "View alert details."
 msgstr ""
 
+msgid "View all %{number} Agent based integrations"
+msgstr ""
+
+msgid "View all %{number} Certificate based integrations"
+msgstr ""
+
 msgid "View all environments."
 msgstr ""
 
diff --git a/qa/qa/page/project/infrastructure/kubernetes/index.rb b/qa/qa/page/project/infrastructure/kubernetes/index.rb
index bdcaf7ffaff152..0f6497b1ce993e 100644
--- a/qa/qa/page/project/infrastructure/kubernetes/index.rb
+++ b/qa/qa/page/project/infrastructure/kubernetes/index.rb
@@ -6,7 +6,7 @@ module Project
       module Infrastructure
         module Kubernetes
           class Index < Page::Base
-            view 'app/views/clusters/clusters/_empty_state.html.haml' do
+            view 'app/assets/javascripts/clusters_list/components/clusters_empty_state.vue' do
               element :add_kubernetes_cluster_link
             end
 
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 a548721588e2e8..3518ca8359449f 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -4,7 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 const emptyStateImage = '/path/to/image';
 const projectPath = 'path/to/project';
-const agentDocsUrl = 'path/to/agentDocs';
+const multipleClustersDocsUrl = 'path/to/miltipleClustersDocs';
 const installDocsUrl = 'path/to/installDocs';
 const getStartedDocsUrl = 'path/to/getStartedDocs';
 const integrationDocsUrl = 'path/to/integrationDocs';
@@ -18,16 +18,15 @@ describe('AgentEmptyStateComponent', () => {
   const provideData = {
     emptyStateImage,
     projectPath,
-    agentDocsUrl,
+    multipleClustersDocsUrl,
     installDocsUrl,
     getStartedDocsUrl,
     integrationDocsUrl,
   };
 
   const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
-  const findAgentDocsLink = () => wrapper.findByTestId('agent-docs-link');
+  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(() => {
@@ -46,7 +45,7 @@ describe('AgentEmptyStateComponent', () => {
   });
 
   it('renders correct href attributes for the links', () => {
-    expect(findAgentDocsLink().attributes('href')).toBe(agentDocsUrl);
+    expect(findMultipleClustersDocsLink().attributes('href')).toBe(multipleClustersDocsUrl);
     expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl);
   });
 
@@ -54,10 +53,6 @@ describe('AgentEmptyStateComponent', () => {
     it('should render notification message box', () => {
       expect(findConfigurationsAlert().exists()).toBe(true);
     });
-
-    it('should disable integration button', () => {
-      expect(findIntegrationButton().attributes('disabled')).toBe('true');
-    });
   });
 
   describe('when there is a list of agent configurations', () => {
@@ -71,7 +66,6 @@ describe('AgentEmptyStateComponent', () => {
     it('should render content without notification message box', () => {
       expect(findEmptyState().exists()).toBe(true);
       expect(findConfigurationsAlert().exists()).toBe(false);
-      expect(findIntegrationButton().attributes('disabled')).toBeUndefined();
     });
   });
 });
diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js
index e3b90584f2947a..60184a56ea2c52 100644
--- a/spec/frontend/clusters_list/components/agent_table_spec.js
+++ b/spec/frontend/clusters_list/components/agent_table_spec.js
@@ -1,4 +1,4 @@
-import { GlButton, GlLink, GlIcon } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
@@ -70,10 +70,6 @@ describe('AgentTable', () => {
     }
   });
 
-  it('displays header button', () => {
-    expect(wrapper.find(GlButton).text()).toBe('Install a new GitLab Agent');
-  });
-
   describe('agent table', () => {
     it.each`
       agentName    | link          | lineNumber
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 54d5ae94172795..1f4da2746af294 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -7,6 +7,7 @@ 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 eventHub from '~/clusters_list/eventhub';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -22,12 +23,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 } } },
         },
       },
@@ -81,6 +82,8 @@ describe('Agents', () => {
       },
     ];
 
+    const count = 2;
+
     const trees = [
       {
         name: 'agent-2',
@@ -121,7 +124,7 @@ describe('Agents', () => {
     ];
 
     beforeEach(() => {
-      return createWrapper({ agents, trees });
+      return createWrapper({ agents, count, trees });
     });
 
     it('should render agent table', () => {
@@ -133,6 +136,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);
@@ -180,6 +187,36 @@ describe('Agents', () => {
       it('should pass pageInfo to the pagination component', () => {
         expect(findPaginationButtons().props()).toMatchObject(pageInfo);
       });
+
+      describe('when limit is passed from the parent conponent', () => {
+        beforeEach(() => {
+          propsData.limit = 6;
+
+          return createWrapper({
+            agents,
+            pageInfo,
+          });
+        });
+
+        it('should not render pagination buttons', () => {
+          expect(findPaginationButtons().exists()).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe('when agentRegistered event emitted from InstalAgentModal', () => {
+    const reloadAgentsSpy = jest.fn();
+    eventHub.$once('agentRegistered', reloadAgentsSpy);
+
+    beforeEach(() => {
+      return createWrapper({});
+    });
+
+    it('should reload agents list', () => {
+      eventHub.$emit('agentRegistered');
+
+      expect(reloadAgentsSpy).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js
new file mode 100644
index 00000000000000..4caf9d38ef8c1d
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_actions_spec.js
@@ -0,0 +1,55 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ClustersActions from '~/clusters_list/components/clusters_actions.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { INSTALL_AGENT_MODAL_ID } from '~/clusters_list/constants';
+
+describe('ClustersActionsComponent', () => {
+  let wrapper;
+
+  const newClusterPath = 'path/to/create/cluster';
+  const addClusterPath = 'path/to/connect/existing/cluster';
+
+  const provideData = {
+    newClusterPath,
+    addClusterPath,
+  };
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findNewClusterLink = () => wrapper.findByTestId('new-cluster-link');
+  const findConnectClusterLink = () => wrapper.findByTestId('connect-cluster-link');
+  const findConnectNewAgentLink = () => wrapper.findByTestId('connect-new-agent-link');
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(ClustersActions, {
+      provide: provideData,
+      directives: {
+        GlModalDirective: createMockDirective(),
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders actions menu', () => {
+    expect(findDropdown().props('text')).toBe('Actions');
+  });
+
+  it('renders a dropdown with 3 actions items', () => {
+    expect(findDropdownItems()).toHaveLength(3);
+  });
+
+  it('renders correct href attributes for the links', () => {
+    expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
+    expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
+  });
+
+  it('renders correct modal id for the agent link', () => {
+    const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
+
+    expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+  });
+});
diff --git a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
new file mode 100644
index 00000000000000..c27feb8a7cdf78
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
@@ -0,0 +1,79 @@
+import { GlEmptyState, GlSprintf, GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue';
+import ClusterStore from '~/clusters_list/store';
+
+const clustersEmptyStateImage = 'path/to/svg';
+const newClusterPath = '/path/to/connect/cluster';
+const canAddCluster = true;
+
+describe('ClustersEmptyStateComponent', () => {
+  let wrapper;
+
+  const propsData = {
+    childComponent: false,
+  };
+
+  const provideData = {
+    clustersEmptyStateImage,
+    newClusterPath,
+  };
+
+  const entryData = {
+    canAddCluster,
+  };
+
+  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
+  const findClustersDocsLink = () => wrapper.findByTestId('clusters-docs-link');
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(ClustersEmptyState, {
+      store: ClusterStore(entryData),
+      propsData,
+      provide: provideData,
+      stubs: { GlEmptyState, GlSprintf },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders correct href attributes for the links', () => {
+    expect(findMultipleClustersDocsLink().attributes('href')).toBe(
+      wrapper.vm.$options.multipleClustersHelpUrl,
+    );
+    expect(findClustersDocsLink().attributes('href')).toBe(wrapper.vm.$options.learnMoreHelpUrl);
+  });
+
+  describe('when the component is loaded independantly', () => {
+    it('should render the action button', () => {
+      expect(findButton().exists()).toBe(true);
+    });
+
+    describe('when the user cannot add clusters', () => {
+      beforeEach(() => {
+        wrapper.vm.$store.state.canAddCluster = false;
+      });
+      it('should disable the button', () => {
+        expect(findButton().props('disabled')).toBe(true);
+      });
+    });
+  });
+
+  describe('when the component is loaded as a child component', () => {
+    beforeEach(() => {
+      propsData.childComponent = true;
+      wrapper = shallowMountExtended(ClustersEmptyState, {
+        store: ClusterStore(entryData),
+        propsData,
+        provide: provideData,
+      });
+    });
+
+    it('should not render the action button', () => {
+      expect(findButton().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
new file mode 100644
index 00000000000000..252d66a17322a5
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -0,0 +1,66 @@
+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';
+
+const defaultBranchName = 'default-branch';
+
+describe('ClustersMainViewComponent', () => {
+  let wrapper;
+
+  const propsData = {
+    defaultBranchName,
+  };
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(ClustersMainView, {
+      propsData,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findTabs = () => wrapper.findComponent(GlTabs);
+  const findAllTabs = () => wrapper.findAllComponents(GlTab);
+  const findGlTabAtIndex = (index) => findAllTabs().at(index);
+  const findComponent = () => wrapper.findByTestId('clusters-tab-component');
+
+  it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', () => {
+    expect(findTabs().exists()).toBe(true);
+    expect(findTabs().props('syncActiveTabWithQueryParams')).toBe(true);
+  });
+
+  it('renders correct number of tabs', () => {
+    expect(findAllTabs().length).toBe(CLUSTERS_TABS.length);
+  });
+
+  it('passes child-component param to the component', () => {
+    expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName);
+  });
+
+  describe('tabs', () => {
+    it.each`
+      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 }) => {
+        expect(findGlTabAtIndex(lineNumber).attributes('title')).toBe(tabTitle);
+        expect(findGlTabAtIndex(lineNumber).props('queryParamValue')).toBe(queryParamValue);
+      },
+    );
+  });
+
+  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 941a3adb625868..6ecc67998167e2 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -8,6 +8,7 @@ import * as Sentry from '@sentry/browser';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Clusters from '~/clusters_list/components/clusters.vue';
+import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue';
 import ClusterStore from '~/clusters_list/store';
 import axios from '~/lib/utils/axios_utils';
 import { apiData } from '../mock_data';
@@ -18,18 +19,28 @@ describe('Clusters', () => {
   let wrapper;
 
   const endpoint = 'some/endpoint';
+  const totalClustersNumber = 6;
+  const clustersEmptyStateImage = 'path/to/svg';
+  const newClusterPath = '/path/to/new/cluster';
 
   const entryData = {
     endpoint,
     imgTagsAwsText: 'AWS Icon',
     imgTagsDefaultText: 'Default Icon',
     imgTagsGcpText: 'GCP Icon',
+    totalClusters: totalClustersNumber,
+  };
+
+  const provideData = {
+    clustersEmptyStateImage,
+    newClusterPath,
   };
 
   const findLoader = () => wrapper.find(GlLoadingIcon);
   const findPaginatedButtons = () => wrapper.find(GlPagination);
   const findTable = () => wrapper.find(GlTable);
   const findStatuses = () => findTable().findAll('.js-status');
+  const findEmptyState = () => wrapper.findComponent(ClustersEmptyState);
 
   const mockPollingApi = (response, body, header) => {
     mock.onGet(`${endpoint}?page=${header['x-page']}`).reply(response, body, header);
@@ -37,7 +48,7 @@ describe('Clusters', () => {
 
   const mountWrapper = () => {
     store = ClusterStore(entryData);
-    wrapper = mount(Clusters, { store });
+    wrapper = mount(Clusters, { provide: provideData, store, stubs: { GlTable } });
     return axios.waitForAll();
   };
 
@@ -70,7 +81,6 @@ describe('Clusters', () => {
     describe('when data is loading', () => {
       beforeEach(() => {
         wrapper.vm.$store.state.loadingClusters = true;
-        return wrapper.vm.$nextTick();
       });
 
       it('displays a loader instead of the table while loading', () => {
@@ -79,23 +89,44 @@ describe('Clusters', () => {
       });
     });
 
-    it('displays a table component', () => {
-      expect(findTable().exists()).toBe(true);
-    });
+    describe('when clusters are present', () => {
+      it('displays a table component', () => {
+        expect(findTable().exists()).toBe(true);
+      });
 
-    it('renders the correct table headers', () => {
-      const tableHeaders = wrapper.vm.fields;
-      const headers = findTable().findAll('th');
+      it('renders the correct table headers', () => {
+        const tableHeaders = wrapper.vm.fields;
+        const headers = findTable().findAll('th');
 
-      expect(headers.length).toBe(tableHeaders.length);
+        expect(headers.length).toBe(tableHeaders.length);
 
-      tableHeaders.forEach((headerText, i) =>
-        expect(headers.at(i).text()).toEqual(headerText.label),
-      );
+        tableHeaders.forEach((headerText, i) =>
+          expect(headers.at(i).text()).toEqual(headerText.label),
+        );
+      });
+
+      it('should stack on smaller devices', () => {
+        expect(findTable().classes()).toContain('b-table-stacked-md');
+      });
     });
 
-    it('should stack on smaller devices', () => {
-      expect(findTable().classes()).toContain('b-table-stacked-md');
+    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('when there are no clusters', () => {
+      beforeEach(() => {
+        wrapper.vm.$store.state.totalClusters = 0;
+      });
+      it('should render empty state', () => {
+        expect(findEmptyState().exists()).toBe(true);
+      });
     });
   });
 
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..a40cd43847b803
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -0,0 +1,214 @@
+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;
+
+  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 },
+    });
+  });
+
+  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 }),
+        );
+      });
+
+      describe('when clicking on the footer link', () => {
+        let changeTabSpy;
+        beforeEach(() => {
+          changeTabSpy = jest.spyOn(wrapper.vm, 'changeTab');
+          findFooterLink().vm.$emit('click');
+        });
+
+        it('should trigger tab change', () => {
+          expect(changeTabSpy).toHaveBeenCalledWith('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', () => {
+        let changeTabSpy;
+        beforeEach(() => {
+          changeTabSpy = jest.spyOn(wrapper.vm, 'changeTab');
+          findFooterLink().vm.$emit('click');
+        });
+
+        it('should trigger tab change', () => {
+          expect(changeTabSpy).toHaveBeenCalledWith('certificate_based');
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/clusters_list/store/mutations_spec.js b/spec/frontend/clusters_list/store/mutations_spec.js
index c0fe634a703600..ae264eee4496cd 100644
--- a/spec/frontend/clusters_list/store/mutations_spec.js
+++ b/spec/frontend/clusters_list/store/mutations_spec.js
@@ -26,7 +26,7 @@ describe('Admin statistics panel mutations', () => {
       expect(state.clusters).toBe(apiData.clusters);
       expect(state.clustersPerPage).toBe(paginationInformation.perPage);
       expect(state.hasAncestorClusters).toBe(apiData.has_ancestor_clusters);
-      expect(state.totalCulsters).toBe(paginationInformation.total);
+      expect(state.totalClusters).toBe(paginationInformation.total);
     });
   });
 
@@ -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);
+    });
+  });
 });
diff --git a/spec/helpers/clusters_helper_spec.rb b/spec/helpers/clusters_helper_spec.rb
index f1e19f17c72abe..be6a18174ce447 100644
--- a/spec/helpers/clusters_helper_spec.rb
+++ b/spec/helpers/clusters_helper_spec.rb
@@ -59,13 +59,15 @@
     end
   end
 
-  describe '#js_cluster_agents_list_data' do
-    let_it_be(:project) { build(:project, :repository) }
+  describe '#js_clusters_data' do
+    let_it_be(:current_user) { create(:user) }
+    let_it_be(:project) { build(:project) }
+    let_it_be(:clusterable) { ClusterablePresenter.fabricate(project, current_user: current_user) }
 
-    subject { helper.js_cluster_agents_list_data(project) }
+    subject { helper.js_clusters_data(clusterable) }
 
     it 'displays project default branch' do
-      expect(subject[:default_branch_name]).to eq(project.default_branch)
+      expect(subject[:default_branch_name]).to eq(clusterable.default_branch)
     end
 
     it 'displays image path' do
@@ -73,26 +75,34 @@
     end
 
     it 'displays project path' do
-      expect(subject[:project_path]).to eq(project.full_path)
+      expect(subject[:project_path]).to eq(clusterable.full_path)
     end
 
     it 'generates docs urls' do
-      expect(subject[:agent_docs_url]).to eq(help_page_path('user/clusters/agent/index'))
+      expect(subject[:multiple_clusters_docs_url]).to eq(help_page_path('user/project/clusters/multiple_kubernetes_clusters'))
       expect(subject[:install_docs_url]).to eq(help_page_path('administration/clusters/kas'))
       expect(subject[:get_started_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'))
       expect(subject[:integration_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'))
     end
 
+    it 'displays add existing cluster using certificate path' do
+      expect(subject[:add_cluster_path]).to match(clusterable.new_path(tab: 'add'))
+    end
+
     it 'displays kas address' do
       expect(subject[:kas_address]).to eq(Gitlab::Kas.external_url)
     end
   end
 
   describe '#js_clusters_list_data' do
-    subject { helper.js_clusters_list_data('/path') }
+    let_it_be(:current_user) { create(:user) }
+    let_it_be(:project) { build(:project) }
+    let_it_be(:clusterable) { ClusterablePresenter.fabricate(project, current_user: current_user) }
+
+    subject { helper.js_clusters_list_data(clusterable) }
 
     it 'displays endpoint path' do
-      expect(subject[:endpoint]).to eq('/path')
+      expect(subject[:endpoint]).to eq(clusterable.index_path(format: :json))
     end
 
     it 'generates svg image data', :aggregate_failures do
@@ -108,6 +118,18 @@
     it 'displays and ancestor_help_path' do
       expect(subject[:ancestor_help_path]).to eq(help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'))
     end
+
+    it 'displays empty image path' do
+      expect(subject[:clusters_empty_state_image]).to match(%r(/illustrations/logos/clusters_empty|svg))
+    end
+
+    it 'displays create cluster using certificate path' do
+      expect(subject[:new_cluster_path]).to match(clusterable.new_path(tab: 'create'))
+    end
+
+    it 'displays whether the user can add cluster' do
+      expect(subject[:can_add_cluster]).to match(clusterable.can_add_cluster?.to_s)
+    end
   end
 
   describe '#js_cluster_new' do
-- 
GitLab


From 8676929ea6540deecbfcd8775c042559fa66da43 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Wed, 20 Oct 2021 00:26:08 +0300
Subject: [PATCH 2/3] Implemented changes suggested during UX review

---
 .../clusters_list/components/agent_table.vue  |  7 +-
 .../clusters_list/components/agents.vue       |  4 +-
 .../clusters_list/components/clusters.vue     | 15 +++-
 .../components/clusters_actions.vue           |  2 +-
 .../components/clusters_main_view.vue         |  2 +-
 .../components/clusters_view_all.vue          | 89 +++++++++----------
 app/assets/stylesheets/pages/clusters.scss    | 15 +++-
 .../features/clusters/create_agent_spec.rb    |  3 +-
 locale/gitlab.pot                             |  2 +-
 9 files changed, 79 insertions(+), 60 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 49d87d8f99777f..c31778ffdde56c 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -31,18 +31,22 @@ export default {
         {
           key: 'name',
           label: s__('ClusterAgents|Name'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'status',
           label: s__('ClusterAgents|Connection status'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'lastContact',
           label: s__('ClusterAgents|Last contact'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'configuration',
           label: s__('ClusterAgents|Configuration'),
+          tdClass: 'gl-py-5!',
         },
       ];
     },
@@ -56,7 +60,8 @@ export default {
     :fields="fields"
     stacked="md"
     head-variant="white"
-    thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
+    thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
+    class="gl-mb-4!"
     data-testid="cluster-agent-list-table"
   >
     <template #cell(name)="{ item }">
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index 9aa07373241885..abd2d1c073b46f 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -149,9 +149,9 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-5" />
+  <gl-loading-icon v-if="isLoading" size="md" />
 
-  <section v-else-if="agentList" class="gl-mt-5">
+  <section v-else-if="agentList">
     <div v-if="agentList.length">
       <AgentTable :agents="agentList" />
 
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 7ca0a639ee35e0..6ea87588e4bfe0 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -73,26 +73,32 @@ export default {
         {
           key: 'name',
           label: __('Kubernetes cluster'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'environment_scope',
           label: __('Environment scope'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'node_size',
           label: __('Nodes'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'total_cpu',
           label: __('Total cores (CPUs)'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'total_memory',
           label: __('Total memory (GB)'),
+          tdClass: 'gl-py-5!',
         },
         {
           key: 'cluster_type',
           label: __('Cluster level'),
+          tdClass: 'gl-py-5!',
           formatter: (value) => CLUSTER_TYPES[value],
         },
       ];
@@ -217,19 +223,20 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loadingClusters" size="md" class="gl-mt-5" />
+  <gl-loading-icon v-if="loadingClusters" size="md" />
 
-  <section v-else class="gl-mt-5">
+  <section v-else>
     <ancestor-notice />
 
     <gl-table
       v-if="hasClusters"
       :items="clusters"
       :fields="fields"
+      fixed
       stacked="md"
       head-variant="white"
-      thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
-      class="qa-clusters-table"
+      thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
+      class="qa-clusters-table gl-mb-4!"
       data-testid="cluster_list_table"
     >
       <template #cell(name)="{ item }">
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index 2a2943d0567080..0175b0df1557af 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -39,7 +39,7 @@ export default {
         v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
         data-testid="connect-new-agent-link"
       >
-        {{ s__('ClusterAgents|Connect with agent') }}
+        {{ s__('ClusterAgents|Connect with Agent') }}
       </gl-dropdown-item>
       <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link">
         {{ s__('ClusterAgents|Connect with certificate') }}
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 3e9b87a6fc4f2b..359060e0380034 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -50,7 +50,7 @@ export default {
         :key="idx"
         :title="tab.title"
         :query-param-value="tab.queryParamValue"
-        class="gl-line-height-20"
+        class="gl-line-height-20 gl-mt-5"
       >
         <component
           :is="tab.component"
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 79db1660f38d58..af8f33f2dff348 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -98,7 +98,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-5" />
+    <gl-loading-icon v-if="isLoading" size="md" />
     <div
       data-testid="clusters-cards-container"
       :class="{
@@ -106,8 +106,8 @@ export default {
       }"
     >
       <gl-card
-        class="gl-mt-5"
-        header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between"
+        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>
@@ -115,34 +115,32 @@ export default {
             {{ cardTitle('agent') }}
           </h3>
 
-          <div>
-            <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="top"
-              :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>
-          </div>
+          <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
@@ -152,13 +150,6 @@ export default {
         />
 
         <template #footer>
-          <gl-button
-            v-if="!totalAgents"
-            v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-            category="secondary"
-            variant="confirm"
-            >{{ $options.AGENT_CARD_INFO.actionText }}</gl-button
-          >
           <gl-link
             v-if="totalAgents"
             data-testid="agents-tab-footer-link"
@@ -166,6 +157,12 @@ export default {
             ><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>
@@ -173,11 +170,12 @@ export default {
       <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-0 gl-font-weight-normal gl-font-size-h2"
+            class="gl-my-1 gl-font-weight-normal gl-font-size-h2"
             data-testid="clusters-card-title"
           >
             {{ cardTitle('certificate_based') }}
@@ -187,13 +185,6 @@ export default {
         <Clusters :limit="$options.MAX_CLUSTERS_LIST" :child-component="true" />
 
         <template #footer>
-          <gl-button
-            v-if="!totalClusters"
-            category="secondary"
-            variant="confirm"
-            :href="addClusterPath"
-            >{{ $options.CERTIFICATE_BASED_CARD_INFO.actionText }}</gl-button
-          >
           <gl-link
             v-if="totalClusters"
             data-testid="clusters-tab-footer-link"
@@ -201,6 +192,12 @@ export default {
             ><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>
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 2462fcacebf0c1..cbf5448dd6f15c 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -1,6 +1,10 @@
 .clusters-container {
-  .empty-state .svg-content img {
-    width: 145px;
+  .empty-state .svg-content {
+    @include gl-pb-0;
+
+    img {
+      width: 100px;
+    }
   }
 
   .empty-state--agent {
@@ -23,6 +27,13 @@
     border-radius: $border-radius-large;
   }
 
+  .gl-card-body {
+    @include media-breakpoint-up(sm) {
+      @include gl-pt-2;
+      min-height: 372px;
+    }
+  }
+
   @include media-breakpoint-down(xs) {
     .nav-controls {
       @include gl-w-full;
diff --git a/ee/spec/features/clusters/create_agent_spec.rb b/ee/spec/features/clusters/create_agent_spec.rb
index 601a5ae8471d7c..2cd97e1b71c660 100644
--- a/ee/spec/features/clusters/create_agent_spec.rb
+++ b/ee/spec/features/clusters/create_agent_spec.rb
@@ -27,7 +27,7 @@
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
     click_button('Actions')
-    click_button('Connect with agent')
+    click_button('Connect with Agent')
     expect(page).to have_content('Install new Agent')
 
     click_button('Select an Agent')
@@ -40,6 +40,5 @@
 
     click_button('Done')
     expect(page).to have_link('example-agent-2')
-    expect(page).to have_no_content('Install new Agent')
   end
 end
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2fff4d4fb9ff96..be871ff13b5d21 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7298,7 +7298,7 @@ msgstr ""
 msgid "ClusterAgents|Connect existing cluster"
 msgstr ""
 
-msgid "ClusterAgents|Connect with agent"
+msgid "ClusterAgents|Connect with Agent"
 msgstr ""
 
 msgid "ClusterAgents|Connect with certificate"
-- 
GitLab


From 1dd469fe1d8b8cb86c0743c4479c186e3e341843 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Fri, 22 Oct 2021 17:59:16 +0300
Subject: [PATCH 3/3] Implemented changes after the PM review

---
 .../components/agent_empty_state.vue          | 18 +++++++++++++++++
 .../clusters_list/components/agents.vue       | 11 +++++++++-
 .../components/clusters_actions.vue           |  7 +------
 .../components/clusters_main_view.vue         |  1 -
 .../components/clusters_view_all.vue          | 10 +++++++---
 .../javascripts/clusters_list/constants.js    |  2 ++
 .../features/clusters/create_agent_spec.rb    |  1 -
 locale/gitlab.pot                             |  3 +++
 .../components/clusters_view_all_spec.js      | 20 +++++++++++--------
 9 files changed, 53 insertions(+), 20 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 4afcdff47f3290..b7d496db137e9d 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -27,6 +27,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
   },
   computed: {
     repositoryPath() {
@@ -100,5 +105,18 @@ export default {
         </template>
       </gl-alert>
     </template>
+
+    <template #actions>
+      <gl-button
+        v-if="!childComponent"
+        v-gl-modal-directive="$options.modalId"
+        :disabled="!hasConfigurations"
+        data-testid="integration-primary-button"
+        category="primary"
+        variant="confirm"
+      >
+        {{ s__('ClusterAgents|Integrate with the GitLab Agent') }}
+      </gl-button>
+    </template>
   </gl-empty-state>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index abd2d1c073b46f..2834c7272ee3f7 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -40,6 +40,11 @@ export default {
       required: false,
       type: String,
     },
+    childComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
     limit: {
       default: null,
       required: false,
@@ -160,7 +165,11 @@ export default {
       </div>
     </div>
 
-    <AgentEmptyState v-else :has-configurations="hasConfigurations" />
+    <AgentEmptyState
+      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_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index 0175b0df1557af..c7cb3afc16db01 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -13,11 +13,6 @@ export default {
   inject: ['newClusterPath', 'addClusterPath'],
   AGENT_CARD_INFO,
   INSTALL_AGENT_MODAL_ID,
-  methods: {
-    showDropdown() {
-      this.$refs.dropdown.show();
-    },
-  },
 };
 </script>
 
@@ -25,12 +20,12 @@ export default {
   <div class="nav-controls gl-ml-auto">
     <gl-dropdown
       ref="dropdown"
+      v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
       category="primary"
       variant="confirm"
       :text="s__('ClusterAgents|Actions')"
       split
       right
-      @click="showDropdown"
     >
       <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link">
         {{ s__('ClusterAgents|Create new cluster') }}
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 359060e0380034..5f8d5569a596ec 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -55,7 +55,6 @@ export default {
         <component
           :is="tab.component"
           :default-branch-name="defaultBranchName"
-          :child-component="true"
           data-testid="clusters-tab-component"
           @changeTab="onTabChange"
         />
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 af8f33f2dff348..21d67ff949102c 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -90,7 +90,8 @@ export default {
       this.totalAgents = number;
       this.loadingAgents = false;
     },
-    changeTab(tab) {
+    changeTab($event, tab) {
+      $event.preventDefault();
       this.$emit('changeTab', tab);
     },
   },
@@ -146,6 +147,7 @@ export default {
         <Agents
           :limit="$options.MAX_CLUSTERS_LIST"
           :default-branch-name="defaultBranchName"
+          :child-component="true"
           @onAgentsLoad="onAgentsLoad"
         />
 
@@ -153,7 +155,8 @@ export default {
           <gl-link
             v-if="totalAgents"
             data-testid="agents-tab-footer-link"
-            @click="changeTab('agent')"
+            :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
@@ -188,7 +191,8 @@ export default {
           <gl-link
             v-if="totalClusters"
             data-testid="clusters-tab-footer-link"
-            @click="changeTab('certificate_based')"
+            :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
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 5508b7dfa5ea1d..094675a5667c91 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -144,6 +144,7 @@ export const AGENT_STATUSES = {
 };
 
 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: {
@@ -161,6 +162,7 @@ export const AGENT_CARD_INFO = {
 };
 
 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'),
diff --git a/ee/spec/features/clusters/create_agent_spec.rb b/ee/spec/features/clusters/create_agent_spec.rb
index 2cd97e1b71c660..7e1150e25cce6d 100644
--- a/ee/spec/features/clusters/create_agent_spec.rb
+++ b/ee/spec/features/clusters/create_agent_spec.rb
@@ -27,7 +27,6 @@
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
     click_button('Actions')
-    click_button('Connect with Agent')
     expect(page).to have_content('Install new Agent')
 
     click_button('Select an Agent')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index be871ff13b5d21..54a1ac21767e82 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7349,6 +7349,9 @@ msgstr ""
 msgid "ClusterAgents|Install new Agent"
 msgstr ""
 
+msgid "ClusterAgents|Integrate with the GitLab Agent"
+msgstr ""
+
 msgid "ClusterAgents|Last connected %{timeAgo}."
 msgstr ""
 
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 a40cd43847b803..52802cae8d8bf7 100644
--- a/spec/frontend/clusters_list/components/clusters_view_all_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -20,6 +20,11 @@ const defaultBranchName = 'default-branch';
 
 describe('ClustersViewAllComponent', () => {
   let wrapper;
+  let changeTabSpy;
+
+  const event = {
+    preventDefault: jest.fn(),
+  };
 
   const propsData = {
     defaultBranchName,
@@ -54,6 +59,8 @@ describe('ClustersViewAllComponent', () => {
       },
       stubs: { GlCard, GlSprintf },
     });
+
+    changeTabSpy = jest.spyOn(wrapper.vm, 'changeTab');
   });
 
   afterEach(() => {
@@ -136,17 +143,16 @@ describe('ClustersViewAllComponent', () => {
         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', () => {
-        let changeTabSpy;
         beforeEach(() => {
-          changeTabSpy = jest.spyOn(wrapper.vm, 'changeTab');
-          findFooterLink().vm.$emit('click');
+          findFooterLink().vm.$emit('click', event);
         });
 
         it('should trigger tab change', () => {
-          expect(changeTabSpy).toHaveBeenCalledWith('agent');
+          expect(changeTabSpy).toHaveBeenCalledWith(event, 'agent');
         });
       });
     });
@@ -199,14 +205,12 @@ describe('ClustersViewAllComponent', () => {
       });
 
       describe('when clicking on the footer link', () => {
-        let changeTabSpy;
         beforeEach(() => {
-          changeTabSpy = jest.spyOn(wrapper.vm, 'changeTab');
-          findFooterLink().vm.$emit('click');
+          findFooterLink().vm.$emit('click', event);
         });
 
         it('should trigger tab change', () => {
-          expect(changeTabSpy).toHaveBeenCalledWith('certificate_based');
+          expect(changeTabSpy).toHaveBeenCalledWith(event, 'certificate_based');
         });
       });
     });
-- 
GitLab