Merge branch '340759-implementation-revisit-the-kubernetes-section-ux-4' into 'master'

Move navigation and actions on clusters page to Vue

See merge request gitlab-org/gitlab!73637

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}`;
+}

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

 <script>
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
 
 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,
@@ -15,14 +24,7 @@ export default {
   directives: {
     GlModalDirective,
   },
-  inject: [
-    'emptyStateImage',
-    'projectPath',
-    'multipleClustersDocsUrl',
-    'installDocsUrl',
-    'getStartedDocsUrl',
-    'integrationDocsUrl',
-  ],
+  inject: ['emptyStateImage', 'projectPath'],
   props: {
     hasConfigurations: {
       type: Boolean,
@@ -47,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"
             >
@@ -58,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>
@@ -75,7 +77,7 @@ export default {
           <gl-button
             category="primary"
             variant="info"
-            :href="getStartedDocsUrl"
+            :href="$options.getStartedDocsUrl"
             target="_blank"
             class="gl-ml-0!"
           >

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

 <script>
 import {
-  GlButton,
   GlLink,
   GlModalDirective,
   GlTable,
@@ -12,11 +11,12 @@ 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 {
   components: {
-    GlButton,
     GlLink,
     GlTable,
     GlIcon,
@@ -29,10 +29,12 @@ export default {
     GlModalDirective,
   },
   mixins: [timeagoMixin],
-  inject: ['integrationDocsUrl'],
   INSTALL_AGENT_MODAL_ID,
   AGENT_STATUSES,
-  TROUBLESHOOTING_LINK,
+
+  troubleshooting_link: helpPagePath('user/clusters/agent/index', {
+    anchor: 'troubleshooting',
+  }),
   props: {
     agents: {
       required: true,
@@ -41,112 +43,102 @@ export default {
   },
   computed: {
     fields() {
+      const tdClass = 'gl-py-5!';
       return [
         {
           key: 'name',
           label: s__('ClusterAgents|Name'),
+          tdClass,
         },
         {
           key: 'status',
           label: s__('ClusterAgents|Connection status'),
+          tdClass,
         },
         {
           key: 'lastContact',
           label: s__('ClusterAgents|Last contact'),
+          tdClass,
         },
         {
           key: 'configuration',
           label: s__('ClusterAgents|Configuration'),
+          tdClass,
         },
       ];
     },
   },
+  methods: {
+    getCellId(item) {
+      return `connection-status-${item.name}`;
+    },
+    getAgentConfigPath,
+  },
 };
 </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="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="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="getCellId(item)"
+        :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">
+          <gl-link :href="$options.troubleshooting_link" target="_blank" class="gl-font-sm">
+            {{ s__('ClusterAgents|Learn how to troubleshoot') }}</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">
+        <gl-link v-if="item.configFolder" :href="item.configFolder.webPath">
+          {{ getAgentConfigPath(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>{{ getAgentConfigPath(item.name) }}</span>
+      </span>
+    </template>
+  </gl-table>
 </template>

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

@@ -4,7 +4,6 @@ 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 +25,6 @@ export default {
   components: {
     AgentEmptyState,
     AgentTable,
-    InstallAgentModal,
     GlAlert,
     GlKeysetPagination,
     GlLoadingIcon,
@@ -135,19 +133,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">

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

@@ -57,30 +57,37 @@ export default {
       },
     },
     fields() {
+      const tdClass = 'gl-py-5!';
       return [
         {
           key: 'name',
           label: __('Kubernetes cluster'),
+          tdClass,
         },
         {
           key: 'environment_scope',
           label: __('Environment scope'),
+          tdClass,
         },
         {
           key: 'node_size',
           label: __('Nodes'),
+          tdClass,
         },
         {
           key: 'total_cpu',
           label: __('Total cores (CPUs)'),
+          tdClass,
         },
         {
           key: 'total_memory',
           label: __('Total memory (GB)'),
+          tdClass,
         },
         {
           key: 'cluster_type',
           label: __('Cluster level'),
+          tdClass,
           formatter: (value) => CLUSTER_TYPES[value],
         },
       ];
@@ -201,7 +208,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 +217,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 }">

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

+<script>
+import { GlDropdown, GlDropdownItem, GlModalDirective } from '@gitlab/ui';
+import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
+
+export default {
+  i18n: CLUSTERS_ACTIONS,
+  INSTALL_AGENT_MODAL_ID,
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  inject: ['newClusterPath', 'addClusterPath'],
+};
+</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="$options.i18n.actionsButton"
+      split
+      right
+    >
+      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
+        {{ $options.i18n.createNewCluster }}
+      </gl-dropdown-item>
+      <gl-dropdown-item
+        v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
+        data-testid="connect-new-agent-link"
+      >
+        {{ $options.i18n.connectWithAgent }}
+      </gl-dropdown-item>
+      <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
+        {{ $options.i18n.connectExistingCluster }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>

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']),
   },

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

+<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 :default-branch-name="defaultBranchName" />
+  </div>
+</template>

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

@@ -12,9 +12,11 @@ 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 { 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';
 import AvailableAgentsDropdown from './available_agents_dropdown.vue';
 
 export default {
@@ -33,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: {
@@ -62,20 +72,24 @@ export default {
     advancedInstallPath() {
       return helpPagePath('user/clusters/agent/install/index', { anchor: 'advanced-installation' });
     },
+    getAgentsQueryVariables() {
+      return {
+        defaultBranchName: this.defaultBranchName,
+        first: MAX_LIST_COUNT,
+        last: null,
+        projectPath: this.projectPath,
+      };
+    },
   },
   methods: {
     setAgentName(name) {
       this.agentName = name;
     },
-    cancelClicked() {
-      this.$refs.modal.hide();
-    },
-    doneClicked() {
-      this.$emit('agentRegistered');
+    closeModal() {
       this.$refs.modal.hide();
     },
     resetModal() {
-      this.registering = null;
+      this.registering = false;
       this.agentName = null;
       this.agentToken = null;
       this.error = null;
@@ -90,6 +104,14 @@ export default {
               projectPath: this.projectPath,
             },
           },
+          update: (store, { data: { createClusterAgent } }) => {
+            addAgentToStore(
+              store,
+              createClusterAgent,
+              getAgentsQuery,
+              this.getAgentsQueryVariables,
+            );
+          },
         })
         .then(({ data: { createClusterAgent } }) => createClusterAgent);
     },
@@ -117,6 +139,8 @@ export default {
           throw new Error(agentErrors[0]);
         }
 
+        this.clusterAgent = clusterAgent;
+
         const { errors: tokenErrors, secret } = await this.createAgentTokenMutation(
           clusterAgent.id,
         );
@@ -240,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
@@ -252,7 +276,7 @@ export default {
         variant="confirm"
         category="primary"
         @click="registerAgent"
-        >{{ $options.i18n.next }}
+        >{{ $options.i18n.registerAgentButton }}
       </gl-button>
     </template>
   </gl-modal>

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: {
@@ -66,8 +64,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'),
@@ -168,3 +166,23 @@ 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',
+  },
+];
+
+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'),
+};

app/assets/javascripts/clusters_list/graphql/cache_update.js

+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,
+  });
+}

app/assets/javascripts/clusters_list/graphql/fragments/cluster_agent.fragment.graphql

+fragment ClusterAgentFragment on ClusterAgent {
+  id
+  name
+  webPath
+  tokens {
+    nodes {
+      lastUsedAt
+    }
+  }
+}

app/assets/javascripts/clusters_list/graphql/mutations/create_agent.mutation.graphql

+#import "../fragments/cluster_agent.fragment.graphql"
+
 mutation createClusterAgent($input: CreateClusterAgentInput!) {
   createClusterAgent(input: $input) {
     clusterAgent {
-      id
+      ...ClusterAgentFragment
     }
     errors
   }

app/assets/javascripts/clusters_list/graphql/queries/get_agents.query.graphql

 #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 {

app/assets/javascripts/clusters_list/index.js

 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);
 };

app/assets/javascripts/clusters_list/load_agents.js → app/assets/javascripts/clusters_list/load_main_view.js

+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;
@@ -14,11 +19,11 @@ export default (Vue, VueApollo) => {
     emptyStateImage,
     defaultBranchName,
     projectPath,
-    multipleClustersDocsUrl,
-    installDocsUrl,
-    getStartedDocsUrl,
-    integrationDocsUrl,
     kasAddress,
+    newClusterPath,
+    addClusterPath,
+    emptyStateHelpText,
+    clustersEmptyStateImage,
   } = el.dataset;
 
   return new Vue({
@@ -27,14 +32,15 @@ export default (Vue, VueApollo) => {
     provide: {
       emptyStateImage,
       projectPath,
-      multipleClustersDocsUrl,
-      installDocsUrl,
-      getStartedDocsUrl,
-      integrationDocsUrl,
       kasAddress,
+      newClusterPath,
+      addClusterPath,
+      emptyStateHelpText,
+      clustersEmptyStateImage,
     },
+    store: createStore(el.dataset),
     render(createElement) {
-      return createElement(Agents, {
+      return createElement(ClustersMainView, {
         props: {
           defaultBranchName,
         },

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;
+      }
+    }
+  }
 }

app/helpers/clusters_helper.rb

@@ -16,19 +16,6 @@ module ClustersHelper
     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,16 @@ module ClustersHelper
     }
   end
 
+  def js_clusters_data(clusterable)
+    {
+      default_branch_name: clusterable.default_branch,
+      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
+    }.merge(js_clusters_list_data(clusterable))
+  end
+
   def js_cluster_form_data(cluster, can_edit)
     {
       enabled: cluster.enabled?.to_s,

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

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,12 +7345,21 @@ msgstr ""
 msgid "ClusterAgents|An unknown error occurred. Please try again."
 msgstr ""
 
+msgid "ClusterAgents|Certificate based"
+msgstr ""
+
 msgid "ClusterAgents|Configuration"
 msgstr ""
 
+msgid "ClusterAgents|Connect with Agent"
+msgstr ""
+
 msgid "ClusterAgents|Connect with a GitLab Agent"
 msgstr ""
 
+msgid "ClusterAgents|Connect with certificate"
+msgstr ""
+
 msgid "ClusterAgents|Connected"
 msgstr ""
 
@@ -7354,6 +7369,9 @@ msgstr ""
 msgid "ClusterAgents|Copy token"
 msgstr ""
 
+msgid "ClusterAgents|Create new cluster"
+msgstr ""
+
 msgid "ClusterAgents|Created by"
 msgstr ""
 
@@ -7369,18 +7387,12 @@ 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 ""
 
 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 ""
 
@@ -7393,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 ""
 
@@ -7417,6 +7432,9 @@ msgstr ""
 msgid "ClusterAgents|Recommended installation method"
 msgstr ""
 
+msgid "ClusterAgents|Register Agent"
+msgstr ""
+
 msgid "ClusterAgents|Registering Agent"
 msgstr ""
 
@@ -7603,9 +7621,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 +7756,6 @@ msgstr ""
 msgid "ClusterIntegration|Fetching zones"
 msgstr ""
 
-msgid "ClusterIntegration|GitLab Agent managed clusters"
-msgstr ""
-
 msgid "ClusterIntegration|GitLab Integration"
 msgstr ""
 

spec/features/clusters/create_agent_spec.rb

@@ -24,21 +24,21 @@ RSpec.describe 'Cluster agent registration', :js do
   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('Actions')
     expect(page).to have_content('Install new Agent')
 
     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')
-    expect(page).to have_no_content('Install new Agent')
   end
 end

spec/features/projects/cluster_agents_spec.rb

@@ -22,8 +22,6 @@ RSpec.describe 'ClusterAgents', :js do
     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_selector('.empty-state')
     end
@@ -36,8 +34,6 @@ RSpec.describe 'ClusterAgents', :js do
       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

spec/features/projects/clusters/eks_spec.rb

@@ -19,6 +19,7 @@ RSpec.describe 'AWS EKS Cluster', :js do
     before do
       visit project_clusters_path(project)
 
+      click_link 'Certificate based'
       click_link 'Connect with a certificate'
     end
 

spec/features/projects/clusters/gcp_spec.rb

@@ -33,6 +33,7 @@ RSpec.describe 'Gcp Cluster', :js do
       before do
         visit project_clusters_path(project)
 
+        click_link 'Certificate based'
         click_link 'Connect with a certificate'
         click_link 'Create new cluster'
         click_link 'Google GKE'
@@ -143,8 +144,9 @@ RSpec.describe 'Gcp Cluster', :js do
         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 @@ RSpec.describe 'Gcp Cluster', :js do
           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 @@ RSpec.describe 'Gcp Cluster', :js do
   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 @@ RSpec.describe 'Gcp Cluster', :js do
   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 @@ RSpec.describe 'Gcp Cluster', :js do
   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
 

spec/features/projects/clusters/user_spec.rb

@@ -25,6 +25,7 @@ RSpec.describe 'User Cluster', :js do
     before do
       visit project_clusters_path(project)
 
+      click_link 'Certificate based'
       click_link 'Connect with a certificate'
       click_link 'Connect existing cluster'
     end
@@ -112,6 +113,7 @@ RSpec.describe 'User Cluster', :js do
         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

spec/features/projects/clusters_spec.rb

@@ -16,6 +16,7 @@ RSpec.describe 'Clusters', :js do
   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 @@ RSpec.describe 'Clusters', :js do
       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 @@ RSpec.describe 'Clusters', :js do
 
       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 @@ RSpec.describe 'Clusters', :js do
 
         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 @@ RSpec.describe 'Clusters', :js do
 
       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 @@ RSpec.describe 'Clusters', :js do
 
     before do
       visit project_clusters_path(project)
+      click_link 'Certificate based'
     end
 
     it 'user sees a table with one cluster' do
@@ -214,6 +213,7 @@ RSpec.describe 'Clusters', :js do
     before do
       visit project_clusters_path(project)
 
+      click_link 'Certificate based'
       click_link 'Connect with a certificate'
       click_link 'Create new cluster'
     end

spec/frontend/clusters_list/components/agent_empty_state_spec.js

 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 multipleClustersDocsUrl = helpPagePath('user/project/clusters/multiple_kubernetes_clusters');
+const installDocsUrl = helpPagePath('administration/clusters/kas');
 
 describe('AgentEmptyStateComponent', () => {
   let wrapper;
@@ -18,10 +17,6 @@ describe('AgentEmptyStateComponent', () => {
   const provideData = {
     emptyStateImage,
     projectPath,
-    multipleClustersDocsUrl,
-    installDocsUrl,
-    getStartedDocsUrl,
-    integrationDocsUrl,
   };
 
   const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
@@ -41,7 +36,6 @@ describe('AgentEmptyStateComponent', () => {
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 

spec/frontend/clusters_list/components/agent_table_spec.js

-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';
@@ -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(() => {
@@ -70,10 +69,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

spec/frontend/clusters_list/components/agents_spec.js

@@ -54,7 +54,6 @@ describe('Agents', () => {
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 
@@ -234,7 +233,11 @@ describe('Agents', () => {
     };
 
     beforeEach(() => {
-      wrapper = shallowMount(Agents, { mocks, propsData, provide: provideData });
+      wrapper = shallowMount(Agents, {
+        mocks,
+        propsData,
+        provide: provideData,
+      });
 
       return wrapper.vm.$nextTick();
     });

spec/frontend/clusters_list/components/clusters_actions_spec.js

+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, CLUSTERS_ACTIONS } 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(CLUSTERS_ACTIONS.actionsButton);
+  });
+
+  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);
+  });
+});

spec/frontend/clusters_list/components/clusters_main_view_spec.js

+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()).toHaveLength(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);
+      },
+    );
+  });
+});

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);
     });
 

spec/frontend/clusters_list/mocks/apollo.js

+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',
+        ...agent,
+        tokens,
       },
       errors: [],
     },
@@ -13,7 +33,8 @@ export const createAgentErrorResponse = {
   data: {
     createClusterAgent: {
       clusterAgent: {
-        id: 'agent-id',
+        ...agent,
+        tokens,
       },
       errors: ['could not create agent'],
     },
@@ -23,9 +44,7 @@ export const createAgentErrorResponse = {
 export const createAgentTokenResponse = {
   data: {
     clusterAgentTokenCreate: {
-      token: {
-        id: 'token-id',
-      },
+      token,
       secret: 'mock-agent-token',
       errors: [],
     },
@@ -35,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 },
+        },
+      },
+    },
+  },
+};

spec/helpers/clusters_helper_spec.rb

@@ -59,35 +59,6 @@ RSpec.describe ClustersHelper do
     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,34 @@ RSpec.describe ClustersHelper do
     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/empty-state/empty-state-agents|svg))
+    end
+
+    it 'displays project path' do
+      expect(subject[:project_path]).to eq(project.full_path)
+    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 }