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

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

Changelog: changed
---
 .../clusters_list/components/agent_table.vue  | 156 +++++++++---------
 .../clusters_list/components/agents.vue       |  22 ++-
 .../clusters_list/components/clusters.vue     |  13 +-
 .../components/clusters_actions.vue           |  43 +++++
 .../components/clusters_main_view.vue         |  68 ++++++++
 .../components/install_agent_modal.vue        |   6 +-
 .../javascripts/clusters_list/constants.js    |  13 ++
 app/assets/javascripts/clusters_list/index.js |   4 +-
 .../{load_agents.js => load_main_view.js}     |  22 ++-
 .../clusters_list/store/actions.js            |   4 +
 .../clusters_list/store/mutation_types.js     |   1 +
 .../clusters_list/store/mutations.js          |   3 +
 .../javascripts/clusters_list/store/state.js  |   1 +
 app/assets/stylesheets/pages/clusters.scss    |  19 +++
 app/helpers/clusters_helper.rb                |  27 +--
 app/views/clusters/clusters/index.html.haml   |  20 +--
 locale/gitlab.pot                             |  23 ++-
 spec/features/clusters/create_agent_spec.rb   |   4 +-
 spec/features/projects/cluster_agents_spec.rb |   6 +-
 spec/features/projects/clusters/eks_spec.rb   |   3 +-
 spec/features/projects/clusters/gcp_spec.rb   |  16 +-
 spec/features/projects/clusters/user_spec.rb  |   4 +-
 spec/features/projects/clusters_spec.rb       |  24 +--
 .../components/agent_table_spec.js            |   6 +-
 .../clusters_list/components/agents_spec.js   |  39 ++++-
 .../components/clusters_actions_spec.js       |  55 ++++++
 .../components/clusters_main_view_spec.js     |  56 +++++++
 .../components/install_agent_modal_spec.js    |  21 +++
 .../clusters_list/store/mutations_spec.js     |   8 +
 spec/helpers/clusters_helper_spec.rb          |  64 +++----
 30 files changed, 550 insertions(+), 201 deletions(-)
 create mode 100644 app/assets/javascripts/clusters_list/components/clusters_actions.vue
 create mode 100644 app/assets/javascripts/clusters_list/components/clusters_main_view.vue
 rename app/assets/javascripts/clusters_list/{load_agents.js => load_main_view.js} (56%)
 create mode 100644 spec/frontend/clusters_list/components/clusters_actions_spec.js
 create mode 100644 spec/frontend/clusters_list/components/clusters_main_view_spec.js

diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 487e512c06d50f..bf9f98afdc5673 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -1,6 +1,5 @@
 <script>
 import {
-  GlButton,
   GlLink,
   GlModalDirective,
   GlTable,
@@ -16,7 +15,6 @@ import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES, TROUBLESHOOTING_LINK } from '..
 
 export default {
   components: {
-    GlButton,
     GlLink,
     GlTable,
     GlIcon,
@@ -45,18 +43,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!',
         },
       ];
     },
@@ -65,88 +67,78 @@ 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-2 gl-border-b-gray-100"
+    class="gl-mb-4!"
+    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..4097968a32de11 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -1,10 +1,10 @@
 <script>
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
 import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AgentEmptyState from './agent_empty_state.vue';
 import AgentTable from './agent_table.vue';
