Merge branch '346197-rename-the-agent-on-the-gitlab-ui' into 'master'

Rename the Agent on the GitLab UI

See merge request gitlab-org/gitlab!74981

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

@@ -6,8 +6,7 @@ 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'),
+  agentDocsUrl: helpPagePath('user/clusters/agent/index'),
   components: {
     GlButton,
     GlEmptyState,
@@ -32,38 +31,24 @@ export default {
   <gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state">
     <template #description>
       <p class="gl-text-left">
-        {{ $options.i18n.introText }}
-      </p>
-      <p class="gl-text-left">
-        <gl-sprintf :message="$options.i18n.multipleClustersText">
+        <gl-sprintf :message="$options.i18n.introText">
           <template #link="{ content }">
-            <gl-link
-              :href="$options.multipleClustersDocsUrl"
-              target="_blank"
-              data-testid="multiple-clusters-docs-link"
-            >
+            <gl-link :href="$options.agentDocsUrl">
               {{ content }}
             </gl-link>
           </template>
         </gl-sprintf>
       </p>
-
-      <p>
-        <gl-link :href="$options.installDocsUrl" target="_blank" data-testid="install-docs-link">
-          {{ $options.i18n.learnMoreText }}
-        </gl-link>
-      </p>
     </template>
 
     <template #actions>
       <gl-button
         v-if="!isChildComponent"
         v-gl-modal-directive="$options.modalId"
-        data-testid="integration-primary-button"
         category="primary"
         variant="confirm"
       >
-        {{ $options.i18n.primaryButtonText }}
+        {{ $options.i18n.buttonText }}
       </gl-button>
     </template>
   </gl-empty-state>

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

 <script>
-import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlEmptyState, GlButton, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { I18N_CLUSTERS_EMPTY_STATE } from '../constants';
@@ -11,6 +11,7 @@ export default {
     GlButton,
     GlLink,
     GlSprintf,
+    GlAlert,
   },
   inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
   props: {
@@ -20,8 +21,11 @@ export default {
       type: Boolean,
     },
   },
-  learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
-  multipleClustersHelpUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'),
+  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']),
   },
@@ -29,48 +33,45 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
-    <template #description>
-      <p class="gl-text-left">
-        {{ $options.i18n.description }}
-      </p>
-      <p class="gl-text-left">
-        <gl-sprintf :message="$options.i18n.multipleClustersText">
-          <template #link="{ content }">
-            <gl-link
-              :href="$options.multipleClustersHelpUrl"
-              target="_blank"
-              data-testid="multiple-clusters-docs-link"
-            >
-              {{ content }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
+  <div>
+    <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
+      <template #description>
+        <p class="gl-text-left">
+          <gl-sprintf :message="$options.i18n.introText">
+            <template #link="{ content }">
+              <gl-link :href="$options.clustersHelpUrl">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
 
-      <p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text">
-        {{ emptyStateHelpText }}
-      </p>
+        <p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text">
+          {{ emptyStateHelpText }}
+        </p>
+      </template>
 
-      <p>
-        <gl-link :href="$options.learnMoreHelpUrl" target="_blank" data-testid="clusters-docs-link">
-          {{ $options.i18n.learnMoreLinkText }}
-        </gl-link>
-      </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="newClusterPath"
+        >
+          {{ $options.i18n.buttonText }}
+        </gl-button>
+      </template>
+    </gl-empty-state>
 
-    <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="newClusterPath"
-      >
-        {{ $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>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+  </div>
 </template>

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

@@ -34,10 +34,12 @@ export default {
   directives: {
     GlModalDirective,
   },
-  AGENT_CARD_INFO,
-  CERTIFICATE_BASED_CARD_INFO,
   MAX_CLUSTERS_LIST,
   INSTALL_AGENT_MODAL_ID,
+  i18n: {
+    agent: AGENT_CARD_INFO,
+    certificate: CERTIFICATE_BASED_CARD_INFO,
+  },
   inject: ['addClusterPath'],
   props: {
     defaultBranchName: {
@@ -122,21 +124,21 @@ export default {
             </gl-sprintf>
           </h3>
 
-          <gl-badge id="clusters-recommended-badge" size="md" variant="info">{{
-            $options.AGENT_CARD_INFO.tooltip.label
+          <gl-badge id="clusters-recommended-badge" variant="info">{{
+            $options.i18n.agent.tooltip.label
           }}</gl-badge>
 
           <gl-popover
             target="clusters-recommended-badge"
             container="viewport"
             placement="bottom"
-            :title="$options.AGENT_CARD_INFO.tooltip.title"
+            :title="$options.i18n.agent.tooltip.title"
           >
             <p class="gl-mb-0">
-              <gl-sprintf :message="$options.AGENT_CARD_INFO.tooltip.text">
+              <gl-sprintf :message="$options.i18n.agent.tooltip.text">
                 <template #link="{ content }">
                   <gl-link
-                    :href="$options.AGENT_CARD_INFO.tooltip.link"
+                    :href="$options.i18n.agent.tooltip.link"
                     target="_blank"
                     class="gl-font-sm"
                   >
@@ -159,9 +161,9 @@ export default {
           <gl-link
             v-if="totalAgents"
             data-testid="agents-tab-footer-link"
-            :href="`?tab=${$options.AGENT_CARD_INFO.tabName}`"
-            @click="changeTab($event, $options.AGENT_CARD_INFO.tabName)"
-            ><gl-sprintf :message="$options.AGENT_CARD_INFO.footerText"
+            :href="`?tab=${$options.i18n.agent.tabName}`"
+            @click="changeTab($event, $options.i18n.agent.tabName)"
+            ><gl-sprintf :message="$options.i18n.agent.footerText"
               ><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf
             ></gl-link
           ><gl-button
@@ -169,7 +171,7 @@ export default {
             class="gl-ml-4"
             category="secondary"
             variant="confirm"
-            >{{ $options.AGENT_CARD_INFO.actionText }}</gl-button
+            >{{ $options.i18n.agent.actionText }}</gl-button
           >
         </template>
       </gl-card>
@@ -190,6 +192,7 @@ export default {
               <template #total>{{ clustersCardTitle.total }}</template>
             </gl-sprintf>
           </h3>
+          <gl-badge variant="warning">{{ $options.i18n.certificate.badgeText }}</gl-badge>
         </template>
 
         <clusters :limit="$options.MAX_CLUSTERS_LIST" :is-child-component="true" />
@@ -198,9 +201,9 @@ export default {
           <gl-link
             v-if="totalClusters"
             data-testid="clusters-tab-footer-link"
-            :href="`?tab=${$options.CERTIFICATE_BASED_CARD_INFO.tabName}`"
-            @click="changeTab($event, $options.CERTIFICATE_BASED_CARD_INFO.tabName)"
-            ><gl-sprintf :message="$options.CERTIFICATE_BASED_CARD_INFO.footerText"
+            :href="`?tab=${$options.i18n.certificate.tabName}`"
+            @click="changeTab($event, $options.i18n.certificate.tabName)"
+            ><gl-sprintf :message="$options.i18n.certificate.footerText"
               ><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf
             ></gl-link
           ><gl-button
@@ -209,7 +212,7 @@ export default {
             variant="confirm"
             class="gl-ml-4"
             :href="addClusterPath"
-            >{{ $options.CERTIFICATE_BASED_CARD_INFO.actionText }}</gl-button
+            >{{ $options.i18n.certificate.actionText }}</gl-button
           >
         </template>
       </gl-card>

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

@@ -9,7 +9,7 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import Tracking from '~/tracking';
 import { generateAgentRegistrationCommand } from '../clusters_util';
@@ -38,9 +38,19 @@ export default {
   EVENT_ACTIONS_OPEN,
   EVENT_ACTIONS_CLICK,
   EVENT_LABEL_MODAL,
+  basicInstallPath: helpPagePath('user/clusters/agent/install/index', {
+    anchor: 'install-the-agent-into-the-cluster',
+  }),
+  advancedInstallPath: helpPagePath('user/clusters/agent/install/index', {
+    anchor: 'advanced-installation',
+  }),
+  enableKasPath: helpPagePath('administration/clusters/kas'),
+  installAgentPath: helpPagePath('user/clusters/agent/install/index'),
+  registerAgentPath: helpPagePath('user/clusters/agent/install/index', {
+    anchor: 'create-an-agent-record-in-gitlab',
+  }),
   components: {
     AvailableAgentsDropdown,
-    ClipboardButton,
     CodeBlock,
     GlAlert,
     GlButton,
@@ -49,6 +59,7 @@ export default {
     GlLink,
     GlModal,
     GlSprintf,
+    ModalCopyButton,
   },
   mixins: [trackingMixin],
   inject: ['projectPath', 'kasAddress', 'emptyStateImage'],
@@ -103,17 +114,6 @@ export default {
     agentRegistrationCommand() {
       return generateAgentRegistrationCommand(this.agentToken, this.kasAddress);
     },
-    basicInstallPath() {
-      return helpPagePath('user/clusters/agent/install/index', {
-        anchor: 'install-the-agent-into-the-cluster',
-      });
-    },
-    advancedInstallPath() {
-      return helpPagePath('user/clusters/agent/install/index', { anchor: 'advanced-installation' });
-    },
-    enableKasPath() {
-      return helpPagePath('administration/clusters/kas');
-    },
     getAgentsQueryVariables() {
       return {
         defaultBranchName: this.defaultBranchName,
@@ -122,11 +122,6 @@ export default {
         projectPath: this.projectPath,
       };
     },
-    installAgentPath() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'define-a-configuration-repository',
-      });
-    },
     i18n() {
       return I18N_AGENT_MODAL[this.modalType];
     },
@@ -272,7 +267,7 @@ export default {
 
         <p class="gl-mb-0">{{ i18n.selectAgentBody }}</p>
         <p>
-          <gl-link :href="basicInstallPath" target="_blank"> {{ i18n.learnMoreLink }}</gl-link>
+          <gl-link :href="$options.registerAgentPath"> {{ i18n.learnMoreLink }}</gl-link>
         </p>
 
         <form>
@@ -301,7 +296,7 @@ export default {
         <p>
           <gl-sprintf :message="i18n.tokenBody">
             <template #link="{ content }">
-              <gl-link :href="basicInstallPath" target="_blank"> {{ content }}</gl-link>
+              <gl-link :href="$options.basicInstallPath" target="_blank"> {{ content }}</gl-link>
             </template>
           </gl-sprintf>
         </p>
@@ -315,7 +310,11 @@ export default {
         <p>
           <gl-form-input-group readonly :value="agentToken" :select-on-click="true">
             <template #append>
-              <clipboard-button :text="agentToken" :title="i18n.copyToken" />
+              <modal-copy-button
+                :text="agentToken"
+                :title="i18n.copyToken"
+                :modal-id="$options.modalId"
+              />
             </template>
           </gl-form-input-group>
         </p>
@@ -339,7 +338,7 @@ export default {
         <p>
           <gl-sprintf :message="i18n.advancedInstallBody">
             <template #link="{ content }">
-              <gl-link :href="advancedInstallPath" target="_blank"> {{ content }}</gl-link>
+              <gl-link :href="$options.advancedInstallPath" target="_blank"> {{ content }}</gl-link>
             </template>
           </gl-sprintf>
         </p>
@@ -350,33 +349,25 @@ export default {
       <div class="gl-text-center gl-mb-5">
         <img :alt="i18n.altText" :src="emptyStateImage" height="100" />
       </div>
-      <p>{{ i18n.modalBody }}</p>
 
-      <p v-if="kasDisabled">
-        <gl-sprintf :message="i18n.enableKasText">
+      <p>
+        <gl-sprintf :message="i18n.modalBody">
           <template #link="{ content }">
-            <gl-link :href="enableKasPath"> {{ content }}</gl-link>
+            <gl-link :href="$options.installAgentPath"> {{ content }}</gl-link>
           </template>
         </gl-sprintf>
       </p>
 
-      <p class="gl-mb-0">
-        <gl-link :href="installAgentPath">
-          {{ i18n.docsLinkText }}
-        </gl-link>
+      <p v-if="kasDisabled">
+        <gl-sprintf :message="i18n.enableKasText">
+          <template #link="{ content }">
+            <gl-link :href="$options.enableKasPath"> {{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
       </p>
     </template>
 
     <template #modal-footer>
-      <gl-button
-        v-if="canCancel"
-        :data-track-action="$options.EVENT_ACTIONS_CLICK"
-        :data-track-label="$options.EVENT_LABEL_MODAL"
-        data-track-property="cancel"
-        @click="closeModal"
-        >{{ i18n.cancel }}
-      </gl-button>
-
       <gl-button
         v-if="registered"
         variant="confirm"
@@ -400,6 +391,15 @@ export default {
         >{{ i18n.registerAgentButton }}
       </gl-button>
 
+      <gl-button
+        v-if="canCancel"
+        :data-track-action="$options.EVENT_ACTIONS_CLICK"
+        :data-track-label="$options.EVENT_LABEL_MODAL"
+        data-track-property="cancel"
+        @click="closeModal"
+        >{{ i18n.cancel }}
+      </gl-button>
+
       <gl-button
         v-if="isEmptyStateModal"
         :href="repositoryPath"

app/assets/javascripts/clusters_list/constants.js

@@ -66,63 +66,61 @@ export const STATUSES = {
 
 export const I18N_AGENT_MODAL = {
   agent_registration: {
-    registerAgentButton: s__('ClusterAgents|Register Agent'),
+    registerAgentButton: s__('ClusterAgents|Register'),
     close: __('Close'),
     cancel: __('Cancel'),
 
-    modalTitle: s__('ClusterAgents|Connect with Agent'),
-
-    selectAgentTitle: s__('ClusterAgents|Select which Agent you want to install'),
+    modalTitle: s__('ClusterAgents|Connect a cluster through the Agent'),
+    selectAgentTitle: s__('ClusterAgents|Select an agent to register with GitLab'),
     selectAgentBody: s__(
-      'ClusterAgents|Select an Agent to register with GitLab and install on your cluster.',
+      'ClusterAgents|Register an agent to generate a token that will be used to install the agent on your cluster in the next step.',
     ),
-    learnMoreLink: s__('ClusterAgents|Learn more about the GitLab Kubernetes Agent registration.'),
+    learnMoreLink: s__('ClusterAgents|How to 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. To learn more about the registration tokens and how they are used %{linkStart}go to the documentation%{linkEnd}.`,
+      `ClusterAgents|The registration token will be used to connect the agent on your cluster to GitLab. %{linkStart}What are registration tokens?%{linkEnd}`,
     ),
 
     tokenSingleUseWarningTitle: s__(
-      'ClusterAgents|The token value will not be shown again after you close this window.',
+      'ClusterAgents|You cannot see this token again after you close this window.',
     ),
     tokenSingleUseWarningBody: s__(
-      `ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window.`,
+      `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.`,
     ),
 
     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.`,
+      `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.`,
     ),
 
-    advancedInstallTitle: s__('ClusterAgents|Alternative installation methods'),
+    advancedInstallTitle: s__('ClusterAgents|Advanced installation methods'),
     advancedInstallBody: s__(
-      'ClusterAgents|For alternative installation methods %{linkStart}go to the documentation%{linkEnd}.',
+      'ClusterAgents|For the advanced installation method %{linkStart}see the documentation%{linkEnd}.',
     ),
 
-    registrationErrorTitle: __('Failed to register Agent'),
+    registrationErrorTitle: s__('ClusterAgents|Failed to register an agent'),
     unknownError: s__('ClusterAgents|An unknown error occurred. Please try again.'),
   },
   empty_state: {
-    modalTitle: s__('ClusterAgents|Install new Agent'),
+    modalTitle: s__('ClusterAgents|Connect your cluster through the Agent'),
     modalBody: s__(
-      'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
+      "ClusterAgents|To install a new agent, first add the agent's configuration file to this repository. %{linkStart}What's the agent's configuration file?%{linkEnd}",
     ),
-    docsLinkText: s__('ClusterAgents|Learn more about installing a GitLab Kubernetes Agent'),
     enableKasText: s__(
-      'ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}',
+      "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 Kubernetes Agent'),
-    secondaryButton: s__('ClusterAgents|Go to the repository'),
-    done: __('Done'),
+    altText: s__('ClusterAgents|GitLab Agent for Kubernetes'),
+    secondaryButton: s__('ClusterAgents|Go to the repository files'),
+    done: __('Cancel'),
   },
 };
 
 export const KAS_DISABLED_ERROR = 'Gitlab::Kas::Client::ConfigurationError';
 
 export const I18N_AVAILABLE_AGENTS_DROPDOWN = {
-  selectAgent: s__('ClusterAgents|Select an Agent'),
+  selectAgent: s__('ClusterAgents|Select an agent'),
   registeringAgent: s__('ClusterAgents|Registering Agent'),
 };
 
@@ -143,7 +141,7 @@ export const AGENT_STATUSES = {
       title: s__('ClusterAgents|Agent might not be connected to GitLab'),
       body: sprintf(
         s__(
-          'ClusterAgents|The Agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}.',
+          'ClusterAgents|The agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}.',
         ),
       ),
     },
@@ -161,50 +159,48 @@ export const AGENT_STATUSES = {
 
 export const I18N_AGENTS_EMPTY_STATE = {
   introText: s__(
-    'ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more.',
-  ),
-  multipleClustersText: s__(
-    'ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
+    '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.',
   ),
-  learnMoreText: s__('ClusterAgents|Learn more about the GitLab Kubernetes Agent.'),
-  primaryButtonText: s__('ClusterAgents|Connect with a GitLab Agent'),
+  buttonText: s__('ClusterAgents|Connect with the GitLab Agent'),
 };
 
 export const I18N_CLUSTERS_EMPTY_STATE = {
-  description: s__(
-    'ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way.',
-  ),
-  multipleClustersText: s__(
-    'ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
+  introText: s__(
+    'ClusterIntegration|Connect your cluster to GitLab through %{linkStart}cluster certificates%{linkEnd}.',
   ),
-  learnMoreLinkText: s__('ClusterIntegration|Learn more about the GitLab managed clusters'),
   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.',
+  ),
 };
 
 export const AGENT_CARD_INFO = {
   tabName: 'agent',
-  title: sprintf(s__('ClusterAgents|%{number} of %{total} Agent based integrations')),
-  emptyTitle: s__('ClusterAgents|No Agent based integrations'),
+  title: sprintf(s__('ClusterAgents|%{number} of %{total} agents')),
+  emptyTitle: s__('ClusterAgents|No agents'),
   tooltip: {
     label: s__('ClusterAgents|Recommended'),
-    title: s__('ClusterAgents|GitLab Agents'),
+    title: s__('ClusterAgents|GitLab Agent'),
     text: sprintf(
       s__(
-        'ClusterAgents|GitLab Agents provide an increased level of security when integrating with clusters. %{linkStart}Learn more about the GitLab Kubernetes Agent.%{linkEnd}',
+        '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 new Agent'),
-  footerText: sprintf(s__('ClusterAgents|View all %{number} Agent based integrations')),
+  actionText: s__('ClusterAgents|Install a new agent'),
+  footerText: sprintf(s__('ClusterAgents|View all %{number} agents')),
 };
 
 export const CERTIFICATE_BASED_CARD_INFO = {
   tabName: 'certificate_based',
-  title: sprintf(s__('ClusterAgents|%{number} of %{total} Certificate based integrations')),
-  emptyTitle: s__('ClusterAgents|No Certificate based integrations'),
+  title: sprintf(
+    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} Certificate based integrations')),
+  footerText: sprintf(s__('ClusterAgents|View all %{number} clusters')),
+  badgeText: s__('ClusterAgents|Deprecated'),
 };
 
 export const MAX_CLUSTERS_LIST = 6;
@@ -221,7 +217,7 @@ export const CLUSTERS_TABS = [
     queryParamValue: 'agent',
   },
   {
-    title: s__('ClusterAgents|Certificate based'),
+    title: s__('ClusterAgents|Certificate'),
     component: 'clusters',
     queryParamValue: 'certificate_based',
   },
@@ -229,9 +225,9 @@ export const CLUSTERS_TABS = [
 
 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'),
+  createNewCluster: s__('ClusterAgents|Create a new cluster'),
+  connectWithAgent: s__('ClusterAgents|Connect with the Agent'),
+  connectExistingCluster: s__('ClusterAgents|Connect with a certificate'),
 };
 
 export const AGENT = 'agent';

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_alert_picker.vue

@@ -9,7 +9,7 @@ export default {
       'NetworkPolicies|%{labelStart}And%{labelEnd} %{spanStart}send an Alert to GitLab.%{spanEnd}',
     ),
     AGENT_REQUIRED: s__(
-      'NetworkPolicies|Please %{installLinkStart}install%{installLinkEnd} and %{configureLinkStart}configure a Kubernetes Agent for this project%{configureLinkEnd} to enable alerts.',
+      'NetworkPolicies|To enable alerts, %{installLinkStart}install an agent%{installLinkEnd} first.',
     ),
     BUTTON_LABEL: s__('NetworkPolicies|Add alert'),
     HIGH_VOLUME_WARNING: s__(
@@ -24,7 +24,6 @@ export default {
     GlSprintf,
   },
   inject: {
-    configureAgentHelpPath: { type: String, default: '' },
     createAgentHelpPath: { type: String, default: '' },
     projectPath: { type: String, default: '' },
   },
@@ -78,11 +77,6 @@ export default {
             {{ content }}
           </gl-link>
         </template>
-        <template #configureLink="{ content }">
-          <gl-link :href="configureAgentHelpPath" target="_blank">
-            {{ content }}
-          </gl-link>
-        </template>
       </gl-sprintf>
     </gl-alert>
     <gl-alert

ee/app/assets/javascripts/threat_monitoring/policy_editor.js

@@ -19,7 +19,6 @@ export default () => {
     defaultEnvironmentId,
     disableScanExecutionUpdate,
     environmentsEndpoint,
-    configureAgentHelpPath,
     createAgentHelpPath,
     networkPoliciesEndpoint,
     networkDocumentationPath,
@@ -64,7 +63,6 @@ export default () => {
     el,
     apolloProvider,
     provide: {
-      configureAgentHelpPath,
       createAgentHelpPath,
       disableScanExecutionUpdate: parseBoolean(disableScanExecutionUpdate),
       networkDocumentationPath,

ee/app/helpers/projects/security/policies_helper.rb

@@ -25,8 +25,7 @@ module Projects::Security::PoliciesHelper
       default_environment_id: project.default_environment&.id || -1,
       disable_scan_execution_update: disable_scan_execution_update.to_s,
       network_policies_endpoint: project_security_network_policies_path(project),
-      configure_agent_help_path: help_page_url('user/clusters/agent/repository.html'),
-      create_agent_help_path: help_page_url('user/clusters/agent/index.md', anchor: 'create-an-agent-record-in-gitlab'),
+      create_agent_help_path: help_page_url('user/clusters/agent/install/index'),
       environments_endpoint: project_environments_path(project),
       environment_id: environment&.id,
       network_documentation_path: help_page_path('user/application_security/policies/index', anchor: 'container-network-policy'),

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_alert_picker_spec.js

@@ -38,7 +38,6 @@ describe('PolicyAlertPicker component', () => {
           ...propsData,
         },
         provide: {
-          configureAgentHelpPath: '',
           createAgentHelpPath: '',
           projectPath: '',
         },

ee/spec/helpers/projects/security/policies_helper_spec.rb

@@ -42,7 +42,6 @@ RSpec.describe Projects::Security::PoliciesHelper do
         default_environment_id: -1,
         disable_scan_execution_update: "false",
         network_policies_endpoint: kind_of(String),
-        configure_agent_help_path: kind_of(String),
         create_agent_help_path: kind_of(String),
         environments_endpoint: kind_of(String),
         network_documentation_path: kind_of(String),

spec/features/clusters/create_agent_spec.rb

@@ -25,13 +25,13 @@ RSpec.describe 'Cluster agent registration', :js do
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
     click_button('Actions')
-    expect(page).to have_content('Register Agent')
+    expect(page).to have_content('Register')
 
-    click_button('Select an Agent')
+    click_button('Select an agent')
     click_button('example-agent-2')
-    click_button('Register Agent')
+    click_button('Register')
 
-    expect(page).to have_content('The token value will not be shown again after you close this window.')
+    expect(page).to have_content('You cannot see this token again after you close this window.')
     expect(page).to have_content('example-agent-token')
     expect(page).to have_content('docker run --pull=always --rm')
 

spec/features/projects/cluster_agents_spec.rb

@@ -22,7 +22,7 @@ RSpec.describe 'ClusterAgents', :js do
     end
 
     it 'displays empty state', :aggregate_failures do
-      expect(page).to have_content('Install new Agent')
+      expect(page).to have_content('Install a new agent')
       expect(page).to have_selector('.empty-state')
     end
   end

spec/features/projects/clusters/eks_spec.rb

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

spec/features/projects/clusters/gcp_spec.rb

@@ -33,7 +33,7 @@ RSpec.describe 'Gcp Cluster', :js do
       before do
         visit project_clusters_path(project)
 
-        click_link 'Certificate based'
+        click_link 'Certificate'
         click_link 'Connect with a certificate'
         click_link 'Create new cluster'
         click_link 'Google GKE'
@@ -145,9 +145,9 @@ RSpec.describe 'Gcp Cluster', :js do
         before do
           visit project_clusters_path(project)
 
-          click_link 'Certificate based'
+          click_link 'Certificate'
           click_button(class: 'dropdown-toggle-split')
-          click_link 'Connect with certificate'
+          click_link 'Connect with a certificate'
         end
 
         it 'user sees the "Environment scope" field' do
@@ -161,7 +161,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'
+          click_link 'Certificate'
         end
 
         it 'user sees creation form with the successful message' do
@@ -175,7 +175,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'
+      click_link 'Certificate'
     end
 
     it 'user sees offer on cluster index page' do
@@ -192,7 +192,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'
+      click_link 'Certificate'
     end
 
     it 'user does not see offer after dismissing' do

spec/features/projects/clusters/user_spec.rb

@@ -25,7 +25,7 @@ RSpec.describe 'User Cluster', :js do
     before do
       visit project_clusters_path(project)
 
-      click_link 'Certificate based'
+      click_link 'Certificate'
       click_link 'Connect with a certificate'
       click_link 'Connect existing cluster'
     end
@@ -113,7 +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'
+        click_link 'Certificate'
       end
 
       it 'user sees creation form with the successful message' do

spec/features/projects/clusters_spec.rb

@@ -10,13 +10,13 @@ RSpec.describe 'Clusters', :js do
 
   before do
     project.add_maintainer(user)
-    gitlab_sign_in(user)
+    sign_in(user)
   end
 
   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'
+      click_link 'Certificate'
     end
 
     it 'sees empty state' do
@@ -34,17 +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_link 'Certificate'
         click_button(class: 'dropdown-toggle-split')
       end
 
       it 'user sees an add cluster button' do
-        expect(page).to have_content('Connect with certificate')
+        expect(page).to have_content('Connect with a certificate')
       end
 
       context 'when user filled form with environment scope' do
         before do
-          click_link 'Connect with certificate'
+          click_link 'Connect with a certificate'
           fill_in 'cluster_name', with: 'staging-cluster'
           fill_in 'cluster_environment_scope', with: 'staging/*'
           click_button 'Add Kubernetes cluster'
@@ -72,7 +72,7 @@ RSpec.describe 'Clusters', :js do
 
       context 'when user updates duplicated environment scope' do
         before do
-          click_link 'Connect with certificate'
+          click_link 'Connect with a 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'
@@ -109,13 +109,13 @@ RSpec.describe 'Clusters', :js do
 
         create(:cluster, :provided_by_gcp, name: 'default-cluster', environment_scope: '*', projects: [project])
         visit project_clusters_path(project)
-        click_link 'Certificate based'
+        click_link 'Certificate'
       end
 
       context 'when user filled form with environment scope' do
         before do
           click_button(class: 'dropdown-toggle-split')
-          click_link 'Create new cluster'
+          click_link 'Create a new cluster'
           click_link 'Google GKE'
 
           sleep 2 # wait for ajax
@@ -160,7 +160,7 @@ RSpec.describe 'Clusters', :js do
       context 'when user updates duplicated environment scope' do
         before do
           click_button(class: 'dropdown-toggle-split')
-          click_link 'Create new cluster'
+          click_link 'Create a new cluster'
           click_link 'Google GKE'
 
           sleep 2 # wait for ajax
@@ -190,7 +190,7 @@ RSpec.describe 'Clusters', :js do
 
     before do
       visit project_clusters_path(project)
-      click_link 'Certificate based'
+      click_link 'Certificate'
     end
 
     it 'user sees a table with one cluster' do
@@ -213,7 +213,7 @@ RSpec.describe 'Clusters', :js do
     before do
       visit project_clusters_path(project)
 
-      click_link 'Certificate based'
+      click_link 'Certificate'
       click_link 'Connect with a certificate'
       click_link 'Create new cluster'
     end

spec/frontend/clusters_list/components/agent_empty_state_spec.js

-import { GlEmptyState, GlSprintf } from '@gitlab/ui';
+import { GlEmptyState, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import { INSTALL_AGENT_MODAL_ID } from '~/clusters_list/constants';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -6,8 +6,7 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
 const emptyStateImage = '/path/to/image';
-const multipleClustersDocsUrl = helpPagePath('user/project/clusters/multiple_kubernetes_clusters');
-const installDocsUrl = helpPagePath('administration/clusters/kas');
+const installDocsUrl = helpPagePath('user/clusters/agent/index');
 
 describe('AgentEmptyStateComponent', () => {
   let wrapper;
@@ -15,9 +14,8 @@ describe('AgentEmptyStateComponent', () => {
     emptyStateImage,
   };
 
-  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
-  const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
-  const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
+  const findInstallDocsLink = () => wrapper.findComponent(GlLink);
+  const findIntegrationButton = () => wrapper.findComponent(GlButton);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
 
   beforeEach(() => {
@@ -44,8 +42,7 @@ describe('AgentEmptyStateComponent', () => {
     expect(findIntegrationButton().exists()).toBe(true);
   });
 
-  it('renders correct href attributes for the links', () => {
-    expect(findMultipleClustersDocsLink().attributes('href')).toBe(multipleClustersDocsUrl);
+  it('renders correct href attributes for the docs link', () => {
     expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl);
   });
 

spec/frontend/clusters_list/components/clusters_empty_state_spec.js

@@ -6,35 +6,33 @@ import ClusterStore from '~/clusters_list/store';
 const clustersEmptyStateImage = 'path/to/svg';
 const newClusterPath = '/path/to/connect/cluster';
 const emptyStateHelpText = 'empty state text';
-const canAddCluster = true;
 
 describe('ClustersEmptyStateComponent', () => {
   let wrapper;
 
-  const propsData = {
-    isChildComponent: false,
-  };
-
-  const provideData = {
+  const defaultProvideData = {
     clustersEmptyStateImage,
-    emptyStateHelpText: null,
     newClusterPath,
   };
 
-  const entryData = {
-    canAddCluster,
-  };
-
   const findButton = () => wrapper.findComponent(GlButton);
   const findEmptyStateText = () => wrapper.findByTestId('clusters-empty-state-text');
 
-  beforeEach(() => {
+  const createWrapper = ({
+    provideData = { emptyStateHelpText: null },
+    isChildComponent = false,
+    canAddCluster = true,
+  } = {}) => {
     wrapper = shallowMountExtended(ClustersEmptyState, {
-      store: ClusterStore(entryData),
-      propsData,
-      provide: provideData,
+      store: ClusterStore({ canAddCluster }),
+      propsData: { isChildComponent },
+      provide: { ...defaultProvideData, ...provideData },
       stubs: { GlEmptyState },
     });
+  };
+
+  beforeEach(() => {
+    createWrapper();
   });
 
   afterEach(() => {
@@ -55,16 +53,7 @@ describe('ClustersEmptyStateComponent', () => {
 
   describe('when the component is loaded as a child component', () => {
     beforeEach(() => {
-      propsData.isChildComponent = true;
-      wrapper = shallowMountExtended(ClustersEmptyState, {
-        store: ClusterStore(entryData),
-        propsData,
-        provide: provideData,
-      });
-    });
-
-    afterEach(() => {
-      propsData.isChildComponent = false;
+      createWrapper({ isChildComponent: true });
     });
 
     it('should not render the action button', () => {
@@ -74,12 +63,7 @@ describe('ClustersEmptyStateComponent', () => {
 
   describe('when the help text is provided', () => {
     beforeEach(() => {
-      provideData.emptyStateHelpText = emptyStateHelpText;
-      wrapper = shallowMountExtended(ClustersEmptyState, {
-        store: ClusterStore(entryData),
-        propsData,
-        provide: provideData,
-      });
+      createWrapper({ provideData: { emptyStateHelpText } });
     });
 
     it('should show the empty state text', () => {
@@ -88,14 +72,8 @@ describe('ClustersEmptyStateComponent', () => {
   });
 
   describe('when the user cannot add clusters', () => {
-    entryData.canAddCluster = false;
     beforeEach(() => {
-      wrapper = shallowMountExtended(ClustersEmptyState, {
-        store: ClusterStore(entryData),
-        propsData,
-        provide: provideData,
-        stubs: { GlEmptyState },
-      });
+      createWrapper({ canAddCluster: false });
     });
     it('should disable the button', () => {
       expect(findButton().props('disabled')).toBe(true);

spec/frontend/clusters_list/components/clusters_main_view_spec.js

@@ -59,10 +59,10 @@ describe('ClustersMainViewComponent', () => {
 
   describe('tabs', () => {
     it.each`
-      tabTitle               | queryParamValue      | lineNumber
-      ${'All'}               | ${'all'}             | ${0}
-      ${'Agent'}             | ${AGENT}             | ${1}
-      ${'Certificate based'} | ${CERTIFICATE_BASED} | ${2}
+      tabTitle         | queryParamValue      | lineNumber
+      ${'All'}         | ${'all'}             | ${0}
+      ${'Agent'}       | ${AGENT}             | ${1}
+      ${'Certificate'} | ${CERTIFICATE_BASED} | ${2}
     `(
       'renders correct tab title and query param value',
       ({ tabTitle, queryParamValue, lineNumber }) => {