Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

13 files changed, 130 insertions, 263 deletions

diff --git a/app/assets/javascripts/clusters_list/clusters_util.js b/app/assets/javascripts/clusters_list/clusters_util.js
index c78c93fe1ba..e7ad2f45c75 100644
--- a/app/assets/javascripts/clusters_list/clusters_util.js
+++ b/app/assets/javascripts/clusters_list/clusters_util.js
@@ -1,10 +1,11 @@
 export function generateAgentRegistrationCommand(agentToken, kasAddress) {
-  return `docker run --pull=always --rm \\
-    registry.gitlab.com/gitlab-org/cluster-integration/gitlab-agent/cli:stable generate \\
-    --agent-token=${agentToken} \\
-    --kas-address=${kasAddress} \\
-    --agent-version stable \\
-    --namespace gitlab-kubernetes-agent | kubectl apply -f -`;
+  return `helm repo add gitlab https://charts.gitlab.io
+helm repo update
+helm upgrade --install gitlab-agent gitlab/gitlab-agent \\
+    --namespace gitlab-agent \\
+    --create-namespace \\
+    --set config.token=${agentToken} \\
+    --set config.kasAddress=${kasAddress}`;
 }
 
 export function getAgentConfigPath(clusterAgentName) {
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 f54f7b11414..2f45ef8a862 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -1,55 +1,30 @@
 <script>
-import { GlButton, GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui';
+import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
+import { I18N_AGENTS_EMPTY_STATE } from '../constants';
 
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
-  modalId: INSTALL_AGENT_MODAL_ID,
   agentDocsUrl: helpPagePath('user/clusters/agent/index'),
   components: {
-    GlButton,
     GlEmptyState,
     GlLink,
     GlSprintf,
   },
-  directives: {
-    GlModalDirective,
-  },
   inject: ['emptyStateImage'],
-  props: {
-    isChildComponent: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-  },
 };
 </script>
 
 <template>
-  <gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state">
-    <template #description>
-      <p class="gl-text-left">
-        <gl-sprintf :message="$options.i18n.introText">
-          <template #link="{ content }">
-            <gl-link :href="$options.agentDocsUrl">
-              {{ content }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </template>
-
-    <template #actions>
-      <gl-button
-        v-if="!isChildComponent"
-        v-gl-modal-directive="$options.modalId"
-        category="primary"
-        variant="confirm"
-      >
-        {{ $options.i18n.buttonText }}
-      </gl-button>
+  <gl-empty-state :svg-path="emptyStateImage" :svg-height="100">
+    <template #title>
+      <gl-sprintf :message="$options.i18n.introText">
+        <template #link="{ content }">
+          <gl-link :href="$options.agentDocsUrl">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
     </template>
   </gl-empty-state>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 1144ce68e2c..2decdb5307b 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -37,7 +37,7 @@ export default {
     anchor: 'update-the-agent-version',
   }),
   configHelpLink: helpPagePath('user/clusters/agent/install/index', {
-    anchor: 'create-an-agent-without-configuration-file',
+    anchor: 'create-an-agent-configuration-file',
   }),
   inject: ['gitlabVersion'],
   props: {
diff --git a/app/assets/javascripts/clusters_list/components/agent_token.vue b/app/assets/javascripts/clusters_list/components/agent_token.vue
index eab3fc3ed63..751ad9795dd 100644
--- a/app/assets/javascripts/clusters_list/components/agent_token.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_token.vue
@@ -8,11 +8,8 @@ import { I18N_AGENT_TOKEN } from '../constants';
 
 export default {
   i18n: I18N_AGENT_TOKEN,
-  basicInstallPath: helpPagePath('user/clusters/agent/install/index', {
-    anchor: 'install-the-agent-into-the-cluster',
-  }),
   advancedInstallPath: helpPagePath('user/clusters/agent/install/index', {
-    anchor: 'advanced-installation',
+    anchor: 'advanced-installation-method',
   }),
   components: {
     GlAlert,
@@ -43,27 +40,7 @@ export default {
 
 <template>
   <div>
-    <p>
-      <strong>{{ $options.i18n.tokenTitle }}</strong>
-    </p>
-
-    <p>
-      <gl-sprintf :message="$options.i18n.tokenBody">
-        <template #link="{ content }">
-          <gl-link :href="$options.basicInstallPath" target="_blank"> {{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
-    </p>
-
-    <p>
-      <gl-alert
-        :title="$options.i18n.tokenSingleUseWarningTitle"
-        variant="warning"
-        :dismissible="false"
-      >
-        {{ $options.i18n.tokenSingleUseWarningBody }}
-      </gl-alert>
-    </p>
+    <p class="gl-mb-3">{{ $options.i18n.tokenLabel }}</p>
 
     <p>
       <gl-form-input-group readonly :value="agentToken" :select-on-click="true">
@@ -78,6 +55,14 @@ export default {
     </p>
 
     <p>
+      {{ $options.i18n.tokenSubtitle }}
+    </p>
+
+    <gl-alert :dismissible="false" variant="warning" class="gl-mb-5">
+      {{ $options.i18n.tokenSingleUseWarningTitle }}
+    </gl-alert>
+
+    <p>
       <strong>{{ $options.i18n.basicInstallTitle }}</strong>
     </p>
 
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index 70b9b8ac3c9..89b18ed6d06 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -20,7 +20,7 @@ export default {
       'ClusterAgents|We would love to learn more about your experience with the GitLab Agent.',
     ),
     feedbackBannerButton: s__('ClusterAgents|Give feedback'),
-    error: s__('ClusterAgents|An error occurred while loading your Agents'),
+    error: s__('ClusterAgents|An error occurred while loading your agents'),
   },
   AGENT_FEEDBACK_ISSUE,
   AGENT_FEEDBACK_KEY,
@@ -208,7 +208,7 @@ export default {
       </div>
     </div>
 
-    <agent-empty-state v-else :is-child-component="isChildComponent" />
+    <agent-empty-state v-else />
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">
diff --git a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
index 662cf2a7e36..bde76c46b4b 100644
--- a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
+++ b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
@@ -3,6 +3,7 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlDropdownDivider,
+  GlDropdownText,
   GlSearchBoxByType,
   GlSprintf,
 } from '@gitlab/ui';
@@ -15,6 +16,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlDropdownDivider,
+    GlDropdownText,
     GlSearchBoxByType,
     GlSprintf,
   },
@@ -73,13 +75,24 @@ export default {
       this.clearSearch();
       this.focusSearch();
     },
+    onKeyEnter() {
+      if (!this.searchTerm?.length) {
+        return;
+      }
+      this.$refs.dropdown.hide();
+      this.selectAgent(this.searchTerm);
+    },
   },
 };
 </script>
 <template>
-  <gl-dropdown :text="dropdownText" :loading="isRegistering" @shown="handleShow">
+  <gl-dropdown ref="dropdown" :text="dropdownText" :loading="isRegistering" @shown="handleShow">
     <template #header>
-      <gl-search-box-by-type ref="searchInput" v-model.trim="searchTerm" />
+      <gl-search-box-by-type
+        ref="searchInput"
+        v-model.trim="searchTerm"
+        @keydown.enter.stop.prevent="onKeyEnter"
+      />
     </template>
     <gl-dropdown-item
       v-for="agent in filteredResults"
@@ -90,9 +103,9 @@ export default {
     >
       {{ agent }}
     </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    <gl-dropdown-text v-if="!filteredResults.length" ref="noMatchingResults">{{
       $options.i18n.noResults
-    }}</gl-dropdown-item>
+    }}</gl-dropdown-text>
     <template v-if="shouldRenderCreateButton">
       <gl-dropdown-divider />
       <gl-dropdown-item data-testid="create-config-button" @click="selectAgent(searchTerm)">
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index ccb973f1eb8..8fd759bd3e9 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -1,13 +1,5 @@
 <script>
-import {
-  GlButton,
-  GlDropdown,
-  GlDropdownItem,
-  GlModalDirective,
-  GlTooltipDirective,
-  GlDropdownDivider,
-  GlDropdownSectionHeader,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui';
 
 import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
 
@@ -15,37 +7,40 @@ export default {
   i18n: CLUSTERS_ACTIONS,
   INSTALL_AGENT_MODAL_ID,
   components: {
-    GlButton,
     GlDropdown,
     GlDropdownItem,
-    GlDropdownDivider,
-    GlDropdownSectionHeader,
+    GlTooltip,
   },
   directives: {
     GlModalDirective,
-    GlTooltip: GlTooltipDirective,
   },
   inject: [
     'newClusterPath',
     'addClusterPath',
+    'newClusterDocsPath',
     'canAddCluster',
     'displayClusterAgents',
     'certificateBasedClustersEnabled',
   ],
   computed: {
-    tooltip() {
-      const { connectWithAgent, connectExistingCluster, dropdownDisabledHint } = this.$options.i18n;
+    shouldTriggerModal() {
+      return this.canAddCluster && this.displayClusterAgents;
+    },
+    defaultActionText() {
+      const { connectCluster, connectWithAgent, connectClusterDeprecated } = this.$options.i18n;
 
-      if (!this.canAddCluster) {
-        return dropdownDisabledHint;
-      } else if (this.displayClusterAgents) {
-        return connectWithAgent;
+      if (!this.displayClusterAgents) {
+        return connectClusterDeprecated;
+      } else if (!this.certificateBasedClustersEnabled) {
+        return connectCluster;
       }
-
-      return connectExistingCluster;
+      return connectWithAgent;
     },
-    shouldTriggerModal() {
-      return this.canAddCluster && this.displayClusterAgents;
+    defaultActionUrl() {
+      if (this.displayClusterAgents) {
+        return null;
+      }
+      return this.addClusterPath;
     },
   },
 };
@@ -53,46 +48,51 @@ export default {
 
 <template>
   <div class="nav-controls gl-ml-auto">
+    <gl-tooltip
+      v-if="!canAddCluster"
+      :target="() => $refs.dropdown.$el"
+      :title="$options.i18n.dropdownDisabledHint"
+    />
+
     <gl-dropdown
-      v-if="certificateBasedClustersEnabled"
       ref="dropdown"
       v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
-      v-gl-tooltip="tooltip"
+      data-qa-selector="clusters_actions_button"
       category="primary"
       variant="confirm"
-      :text="$options.i18n.actionsButton"
+      :text="defaultActionText"
       :disabled="!canAddCluster"
-      :split="displayClusterAgents"
+      :split-href="defaultActionUrl"
+      split
       right
     >
-      <template v-if="displayClusterAgents">
-        <gl-dropdown-section-header>{{ $options.i18n.agent }}</gl-dropdown-section-header>
-        <gl-dropdown-item
-          v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-          data-testid="connect-new-agent-link"
-        >
-          {{ $options.i18n.connectWithAgent }}
+      <gl-dropdown-item
+        v-if="displayClusterAgents"
+        :href="newClusterDocsPath"
+        data-testid="create-cluster-link"
+        @click.stop
+      >
+        {{ $options.i18n.createCluster }}
+      </gl-dropdown-item>
+
+      <template v-if="displayClusterAgents && certificateBasedClustersEnabled">
+        <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
+          {{ $options.i18n.createClusterCertificate }}
+        </gl-dropdown-item>
+
+        <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
+          {{ $options.i18n.connectClusterCertificate }}
         </gl-dropdown-item>
-        <gl-dropdown-divider />
-        <gl-dropdown-section-header>{{ $options.i18n.certificate }}</gl-dropdown-section-header>
       </template>
 
-      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
-        {{ $options.i18n.createNewCluster }}
-      </gl-dropdown-item>
-      <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
-        {{ $options.i18n.connectExistingCluster }}
+      <gl-dropdown-item
+        v-if="certificateBasedClustersEnabled && !displayClusterAgents"
+        :href="newClusterPath"
+        data-testid="new-cluster-link"
+        @click.stop
+      >
+        {{ $options.i18n.createClusterDeprecated }}
       </gl-dropdown-item>
     </gl-dropdown>
-    <gl-button
-      v-else
-      v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-      v-gl-tooltip="tooltip"
-      :disabled="!canAddCluster"
-      category="primary"
-      variant="confirm"
-    >
-      {{ $options.i18n.connectWithAgent }}
-    </gl-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
index 76bec05cfc7..f4134ab5072 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -1,6 +1,5 @@
 <script>
-import { GlEmptyState, GlButton, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
-import { mapState } from 'vuex';
+import { GlEmptyState, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { I18N_CLUSTERS_EMPTY_STATE } from '../constants';
 
@@ -8,35 +7,24 @@ export default {
   i18n: I18N_CLUSTERS_EMPTY_STATE,
   components: {
     GlEmptyState,
-    GlButton,
     GlLink,
     GlSprintf,
     GlAlert,
   },
-  inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'addClusterPath'],
-  props: {
-    isChildComponent: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-  },
+  inject: ['emptyStateHelpText', 'clustersEmptyStateImage'],
   clustersHelpUrl: helpPagePath('user/infrastructure/clusters/index', {
     anchor: 'certificate-based-kubernetes-integration-deprecated',
   }),
   blogPostUrl:
     'https://about.gitlab.com/blog/2021/11/15/deprecating-the-cert-based-kubernetes-integration/',
-  computed: {
-    ...mapState(['canAddCluster']),
-  },
 };
 </script>
 
 <template>
   <div>
-    <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
-      <template #description>
-        <p class="gl-text-left">
+    <gl-empty-state :svg-path="clustersEmptyStateImage" :svg-height="100">
+      <template #title>
+        <p>
           <gl-sprintf :message="$options.i18n.introText">
             <template #link="{ content }">
               <gl-link :href="$options.clustersHelpUrl">{{ content }}</gl-link>
@@ -48,28 +36,12 @@ export default {
           {{ emptyStateHelpText }}
         </p>
       </template>
-
-      <template #actions>
-        <gl-button
-          v-if="!isChildComponent"
-          data-testid="integration-primary-button"
-          data-qa-selector="add_kubernetes_cluster_link"
-          category="primary"
-          variant="confirm"
-          :disabled="!canAddCluster"
-          :href="addClusterPath"
-        >
-          {{ $options.i18n.buttonText }}
-        </gl-button>
-      </template>
     </gl-empty-state>
 
     <gl-alert variant="warning" :dismissible="false">
       <gl-sprintf :message="$options.i18n.alertText">
         <template #link="{ content }">
-          <gl-link :href="$options.blogPostUrl" target="_blank">
-            {{ content }}
-          </gl-link>
+          <gl-link :href="$options.blogPostUrl" target="_blank">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </gl-alert>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index b730c0adfa2..73ca804e111 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -1,22 +1,7 @@
 <script>
-import {
-  GlCard,
-  GlSprintf,
-  GlPopover,
-  GlLink,
-  GlButton,
-  GlBadge,
-  GlLoadingIcon,
-  GlModalDirective,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlCard, GlSprintf, GlPopover, GlLink, GlBadge, GlLoadingIcon } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import {
-  AGENT_CARD_INFO,
-  CERTIFICATE_BASED_CARD_INFO,
-  MAX_CLUSTERS_LIST,
-  INSTALL_AGENT_MODAL_ID,
-} from '../constants';
+import { AGENT_CARD_INFO, CERTIFICATE_BASED_CARD_INFO, MAX_CLUSTERS_LIST } from '../constants';
 import Clusters from './clusters.vue';
 import Agents from './agents.vue';
 
@@ -26,23 +11,16 @@ export default {
     GlSprintf,
     GlPopover,
     GlLink,
-    GlButton,
     GlBadge,
     GlLoadingIcon,
     Clusters,
     Agents,
   },
-  directives: {
-    GlModalDirective,
-    GlTooltip: GlTooltipDirective,
-  },
   MAX_CLUSTERS_LIST,
-  INSTALL_AGENT_MODAL_ID,
   i18n: {
     agent: AGENT_CARD_INFO,
     certificate: CERTIFICATE_BASED_CARD_INFO,
   },
-  inject: ['addClusterPath', 'canAddCluster'],
   props: {
     defaultBranchName: {
       default: '.noBranch',
@@ -93,14 +71,6 @@ export default {
 
       return cardTitle;
     },
-    installAgentTooltip() {
-      return this.canAddCluster ? '' : this.$options.i18n.agent.installAgentDisabledHint;
-    },
-    connectExistingClusterTooltip() {
-      return this.canAddCluster
-        ? ''
-        : this.$options.i18n.certificate.connectExistingClusterDisabledHint;
-    },
   },
   methods: {
     cardFooterNumber(number) {
@@ -177,21 +147,6 @@ export default {
               ><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf
             ></gl-link
           >
-          <div
-            v-gl-tooltip="installAgentTooltip"
-            class="gl-display-inline-block"
-            tabindex="-1"
-            data-testid="install-agent-button-tooltip"
-          >
-            <gl-button
-              v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-              class="gl-ml-4"
-              category="secondary"
-              variant="confirm"
-              :disabled="!canAddCluster"
-              >{{ $options.i18n.agent.actionText }}</gl-button
-            >
-          </div>
         </template>
       </gl-card>
 
@@ -214,7 +169,7 @@ export default {
           <gl-badge variant="warning">{{ $options.i18n.certificate.badgeText }}</gl-badge>
         </template>
 
-        <clusters :limit="$options.MAX_CLUSTERS_LIST" :is-child-component="true" />
+        <clusters :limit="$options.MAX_CLUSTERS_LIST" />
 
         <template #footer>
           <gl-link
@@ -226,22 +181,6 @@ export default {
               ><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf
             ></gl-link
           >
-          <div
-            v-gl-tooltip="connectExistingClusterTooltip"
-            class="gl-display-inline-block"
-            tabindex="-1"
-            data-testid="connect-existing-cluster-button-tooltip"
-          >
-            <gl-button
-              category="secondary"
-              data-qa-selector="connect_existing_cluster_button"
-              variant="confirm"
-              class="gl-ml-4"
-              :href="addClusterPath"
-              :disabled="!canAddCluster"
-              >{{ $options.i18n.certificate.actionText }}</gl-button
-            >
-          </div>
         </template>
       </gl-card>
     </div>
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 ae0affe4c8b..3b39c3aac45 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -31,7 +31,7 @@ export default {
   EVENT_LABEL_MODAL,
   enableKasPath: helpPagePath('administration/clusters/kas'),
   registerAgentPath: helpPagePath('user/clusters/agent/install/index', {
-    anchor: 'register-an-agent-with-gitlab',
+    anchor: 'register-the-agent-with-gitlab',
   }),
   components: {
     AvailableAgentsDropdown,
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index c914ee518b2..4a168e811aa 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -90,26 +90,20 @@ export const I18N_AGENT_TABLE = {
 export const I18N_AGENT_TOKEN = {
   copyToken: s__('ClusterAgents|Copy token'),
   copyCommand: s__('ClusterAgents|Copy command'),
-  tokenTitle: s__('ClusterAgents|Registration token'),
-
-  tokenBody: s__(
-    `ClusterAgents|The registration token will be used to connect the agent on your cluster to GitLab. %{linkStart}What are registration tokens?%{linkEnd}`,
-  ),
+  tokenLabel: s__('ClusterAgents|Agent access token:'),
   tokenSingleUseWarningTitle: s__(
     'ClusterAgents|You cannot see this token again after you close this window.',
   ),
-  tokenSingleUseWarningBody: s__(
-    `ClusterAgents|The recommended installation method includes the token. If you want to follow the advanced installation method provided in the docs, make sure you save the token value before you close this window.`,
-  ),
+  tokenSubtitle: s__('ClusterAgents|The agent uses the token to connect with GitLab.'),
 
-  basicInstallTitle: s__('ClusterAgents|Recommended installation method'),
-  basicInstallBody: __(
-    `Open a CLI and connect to the cluster you want to install the agent in. Use this installation method to minimize any manual steps. The token is already included in the command.`,
+  basicInstallTitle: s__('ClusterAgents|Install using Helm (recommended)'),
+  basicInstallBody: s__(
+    'ClusterAgents|From a terminal, connect to your cluster and run this command. The token is included in the command.',
   ),
 
   advancedInstallTitle: s__('ClusterAgents|Advanced installation methods'),
   advancedInstallBody: s__(
-    'ClusterAgents|For the advanced installation method %{linkStart}see the documentation%{linkEnd}.',
+    'ClusterAgents|%{linkStart}View the documentation%{linkEnd} for advanced installation. Ensure you have your access token available.',
   ),
 };
 
@@ -118,20 +112,15 @@ export const I18N_AGENT_MODAL = {
   close: __('Close'),
   cancel: __('Cancel'),
 
-  modalTitle: s__('ClusterAgents|Connect a cluster through an agent'),
+  modalTitle: s__('ClusterAgents|Connect a Kubernetes cluster'),
   modalBody: s__(
     'ClusterAgents|Add an agent configuration file to %{linkStart}this repository%{linkEnd} and select it, or create a new one to register with GitLab:',
   ),
   enableKasText: s__(
     "ClusterAgents|Your instance doesn't have the %{linkStart}GitLab Agent Server (KAS)%{linkEnd} set up. Ask a GitLab Administrator to install it.",
   ),
-  altText: s__('ClusterAgents|GitLab Agent for Kubernetes'),
+  altText: s__('ClusterAgents|GitLab agent for Kubernetes'),
   learnMoreLink: s__('ClusterAgents|How do I register an agent?'),
-  copyToken: s__('ClusterAgents|Copy token'),
-  tokenTitle: s__('ClusterAgents|Registration token'),
-  tokenBody: s__(
-    `ClusterAgents|The registration token will be used to connect the agent on your cluster to GitLab. %{linkStart}What are registration tokens?%{linkEnd}`,
-  ),
   registrationErrorTitle: s__('ClusterAgents|Failed to register an agent'),
   unknownError: s__('ClusterAgents|An unknown error occurred. Please try again.'),
 };
@@ -180,16 +169,14 @@ export const AGENT_STATUSES = {
 
 export const I18N_AGENTS_EMPTY_STATE = {
   introText: s__(
-    'ClusterIntegration|Use the %{linkStart}GitLab Agent%{linkEnd} to safely connect your Kubernetes clusters to GitLab. You can deploy your applications, run your pipelines, use Review Apps, and much more.',
+    'ClusterIntegration|Use the %{linkStart}GitLab agent%{linkEnd} to safely connect your Kubernetes clusters to GitLab. You can deploy your applications, run your pipelines, use Review Apps, and much more.',
   ),
-  buttonText: s__('ClusterAgents|Connect with the GitLab Agent'),
 };
 
 export const I18N_CLUSTERS_EMPTY_STATE = {
   introText: s__(
     'ClusterIntegration|Connect your cluster to GitLab through %{linkStart}cluster certificates%{linkEnd}.',
   ),
-  buttonText: s__('ClusterIntegration|Connect with a certificate'),
   alertText: s__(
     'ClusterIntegration|The certificate-based method to connect clusters to GitLab was %{linkStart}deprecated%{linkEnd} in GitLab 14.5.',
   ),
@@ -201,19 +188,15 @@ export const AGENT_CARD_INFO = {
   emptyTitle: s__('ClusterAgents|No agents'),
   tooltip: {
     label: s__('ClusterAgents|Recommended'),
-    title: s__('ClusterAgents|GitLab Agent'),
+    title: s__('ClusterAgents|GitLab agent'),
     text: sprintf(
       s__(
-        'ClusterAgents|The GitLab Agent provides an increased level of security when connecting Kubernetes clusters to GitLab. %{linkStart}Learn more about the GitLab Agent.%{linkEnd}',
+        'ClusterAgents|The GitLab agent provides an increased level of security when connecting Kubernetes clusters to GitLab. %{linkStart}Learn more about the GitLab agent.%{linkEnd}',
       ),
     ),
     link: helpPagePath('user/clusters/agent/index'),
   },
-  actionText: s__('ClusterAgents|Install a new agent'),
   footerText: sprintf(s__('ClusterAgents|View all %{number} agents')),
-  installAgentDisabledHint: s__(
-    'ClusterAgents|Requires a Maintainer or greater role to install new agents',
-  ),
 };
 
 export const CERTIFICATE_BASED_CARD_INFO = {
@@ -222,12 +205,8 @@ export const CERTIFICATE_BASED_CARD_INFO = {
     s__('ClusterAgents|%{number} of %{total} clusters connected through cluster certificates'),
   ),
   emptyTitle: s__('ClusterAgents|No clusters connected through cluster certificates'),
-  actionText: s__('ClusterAgents|Connect existing cluster'),
   footerText: sprintf(s__('ClusterAgents|View all %{number} clusters')),
   badgeText: s__('ClusterAgents|Deprecated'),
-  connectExistingClusterDisabledHint: s__(
-    'ClusterAgents|Requires a maintainer or greater role to connect existing clusters',
-  ),
 };
 
 export const MAX_CLUSTERS_LIST = 6;
@@ -252,12 +231,13 @@ export const CERTIFICATE_TAB = {
 export const CLUSTERS_TABS = [ALL_TAB, AGENT_TAB, CERTIFICATE_TAB];
 
 export const CLUSTERS_ACTIONS = {
-  actionsButton: s__('ClusterAgents|Actions'),
-  createNewCluster: s__('ClusterAgents|Create a new cluster'),
-  connectWithAgent: s__('ClusterAgents|Connect with an agent'),
-  connectExistingCluster: s__('ClusterAgents|Connect with a certificate'),
-  agent: s__('ClusterAgents|Agent'),
-  certificate: s__('ClusterAgents|Certificate'),
+  connectCluster: s__('ClusterAgents|Connect a cluster'),
+  connectWithAgent: s__('ClusterAgents|Connect a cluster (agent)'),
+  connectClusterDeprecated: s__('ClusterAgents|Connect a cluster (deprecated)'),
+  createClusterDeprecated: s__('ClusterAgents|Create a cluster (deprecated)'),
+  createCluster: s__('ClusterAgents|Create a cluster'),
+  createClusterCertificate: s__('ClusterAgents|Create a cluster (certificate - deprecated)'),
+  connectClusterCertificate: s__('ClusterAgents|Connect a cluster (certificate - deprecated)'),
   dropdownDisabledHint: s__(
     'ClusterAgents|Requires a Maintainer or greater role to perform these actions',
   ),
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 7743ffba5de..76920a0aef4 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,4 @@
-#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
 #import "../fragments/cluster_agent.fragment.graphql"
 
 query getAgents(
diff --git a/app/assets/javascripts/clusters_list/index.js b/app/assets/javascripts/clusters_list/index.js
index 27eebc9d891..f6dfb96ffd9 100644
--- a/app/assets/javascripts/clusters_list/index.js
+++ b/app/assets/javascripts/clusters_list/index.js
@@ -25,6 +25,7 @@ export default () => {
     kasAddress,
     newClusterPath,
     addClusterPath,
+    newClusterDocsPath,
     emptyStateHelpText,
     clustersEmptyStateImage,
     canAddCluster,
@@ -43,6 +44,7 @@ export default () => {
       kasAddress,
       newClusterPath,
       addClusterPath,
+      newClusterDocsPath,
       emptyStateHelpText,
       clustersEmptyStateImage,
       canAddCluster: parseBoolean(canAddCluster),