-import InstallAgentModal from './install_agent_modal.vue';
 
 export default {
   apollo: {
@@ -26,7 +26,6 @@ export default {
   components: {
     AgentEmptyState,
     AgentTable,
-    InstallAgentModal,
     GlAlert,
     GlKeysetPagination,
     GlLoadingIcon,
@@ -49,6 +48,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(['newAgentRegistered']),
     agentList() {
       let list = this.agents?.project?.clusterAgents?.nodes;
 
@@ -79,7 +79,16 @@ export default {
       return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
     },
   },
+  watch: {
+    newAgentRegistered(value) {
+      if (value) {
+        this.reloadAgents();
+        this.setNewAgentRegistered(false);
+      }
+    },
+  },
   methods: {
+    ...mapActions(['setNewAgentRegistered']),
     reloadAgents() {
       this.$apollo.queries.agents.refetch();
     },
@@ -135,19 +144,18 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" />
+  <gl-loading-icon v-if="isLoading" size="md" />
 
-  <section v-else-if="agentList" class="gl-mt-3">
+  <section v-else-if="agentList">
     <div v-if="agentList.length">
-      <AgentTable :agents="agentList" />
+      <agent-table :agents="agentList" />
 
       <div v-if="showPagination" class="gl-display-flex gl-justify-content-center gl-mt-5">
         <gl-keyset-pagination v-bind="agentPageInfo" @prev="prevPage" @next="nextPage" />
       </div>
     </div>
 
-    <AgentEmptyState v-else :has-configurations="hasConfigurations" />
-    <InstallAgentModal @agentRegistered="reloadAgents" />
+    <agent-empty-state v-else :has-configurations="hasConfigurations" />
   </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 cf0587341b58d3..c826b6732d859b 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -61,26 +61,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],
         },
       ];
@@ -201,7 +207,7 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loadingClusters" size="md" class="gl-mt-3" />
+  <gl-loading-icon v-if="loadingClusters" size="md" />
 
   <section v-else>
     <ancestor-notice />
@@ -210,10 +216,11 @@ export default {
       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
new file mode 100644
index 00000000000000..c504bde2dbb97b
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -0,0 +1,43 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlModalDirective } from '@gitlab/ui';
+import { INSTALL_AGENT_MODAL_ID } from '../constants';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  inject: ['newClusterPath', 'addClusterPath'],
+  INSTALL_AGENT_MODAL_ID,
+};
+</script>
+
+<template>
+  <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
+    >
+      <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_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
new file mode 100644
index 00000000000000..633d7c91f9b978
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -0,0 +1,68 @@
+<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';
+
+export default {
+  components: {
+    GlTabs,
+    GlTab,
+    ClustersActions,
+    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 gl-mt-5"
+      >
+        <component
+          :is="tab.component"
+          :default-branch-name="defaultBranchName"
+          data-testid="clusters-tab-component"
+          @changeTab="onTabChange"
+        />
+      </gl-tab>
+
+      <template #tabs-end>
+        <clusters-actions />
+      </template>
+    </gl-tabs>
+
+    <install-agent-modal />
+  </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 28da1e146c627b..3489e0f7dfc097 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -8,6 +8,7 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
@@ -64,6 +65,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['setNewAgentRegistered']),
     setAgentName(name) {
       this.agentName = name;
     },
@@ -71,11 +73,11 @@ export default {
       this.$refs.modal.hide();
     },
     doneClicked() {
-      this.$emit('agentRegistered');
+      this.setNewAgentRegistered(this.registered);
       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 d77e183f95b5d3..13d67efe11a8a7 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -168,3 +168,16 @@ export const I18N_CLUSTERS_EMPTY_STATE = {
   learnMoreLinkText: s__('ClusterIntegration|Learn more about the GitLab managed clusters'),
   buttonText: s__('ClusterIntegration|Connect with a certificate'),
 };
+
+export const CLUSTERS_TABS = [
+  {
+    title: s__('ClusterAgents|Agent'),
+    component: 'agents',
+    queryParamValue: 'agent',
+  },
+  {
+    title: s__('ClusterAgents|Certificate based'),
+    component: 'clusters',
+    queryParamValue: 'certificate_based',
+  },
+];
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_main_view.js
similarity index 56%
rename from app/assets/javascripts/clusters_list/load_agents.js
rename to app/assets/javascripts/clusters_list/load_main_view.js
index e65de67515a8f7..4222f078db94ec 100644
--- a/app/assets/javascripts/clusters_list/load_agents.js
+++ b/app/assets/javascripts/clusters_list/load_main_view.js
@@ -1,8 +1,13 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import Agents from './components/agents.vue';
+import ClustersMainView from './components/clusters_main_view.vue';
+import { createStore } from './store';
 
-export default (Vue, VueApollo) => {
-  const el = document.querySelector('#js-cluster-agents-list');
+Vue.use(VueApollo);
+
+export default () => {
+  const el = document.querySelector('.js-clusters-main-view');
 
   if (!el) {
     return null;
@@ -19,6 +24,10 @@ export default (Vue, VueApollo) => {
     getStartedDocsUrl,
     integrationDocsUrl,
     kasAddress,
+    newClusterPath,
+    addClusterPath,
+    emptyStateHelpText,
+    clustersEmptyStateImage,
   } = el.dataset;
 
   return new Vue({
@@ -32,9 +41,14 @@ export default (Vue, VueApollo) => {
       getStartedDocsUrl,
       integrationDocsUrl,
       kasAddress,
+      newClusterPath,
+      addClusterPath,
+      emptyStateHelpText,
+      clustersEmptyStateImage,
     },
+    store: createStore(el.dataset),
     render(createElement) {
-      return createElement(Agents, {
+      return 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 f0f96fd7872d06..2856bed2b6bbac 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -78,3 +78,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
 export const setPage = ({ commit }, page) => {
   commit(types.SET_PAGE, page);
 };
+
+export const setNewAgentRegistered = ({ commit }, state) => {
+  commit(types.SET_NEW_AGENT_REGISTERED, state);
+};
diff --git a/app/assets/javascripts/clusters_list/store/mutation_types.js b/app/assets/javascripts/clusters_list/store/mutation_types.js
index beb4388c93e3b6..a64a17688dd259 100644
--- a/app/assets/javascripts/clusters_list/store/mutation_types.js
+++ b/app/assets/javascripts/clusters_list/store/mutation_types.js
@@ -2,3 +2,4 @@ export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
 export const SET_LOADING_CLUSTERS = 'SET_LOADING_CLUSTERS';
 export const SET_LOADING_NODES = 'SET_LOADING_NODES';
 export const SET_PAGE = 'SET_PAGE';
+export const SET_NEW_AGENT_REGISTERED = 'SET_NEW_AGENT_REGISTERED';
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index e5c15ccbd6e4b2..ffa4423deec312 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -18,4 +18,7 @@ export default {
   [types.SET_PAGE](state, value) {
     state.page = Number(value) || 1;
   },
+  [types.SET_NEW_AGENT_REGISTERED](state, value) {
+    state.newAgentRegistered = value;
+  },
 };
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 3dcbf58c8d39e6..979d21c98f1c9f 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -16,4 +16,5 @@ export default (initialState = {}) => ({
   },
   totalClusters: 0,
   canAddCluster: parseBoolean(initialState.canAddCluster),
+  newAgentRegistered: false,
 });
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index f54764f8d050d9..b450bca4f41032 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -20,4 +20,23 @@
       @include gl-flex-wrap;
     }
   }
+
+  .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;
+      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 bc464b8809b829..1d54ce99a0a6e1 100644
--- a/app/helpers/clusters_helper.rb
+++ b/app/helpers/clusters_helper.rb
@@ -16,19 +16,6 @@ def display_cluster_agents?(clusterable)
     clusterable.is_a?(Project)
   end
 
-  def js_cluster_agents_list_data(clusterable_project)
-    {
-      default_branch_name: clusterable_project.default_branch,
-      empty_state_image: image_path('illustrations/empty-state/empty-state-agents.svg'),
-      project_path: clusterable_project.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'),
-      kas_address: Gitlab::Kas.external_url
-    }
-  end
-
   def js_clusters_list_data(clusterable)
     {
       ancestor_help_path: help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'),
@@ -45,6 +32,20 @@ def js_clusters_list_data(clusterable)
     }
   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,
+      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'),
+      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/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/locale/gitlab.pot b/locale/gitlab.pot
index 776483cf596e16..e48fc720a3015c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7321,6 +7321,12 @@ msgstr ""
 msgid "ClusterAgents|Access tokens"
 msgstr ""
 
+msgid "ClusterAgents|Actions"
+msgstr ""
+
+msgid "ClusterAgents|Agent"
+msgstr ""
+
 msgid "ClusterAgents|Agent might not be connected to GitLab"
 msgstr ""
 
@@ -7339,10 +7345,16 @@ msgstr ""
 msgid "ClusterAgents|An unknown error occurred. Please try again."
 msgstr ""
 
+msgid "ClusterAgents|Certificate based"
+msgstr ""
+
 msgid "ClusterAgents|Configuration"
 msgstr ""
 
-msgid "ClusterAgents|Connect with a GitLab Agent"
+msgid "ClusterAgents|Connect with Agent"
+msgstr ""
+
+msgid "ClusterAgents|Connect with certificate"
 msgstr ""
 
 msgid "ClusterAgents|Connected"
@@ -7354,6 +7366,9 @@ msgstr ""
 msgid "ClusterAgents|Copy token"
 msgstr ""
 
+msgid "ClusterAgents|Create new cluster"
+msgstr ""
+
 msgid "ClusterAgents|Created by"
 msgstr ""
 
@@ -7603,9 +7618,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 ""
 
@@ -7741,9 +7753,6 @@ msgstr ""
 msgid "ClusterIntegration|Fetching zones"
 msgstr ""
 
-msgid "ClusterIntegration|GitLab Agent managed clusters"
-msgstr ""
-
 msgid "ClusterIntegration|GitLab Integration"
 msgstr ""
 
diff --git a/spec/features/clusters/create_agent_spec.rb b/spec/features/clusters/create_agent_spec.rb
index a05a3c4df9e750..444b6b86451bad 100644
--- a/spec/features/clusters/create_agent_spec.rb
+++ b/spec/features/clusters/create_agent_spec.rb
@@ -24,9 +24,7 @@
   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('Connect with a GitLab Agent')
+    click_button('Integrate with the GitLab Agent')
     expect(page).to have_content('Install new Agent')
 
     click_button('Select an Agent')
diff --git a/spec/features/projects/cluster_agents_spec.rb b/spec/features/projects/cluster_agents_spec.rb
index 4b8f635f43253f..85681ec95d3382 100644
--- a/spec/features/projects/cluster_agents_spec.rb
+++ b/spec/features/projects/cluster_agents_spec.rb
@@ -22,9 +22,7 @@
     end
 
     it 'displays empty state', :aggregate_failures do
-      click_link 'GitLab Agent managed clusters'
-
-      expect(page).to have_content('Connect with a GitLab Agent')
+      expect(page).to have_content('Integrate with the GitLab Agent')
       expect(page).to have_selector('.empty-state')
     end
   end
@@ -36,8 +34,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/spec/features/projects/clusters/eks_spec.rb b/spec/features/projects/clusters/eks_spec.rb
index 3cbc71028d19fe..995194b07cc771 100644
--- a/spec/features/projects/clusters/eks_spec.rb
+++ b/spec/features/projects/clusters/eks_spec.rb
@@ -19,7 +19,8 @@
     before do
       visit project_clusters_path(project)
 
-      click_link 'Connect with a certificate'
+      click_link 'Certificate based'
+      click_link 'Integrate with a cluster certificate'
     end
 
     context 'when user creates a cluster on AWS EKS' do
diff --git a/spec/features/projects/clusters/gcp_spec.rb b/spec/features/projects/clusters/gcp_spec.rb
index dec71c3c9013ca..f4f92f68ac259e 100644
--- a/spec/features/projects/clusters/gcp_spec.rb
+++ b/spec/features/projects/clusters/gcp_spec.rb
@@ -33,7 +33,8 @@ def submit_form
       before do
         visit project_clusters_path(project)
 
-        click_link 'Connect with a certificate'
+        click_link 'Certificate based'
+        click_link 'Integrate with a cluster certificate'
         click_link 'Create new cluster'
         click_link 'Google GKE'
       end
@@ -143,8 +144,9 @@ def submit_form
         before do
           visit project_clusters_path(project)
 
-          click_link 'Connect cluster with certificate'
-          click_link 'Connect existing cluster'
+          click_link 'Certificate based'
+          click_button(class: 'dropdown-toggle-split')
+          click_link 'Connect with certificate'
         end
 
         it 'user sees the "Environment scope" field' do
@@ -158,6 +160,7 @@ def submit_form
           click_button 'Remove integration and resources'
           fill_in 'confirm_cluster_name_input', with: cluster.name
           click_button 'Remove integration'
+          click_link 'Certificate based'
         end
 
         it 'user sees creation form with the successful message' do
@@ -171,6 +174,7 @@ def submit_form
   context 'when user has not dismissed GCP signup offer' do
     before do
       visit project_clusters_path(project)
+      click_link 'Certificate based'
     end
 
     it 'user sees offer on cluster index page' do
@@ -187,6 +191,7 @@ def submit_form
   context 'when user has dismissed GCP signup offer' do
     before do
       visit project_clusters_path(project)
+      click_link 'Certificate based'
     end
 
     it 'user does not see offer after dismissing' do
@@ -202,12 +207,11 @@ def submit_form
   end
 
   context 'when third party offers are disabled', :clean_gitlab_redis_shared_state do
-    let(:admin) { create(:admin) }
+    let(:user) { create(:admin) }
 
     before do
       stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false')
-      sign_in(admin)
-      gitlab_enable_admin_mode_sign_in(admin)
+      gitlab_enable_admin_mode_sign_in(user)
       visit general_admin_application_settings_path
     end
 
diff --git a/spec/features/projects/clusters/user_spec.rb b/spec/features/projects/clusters/user_spec.rb
index 4d663ec5a5a377..f6897413370a85 100644
--- a/spec/features/projects/clusters/user_spec.rb
+++ b/spec/features/projects/clusters/user_spec.rb
@@ -25,7 +25,8 @@
     before do
       visit project_clusters_path(project)
 
-      click_link 'Connect with a certificate'
+      click_link 'Certificate based'
+      click_link 'Integrate with a cluster certificate'
       click_link 'Connect existing cluster'
     end
 
@@ -112,6 +113,7 @@
         click_button 'Remove integration and resources'
         fill_in 'confirm_cluster_name_input', with: cluster.name
         click_button 'Remove integration'
+        click_link 'Certificate based'
       end
 
       it 'user sees creation form with the successful message' do
diff --git a/spec/features/projects/clusters_spec.rb b/spec/features/projects/clusters_spec.rb
index 4190b83cfbfdf4..bd260fe6e34732 100644
--- a/spec/features/projects/clusters_spec.rb
+++ b/spec/features/projects/clusters_spec.rb
@@ -16,6 +16,7 @@
   context 'when user does not have a cluster and visits cluster index page' do
     before do
       visit project_clusters_path(project)
+      click_link 'Certificate based'
     end
 
     it 'sees empty state' do
@@ -33,16 +34,17 @@
       before do
         create(:cluster, :provided_by_user, name: 'default-cluster', environment_scope: '*', projects: [project])
         visit project_clusters_path(project)
+        click_link 'Certificate based'
+        click_button(class: 'dropdown-toggle-split')
       end
 
       it 'user sees an add cluster button' do
-        expect(page).to have_selector('.js-add-cluster:not(.readonly)')
+        expect(page).to have_content('Connect with certificate')
       end
 
       context 'when user filled form with environment scope' do
         before do
-          click_link 'Connect cluster with certificate'
-          click_link 'Connect existing cluster'
+          click_link 'Connect with certificate'
           fill_in 'cluster_name', with: 'staging-cluster'
           fill_in 'cluster_environment_scope', with: 'staging/*'
           click_button 'Add Kubernetes cluster'
@@ -70,8 +72,7 @@
 
       context 'when user updates duplicated environment scope' do
         before do
-          click_link 'Connect cluster with certificate'
-          click_link 'Connect existing cluster'
+          click_link 'Connect with certificate'
           fill_in 'cluster_name', with: 'staging-cluster'
           fill_in 'cluster_environment_scope', with: '*'
           fill_in 'cluster_platform_kubernetes_attributes_api_url', with: 'https://0.0.0.0'
@@ -108,15 +109,12 @@
 
         create(:cluster, :provided_by_gcp, name: 'default-cluster', environment_scope: '*', projects: [project])
         visit project_clusters_path(project)
-      end
-
-      it 'user sees a add cluster button' do
-        expect(page).to have_selector('.js-add-cluster:not(.readonly)')
+        click_link 'Certificate based'
       end
 
       context 'when user filled form with environment scope' do
         before do
-          click_link 'Connect cluster with certificate'
+          click_button(class: 'dropdown-toggle-split')
           click_link 'Create new cluster'
           click_link 'Google GKE'
 
@@ -161,7 +159,7 @@
 
       context 'when user updates duplicated environment scope' do
         before do
-          click_link 'Connect cluster with certificate'
+          click_button(class: 'dropdown-toggle-split')
           click_link 'Create new cluster'
           click_link 'Google GKE'
 
@@ -192,6 +190,7 @@
 
     before do
       visit project_clusters_path(project)
+      click_link 'Certificate based'
     end
 
     it 'user sees a table with one cluster' do
@@ -214,7 +213,8 @@
     before do
       visit project_clusters_path(project)
 
-      click_link 'Connect with a certificate'
+      click_link 'Certificate based'
+      click_link 'Integrate with a cluster certificate'
       click_link 'Create new cluster'
     end
 
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..3c069ff96851b5 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -1,18 +1,21 @@
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import Vuex from 'vuex';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import Agents from '~/clusters_list/components/agents.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import defaultStore from '~/clusters_list/store';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 describe('Agents', () => {
   let wrapper;
+  let store;
 
   const propsData = {
     defaultBranchName: 'default',
@@ -22,6 +25,10 @@ describe('Agents', () => {
     kasAddress: 'kas.example.com',
   };
 
+  const entryData = {
+    newAgentRegistered: false,
+  };
+
   const createWrapper = ({ agents = [], pageInfo = null, trees = [] }) => {
     const provide = provideData;
     const apolloQueryResponse = {
@@ -37,8 +44,18 @@ describe('Agents', () => {
       [getAgentsQuery, jest.fn().mockResolvedValue(apolloQueryResponse, provide)],
     ]);
 
+    const setNewAgentRegistered = jest.fn();
+
+    store = new Vuex.Store({
+      ...defaultStore,
+      state: entryData,
+      actions: {
+        setNewAgentRegistered,
+      },
+    });
     wrapper = shallowMount(Agents, {
       localVue,
+      store,
       apolloProvider,
       propsData,
       provide: provideData,
@@ -54,7 +71,6 @@ describe('Agents', () => {
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 
@@ -234,7 +250,12 @@ describe('Agents', () => {
     };
 
     beforeEach(() => {
-      wrapper = shallowMount(Agents, { mocks, propsData, provide: provideData });
+      wrapper = shallowMount(Agents, {
+        mocks,
+        propsData,
+        provide: provideData,
+        store,
+      });
 
       return wrapper.vm.$nextTick();
     });
@@ -243,4 +264,18 @@ describe('Agents', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
+
+  describe('when new agent is registered', () => {
+    let reloadAgentsSpy;
+    beforeEach(() => {
+      createWrapper({ agents: [] });
+      reloadAgentsSpy = jest.spyOn(wrapper.vm, 'reloadAgents');
+    });
+
+    it('reloads agents query', async () => {
+      wrapper.vm.$store.state.newAgentRegistered = true;
+      await wrapper.vm.$nextTick();
+      expect(reloadAgentsSpy).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/frontend/clusters_list/components/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_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
new file mode 100644
index 00000000000000..eb62ef3e7cb044
--- /dev/null
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -0,0 +1,56 @@
+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
+      ${'Agent'}             | ${'agent'}             | ${0}
+      ${'Certificate based'} | ${'certificate_based'} | ${1}
+    `(
+      '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);
+      },
+    );
+  });
+});
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 98ca5e05b3ff8c..ade7335df02a77 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -1,6 +1,7 @@
 import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import Vuex from 'vuex';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
 import { I18N_INSTALL_AGENT_MODAL } from '~/clusters_list/constants';
@@ -9,6 +10,7 @@ import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_a
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
+import defaultStore from '~/clusters_list/store';
 import {
   createAgentResponse,
   createAgentErrorResponse,
@@ -43,6 +45,17 @@ describe('InstallAgentModal', () => {
     }
   };
 
+  const setNewAgentRegistered = jest.fn();
+
+  const createStore = () => {
+    return new Vuex.Store({
+      ...defaultStore,
+      actions: {
+        setNewAgentRegistered,
+      },
+    });
+  };
+
   const createWrapper = () => {
     const provide = {
       projectPath: 'path/to/project',
@@ -51,6 +64,7 @@ describe('InstallAgentModal', () => {
 
     wrapper = shallowMount(InstallAgentModal, {
       attachTo: document.body,
+      store: createStore(),
       stubs: {
         GlModal: ModalStub,
       },
@@ -156,6 +170,13 @@ describe('InstallAgentModal', () => {
       expect(code).toContain('--kas-address=kas.example.com');
     });
 
+    describe('clicking on the done button', () => {
+      it('updates the newAgentRegistered value in store', () => {
+        findActionButton().vm.$emit('click');
+        expect(setNewAgentRegistered).toHaveBeenCalledWith(expect.anything(), true);
+      });
+    });
+
     describe('error creating agent', () => {
       beforeEach(() => {
         apolloProvider = createMockApollo([
diff --git a/spec/frontend/clusters_list/store/mutations_spec.js b/spec/frontend/clusters_list/store/mutations_spec.js
index f8723bfcdfc0af..b557e1932f05fd 100644
--- a/spec/frontend/clusters_list/store/mutations_spec.js
+++ b/spec/frontend/clusters_list/store/mutations_spec.js
@@ -57,4 +57,12 @@ describe('Admin statistics panel mutations', () => {
       expect(state.page).toBe(123);
     });
   });
+
+  describe(`${types.SET_NEW_AGENT_REGISTERED}`, () => {
+    it('changes newAgentRegistered value', () => {
+      mutations[types.SET_NEW_AGENT_REGISTERED](state, true);
+
+      expect(state.newAgentRegistered).toBe(true);
+    });
+  });
 });
diff --git a/spec/helpers/clusters_helper_spec.rb b/spec/helpers/clusters_helper_spec.rb
index 904151812e66e0..98cde445711907 100644
--- a/spec/helpers/clusters_helper_spec.rb
+++ b/spec/helpers/clusters_helper_spec.rb
@@ -59,35 +59,6 @@
     end
   end
 
-  describe '#js_cluster_agents_list_data' do
-    let_it_be(:project) { build(:project, :repository) }
-
-    subject { helper.js_cluster_agents_list_data(project) }
-
-    it 'displays project default branch' do
-      expect(subject[:default_branch_name]).to eq(project.default_branch)
-    end
-
-    it 'displays image path' do
-      expect(subject[:empty_state_image]).to match(%r(/illustrations/empty-state/empty-state-agents|svg))
-    end
-
-    it 'displays project path' do
-      expect(subject[:project_path]).to eq(project.full_path)
-    end
-
-    it 'generates docs urls' do
-      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 kas address' do
-      expect(subject[:kas_address]).to eq(Gitlab::Kas.external_url)
-    end
-  end
-
   describe '#js_clusters_list_data' do
     let_it_be(:current_user) { create(:user) }
     let_it_be(:project) { build(:project) }
@@ -153,6 +124,41 @@
     end
   end
 
+  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_clusters_data(clusterable) }
+
+    it 'displays project default branch' do
+      expect(subject[:default_branch_name]).to eq(project.default_branch)
+    end
+
+    it 'displays image path' do
+      expect(subject[:empty_state_image]).to match(%r(/illustrations/logos/clusters_empty|svg))
+    end
+
+    it 'displays project path' do
+      expect(subject[:project_path]).to eq(project.full_path)
+    end
+
+    it 'generates docs urls' do
+      expect(subject[:agent_docs_url]).to eq(help_page_path('user/clusters/agent/index'))
+      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 cluster using certificate path' do
+      expect(subject[:add_cluster_path]).to eq("#{project_path(project)}/-/clusters/new?tab=add")
+    end
+
+    it 'displays kas address' do
+      expect(subject[:kas_address]).to eq(Gitlab::Kas.external_url)
+    end
+  end
+
   describe '#js_cluster_new' do
     subject { helper.js_cluster_new }
 
-- 
GitLab


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

---
 .../components/agent_empty_state.vue          | 26 +++++++++-----
 .../clusters_list/components/agent_table.vue  | 35 ++++++++++---------
 .../clusters_list/load_main_view.js           |  8 -----
 app/helpers/clusters_helper.rb                |  4 ---
 .../components/agent_empty_state_spec.js      | 17 ++-------
 .../components/agent_table_spec.js            |  3 +-
 .../clusters_list/components/agents_spec.js   |  6 ++--
 .../components/clusters_main_view_spec.js     |  2 +-
 spec/helpers/clusters_helper_spec.rb          |  7 ----
 9 files changed, 45 insertions(+), 63 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 06092039eb7caf..5411ae3f544f4d 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
 import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
@@ -15,14 +16,7 @@ export default {
   directives: {
     GlModalDirective,
   },
-  inject: [
-    'emptyStateImage',
-    'projectPath',
-    'multipleClustersDocsUrl',
-    'installDocsUrl',
-    'getStartedDocsUrl',
-    'integrationDocsUrl',
-  ],
+  inject: ['emptyStateImage', 'projectPath'],
   props: {
     hasConfigurations: {
       type: Boolean,
@@ -33,6 +27,22 @@ export default {
     repositoryPath() {
       return `/${this.projectPath}`;
     },
+    agentDocsUrl() {
+      return helpPagePath('user/clusters/agent/index');
+    },
+    installDocsUrl() {
+      return helpPagePath('administration/clusters/kas');
+    },
+    getStartedDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'define-a-configuration-repository',
+      });
+    },
+    integrationsDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
+      });
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index bf9f98afdc5673..b10a5e010cbfe3 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -9,6 +9,7 @@ import {
   GlPopover,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES, TROUBLESHOOTING_LINK } from '../constants';
@@ -27,7 +28,6 @@ export default {
     GlModalDirective,
   },
   mixins: [timeagoMixin],
-  inject: ['integrationDocsUrl'],
   INSTALL_AGENT_MODAL_ID,
   AGENT_STATUSES,
   TROUBLESHOOTING_LINK,
@@ -62,6 +62,19 @@ export default {
         },
       ];
     },
+    integrationDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
+      });
+    },
+  },
+  methods: {
+    getCellId(item) {
+      return `connection-status-${item.name}`;
+    },
+    getConfigPath(item) {
+      return `.gitlab/agents/${item.name}`;
+    },
   },
 };
 </script>
@@ -83,27 +96,19 @@ export default {
     </template>
 
     <template #cell(status)="{ item }">
-      <span
-        :id="`connection-status-${item.name}`"
-        class="gl-md-pr-5"
-        data-testid="cluster-agent-connection-status"
-      >
+      <span :id="getCellId(item)" 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-tooltip v-if="item.status === 'active'" :target="getCellId(item)" 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}`"
+        :target="getCellId(item)"
         :title="$options.AGENT_STATUSES[item.status].tooltip.title"
         placement="right"
         container="viewport"
@@ -131,13 +136,11 @@ export default {
 
     <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 }}
+          {{ getConfigPath(item) }}
         </gl-link>
 
-        <span v-else>.gitlab/agents/{{ item.name }}</span>
-        <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
+        <span v-else>{{ getConfigPath(item) }}</span>
       </span>
     </template>
   </gl-table>
diff --git a/app/assets/javascripts/clusters_list/load_main_view.js b/app/assets/javascripts/clusters_list/load_main_view.js
index 4222f078db94ec..08c99b46e1626f 100644
--- a/app/assets/javascripts/clusters_list/load_main_view.js
+++ b/app/assets/javascripts/clusters_list/load_main_view.js
@@ -19,10 +19,6 @@ export default () => {
     emptyStateImage,
     defaultBranchName,
     projectPath,
-    multipleClustersDocsUrl,
-    installDocsUrl,
-    getStartedDocsUrl,
-    integrationDocsUrl,
     kasAddress,
     newClusterPath,
     addClusterPath,
@@ -36,10 +32,6 @@ export default () => {
     provide: {
       emptyStateImage,
       projectPath,
-      multipleClustersDocsUrl,
-      installDocsUrl,
-      getStartedDocsUrl,
-      integrationDocsUrl,
       kasAddress,
       newClusterPath,
       addClusterPath,
diff --git a/app/helpers/clusters_helper.rb b/app/helpers/clusters_helper.rb
index 1d54ce99a0a6e1..0d1b137a41637a 100644
--- a/app/helpers/clusters_helper.rb
+++ b/app/helpers/clusters_helper.rb
@@ -37,10 +37,6 @@ 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,
-      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'),
       add_cluster_path: clusterable.new_path(tab: 'add'),
       kas_address: Gitlab::Kas.external_url
     }.merge(js_clusters_list_data(clusterable))
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 cf7957e8df166c..26095f09fdbd20 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -1,13 +1,12 @@
 import { GlAlert, GlEmptyState, GlSprintf } from '@gitlab/ui';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 const emptyStateImage = '/path/to/image';
 const projectPath = 'path/to/project';
-const multipleClustersDocsUrl = 'path/to/multipleClustersDocs';
-const installDocsUrl = 'path/to/installDocs';
-const getStartedDocsUrl = 'path/to/getStartedDocs';
-const integrationDocsUrl = 'path/to/integrationDocs';
+const agentDocsUrl = helpPagePath('user/clusters/agent/index');
+const installDocsUrl = helpPagePath('administration/clusters/kas');
 
 describe('AgentEmptyStateComponent', () => {
   let wrapper;
@@ -18,18 +17,8 @@ describe('AgentEmptyStateComponent', () => {
   const provideData = {
     emptyStateImage,
     projectPath,
-    multipleClustersDocsUrl,
-    installDocsUrl,
-    getStartedDocsUrl,
-    integrationDocsUrl,
   };
 
-  const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
-  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
-  const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
-  const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
-  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
-
   beforeEach(() => {
     wrapper = shallowMountExtended(AgentEmptyState, {
       propsData,
diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js
index 60184a56ea2c52..a6d76b069cf021 100644
--- a/spec/frontend/clusters_list/components/agent_table_spec.js
+++ b/spec/frontend/clusters_list/components/agent_table_spec.js
@@ -47,7 +47,6 @@ const propsData = {
     },
   ],
 };
-const provideData = { integrationDocsUrl: 'path/to/integrationDocs' };
 
 describe('AgentTable', () => {
   let wrapper;
@@ -60,7 +59,7 @@ describe('AgentTable', () => {
     wrapper.findAllByTestId('cluster-agent-configuration-link').at(at);
 
   beforeEach(() => {
-    wrapper = mountExtended(AgentTable, { propsData, provide: provideData });
+    wrapper = mountExtended(AgentTable, { propsData });
   });
 
   afterEach(() => {
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 3c069ff96851b5..a516b8769f1c0e 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -266,16 +266,16 @@ describe('Agents', () => {
   });
 
   describe('when new agent is registered', () => {
-    let reloadAgentsSpy;
+    let refetchAgentsSpy;
     beforeEach(() => {
       createWrapper({ agents: [] });
-      reloadAgentsSpy = jest.spyOn(wrapper.vm, 'reloadAgents');
+      refetchAgentsSpy = jest.spyOn(wrapper.vm.$apollo.queries.agents, 'refetch');
     });
 
     it('reloads agents query', async () => {
       wrapper.vm.$store.state.newAgentRegistered = true;
       await wrapper.vm.$nextTick();
-      expect(reloadAgentsSpy).toHaveBeenCalled();
+      expect(refetchAgentsSpy).toHaveBeenCalled();
     });
   });
 });
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
index eb62ef3e7cb044..3869a2a87365d8 100644
--- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -33,7 +33,7 @@ describe('ClustersMainViewComponent', () => {
   });
 
   it('renders correct number of tabs', () => {
-    expect(findAllTabs().length).toBe(CLUSTERS_TABS.length);
+    expect(findAllTabs()).toHaveLength(CLUSTERS_TABS.length);
   });
 
   it('passes child-component param to the component', () => {
diff --git a/spec/helpers/clusters_helper_spec.rb b/spec/helpers/clusters_helper_spec.rb
index 98cde445711907..396e257381e419 100644
--- a/spec/helpers/clusters_helper_spec.rb
+++ b/spec/helpers/clusters_helper_spec.rb
@@ -143,13 +143,6 @@
       expect(subject[:project_path]).to eq(project.full_path)
     end
 
-    it 'generates docs urls' do
-      expect(subject[:agent_docs_url]).to eq(help_page_path('user/clusters/agent/index'))
-      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 cluster using certificate path' do
       expect(subject[:add_cluster_path]).to eq("#{project_path(project)}/-/clusters/new?tab=add")
     end
-- 
GitLab


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

---
 .../components/agent_empty_state.vue          | 30 +++++++------------
 .../components/clusters_actions.vue           |  4 +--
 .../components/agent_empty_state_spec.js      |  9 ++++--
 3 files changed, 20 insertions(+), 23 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 5411ae3f544f4d..f65f3fcd954bc5 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -6,6 +6,14 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
   modalId: INSTALL_AGENT_MODAL_ID,
+  multipleClustersDocsUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'),
+  installDocsUrl: helpPagePath('administration/clusters/kas'),
+  getStartedDocsUrl: helpPagePath('user/clusters/agent/index', {
+    anchor: 'define-a-configuration-repository',
+  }),
+  integrationsDocsUrl: helpPagePath('user/clusters/agent/index', {
+    anchor: 'get-started-with-gitops-and-the-gitlab-agent',
+  }),
   components: {
     GlButton,
     GlEmptyState,
@@ -27,22 +35,6 @@ export default {
     repositoryPath() {
       return `/${this.projectPath}`;
     },
-    agentDocsUrl() {
-      return helpPagePath('user/clusters/agent/index');
-    },
-    installDocsUrl() {
-      return helpPagePath('administration/clusters/kas');
-    },
-    getStartedDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'define-a-configuration-repository',
-      });
-    },
-    integrationsDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
-      });
-    },
   },
 };
 </script>
@@ -57,7 +49,7 @@ export default {
         <gl-sprintf :message="$options.i18n.multipleClustersText">
           <template #link="{ content }">
             <gl-link
-              :href="multipleClustersDocsUrl"
+              :href="$options.multipleClustersDocsUrl"
               target="_blank"
               data-testid="multiple-clusters-docs-link"
             >
@@ -68,7 +60,7 @@ export default {
       </p>
 
       <p class="mw-460 gl-mx-auto">
-        <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
+        <gl-link :href="$options.installDocsUrl" target="_blank" data-testid="install-docs-link">
           {{ $options.i18n.learnMoreText }}
         </gl-link>
       </p>
@@ -85,7 +77,7 @@ export default {
           <gl-button
             category="primary"
             variant="info"
-            :href="getStartedDocsUrl"
+            :href="$options.getStartedDocsUrl"
             target="_blank"
             class="gl-ml-0!"
           >
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index c504bde2dbb97b..b7cfb993489a74 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -26,7 +26,7 @@ export default {
       split
       right
     >
-      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link">
+      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
         {{ s__('ClusterAgents|Create new cluster') }}
       </gl-dropdown-item>
       <gl-dropdown-item
@@ -35,7 +35,7 @@ export default {
       >
         {{ s__('ClusterAgents|Connect with Agent') }}
       </gl-dropdown-item>
-      <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link">
+      <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
         {{ s__('ClusterAgents|Connect with certificate') }}
       </gl-dropdown-item>
     </gl-dropdown>
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 26095f09fdbd20..38f0e0ba2c4f5a 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -5,7 +5,7 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 
 const emptyStateImage = '/path/to/image';
 const projectPath = 'path/to/project';
-const agentDocsUrl = helpPagePath('user/clusters/agent/index');
+const multipleClustersDocsUrl = helpPagePath('user/project/clusters/multiple_kubernetes_clusters');
 const installDocsUrl = helpPagePath('administration/clusters/kas');
 
 describe('AgentEmptyStateComponent', () => {
@@ -19,6 +19,12 @@ describe('AgentEmptyStateComponent', () => {
     projectPath,
   };
 
+  const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
+  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
+  const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
+  const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+
   beforeEach(() => {
     wrapper = shallowMountExtended(AgentEmptyState, {
       propsData,
@@ -30,7 +36,6 @@ describe('AgentEmptyStateComponent', () => {
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 
-- 
GitLab


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

---
 .../clusters_list/components/agent_empty_state.vue          | 2 +-
 .../javascripts/clusters_list/components/agent_table.vue    | 6 ------
 .../clusters_list/components/clusters_empty_state.vue       | 1 +
 app/helpers/clusters_helper.rb                              | 2 +-
 locale/gitlab.pot                                           | 6 +++---
 spec/features/clusters/create_agent_spec.rb                 | 3 +--
 spec/features/projects/cluster_agents_spec.rb               | 2 +-
 spec/features/projects/clusters/eks_spec.rb                 | 2 +-
 spec/features/projects/clusters/gcp_spec.rb                 | 2 +-
 spec/features/projects/clusters/user_spec.rb                | 2 +-
 spec/features/projects/clusters_spec.rb                     | 2 +-
 spec/helpers/clusters_helper_spec.rb                        | 2 +-
 12 files changed, 13 insertions(+), 19 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 f65f3fcd954bc5..5c6f9de0624ce2 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
-import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
 
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index b10a5e010cbfe3..3022e259c4805a 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -9,7 +9,6 @@ import {
   GlPopover,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES, TROUBLESHOOTING_LINK } from '../constants';
@@ -62,11 +61,6 @@ export default {
         },
       ];
     },
-    integrationDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
-      });
-    },
   },
   methods: {
     getCellId(item) {
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
index 1f153a4f38ee09..993507b18bfdaa 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -14,6 +14,7 @@ export default {
   },
   inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
   learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
+  multipleClustersHelpUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'),
   computed: {
     ...mapState(['canAddCluster']),
   },
diff --git a/app/helpers/clusters_helper.rb b/app/helpers/clusters_helper.rb
index 0d1b137a41637a..93b6b4e8fe20ae 100644
--- a/app/helpers/clusters_helper.rb
+++ b/app/helpers/clusters_helper.rb
@@ -35,7 +35,7 @@ def js_clusters_list_data(clusterable)
   def js_clusters_data(clusterable)
     {
       default_branch_name: clusterable.default_branch,
-      empty_state_image: image_path('illustrations/clusters_empty.svg'),
+      empty_state_image: image_path('illustrations/empty-state/empty-state-agents.svg'),
       project_path: clusterable.full_path,
       add_cluster_path: clusterable.new_path(tab: 'add'),
       kas_address: Gitlab::Kas.external_url
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e48fc720a3015c..00edcefae0e3b4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7354,6 +7354,9 @@ msgstr ""
 msgid "ClusterAgents|Connect with Agent"
 msgstr ""
 
+msgid "ClusterAgents|Connect with a GitLab Agent"
+msgstr ""
+
 msgid "ClusterAgents|Connect with certificate"
 msgstr ""
 
@@ -7393,9 +7396,6 @@ msgstr ""
 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|Install a new GitLab Agent"
-msgstr ""
-
 msgid "ClusterAgents|Install new Agent"
 msgstr ""
 
diff --git a/spec/features/clusters/create_agent_spec.rb b/spec/features/clusters/create_agent_spec.rb
index 444b6b86451bad..0caf2402a8900c 100644
--- a/spec/features/clusters/create_agent_spec.rb
+++ b/spec/features/clusters/create_agent_spec.rb
@@ -24,7 +24,7 @@
   end
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
-    click_button('Integrate with the GitLab Agent')
+    click_button('Actions')
     expect(page).to have_content('Install new Agent')
 
     click_button('Select an Agent')
@@ -37,6 +37,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/spec/features/projects/cluster_agents_spec.rb b/spec/features/projects/cluster_agents_spec.rb
index 85681ec95d3382..98ee6ca161f4df 100644
--- a/spec/features/projects/cluster_agents_spec.rb
+++ b/spec/features/projects/cluster_agents_spec.rb
@@ -22,7 +22,7 @@
     end
 
     it 'displays empty state', :aggregate_failures do
-      expect(page).to have_content('Integrate with the GitLab Agent')
+      expect(page).to have_content('Connect with a GitLab Agent')
       expect(page).to have_selector('.empty-state')
     end
   end
diff --git a/spec/features/projects/clusters/eks_spec.rb b/spec/features/projects/clusters/eks_spec.rb
index 995194b07cc771..09c10c0b3a9b58 100644
--- a/spec/features/projects/clusters/eks_spec.rb
+++ b/spec/features/projects/clusters/eks_spec.rb
@@ -20,7 +20,7 @@
       visit project_clusters_path(project)
 
       click_link 'Certificate based'
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
     end
 
     context 'when user creates a cluster on AWS EKS' do
diff --git a/spec/features/projects/clusters/gcp_spec.rb b/spec/features/projects/clusters/gcp_spec.rb
index f4f92f68ac259e..e1659cd2fbffde 100644
--- a/spec/features/projects/clusters/gcp_spec.rb
+++ b/spec/features/projects/clusters/gcp_spec.rb
@@ -34,7 +34,7 @@ def submit_form
         visit project_clusters_path(project)
 
         click_link 'Certificate based'
-        click_link 'Integrate with a cluster certificate'
+        click_link 'Connect with a certificate'
         click_link 'Create new cluster'
         click_link 'Google GKE'
       end
diff --git a/spec/features/projects/clusters/user_spec.rb b/spec/features/projects/clusters/user_spec.rb
index f6897413370a85..d3f709bfb5399c 100644
--- a/spec/features/projects/clusters/user_spec.rb
+++ b/spec/features/projects/clusters/user_spec.rb
@@ -26,7 +26,7 @@
       visit project_clusters_path(project)
 
       click_link 'Certificate based'
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
       click_link 'Connect existing cluster'
     end
 
diff --git a/spec/features/projects/clusters_spec.rb b/spec/features/projects/clusters_spec.rb
index bd260fe6e34732..a49fa4c9e31c9d 100644
--- a/spec/features/projects/clusters_spec.rb
+++ b/spec/features/projects/clusters_spec.rb
@@ -214,7 +214,7 @@
       visit project_clusters_path(project)
 
       click_link 'Certificate based'
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
       click_link 'Create new cluster'
     end
 
diff --git a/spec/helpers/clusters_helper_spec.rb b/spec/helpers/clusters_helper_spec.rb
index 396e257381e419..51f111917d1d49 100644
--- a/spec/helpers/clusters_helper_spec.rb
+++ b/spec/helpers/clusters_helper_spec.rb
@@ -136,7 +136,7 @@
     end
 
     it 'displays image path' do
-      expect(subject[:empty_state_image]).to match(%r(/illustrations/logos/clusters_empty|svg))
+      expect(subject[:empty_state_image]).to match(%r(/illustrations/empty-state/empty-state-agents|svg))
     end
 
     it 'displays project path' do
-- 
GitLab


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

---
 .../clusters_list/components/agents.vue       | 11 ---
 .../components/clusters_main_view.vue         |  2 +-
 .../components/install_agent_modal.vue        | 67 +++++++++++++++++--
 .../mutations/create_agent.mutation.graphql   |  1 +
 .../clusters_list/store/actions.js            |  4 --
 .../clusters_list/store/mutation_types.js     |  1 -
 .../clusters_list/store/mutations.js          |  3 -
 .../javascripts/clusters_list/store/state.js  |  1 -
 .../clusters_list/components/agents_spec.js   | 32 ---------
 .../components/install_agent_modal_spec.js    | 21 ------
 spec/frontend/clusters_list/mocks/apollo.js   |  4 ++
 .../clusters_list/store/mutations_spec.js     |  8 ---
 12 files changed, 69 insertions(+), 86 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index 4097968a32de11..4fc79b32b9cdfa 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
 import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AgentEmptyState from './agent_empty_state.vue';
@@ -48,7 +47,6 @@ export default {
     };
   },
   computed: {
-    ...mapState(['newAgentRegistered']),
     agentList() {
       let list = this.agents?.project?.clusterAgents?.nodes;
 
@@ -79,16 +77,7 @@ export default {
       return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
     },
   },
-  watch: {
-    newAgentRegistered(value) {
-      if (value) {
-        this.reloadAgents();
-        this.setNewAgentRegistered(false);
-      }
-    },
-  },
   methods: {
-    ...mapActions(['setNewAgentRegistered']),
     reloadAgents() {
       this.$apollo.queries.agents.refetch();
     },
diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
index 633d7c91f9b978..c87cf5933050bd 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -63,6 +63,6 @@ export default {
       </template>
     </gl-tabs>
 
-    <install-agent-modal />
+    <install-agent-modal :default-branch-name="defaultBranchName" />
   </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 3489e0f7dfc097..5cbf81872be2e1 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -8,14 +8,15 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
-import { mapActions } from 'vuex';
+import produce from 'immer';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import { generateAgentRegistrationCommand } from '../clusters_util';
-import { INSTALL_AGENT_MODAL_ID, I18N_INSTALL_AGENT_MODAL } from '../constants';
+import { INSTALL_AGENT_MODAL_ID, I18N_INSTALL_AGENT_MODAL, MAX_LIST_COUNT } from '../constants';
 import createAgent from '../graphql/mutations/create_agent.mutation.graphql';
 import createAgentToken from '../graphql/mutations/create_agent_token.mutation.graphql';
+import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AvailableAgentsDropdown from './available_agents_dropdown.vue';
 
 export default {
@@ -34,12 +35,20 @@ export default {
     GlSprintf,
   },
   inject: ['projectPath', 'kasAddress'],
+  props: {
+    defaultBranchName: {
+      default: '.noBranch',
+      required: false,
+      type: String,
+    },
+  },
   data() {
     return {
       registering: false,
       agentName: null,
       agentToken: null,
       error: null,
+      clusterAgent: null,
     };
   },
   computed: {
@@ -63,9 +72,16 @@ export default {
     advancedInstallPath() {
       return helpPagePath('user/clusters/agent/install/index', { anchor: 'advanced-installation' });
     },
+    agentVariables() {
+      return {
+        defaultBranchName: this.defaultBranchName,
+        first: MAX_LIST_COUNT,
+        last: null,
+        projectPath: this.projectPath,
+      };
+    },
   },
   methods: {
-    ...mapActions(['setNewAgentRegistered']),
     setAgentName(name) {
       this.agentName = name;
     },
@@ -73,8 +89,49 @@ export default {
       this.$refs.modal.hide();
     },
     doneClicked() {
-      this.setNewAgentRegistered(this.registered);
       this.$refs.modal.hide();
+      this.updateCache();
+    },
+    updateCache() {
+      const { defaultClient: client } = this.$apollo.provider.clients;
+
+      const sourceData = client.readQuery({
+        query: getAgentsQuery,
+        variables: this.agentVariables,
+      });
+
+      const data = produce(sourceData, (draftData) => {
+        const agent = {
+          id: this.clusterAgent.id,
+          name: this.agentName,
+          tokens: {
+            nodes: [
+              {
+                lastUsedAt: null,
+                __typename: 'ClusterAgentToken',
+              },
+            ],
+            __typename: 'ClusterAgentTokenConnection',
+          },
+          webPath: this.clusterAgent.webPath,
+          __typename: 'ClusterAgent',
+        };
+        const configuration = {
+          name: this.agentName,
+          path: `.gitlab/agents/${this.agentName}`,
+          webPath: this.clusterAgent.webPath,
+          __typename: 'TreeEntry',
+        };
+
+        draftData.project.clusterAgents.nodes.push(agent);
+        draftData.project.repository.tree.trees.nodes.push(configuration);
+      });
+
+      client.writeQuery({
+        query: getAgentsQuery,
+        variables: this.agentVariables,
+        data,
+      });
     },
     resetModal() {
       this.registering = false;
@@ -119,6 +176,8 @@ export default {
           throw new Error(agentErrors[0]);
         }
 
+        this.clusterAgent = clusterAgent;
+
         const { errors: tokenErrors, secret } = await this.createAgentTokenMutation(
           clusterAgent.id,
         );
diff --git a/app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql b/app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql
index c29756159f58f7..45fc72bb699185 100644
--- a/app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql
+++ b/app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql
@@ -2,6 +2,7 @@ mutation createClusterAgent($input: CreateClusterAgentInput!) {
   createClusterAgent(input: $input) {
     clusterAgent {
       id
+      webPath
     }
     errors
   }
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 2856bed2b6bbac..f0f96fd7872d06 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -78,7 +78,3 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
 export const setPage = ({ commit }, page) => {
   commit(types.SET_PAGE, page);
 };
-
-export const setNewAgentRegistered = ({ commit }, state) => {
-  commit(types.SET_NEW_AGENT_REGISTERED, state);
-};
diff --git a/app/assets/javascripts/clusters_list/store/mutation_types.js b/app/assets/javascripts/clusters_list/store/mutation_types.js
index a64a17688dd259..beb4388c93e3b6 100644
--- a/app/assets/javascripts/clusters_list/store/mutation_types.js
+++ b/app/assets/javascripts/clusters_list/store/mutation_types.js
@@ -2,4 +2,3 @@ export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
 export const SET_LOADING_CLUSTERS = 'SET_LOADING_CLUSTERS';
 export const SET_LOADING_NODES = 'SET_LOADING_NODES';
 export const SET_PAGE = 'SET_PAGE';
-export const SET_NEW_AGENT_REGISTERED = 'SET_NEW_AGENT_REGISTERED';
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index ffa4423deec312..e5c15ccbd6e4b2 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -18,7 +18,4 @@ export default {
   [types.SET_PAGE](state, value) {
     state.page = Number(value) || 1;
   },
-  [types.SET_NEW_AGENT_REGISTERED](state, value) {
-    state.newAgentRegistered = value;
-  },
 };
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 979d21c98f1c9f..3dcbf58c8d39e6 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -16,5 +16,4 @@ export default (initialState = {}) => ({
   },
   totalClusters: 0,
   canAddCluster: parseBoolean(initialState.canAddCluster),
-  newAgentRegistered: false,
 });
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index a516b8769f1c0e..3bd163c74eba83 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -1,21 +1,18 @@
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import Vuex from 'vuex';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import Agents from '~/clusters_list/components/agents.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import defaultStore from '~/clusters_list/store';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 describe('Agents', () => {
   let wrapper;
-  let store;
 
   const propsData = {
     defaultBranchName: 'default',
@@ -25,10 +22,6 @@ describe('Agents', () => {
     kasAddress: 'kas.example.com',
   };
 
-  const entryData = {
-    newAgentRegistered: false,
-  };
-
   const createWrapper = ({ agents = [], pageInfo = null, trees = [] }) => {
     const provide = provideData;
     const apolloQueryResponse = {
@@ -44,18 +37,8 @@ describe('Agents', () => {
       [getAgentsQuery, jest.fn().mockResolvedValue(apolloQueryResponse, provide)],
     ]);
 
-    const setNewAgentRegistered = jest.fn();
-
-    store = new Vuex.Store({
-      ...defaultStore,
-      state: entryData,
-      actions: {
-        setNewAgentRegistered,
-      },
-    });
     wrapper = shallowMount(Agents, {
       localVue,
-      store,
       apolloProvider,
       propsData,
       provide: provideData,
@@ -254,7 +237,6 @@ describe('Agents', () => {
         mocks,
         propsData,
         provide: provideData,
-        store,
       });
 
       return wrapper.vm.$nextTick();
@@ -264,18 +246,4 @@ describe('Agents', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
-
-  describe('when new agent is registered', () => {
-    let refetchAgentsSpy;
-    beforeEach(() => {
-      createWrapper({ agents: [] });
-      refetchAgentsSpy = jest.spyOn(wrapper.vm.$apollo.queries.agents, 'refetch');
-    });
-
-    it('reloads agents query', async () => {
-      wrapper.vm.$store.state.newAgentRegistered = true;
-      await wrapper.vm.$nextTick();
-      expect(refetchAgentsSpy).toHaveBeenCalled();
-    });
-  });
 });
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index ade7335df02a77..98ca5e05b3ff8c 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -1,7 +1,6 @@
 import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import Vuex from 'vuex';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
 import { I18N_INSTALL_AGENT_MODAL } from '~/clusters_list/constants';
@@ -10,7 +9,6 @@ import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_a
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
-import defaultStore from '~/clusters_list/store';
 import {
   createAgentResponse,
   createAgentErrorResponse,
@@ -45,17 +43,6 @@ describe('InstallAgentModal', () => {
     }
   };
 
-  const setNewAgentRegistered = jest.fn();
-
-  const createStore = () => {
-    return new Vuex.Store({
-      ...defaultStore,
-      actions: {
-        setNewAgentRegistered,
-      },
-    });
-  };
-
   const createWrapper = () => {
     const provide = {
       projectPath: 'path/to/project',
@@ -64,7 +51,6 @@ describe('InstallAgentModal', () => {
 
     wrapper = shallowMount(InstallAgentModal, {
       attachTo: document.body,
-      store: createStore(),
       stubs: {
         GlModal: ModalStub,
       },
@@ -170,13 +156,6 @@ describe('InstallAgentModal', () => {
       expect(code).toContain('--kas-address=kas.example.com');
     });
 
-    describe('clicking on the done button', () => {
-      it('updates the newAgentRegistered value in store', () => {
-        findActionButton().vm.$emit('click');
-        expect(setNewAgentRegistered).toHaveBeenCalledWith(expect.anything(), true);
-      });
-    });
-
     describe('error creating agent', () => {
       beforeEach(() => {
         apolloProvider = createMockApollo([
diff --git a/spec/frontend/clusters_list/mocks/apollo.js b/spec/frontend/clusters_list/mocks/apollo.js
index 27b71a0d4b583f..f5e18ecded0162 100644
--- a/spec/frontend/clusters_list/mocks/apollo.js
+++ b/spec/frontend/clusters_list/mocks/apollo.js
@@ -3,6 +3,8 @@ export const createAgentResponse = {
     createClusterAgent: {
       clusterAgent: {
         id: 'agent-id',
+        name: 'agent-name',
+        webPath: 'agent-webPath',
       },
       errors: [],
     },
@@ -14,6 +16,8 @@ export const createAgentErrorResponse = {
     createClusterAgent: {
       clusterAgent: {
         id: 'agent-id',
+        name: 'agent-name',
+        webPath: 'agent-webPath',
       },
       errors: ['could not create agent'],
     },
diff --git a/spec/frontend/clusters_list/store/mutations_spec.js b/spec/frontend/clusters_list/store/mutations_spec.js
index b557e1932f05fd..f8723bfcdfc0af 100644
--- a/spec/frontend/clusters_list/store/mutations_spec.js
+++ b/spec/frontend/clusters_list/store/mutations_spec.js
@@ -57,12 +57,4 @@ describe('Admin statistics panel mutations', () => {
       expect(state.page).toBe(123);
     });
   });
-
-  describe(`${types.SET_NEW_AGENT_REGISTERED}`, () => {
-    it('changes newAgentRegistered value', () => {
-      mutations[types.SET_NEW_AGENT_REGISTERED](state, true);
-
-      expect(state.newAgentRegistered).toBe(true);
-    });
-  });
 });
-- 
GitLab


From 414a4445b0f471f6bada09c7a9826b0d9ebd9fb9 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Thu, 11 Nov 2021 14:43:27 +0200
Subject: [PATCH 6/8] Implemented suggested patch

The patch contains:
- GraphQL fragment ClusterAgentFragment
- moving Apollo cache logic to cache_update.js
- calling the cache updating function on update hook of the createAgent
- adding getAgentConfigPath utility
- changing next button name
I also added tests for the newly added changes.
---
 .../clusters_list/clusters_util.js            |  4 ++
 .../clusters_list/components/agent_table.vue  |  9 ++-
 .../components/install_agent_modal.vue        | 67 +++++--------------
 .../javascripts/clusters_list/constants.js    |  4 +-
 .../clusters_list/graphql/cache_update.js     | 28 ++++++++
 .../fragments/cluster_agent.fragment.graphql  | 10 +++
 .../mutations/create_agent.mutation.graphql   |  5 +-
 .../graphql/queries/get_agents.query.graphql  | 10 +--
 locale/gitlab.pot                             |  3 +
 spec/features/clusters/create_agent_spec.rb   |  7 +-
 .../components/install_agent_modal_spec.js    | 36 ++++++++--
 spec/frontend/clusters_list/mocks/apollo.js   | 50 ++++++++++----
 12 files changed, 144 insertions(+), 89 deletions(-)
 create mode 100644 app/assets/javascripts/clusters_list/graphql/cache_update.js
 create mode 100644 app/assets/javascripts/clusters_list/graphql/fragments/cluster_agent.fragment.graphql

diff --git a/app/assets/javascripts/clusters_list/clusters_util.js b/app/assets/javascripts/clusters_list/clusters_util.js
index 9b8701345129cf..c78c93fe1ba304 100644
--- a/app/assets/javascripts/clusters_list/clusters_util.js
+++ b/app/assets/javascripts/clusters_list/clusters_util.js
@@ -6,3 +6,7 @@ export function generateAgentRegistrationCommand(agentToken, kasAddress) {
     --agent-version stable \\
     --namespace gitlab-kubernetes-agent | kubectl apply -f -`;
 }
+
+export function getAgentConfigPath(clusterAgentName) {
+  return `.gitlab/agents/${clusterAgentName}`;
+}
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 3022e259c4805a..c6094286dd54c2 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -12,6 +12,7 @@ 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 { getAgentConfigPath } from '../clusters_util';
 
 export default {
   components: {
@@ -66,9 +67,7 @@ export default {
     getCellId(item) {
       return `connection-status-${item.name}`;
     },
-    getConfigPath(item) {
-      return `.gitlab/agents/${item.name}`;
-    },
+    getAgentConfigPath,
   },
 };
 </script>
@@ -131,10 +130,10 @@ export default {
     <template #cell(configuration)="{ item }">
       <span data-testid="cluster-agent-configuration-link">
         <gl-link v-if="item.configFolder" :href="item.configFolder.webPath">
-          {{ getConfigPath(item) }}
+          {{ getAgentConfigPath(item.name) }}
         </gl-link>
 
-        <span v-else>{{ getConfigPath(item) }}</span>
+        <span v-else>{{ getAgentConfigPath(item.name) }}</span>
       </span>
     </template>
   </gl-table>
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 5cbf81872be2e1..0efd3844cc94dc 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -8,12 +8,12 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
-import produce from 'immer';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import { generateAgentRegistrationCommand } from '../clusters_util';
 import { INSTALL_AGENT_MODAL_ID, I18N_INSTALL_AGENT_MODAL, MAX_LIST_COUNT } from '../constants';
+import { addAgentToStore } from '../graphql/cache_update';
 import createAgent from '../graphql/mutations/create_agent.mutation.graphql';
 import createAgentToken from '../graphql/mutations/create_agent_token.mutation.graphql';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
@@ -72,7 +72,7 @@ export default {
     advancedInstallPath() {
       return helpPagePath('user/clusters/agent/install/index', { anchor: 'advanced-installation' });
     },
-    agentVariables() {
+    getAgentsQueryVariables() {
       return {
         defaultBranchName: this.defaultBranchName,
         first: MAX_LIST_COUNT,
@@ -85,54 +85,9 @@ export default {
     setAgentName(name) {
       this.agentName = name;
     },
-    cancelClicked() {
+    closeModal() {
       this.$refs.modal.hide();
     },
-    doneClicked() {
-      this.$refs.modal.hide();
-      this.updateCache();
-    },
-    updateCache() {
-      const { defaultClient: client } = this.$apollo.provider.clients;
-
-      const sourceData = client.readQuery({
-        query: getAgentsQuery,
-        variables: this.agentVariables,
-      });
-
-      const data = produce(sourceData, (draftData) => {
-        const agent = {
-          id: this.clusterAgent.id,
-          name: this.agentName,
-          tokens: {
-            nodes: [
-              {
-                lastUsedAt: null,
-                __typename: 'ClusterAgentToken',
-              },
-            ],
-            __typename: 'ClusterAgentTokenConnection',
-          },
-          webPath: this.clusterAgent.webPath,
-          __typename: 'ClusterAgent',
-        };
-        const configuration = {
-          name: this.agentName,
-          path: `.gitlab/agents/${this.agentName}`,
-          webPath: this.clusterAgent.webPath,
-          __typename: 'TreeEntry',
-        };
-
-        draftData.project.clusterAgents.nodes.push(agent);
-        draftData.project.repository.tree.trees.nodes.push(configuration);
-      });
-
-      client.writeQuery({
-        query: getAgentsQuery,
-        variables: this.agentVariables,
-        data,
-      });
-    },
     resetModal() {
       this.registering = false;
       this.agentName = null;
@@ -149,6 +104,14 @@ export default {
               projectPath: this.projectPath,
             },
           },
+          update: (store, { data: { createClusterAgent } }) => {
+            addAgentToStore(
+              store,
+              createClusterAgent,
+              getAgentsQuery,
+              this.getAgentsQueryVariables,
+            );
+          },
         })
         .then(({ data: { createClusterAgent } }) => createClusterAgent);
     },
@@ -301,10 +264,10 @@ export default {
     </template>
 
     <template #modal-footer>
-      <gl-button v-if="canCancel" @click="cancelClicked">{{ $options.i18n.cancel }} </gl-button>
+      <gl-button v-if="canCancel" @click="closeModal">{{ $options.i18n.cancel }} </gl-button>
 
-      <gl-button v-if="registered" variant="confirm" category="primary" @click="doneClicked"
-        >{{ $options.i18n.done }}
+      <gl-button v-if="registered" variant="confirm" category="primary" @click="closeModal"
+        >{{ $options.i18n.close }}
       </gl-button>
 
       <gl-button
@@ -313,7 +276,7 @@ export default {
         variant="confirm"
         category="primary"
         @click="registerAgent"
-        >{{ $options.i18n.next }}
+        >{{ $options.i18n.registerAgentButton }}
       </gl-button>
     </template>
   </gl-modal>
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 13d67efe11a8a7..0537dc5dedc244 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -66,8 +66,8 @@ export const STATUSES = {
 };
 
 export const I18N_INSTALL_AGENT_MODAL = {
-  next: __('Next'),
-  done: __('Done'),
+  registerAgentButton: s__('ClusterAgents|Register Agent'),
+  close: __('Close'),
   cancel: __('Cancel'),
 
   modalTitle: s__('ClusterAgents|Install new Agent'),
diff --git a/app/assets/javascripts/clusters_list/graphql/cache_update.js b/app/assets/javascripts/clusters_list/graphql/cache_update.js
new file mode 100644
index 00000000000000..ce6daecc908220
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/graphql/cache_update.js
@@ -0,0 +1,28 @@
+import produce from 'immer';
+import { getAgentConfigPath } from '../clusters_util';
+
+export function addAgentToStore(store, createClusterAgent, query, variables) {
+  const { clusterAgent } = createClusterAgent;
+  const sourceData = store.readQuery({
+    query,
+    variables,
+  });
+
+  const data = produce(sourceData, (draftData) => {
+    const configuration = {
+      name: clusterAgent.name,
+      path: getAgentConfigPath(clusterAgent.name),
+      webPath: clusterAgent.webPath,
+      __typename: 'TreeEntry',
+    };
+
+    draftData.project.clusterAgents.nodes.push(clusterAgent);
+    draftData.project.repository.tree.trees.nodes.push(configuration);
+  });
+
+  store.writeQuery({
+    query,
+    variables,
+    data,
+  });
+}
diff --git a/app/assets/javascripts/clusters_list/graphql/fragments/cluster_agent.fragment.graphql b/app/assets/javascripts/clusters_list/graphql/fragments/cluster_agent.fragment.graphql
new file mode 100644
index 00000000000000..9b40260471c980
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/graphql/fragments/cluster_agent.fragment.graphql
@@ -0,0 +1,10 @@
+fragment ClusterAgentFragment on ClusterAgent {
+  id
+  name
+  webPath
+  tokens {
+    nodes {
+      lastUsedAt
+    }
+  }
+}
diff --git a/app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql b/app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql
index 45fc72bb699185..996b388089b107 100644
--- a/app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql
+++ b/app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql
@@ -1,8 +1,9 @@
+#import "../fragments/cluster_agent.fragment.graphql"
+
 mutation createClusterAgent($input: CreateClusterAgentInput!) {
   createClusterAgent(input: $input) {
     clusterAgent {
-      id
-      webPath
+      ...ClusterAgentFragment
     }
     errors
   }
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..397895b7d0153c 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
@@ -1,4 +1,5 @@
 #import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+#import "../fragments/cluster_agent.fragment.graphql"
 
 query getAgents(
   $defaultBranchName: String!
@@ -13,14 +14,7 @@ query getAgents(
   project(fullPath: $projectPath) {
     clusterAgents(first: $first, last: $last, before: $beforeAgent, after: $afterAgent) {
       nodes {
-        id
-        name
-        webPath
-        tokens {
-          nodes {
-            lastUsedAt
-          }
-        }
+        ...ClusterAgentFragment
       }
 
       pageInfo {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 00edcefae0e3b4..7bfbdeef874be3 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7432,6 +7432,9 @@ msgstr ""
 msgid "ClusterAgents|Recommended installation method"
 msgstr ""
 
+msgid "ClusterAgents|Register Agent"
+msgstr ""
+
 msgid "ClusterAgents|Registering Agent"
 msgstr ""
 
diff --git a/spec/features/clusters/create_agent_spec.rb b/spec/features/clusters/create_agent_spec.rb
index 0caf2402a8900c..f40932c4750dd7 100644
--- a/spec/features/clusters/create_agent_spec.rb
+++ b/spec/features/clusters/create_agent_spec.rb
@@ -29,13 +29,16 @@
 
     click_button('Select an Agent')
     click_button('example-agent-2')
-    click_button('Next')
+    click_button('Register Agent')
 
     expect(page).to have_content('The token value will not be shown again after you close this window.')
     expect(page).to have_content('example-agent-token')
     expect(page).to have_content('docker run --pull=always --rm')
 
-    click_button('Done')
+    within find('.modal-footer') do
+      click_button('Close')
+    end
+
     expect(page).to have_link('example-agent-2')
   end
 end
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 98ca5e05b3ff8c..89c99bb260e0dd 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -3,7 +3,8 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
-import { I18N_INSTALL_AGENT_MODAL } from '~/clusters_list/constants';
+import { I18N_INSTALL_AGENT_MODAL, MAX_LIST_COUNT } from '~/clusters_list/constants';
+import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createAgentMutation from '~/clusters_list/graphql/mutations/create_agent.mutation.graphql';
 import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_agent_token.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -14,12 +15,16 @@ import {
   createAgentErrorResponse,
   createAgentTokenResponse,
   createAgentTokenErrorResponse,
+  getAgentResponse,
 } from '../mocks/apollo';
 import ModalStub from '../stubs';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
+const projectPath = 'path/to/project';
+const defaultBranchName = 'default';
+
 describe('InstallAgentModal', () => {
   let wrapper;
   let apolloProvider;
@@ -45,10 +50,14 @@ describe('InstallAgentModal', () => {
 
   const createWrapper = () => {
     const provide = {
-      projectPath: 'path/to/project',
+      projectPath,
       kasAddress: 'kas.example.com',
     };
 
+    const propsData = {
+      defaultBranchName,
+    };
+
     wrapper = shallowMount(InstallAgentModal, {
       attachTo: document.body,
       stubs: {
@@ -57,11 +66,26 @@ describe('InstallAgentModal', () => {
       localVue,
       apolloProvider,
       provide,
+      propsData,
+    });
+  };
+
+  const writeQuery = () => {
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: getAgentsQuery,
+      variables: {
+        projectPath,
+        defaultBranchName,
+        first: MAX_LIST_COUNT,
+        last: null,
+      },
+      data: getAgentResponse.data,
     });
   };
 
   const mockSelectedAgentResponse = () => {
     createWrapper();
+    writeQuery();
 
     wrapper.vm.setAgentName('agent-name');
     findActionButton().vm.$emit('click');
@@ -95,7 +119,7 @@ describe('InstallAgentModal', () => {
 
     it('renders a disabled next button', () => {
       expect(findActionButton().isVisible()).toBe(true);
-      expect(findActionButton().text()).toBe(i18n.next);
+      expect(findActionButton().text()).toBe(i18n.registerAgentButton);
       expectDisabledAttribute(findActionButton(), true);
     });
   });
@@ -126,7 +150,7 @@ describe('InstallAgentModal', () => {
 
     it('creates an agent and token', () => {
       expect(createAgentHandler).toHaveBeenCalledWith({
-        input: { name: 'agent-name', projectPath: 'path/to/project' },
+        input: { name: 'agent-name', projectPath },
       });
 
       expect(createAgentTokenHandler).toHaveBeenCalledWith({
@@ -134,9 +158,9 @@ describe('InstallAgentModal', () => {
       });
     });
 
-    it('renders a done button', () => {
+    it('renders a close button', () => {
       expect(findActionButton().isVisible()).toBe(true);
-      expect(findActionButton().text()).toBe(i18n.done);
+      expect(findActionButton().text()).toBe(i18n.close);
       expectDisabledAttribute(findActionButton(), false);
     });
 
diff --git a/spec/frontend/clusters_list/mocks/apollo.js b/spec/frontend/clusters_list/mocks/apollo.js
index f5e18ecded0162..eeed494883f179 100644
--- a/spec/frontend/clusters_list/mocks/apollo.js
+++ b/spec/frontend/clusters_list/mocks/apollo.js
@@ -1,10 +1,28 @@
+const agent = {
+  id: 'agent-id',
+  name: 'agent-name',
+  webPath: 'agent-webPath',
+};
+const token = {
+  id: 'token-id',
+  lastUsedAt: null,
+};
+const tokens = {
+  nodes: [token],
+};
+const pageInfo = {
+  endCursor: '',
+  hasNextPage: false,
+  hasPreviousPage: false,
+  startCursor: '',
+};
+
 export const createAgentResponse = {
   data: {
     createClusterAgent: {
       clusterAgent: {
-        id: 'agent-id',
-        name: 'agent-name',
-        webPath: 'agent-webPath',
+        ...agent,
+        tokens,
       },
       errors: [],
     },
@@ -15,9 +33,8 @@ export const createAgentErrorResponse = {
   data: {
     createClusterAgent: {
       clusterAgent: {
-        id: 'agent-id',
-        name: 'agent-name',
-        webPath: 'agent-webPath',
+        ...agent,
+        tokens,
       },
       errors: ['could not create agent'],
     },
@@ -27,9 +44,7 @@ export const createAgentErrorResponse = {
 export const createAgentTokenResponse = {
   data: {
     clusterAgentTokenCreate: {
-      token: {
-        id: 'token-id',
-      },
+      token,
       secret: 'mock-agent-token',
       errors: [],
     },
@@ -39,11 +54,22 @@ export const createAgentTokenResponse = {
 export const createAgentTokenErrorResponse = {
   data: {
     clusterAgentTokenCreate: {
-      token: {
-        id: 'token-id',
-      },
+      token,
       secret: 'mock-agent-token',
       errors: ['could not create agent token'],
     },
   },
 };
+
+export const getAgentResponse = {
+  data: {
+    project: {
+      clusterAgents: { nodes: [{ ...agent, tokens }], pageInfo },
+      repository: {
+        tree: {
+          trees: { nodes: [{ ...agent, path: null }], pageInfo },
+        },
+      },
+    },
+  },
+};
-- 
GitLab


From 2ddca35a928358c5148984f5b74a4e39966e4d94 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Fri, 12 Nov 2021 15:13:57 +0200
Subject: [PATCH 7/8] Changed text in popover to not display a full link

---
 .../clusters_list/components/agent_table.vue        | 13 ++++++++-----
 app/assets/javascripts/clusters_list/constants.js   |  2 --
 locale/gitlab.pot                                   |  6 +++---
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index c6094286dd54c2..200fb1cccdb9e0 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -11,7 +11,8 @@ import {
 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 { helpPagePath } from '~/helpers/help_page_helper';
+import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES } from '../constants';
 import { getAgentConfigPath } from '../clusters_util';
 
 export default {
@@ -30,7 +31,10 @@ export default {
   mixins: [timeagoMixin],
   INSTALL_AGENT_MODAL_ID,
   AGENT_STATUSES,
-  TROUBLESHOOTING_LINK,
+
+  troubleshooting_link: helpPagePath('user/clusters/agent/index', {
+    anchor: 'troubleshooting',
+  }),
   props: {
     agents: {
       required: true,
@@ -112,9 +116,8 @@ export default {
           >
         </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
+          <gl-link :href="$options.troubleshooting_link" target="_blank" class="gl-font-sm">
+            {{ s__('ClusterAgents|Learn how to troubleshoot') }}</gl-link
           >
         </p>
       </gl-popover>
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 0537dc5dedc244..62526cb0663b5e 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -3,8 +3,6 @@ import { __, s__, sprintf } from '~/locale';
 export const MAX_LIST_COUNT = 25;
 export const INSTALL_AGENT_MODAL_ID = 'install-agent';
 export const ACTIVE_CONNECTION_TIME = 480000;
-export const TROUBLESHOOTING_LINK =
-  'https://docs.gitlab.com/ee/user/clusters/agent/#troubleshooting';
 
 export const CLUSTER_ERRORS = {
   default: {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7bfbdeef874be3..71b4197e300fe0 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7387,9 +7387,6 @@ msgstr ""
 msgid "ClusterAgents|For alternative installation methods %{linkStart}go to the documentation%{linkEnd}."
 msgstr ""
 
-msgid "ClusterAgents|For more troubleshooting information go to"
-msgstr ""
-
 msgid "ClusterAgents|Go to the repository"
 msgstr ""
 
@@ -7408,6 +7405,9 @@ msgstr ""
 msgid "ClusterAgents|Learn how to create an agent access token"
 msgstr ""
 
+msgid "ClusterAgents|Learn how to troubleshoot"
+msgstr ""
+
 msgid "ClusterAgents|Learn more about the GitLab Kubernetes Agent."
 msgstr ""
 
-- 
GitLab


From 9fec577d8bdc1639d941af317d1d9ad07ebc515b Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Mon, 15 Nov 2021 13:42:46 +0200
Subject: [PATCH 8/8] Implemented suggested changes after the FE review

---
 .../clusters_list/components/agent_table.vue        |  9 +++++----
 .../clusters_list/components/clusters.vue           | 13 +++++++------
 .../clusters_list/components/clusters_actions.vue   | 13 +++++++------
 app/assets/javascripts/clusters_list/constants.js   |  7 +++++++
 .../components/clusters_actions_spec.js             |  4 ++--
 5 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 200fb1cccdb9e0..000730ac1ba526 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -43,26 +43,27 @@ export default {
   },
   computed: {
     fields() {
+      const tdClass = 'gl-py-5!';
       return [
         {
           key: 'name',
           label: s__('ClusterAgents|Name'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
         {
           key: 'status',
           label: s__('ClusterAgents|Connection status'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
         {
           key: 'lastContact',
           label: s__('ClusterAgents|Last contact'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
         {
           key: 'configuration',
           label: s__('ClusterAgents|Configuration'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
       ];
     },
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index c826b6732d859b..bc27563b6d54f7 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -57,36 +57,37 @@ export default {
       },
     },
     fields() {
+      const tdClass = 'gl-py-5!';
       return [
         {
           key: 'name',
           label: __('Kubernetes cluster'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
         {
           key: 'environment_scope',
           label: __('Environment scope'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
         {
           key: 'node_size',
           label: __('Nodes'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
         {
           key: 'total_cpu',
           label: __('Total cores (CPUs)'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
         {
           key: 'total_memory',
           label: __('Total memory (GB)'),
-          tdClass: 'gl-py-5!',
+          tdClass,
         },
         {
           key: 'cluster_type',
           label: __('Cluster level'),
-          tdClass: 'gl-py-5!',
+          tdClass,
           formatter: (value) => CLUSTER_TYPES[value],
         },
       ];
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index b7cfb993489a74..25f67462223d01 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -1,8 +1,10 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlModalDirective } from '@gitlab/ui';
-import { INSTALL_AGENT_MODAL_ID } from '../constants';
+import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
 
 export default {
+  i18n: CLUSTERS_ACTIONS,
+  INSTALL_AGENT_MODAL_ID,
   components: {
     GlDropdown,
     GlDropdownItem,
@@ -11,7 +13,6 @@ export default {
     GlModalDirective,
   },
   inject: ['newClusterPath', 'addClusterPath'],
-  INSTALL_AGENT_MODAL_ID,
 };
 </script>
 
@@ -22,21 +23,21 @@ export default {
       v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
       category="primary"
       variant="confirm"
-      :text="s__('ClusterAgents|Actions')"
+      :text="$options.i18n.actionsButton"
       split
       right
     >
       <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
-        {{ s__('ClusterAgents|Create new cluster') }}
+        {{ $options.i18n.createNewCluster }}
       </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') }}
+        {{ $options.i18n.connectWithAgent }}
       </gl-dropdown-item>
       <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
-        {{ s__('ClusterAgents|Connect with certificate') }}
+        {{ $options.i18n.connectExistingCluster }}
       </gl-dropdown-item>
     </gl-dropdown>
   </div>
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 62526cb0663b5e..36e6a065cbf07e 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -179,3 +179,10 @@ export const CLUSTERS_TABS = [
     queryParamValue: 'certificate_based',
   },
 ];
+
+export const CLUSTERS_ACTIONS = {
+  actionsButton: s__('ClusterAgents|Actions'),
+  createNewCluster: s__('ClusterAgents|Create new cluster'),
+  connectWithAgent: s__('ClusterAgents|Connect with Agent'),
+  connectExistingCluster: s__('ClusterAgents|Connect with certificate'),
+};
diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js
index 4caf9d38ef8c1d..cb8303ca4b24c5 100644
--- a/spec/frontend/clusters_list/components/clusters_actions_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_actions_spec.js
@@ -2,7 +2,7 @@ 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';
+import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '~/clusters_list/constants';
 
 describe('ClustersActionsComponent', () => {
   let wrapper;
@@ -35,7 +35,7 @@ describe('ClustersActionsComponent', () => {
   });
 
   it('renders actions menu', () => {
-    expect(findDropdown().props('text')).toBe('Actions');
+    expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton);
   });
 
   it('renders a dropdown with 3 actions items', () => {
-- 
GitLab